fix(containers): render EmbedGoogleMap locally to avoid boolean className

src/containers/EmbedGoogleMap/__snapshots__/index.test.js.snap

@@ -5,6 +5,6 @@ exports[`<EmbedGoogleMap /> container should render 1`] = `
   allowFullScreen={true}
   className="MuiBox-root MuiBox-root-3"
   frameBorder={0}
-  src="https://www.google.com/maps/embed/v1/place?q=undefined&key=undefined"
+  src="https://www.google.com/maps/embed/v1/place?q=undefined&key=test-api-key"
 />
 `;

src/containers/EmbedGoogleMap/index.js

@@ -1,12 +1,44 @@
 import React from "react"
-import { EmbedGoogleMap as MuyEmbedGoogleMap } from "muy"
-
-const EmbedGoogleMap = ({ coordinates, ...props }) => (
-  <MuyEmbedGoogleMap
-    apiKey={process.env.GATSBY_GOOGLE_MAPS_EMBED_API_KEY}
-    coordinates={coordinates}
-    {...props}
-  />
-)
+import Box from "@material-ui/core/Box"
+import { makeStyles } from "@material-ui/core/styles"
+
+const useStyles = makeStyles({
+  cover: {
+    objectFit: "cover",
+  },
+})
+
+/**
+ * Google Maps embed iframe.
+ *
+ * Local implementation (instead of `muy`'s EmbedGoogleMap) so `className` is
+ * never a boolean. Upstream `muy` Iframe does `variant === "cover" && classes.cover`,
+ * which yields `false` when variant is not cover and triggers a MUI PropTypes warning.
+ *
+ * @see https://github.com/multei/web/issues/440
+ */
+const EmbedGoogleMap = ({ className, coordinates, variant, ...props }) => {
+  const classes = useStyles()
+  const resolvedClassName = [variant === "cover" && classes.cover, className]
+    .filter(Boolean)
+    .join(" ")
+
+  return (
+    <Box
+      allowFullScreen
+      border={0}
+      className={resolvedClassName || undefined}
+      component="iframe"
+      display="inline"
+      frameBorder={0}
+      mb={0}
+      mr={0}
+      mt={0}
+      p={0}
+      src={`https://www.google.com/maps/embed/v1/place?q=${coordinates}&key=${process.env.GATSBY_GOOGLE_MAPS_EMBED_API_KEY}`}
+      {...props}
+    />
+  )
+}
 
 export default EmbedGoogleMap

src/containers/EmbedGoogleMap/index.test.js

@@ -1,10 +1,87 @@
 import React from "react"
 import renderer from "react-test-renderer"
+import { render } from "@testing-library/react"
 import EmbedGoogleMap from "."
 
 describe("<EmbedGoogleMap /> container", () => {
+  const originalEnv = process.env.GATSBY_GOOGLE_MAPS_EMBED_API_KEY
+
+  beforeEach(() => {
+    process.env.GATSBY_GOOGLE_MAPS_EMBED_API_KEY = "test-api-key"
+  })
+
+  afterEach(() => {
+    process.env.GATSBY_GOOGLE_MAPS_EMBED_API_KEY = originalEnv
+  })
+
   it("should render", () => {
     const tree = renderer.create(<EmbedGoogleMap />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it("should embed the map for the given coordinates", () => {
+    const { container } = render(<EmbedGoogleMap coordinates="-23.55,-46.63" />)
+    const iframe = container.querySelector("iframe")
+
+    expect(iframe).toBeTruthy()
+    expect(iframe.getAttribute("src")).toBe(
+      "https://www.google.com/maps/embed/v1/place?q=-23.55,-46.63&key=test-api-key"
+    )
+  })
+
+  it("should not pass a boolean className when variant is omitted", () => {
+    const consoleError = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {})
+
+    render(<EmbedGoogleMap coordinates="-23.55,-46.63" />)
+
+    const propTypeWarnings = consoleError.mock.calls.filter((args) =>
+      args.some(
+        (arg) =>
+          typeof arg === "string" &&
+          arg.includes("Invalid prop `className` of type `boolean`")
+      )
+    )
+
+    expect(propTypeWarnings).toHaveLength(0)
+    consoleError.mockRestore()
+  })
+
+  it("should apply cover styling when variant is cover", () => {
+    const { container } = render(
+      <EmbedGoogleMap coordinates="-23.55,-46.63" variant="cover" />
+    )
+    const iframe = container.querySelector("iframe")
+
+    expect(iframe.className).toMatch(/cover/)
+  })
+
+  it("should forward string className without PropTypes warning", () => {
+    const consoleError = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {})
+
+    const { container } = render(
+      <EmbedGoogleMap
+        className="custom-map"
+        coordinates="-23.55,-46.63"
+        variant="cover"
+      />
+    )
+    const iframe = container.querySelector("iframe")
+
+    expect(iframe.className).toMatch(/cover/)
+    expect(iframe.className).toMatch(/custom-map/)
+
+    const propTypeWarnings = consoleError.mock.calls.filter((args) =>
+      args.some(
+        (arg) =>
+          typeof arg === "string" &&
+          arg.includes("Invalid prop `className` of type `boolean`")
+      )
+    )
+    expect(propTypeWarnings).toHaveLength(0)
+    consoleError.mockRestore()
+  })
 })