From 5ca3ce0af119e0c035bdbd379c98006d35c95021 Mon Sep 17 00:00:00 2001
From: digression99 <digression99@gmail.com>
Date: Tue, 20 Sep 2022 10:00:15 +0900
Subject: [PATCH] initialize test

---
 components/Counter.spec.tsx                   |  35 +--
 components/FilteredTodoList.spec.tsx          |  77 +------
 .../__snapshots__/Counter.spec.tsx.snap       | 164 --------------
 .../FilteredTodoList.spec.tsx.snap            | 209 ------------------
 4 files changed, 2 insertions(+), 483 deletions(-)
 delete mode 100644 components/__snapshots__/Counter.spec.tsx.snap
 delete mode 100644 components/__snapshots__/FilteredTodoList.spec.tsx.snap

diff --git a/components/Counter.spec.tsx b/components/Counter.spec.tsx
index 53c8f59..a12d60d 100644
--- a/components/Counter.spec.tsx
+++ b/components/Counter.spec.tsx
@@ -1,36 +1,3 @@
 import { render } from '@testing-library/react'
-import { PureCounter } from './Counter'
 
-describe('<Counter />', () => {
-  test('renders the component correctly', () => {
-    const { container: container1 } = render(<PureCounter
-      count={0}
-      error={''}
-      onIncrease={jest.fn()}
-      onDecrease={jest.fn()}
-      onReset={jest.fn()}
-    />)
-
-    expect(container1).toMatchSnapshot()
-
-    const { container: container2 } = render(<PureCounter
-      count={100}
-      error={'Count is max.'}
-      onIncrease={jest.fn()}
-      onDecrease={jest.fn()}
-      onReset={jest.fn()}
-    />)
-    expect(container2).toMatchSnapshot()
-  })
-
-  test('renders the special component correctly', () => {
-    const { container } = render(<PureCounter
-      count={30}
-      error={'Count is min.'}
-      onIncrease={jest.fn()}
-      onDecrease={jest.fn()}
-      onReset={jest.fn()}
-    />)
-    expect(container).toMatchSnapshot()
-  })
-})
\ No newline at end of file
+describe('<Counter />', () => {})
\ No newline at end of file
diff --git a/components/FilteredTodoList.spec.tsx b/components/FilteredTodoList.spec.tsx
index 1b3c612..c1cd0ff 100644
--- a/components/FilteredTodoList.spec.tsx
+++ b/components/FilteredTodoList.spec.tsx
@@ -1,6 +1,4 @@
-import { render, screen } from '@testing-library/react'
 import { FilteredTodoList, PureFilteredTodoList, Todo } from './FilteredTodoList'
