✅ Add E2E enableDisableZoomInOut test

update E2E disableMapDragMove test
remove E2E snapshots
update packages/react-kakao-maps-sdk/.gitignore

- #61

dev/src/pages/samples/enableDisableZoomInOut.tsx

@@ -0,0 +1,31 @@
+import { Map } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import { useState } from "react"
+
+export default function EnableDisableZoomInOut() {
+  useKakaoLoader()
+  const [zoomable, setZoomable] = useState<boolean>(true)
+
+  return (
+    <Map // 지도를 표시할 Container
+      id="map"
+      center={{
+        // 지도의 중심좌표
+        lat: 33.450701,
+        lng: 126.570667,
+      }}
+      style={{
+        // 지도의 크기
+        width: "100%",
+        height: "350px",
+      }}
+      level={3} // 지도의 확대 레벨
+      zoomable={zoomable}
+    >
+      <p>
+        <button onClick={() => setZoomable(false)}>지도 확대/축소 끄기</button>{" "}
+        <button onClick={() => setZoomable(true)}>지도 확대/축소 켜기</button>
+      </p>
+    </Map>
+  )
+}

dev/src/pages/samples/sampleList.tsx

@@ -6,6 +6,7 @@ import MapInfo from "./mapInfo"
 import AddMapControl from "./addMapControl"
 import AddMapCustomControl from "./addMapCustomControl"
 import DisableMapDragMove from "./disableMapDragMove"
+import EnableDisableZoomInOut from "./enableDisableZoomInOut"
 
 export const samples: RouteObject[] = [
   {
@@ -36,4 +37,8 @@ export const samples: RouteObject[] = [
     path: "disableMapDragMove",
     element: <DisableMapDragMove />,
   },
+  {
+    path: "enableDisableZoomInOut",
+    element: <EnableDisableZoomInOut />,
+  },
 ]

docs/docs/sample/map/enableDisableZoomInOut.mdx

@@ -7,31 +7,6 @@ sidebar_position: 7
 
 > original docs : https://apis.map.kakao.com/web/sample/enableDisableZoomInOut/
 
-```jsx live
-function(){
-  const Main = () => {
-    const [zoomable, setZoomable] = useState(true)
+import codesource from "!!raw-loader!../../../../dev/src/pages/samples/enableDisableZoomInOut.tsx"
 
-    return (
-      <>
-        <Map // 지도를 표시할 Container
-          center={{
-            // 지도의 중심좌표
-            lat: 37.566826,
-            lng: 126.9786567,
-          }}
-          style={{
-            width: "100%",
-            height: "450px",
-          }}
-          level={3} // 지도의 확대 레벨
-          zoomable={zoomable}
-        />
-        <button onClick={() => setZoomable(false)}>지도 확대/축소 끄기</button>
-        <button onClick={() => setZoomable(true)}>지도 확대/축소 켜기</button>
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+<LiveEditor>{codesource}</LiveEditor>

packages/react-kakao-maps-sdk/.gitignore

@@ -2,3 +2,5 @@ node_modules/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+/__test__/*-snapshots

packages/react-kakao-maps-sdk/__test__/disableMapDragMove.spec.ts

@@ -11,8 +11,7 @@ test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => {
     testInfo.config.updateSnapshots === "all",
   )
   await page.goto(url, { waitUntil: "networkidle" })
-  await expect(page).toHaveScreenshot()
-  const firstRenderScreenshot = await page.screenshot()
+  await expect(page).toHaveScreenshot("firstRender.png")
 
   const drag = async () => {
     const mapBoundingBox = await page.locator("#map").boundingBox()
@@ -28,11 +27,11 @@ test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => {
 
   await page.getByText("지도 드래그 이동 끄기").click()
   await drag()
-  expect(await page.screenshot()).toStrictEqual(firstRenderScreenshot)
+  expect(await page.screenshot()).toMatchSnapshot("firstRender.png")
   await expect(page).toHaveScreenshot()
 
   await page.getByText("지도 드래그 이동 켜기").click()
   await drag()
-  expect(await page.screenshot()).not.toStrictEqual(firstRenderScreenshot)
+  expect(await page.screenshot()).not.toMatchSnapshot("firstRender.png")
   await expect(page).toHaveScreenshot()
 })

packages/react-kakao-maps-sdk/__test__/enableDisableZoomInOut.spec.ts

@@ -0,0 +1,29 @@
+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(
+    "enableDisableZoomInOut",
+    testInfo.config.updateSnapshots === "all",
+  )
+  await page.goto(url, { waitUntil: "networkidle" })
+  await expect(page).toHaveScreenshot("firstRender.png")
+
+  await page.getByText("지도 확대/축소 끄기").click()
+  await page.locator("#map").hover()
+  await page.mouse.wheel(0, 1000)
+  await page.waitForLoadState("networkidle")
+  expect(await page.screenshot()).toMatchSnapshot("firstRender.png")
+  await expect(page).toHaveScreenshot()
+
+  await page.getByText("지도 확대/축소 켜기").click()
+  await page.locator("#map").hover()
+  await page.mouse.wheel(0, 300)
+  await page.waitForLoadState("networkidle")
+  expect(await page.screenshot()).not.toMatchSnapshot("firstRender.png")
+  await expect(page).toHaveScreenshot()
+})

packages/react-kakao-maps-sdk/playwright.config.ts

@@ -52,15 +52,15 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
     },
 
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
 
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
 
     /* Test against mobile viewports. */
     // {