/** * Copyright 2020 Google LLC. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { Label } from "./label"; import { initialize } from "@googlemaps/jest-mocks"; class OverlayView {} beforeAll(() => { document.body.innerHTML = ""; initialize(); google.maps.OverlayView = OverlayView as any; Label.prototype.getProjection = (): google.maps.MapCanvasProjection => { return ({ fromPointToLatLng: () => {}, fromLatLngToPoint: () => {}, fromLatLngToDivPixel: (position: google.maps.LatLng) => { return { x: 1, y: 3 }; }, } as unknown) as google.maps.MapCanvasProjection; }; }); test("should render the divs correctly with string content", () => { const label = new Label({ labelContent: "foo", labelClass: "label" }); label.draw(); expect(label["labelDiv"]).toMatchInlineSnapshot(`
foo
`); expect(label["eventDiv"]).toMatchInlineSnapshot(`
foo
`); }); test("should render the divs correctly with node content", () => { const label = new Label({ labelContent: document.createElement("img") }); label.draw(); expect(label["labelDiv"]).toMatchInlineSnapshot(`
`); expect(label["eventDiv"]).toMatchInlineSnapshot(`
`); }); test("should render the divs with options", () => { const label = new Label({ labelContent: "foo", opacity: 0.5, labelClass: "label", position: { lat: 0, lng: 0 }, anchorPoint: { x: 100, y: 200 } as google.maps.Point, labelZIndexOffset: 10, zIndex: 1000, draggable: false, clickable: false, }); label.draw(); expect(label["labelDiv"]).toMatchInlineSnapshot(`
foo
`); expect(label["eventDiv"]).toMatchInlineSnapshot(` `); }); test("should render the event div based upon interactivity", () => { const label = new Label({ labelContent: "foo", draggable: false, clickable: false, }); [ [false, false, "none"], [true, false, "block"], [false, true, "block"], [true, true, "block"], ].map(([clickable, draggable, display]: [boolean, boolean, string]) => { label.clickable = clickable; label.draggable = draggable; label.draw(); expect(label["eventDiv"].style.display).toBe(display); expect(label["eventDiv"].style.cursor).toBe( display === "block" ? "pointer" : "inherit" ); }); });