-import userEvent from '@testing-library/user-event'
 
 const fakeData: Todo[] = [
   { title: 'Test todo 1', completed: false, id: 'test-id-1' },
@@ -9,77 +7,4 @@ const fakeData: Todo[] = [
   { title: 'Test todo 4', completed: true, id: 'test-id-4' },
 ]
 
-describe('<FilteredTodoList />', () => {
-  test('renders the component correctly', () => {
-    const { container } = render(
-      <PureFilteredTodoList
-        list={fakeData}
-        onToggleTodo={jest.fn()}
-        onRemoveTodo={jest.fn()}
-        onFilterTodo={jest.fn()}
-        onAddTodo={jest.fn()}
-      />
-    )
-    expect(container).toMatchSnapshot()
-  })
-
-  test('Add todo with a text, and it calls the method.', async () => {
-    const user = userEvent.setup()
-    const addTodoFn = jest.fn()
-    render(
-      <PureFilteredTodoList
-        list={fakeData}
-        onToggleTodo={jest.fn()}
-        onRemoveTodo={jest.fn()}
-        onFilterTodo={jest.fn()}
-        onAddTodo={addTodoFn}
-      />
-    )
-    const input = screen.getByRole('textbox', { name: 'title' })
-    await user.type(input, 'Test todo 5')
-    const createButton = screen.getByRole('button', { name: 'Create' })
-    await user.click(createButton)
-    expect(addTodoFn).toBeCalledWith('Test todo 5')
-  })
-
-  test('Add todo with a text, and it shows on the list', async () => {
-    const user = userEvent.setup()
-    render(<FilteredTodoList />)
-
-    const input = screen.getByRole('textbox', { name: 'title' })
-    await user.type(input, 'Test todo 1')
-    const createButton = screen.getByRole('button', { name: 'Create' })
-    await user.click(createButton)
-    expect(screen.getByText('Test todo 1')).toBeInTheDocument()
-  })
-
-  test('Change filter to "Completed" and it changes the list', async () => {
-    const user = userEvent.setup()
-    render(<FilteredTodoList />)
-
-    const input = screen.getByRole('textbox', { name: 'title' })
-    await user.type(input, 'Test todo 1')
-    const createButton = screen.getByRole('button', { name: 'Create' })
-    await user.click(createButton)
-    expect(screen.getByText('Test todo 1')).toBeInTheDocument()
-
-    await user.type(input, 'Test todo 2')
-    await user.click(createButton)
-    expect(screen.getByText('Test todo 2')).toBeInTheDocument()
-
-    const menu = await screen.findByText(/filters/i)
-    await user.click(menu)
-    const completedFilterButton = await screen.findByText(/completed/i)
-    await user.click(completedFilterButton)
-    expect(screen.queryAllByText(/Test todo/i)).toHaveLength(0)
-
-    await user.click(menu)
-    const allFilterButton = await screen.findByText(/all/i)
-    await user.click(allFilterButton)
-
-    // You can debug the screen with this method.
-    screen.debug()
-    expect(screen.getByText('Test todo 1')).toBeInTheDocument()
-    expect(screen.queryAllByText(/Test todo/i)).toHaveLength(2)
-  })
-})
+describe('<FilteredTodoList />', () => {})
diff --git a/components/__snapshots__/Counter.spec.tsx.snap b/components/__snapshots__/Counter.spec.tsx.snap
deleted file mode 100644
index 9f9467b..0000000
--- a/components/__snapshots__/Counter.spec.tsx.snap
+++ /dev/null
@@ -1,164 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Counter /> renders the component correctly 1`] = `
-<div>
-  <div
-    class="css-0"
-  >
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Count : 
-        0
-      </p>
-    </div>
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Controllers
-      </p>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Increase
-      </button>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Decrease
-      </button>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Reset
-      </button>
-    </div>
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Counter /> renders the component correctly 2`] = `
-<div>
-  <div
-    class="css-0"
-  >
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Count : 
-        100
-      </p>
-    </div>
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Controllers
-      </p>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Increase
-      </button>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Decrease
-      </button>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Reset
-      </button>
-    </div>
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Count is max.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Counter /> renders the special component correctly 1`] = `
-<div>
-  <div
-    class="css-0"
-  >
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Count : 
-        30
-      </p>
-    </div>
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Controllers
-      </p>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Increase
-      </button>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Decrease
-      </button>
-      <button
-        class="chakra-button css-0"
-        type="button"
-      >
-        Reset
-      </button>
-    </div>
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Count is min.
-      </p>
-    </div>
-  </div>
-</div>
-`;
diff --git a/components/__snapshots__/FilteredTodoList.spec.tsx.snap b/components/__snapshots__/FilteredTodoList.spec.tsx.snap
deleted file mode 100644
index 0132f77..0000000
--- a/components/__snapshots__/FilteredTodoList.spec.tsx.snap
+++ /dev/null
@@ -1,209 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<FilteredTodoList /> renders the component correctly 1`] = `
-<div>
-  <div
-    class="css-0"
-  >
-    <div
-      class="css-0"
-    >
-      <p
-        class="chakra-text css-0"
-      >
-        Todo Form
-      </p>
-      <input
-        aria-label="title"
-        class="chakra-input css-0"
-        value=""
-      />
-      <button
-        class="chakra-button css-0"
-        disabled=""
-        type="button"
-      >
-        Create
-      </button>
-    </div>
-    <button
-      aria-controls="menu-list-:r1:"
-      aria-expanded="false"
-      aria-haspopup="menu"
-      class="chakra-button chakra-menu__menu-button css-0"
-      id="menu-button-:r1:"
-      type="button"
-    >
-      <span
-        class="css-0"
-      >
-        Filters
-      </span>
-      <span
-        class="chakra-button__icon css-0"
-      >
-        <svg
-          aria-hidden="true"
-          class="chakra-icon css-0"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </button>
-    <div
-      class="css-0"
-      style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
-    >
-      <div
-        aria-orientation="vertical"
-        class="chakra-menu__menu-list css-0"
-        id="menu-list-:r1:"
-        role="menu"
-        style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
-        tabindex="-1"
-      >
-        <button
-          class="chakra-menu__menuitem css-0"
-          data-index="0"
-          id="menu-list-:r1:-menuitem-:r2:"
-          role="menuitem"
-          tabindex="-1"
-          type="button"
-        >
-          All
-        </button>
-        <button
-          class="chakra-menu__menuitem css-0"
-          data-index="1"
-          id="menu-list-:r1:-menuitem-:r3:"
-          role="menuitem"
-          tabindex="-1"
-          type="button"
-        >
-          Completed
-        </button>
-        <button
-          class="chakra-menu__menuitem css-0"
-          data-index="2"
-          id="menu-list-:r1:-menuitem-:r4:"
-          role="menuitem"
-          tabindex="-1"
-          type="button"
-        >
-          Waiting
-        </button>
-      </div>
-    </div>
-    <ul
-      class="css-0"
-      role="list"
-    >
-      <li
-        class="css-0"
-      >
-        <p
-          class="chakra-text css-0"
-        >
-          Test todo 1
-        </p>
-        <div
-          class="css-0"
-        >
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Remove
-          </button>
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Toggle
-          </button>
-        </div>
-      </li>
-      <li
-        class="css-0"
-      >
-        <p
-          class="chakra-text css-0"
-        >
-          Test todo 2
-        </p>
-        <div
-          class="css-0"
-        >
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Remove
-          </button>
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Toggle
-          </button>
-        </div>
-      </li>
-      <li
-        class="css-0"
-      >
-        <p
-          class="chakra-text css-0"
-        >
-          Test todo 3
-        </p>
-        <div
-          class="css-0"
-        >
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Remove
-          </button>
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Toggle
-          </button>
-        </div>
-      </li>
-      <li
-        class="css-0"
-      >
-        <p
-          class="chakra-text css-0"
-        >
-          Test todo 4
-        </p>
-        <div
-          class="css-0"
-        >
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Remove
-          </button>
-          <button
-            class="chakra-button css-0"
-            type="button"
-          >
-            Toggle
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</div>
-`;