From cde68c54e046578d6c4087a5b2c96230a9003eeb Mon Sep 17 00:00:00 2001
From: JaeSeoKim <48559454+JaeSeoKim@users.noreply.github.com>
Date: Tue, 23 Jan 2024 21:08:05 +0900
Subject: [PATCH] :white_check_mark: Add E2E addMapBoundsChangedEvent

- #61
---
 .../samples/addMapBoundsChangedEvent.tsx      | 47 +++++++++++++++++++
 .../sample/map/addMapBoundsChangedEvent.mdx   | 40 ++--------------
 .../__test__/addMapBoundsChangedEvent.spec.ts | 34 ++++++++++++++
 3 files changed, 84 insertions(+), 37 deletions(-)
 create mode 100644 dev/src/pages/samples/addMapBoundsChangedEvent.tsx
 create mode 100644 packages/react-kakao-maps-sdk/__test__/addMapBoundsChangedEvent.spec.ts

diff --git a/dev/src/pages/samples/addMapBoundsChangedEvent.tsx b/dev/src/pages/samples/addMapBoundsChangedEvent.tsx
new file mode 100644
index 00000000..e5bba230
--- /dev/null
+++ b/dev/src/pages/samples/addMapBoundsChangedEvent.tsx
@@ -0,0 +1,47 @@
+import { Map } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import { useState } from "react"
+
+export default function AddMapBoundsChangedEvent() {
+  useKakaoLoader()
+  const [bounds, setBounds] = useState<{
+    sw: string
+    ne: string
+  }>()
+
+  return (
+    <>
+      <Map // 지도를 표시할 Container
+        id="map"
+        center={{
+          // 지도의 중심좌표
+          lat: 33.450701,
+          lng: 126.570667,
+        }}
+        style={{
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+        onBoundsChanged={(map) => {
+          const bounds = map.getBounds()
+          setBounds({
+            sw: bounds.getSouthWest().toString(),
+            ne: bounds.getNorthEast().toString(),
+          })
+        }}
+      />
+      <p>
+        <em>지도 영역이 변경되면 지도 정보가 표출됩니다</em>
+      </p>
+      <p id="result">
+        {bounds && (
+          <p>
+            영역좌표는 남서쪽 위도, 경도는 {bounds.sw}이고 <br />
+            북동쪽 위도, 경도는 {bounds.ne}입니다{" "}
+          </p>
+        )}
+      </p>
+    </>
+  )
+}
diff --git a/docs/docs/sample/map/addMapBoundsChangedEvent.mdx b/docs/docs/sample/map/addMapBoundsChangedEvent.mdx
index 1ff5da9c..6172aed6 100644
--- a/docs/docs/sample/map/addMapBoundsChangedEvent.mdx
+++ b/docs/docs/sample/map/addMapBoundsChangedEvent.mdx
@@ -9,40 +9,6 @@ sidebar_position: 20
 
 > original docs : https://apis.map.kakao.com/web/sample/addMapBoundsChangedEvent/
 
-```jsx live
-function(){
-  const Main = () => {
-    const [state, setState] = useState()
-    return (
-      <>
-        <Map // 지도를 표시할 Container
-          center={{
-            // 지도의 중심좌표
-            lat: 33.450701,
-            lng: 126.570667,
-          }}
-          style={{
-            width: "100%",
-            height: "450px",
-          }}
-          level={3} // 지도의 확대 레벨
-          onBoundsChanged={(map) => setState({
-            sw: map.getBounds().getSouthWest().toString(),
-            ne: map.getBounds().getNorthEast().toString(),
-          })}
-        >
-        </Map>
-        {!!state && (
-          <>
-            <p>
-              {'영역좌표는 남서쪽 위도, 경도는  ' + state.sw + ' 이고'}<br/>
-              {'북동쪽 위도, 경도는  ' + state.ne + '입니다'}
-            </p>
-          </>
-        )}
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+import codesource from "!!raw-loader!~samples/addMapBoundsChangedEvent.tsx"
+
+<LiveEditor>{codesource}</LiveEditor>
diff --git a/packages/react-kakao-maps-sdk/__test__/addMapBoundsChangedEvent.spec.ts b/packages/react-kakao-maps-sdk/__test__/addMapBoundsChangedEvent.spec.ts
new file mode 100644
index 00000000..e811353f
--- /dev/null
+++ b/packages/react-kakao-maps-sdk/__test__/addMapBoundsChangedEvent.spec.ts
@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test"
+import { getTestUrl, waitNetworkIdleWithTimeout } from "./util"
+
+test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => {
+  const url = getTestUrl(
+    "addMapBoundsChangedEvent",
+    testInfo.config.updateSnapshots === "all",
+  )
+  await page.goto(url, { waitUntil: "networkidle" })
+  await waitNetworkIdleWithTimeout(page)
+  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 waitNetworkIdleWithTimeout(page)
+
+  await expect(page.locator("#result")).toHaveText(
+    "영역좌표는 남서쪽 위도, 경도는  (33.45065294391403, 126.55706658514791)이고 북동쪽 위도, 경도는  (33.45385631221043, 126.57064566190085)입니다 ",
+  )
+  await page.mouse.move(
+    mapBoundingBox!.x + mapBoundingBox!.width / 3,
+    mapBoundingBox!.y + mapBoundingBox!.height / 3,
+  )
+  await page.mouse.up()
+  await waitNetworkIdleWithTimeout(page)
+  await expect(page.locator("#result")).toHaveText(
+    "영역좌표는 남서쪽 위도, 경도는  (33.45012909463751, 126.55933862932383)이고 북동쪽 위도, 경도는  (33.45333221438989, 126.57291771102653)입니다 ",
+  )
+})