✅ Add E2E setBounds

- #61
JaeSeoKim · Jan 17, 2024 · 9c68a3a · 9c68a3a
1 parent 904607b
commit 9c68a3a
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 49 deletions.
diff --git a/dev/src/pages/samples/sampleList.tsx b/dev/src/pages/samples/sampleList.tsx
@@ -12,6 +12,7 @@ import AddRoadviewOverlay from "./addRoadviewOverlay"
 import AddTerrainOverlay from "./addTerrainOverlay"
 import ChangeOverlay1 from "./changeOverlay1"
 import ChangeOverlay2 from "./changeOverlay2"
+import SetBounds from "./setBounds"
 
 export const samples: RouteObject[] = [
   {
@@ -66,4 +67,8 @@ export const samples: RouteObject[] = [
     path: "changeOverlay2",
     element: <ChangeOverlay2 />,
   },
+  {
+    path: "setBounds",
+    element: <SetBounds />,
+  },
 ]
diff --git a/dev/src/pages/samples/setBounds.tsx b/dev/src/pages/samples/setBounds.tsx
@@ -0,0 +1,68 @@
+import { Map, MapMarker, useMap } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import { useMemo, useState } from "react"
+
+export default function SetBounds() {
+  useKakaoLoader()
+  const [points] = useState<
+    {
+      lat: number
+      lng: number
+    }[]
+  >([
+    { lat: 33.452278, lng: 126.567803 },
+    { lat: 33.452671, lng: 126.574792 },
+    { lat: 33.451744, lng: 126.572441 },
+  ])
+
+  return (
+    <>
+      <Map // 지도를 표시할 Container
+        id="map"
+        center={{
+          // 지도의 중심좌표
+          lat: 33.450701,
+          lng: 126.570667,
+        }}
+        style={{
+          // 지도의 크기
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+      >
+        {points.map((point) => (
+          <MapMarker
+            key={`marker__${point.lat}-${point.lng}`}
+            position={point}
+          />
+        ))}
+        <ReSetttingMapBounds points={points} />
+      </Map>
+    </>
+  )
+}
+
+const ReSetttingMapBounds = ({
+  points,
+}: {
+  points: { lat: number; lng: number }[]
+}) => {
+  const map = useMap()
+  const bounds = useMemo(() => {
+    const bounds = new kakao.maps.LatLngBounds()
+
+    points.forEach((point) => {
+      bounds.extend(new kakao.maps.LatLng(point.lat, point.lng))
+    })
+    return bounds
+  }, [points])
+
+  return (
+    <p>
+      <button onClick={() => map.setBounds(bounds)}>
+        지도 범위 재설정 하기
+      </button>
+    </p>
+  )
+}
diff --git a/docs/docs/sample/map/setBounds.mdx b/docs/docs/sample/map/setBounds.mdx
@@ -7,53 +7,6 @@ sidebar_position: 13
 
 > original docs : https://apis.map.kakao.com/web/sample/setBounds/
 
-```jsx live
-function(){
-  const Main = () => {
-    const mapRef = useRef()
-    const [points, setPoints] = useState([
-      {lat: 33.452278, lng:126.567803},
-      {lat: 33.452671, lng:126.574792},
-      {lat: 33.451744, lng:126.572441},
-    ])
+import codesource from "!!raw-loader!~samples/setBounds.tsx"
 
-    const bounds = useMemo(() => {
-      const bounds = new kakao.maps.LatLngBounds();
-
-      points.forEach(point => {
-        bounds.extend(new kakao.maps.LatLng(point.lat, point.lng))
-      });
-      return bounds;
-    }, [points])
-
-    return (
-      <>
-        <Map // 지도를 표시할 Container
-          center={{
-            // 지도의 중심좌표
-            lat: 33.450701,
-            lng: 126.570667,
-          }}
-          style={{
-            width: "100%",
-            height: "450px",
-          }}
-          level={3} // 지도의 확대 레벨
-          ref={mapRef}
-        >
-          {points.map(point => <MapMarker key={`${point.lat}-${point.lng}`} position={point} />)}
-        </Map>
-        <button
-          onClick={() => {
-            const map = mapRef.current
-            if (map) map.setBounds(bounds)
-          }}
-        >
-          지도 범위 재설정 하기
-        </button>
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+<LiveEditor>{codesource}</LiveEditor>
diff --git a/packages/react-kakao-maps-sdk/__test__/setBounds.spec.ts b/packages/react-kakao-maps-sdk/__test__/setBounds.spec.ts
@@ -0,0 +1,17 @@
+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("setBounds", testInfo.config.updateSnapshots === "all")
+  await page.goto(url, { waitUntil: "networkidle" })
+  await page.waitForLoadState("networkidle")
+  await expect(page).toHaveScreenshot()
+
+  await page.getByText("지도 범위 재설정 하기").click()
+  await page.waitForLoadState("networkidle")
+  await expect(page).toHaveScreenshot()
+})