diff --git a/src/containers/EmbedGoogleMap/__snapshots__/index.test.js.snap b/src/containers/EmbedGoogleMap/__snapshots__/index.test.js.snap
index 0dc0491a..b3e42008 100644
--- a/src/containers/EmbedGoogleMap/__snapshots__/index.test.js.snap
+++ b/src/containers/EmbedGoogleMap/__snapshots__/index.test.js.snap
@@ -5,6 +5,6 @@ exports[` 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"
/>
`;
diff --git a/src/containers/EmbedGoogleMap/index.js b/src/containers/EmbedGoogleMap/index.js
index 6ca79b55..50dde2c7 100644
--- a/src/containers/EmbedGoogleMap/index.js
+++ b/src/containers/EmbedGoogleMap/index.js
@@ -1,12 +1,44 @@
import React from "react"
-import { EmbedGoogleMap as MuyEmbedGoogleMap } from "muy"
-
-const EmbedGoogleMap = ({ 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 (
+
+ )
+}
export default EmbedGoogleMap
diff --git a/src/containers/EmbedGoogleMap/index.test.js b/src/containers/EmbedGoogleMap/index.test.js
index 8765a5bd..a9ee675a 100644
--- a/src/containers/EmbedGoogleMap/index.test.js
+++ b/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(" 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().toJSON()
expect(tree).toMatchSnapshot()
})
+
+ it("should embed the map for the given coordinates", () => {
+ const { container } = render()
+ 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()
+
+ 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(
+
+ )
+ 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(
+
+ )
+ 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()
+ })
})