From 6d6a957f93a5691c4bf2a4226283116c84b11680 Mon Sep 17 00:00:00 2001
From: "shingo.sasaki" <shingo.sasaki.0529@gmail.com>
Date: Fri, 27 Sep 2024 17:21:26 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20Calendar=20=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=20E2E=20=E3=83=86?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=82=92=E5=8D=98=E4=BD=93=E3=83=86=E3=82=B9?=
 =?UTF-8?q?=E3=83=88=E3=81=A7=E6=9B=B8=E3=81=8D=E7=9B=B4=E3=81=99=20(#4954?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../e2e/components/Calendar.test.ts           | 40 ----------------
 .../src/components/Calendar/Calendar.test.tsx | 48 +++++++++++++++++++
 2 files changed, 48 insertions(+), 40 deletions(-)
 delete mode 100644 packages/smarthr-ui/e2e/components/Calendar.test.ts
 create mode 100644 packages/smarthr-ui/src/components/Calendar/Calendar.test.tsx

diff --git a/packages/smarthr-ui/e2e/components/Calendar.test.ts b/packages/smarthr-ui/e2e/components/Calendar.test.ts
deleted file mode 100644
index 662a6399f7..0000000000
--- a/packages/smarthr-ui/e2e/components/Calendar.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Selector } from 'testcafe'
-
-fixture('Calendar')
-  .page(
-    'http://localhost:6006/iframe.html?args=&id=data-display（データ表示）-calendar--all&viewMode=story',
-  )
-  .beforeEach(async (t) => {
-    await t.maximizeWindow()
-  })
-
-test('日付が選択できること', async (t) => {
-  const dateButton = Selector('[data-test=calendar-1] .smarthr-ui-CalendarTable-dataCell')
-    .withText('10')
-    .find('button')
-  await t.click(dateButton).expect(dateButton.getAttribute('aria-pressed')).ok()
-})
-
-test('年を変更できること', async (t) => {
-  await t
-    .click(Selector('[data-test=calendar-1] .smarthr-ui-Calendar-selectingYear'))
-    .click(Selector('[data-test=calendar-1] .smarthr-ui-YearPicker-selectYear').withText('2019'))
-    .expect(Selector('[data-test=calendar-1] .smarthr-ui-Calendar-yearMonth').innerText)
-    .eql('2019年1月')
-})
-
-test('月を変更できること', async (t) => {
-  const prevButton = Selector('[data-test=calendar-1] .smarthr-ui-Calendar-monthButtonPrev')
-  const nextButton = Selector('[data-test=calendar-1] .smarthr-ui-Calendar-monthButtonNext')
-  const monthYear = Selector('[data-test=calendar-1] .smarthr-ui-Calendar-yearMonth').innerText
-  await t
-    .click(prevButton)
-    .click(prevButton)
-    .expect(monthYear)
-    .eql('2019年11月')
-    .click(nextButton)
-    .click(nextButton)
-    .click(nextButton)
-    .expect(monthYear)
-    .eql('2020年2月')
-})
diff --git a/packages/smarthr-ui/src/components/Calendar/Calendar.test.tsx b/packages/smarthr-ui/src/components/Calendar/Calendar.test.tsx
new file mode 100644
index 0000000000..47e20d016a
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Calendar/Calendar.test.tsx
@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import React, { act } from 'react'
+
+import { Calendar } from './Calendar'
+
+describe('Calendar', () => {
+  it('value で指定した日付が選択されていること', () => {
+    render(<Calendar value={new Date(2020, 0, 15)} onSelectDate={vi.fn()} />)
+
+    expect(screen.queryByText('2020年1月')).toBeTruthy()
+    expect(screen.getByRole('button', { name: '15' }).getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('前の月に切り替えることができる', () => {
+    render(<Calendar value={new Date(2020, 1, 15)} onSelectDate={vi.fn()} />)
+
+    act(() => screen.getByRole('button', { name: '前の月へ' }).click())
+    expect(screen.queryByText('2020年1月')).toBeTruthy()
+
+    act(() => screen.getByRole('button', { name: '前の月へ' }).click())
+    expect(screen.queryByText('2019年12月')).toBeTruthy()
+  })
+
+  it('次の月に切り替えることができる', () => {
+    render(<Calendar value={new Date(2020, 10, 15)} onSelectDate={vi.fn()} />)
+
+    act(() => screen.getByRole('button', { name: '次の月へ' }).click())
+    expect(screen.queryByText('2020年12月')).toBeTruthy()
+
+    act(() => screen.getByRole('button', { name: '次の月へ' }).click())
+    expect(screen.queryByText('2021年1月')).toBeTruthy()
+  })
+
+  it('年を切り替えることができる', () => {
+    render(<Calendar value={new Date(2020, 10, 15)} onSelectDate={vi.fn()} />)
+
+    act(() => screen.getByRole('button', { name: '年を選択する' }).click())
+    act(() => screen.getByRole('button', { name: '2024' }).click())
+    expect(screen.queryByText('2024年11月')).toBeTruthy()
+  })
+
+  it('日にちを選択すると、onSelectDate が発火すること', () => {
+    const onSelectDate = vi.fn()
+    render(<Calendar value={new Date(2021, 8, 20)} onSelectDate={onSelectDate} />)
+    act(() => screen.getByRole('button', { name: '10' }).click())
+    expect(onSelectDate).toHaveBeenCalledWith(expect.anything(), new Date(2021, 8, 10))
+  })
+})