diff --git a/dev/src/pages/samples/disableMapDragMove.tsx b/dev/src/pages/samples/disableMapDragMove.tsx new file mode 100644 index 00000000..4ca72a9e --- /dev/null +++ b/dev/src/pages/samples/disableMapDragMove.tsx @@ -0,0 +1,35 @@ +import { Map } from "react-kakao-maps-sdk" +import useKakaoLoader from "./useKakaoLoader" +import { useState } from "react" + +export default function DisableMapDragMove() { + useKakaoLoader() + const [draggable, setDraggable] = useState(true) + + return ( + +

+ {" "} + +

+ + ) +} diff --git a/dev/src/pages/samples/sampleList.tsx b/dev/src/pages/samples/sampleList.tsx index e6292f12..a1afa3f4 100644 --- a/dev/src/pages/samples/sampleList.tsx +++ b/dev/src/pages/samples/sampleList.tsx @@ -5,6 +5,7 @@ import ChangeLevel from "./changeLevel" import MapInfo from "./mapInfo" import AddMapControl from "./addMapControl" import AddMapCustomControl from "./addMapCustomControl" +import DisableMapDragMove from "./disableMapDragMove" export const samples: RouteObject[] = [ { @@ -31,4 +32,8 @@ export const samples: RouteObject[] = [ path: "addMapCustomControl", element: , }, + { + path: "disableMapDragMove", + element: , + }, ] diff --git a/docs/docs/sample/map/disableMapDragMove.mdx b/docs/docs/sample/map/disableMapDragMove.mdx index 7ec40776..db0cb475 100644 --- a/docs/docs/sample/map/disableMapDragMove.mdx +++ b/docs/docs/sample/map/disableMapDragMove.mdx @@ -7,31 +7,6 @@ sidebar_position: 6 > original docs : https://apis.map.kakao.com/web/sample/disableMapDragMove/ -```jsx live -function(){ - const Main = () => { - const [draggable, setDraggable] = useState(true) +import codesource from "!!raw-loader!../../../../dev/src/pages/samples/disableMapDragMove.tsx" - return ( - <> - - - - - ) - } - return (
) -} -``` +{codesource} diff --git a/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts index a903e331..acd75548 100644 --- a/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts +++ b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts @@ -9,4 +9,16 @@ test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => { const url = getUrl("basicMap", testInfo.config.updateSnapshots === "all") await page.goto(url, { waitUntil: "networkidle" }) await expect(page).toHaveScreenshot() + + const mapBoundingBox = await page.locator("#map").boundingBox() + + await page.mouse.move(mapBoundingBox!.x, mapBoundingBox!.y) + await page.mouse.down() + await page.mouse.move( + mapBoundingBox!.x + mapBoundingBox!.width / 2, + mapBoundingBox!.y + mapBoundingBox!.height / 2, + ) + await page.mouse.up() + await page.waitForLoadState("networkidle") + await expect(page).toHaveScreenshot() }) diff --git "a/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-chromium-linux.png" "b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-chromium-linux.png" new file mode 100644 index 00000000..477c7eb5 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-chromium-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-firefox-linux.png" "b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-firefox-linux.png" new file mode 100644 index 00000000..b24837a3 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-firefox-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-webkit-linux.png" "b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-webkit-linux.png" new file mode 100644 index 00000000..f2271457 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/basicMap.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-webkit-linux.png" differ diff --git a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts new file mode 100644 index 00000000..cd512073 --- /dev/null +++ b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts @@ -0,0 +1,38 @@ +import { test, expect } from "@playwright/test" + +const getUrl = (id: string, isUpdateSanpShots: boolean = false) => + isUpdateSanpShots + ? `http://127.0.0.1:5252/samples/${id}.html` + : `/samples/${id}` + +test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => { + const url = getUrl( + "disableMapDragMove", + testInfo.config.updateSnapshots === "all", + ) + await page.goto(url, { waitUntil: "networkidle" }) + await expect(page).toHaveScreenshot() + const firstRenderScreenshot = await page.screenshot() + + const drag = async () => { + const mapBoundingBox = await page.locator("#map").boundingBox() + await page.mouse.move(mapBoundingBox!.x, mapBoundingBox!.y) + await page.mouse.down() + await page.mouse.move( + mapBoundingBox!.x + mapBoundingBox!.width / 2, + mapBoundingBox!.y + mapBoundingBox!.height / 2, + ) + await page.mouse.up() + await page.waitForLoadState("networkidle") + } + + await page.getByText("지도 드래그 이동 끄기").click() + await drag() + expect(await page.screenshot()).toStrictEqual(firstRenderScreenshot) + await expect(page).toHaveScreenshot() + + await page.getByText("지도 드래그 이동 켜기").click() + await drag() + expect(await page.screenshot()).not.toStrictEqual(firstRenderScreenshot) + await expect(page).toHaveScreenshot() +}) diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-chromium-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-chromium-linux.png" new file mode 100644 index 00000000..0a14a5eb Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-chromium-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-firefox-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-firefox-linux.png" new file mode 100644 index 00000000..413836ee Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-firefox-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-webkit-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-webkit-linux.png" new file mode 100644 index 00000000..ceba5918 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-1-webkit-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-chromium-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-chromium-linux.png" new file mode 100644 index 00000000..0a14a5eb Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-chromium-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-firefox-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-firefox-linux.png" new file mode 100644 index 00000000..413836ee Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-firefox-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-webkit-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-webkit-linux.png" new file mode 100644 index 00000000..ceba5918 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-2-webkit-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-chromium-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-chromium-linux.png" new file mode 100644 index 00000000..998b4e96 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-chromium-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-firefox-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-firefox-linux.png" new file mode 100644 index 00000000..25813ca9 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-firefox-linux.png" differ diff --git "a/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-webkit-linux.png" "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-webkit-linux.png" new file mode 100644 index 00000000..8eaad8d9 Binary files /dev/null and "b/packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts-snapshots/ScreenShot-\353\240\214\353\215\224\353\247\201-\352\262\260\352\263\274-\353\271\204\352\265\220-3-webkit-linux.png" differ diff --git a/packages/react-kakao-maps-sdk/playwright.config.ts b/packages/react-kakao-maps-sdk/playwright.config.ts index 80d27428..0af17d72 100644 --- a/packages/react-kakao-maps-sdk/playwright.config.ts +++ b/packages/react-kakao-maps-sdk/playwright.config.ts @@ -42,6 +42,7 @@ export default defineConfig({ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: "on-first-retry", + viewport: { width: 1280, height: 720 }, }, /* Configure projects for major browsers */