add TodoList toggle all button testn

Author: apollo1017

src/App/TodoList/index.test.tsx

@@ -17,7 +17,11 @@ const initialStore: Store = {
       bodyText: 'boss black',
       completed: false
     },
-    { id: 'QwejYipEf5nk', bodyText: 'caffe latte', completed: false }
+    {
+      id: 'QwejYipEf5nk',
+      bodyText: 'caffe latte',
+      completed: false
+    }
   ]
 }
 
@@ -52,3 +56,22 @@ test('should reflect store value change to render elements', () => {
   expect(getAllByTestId('todo-item')[0]).toHaveTextContent('boss black')
   expect(getAllByTestId('todo-item')[1]).toHaveTextContent('caffe latte')
 })
+
+test('should click toggle-all-button, then all item being comlete checked true and vice versa', () => {
+  const { getByTestId, getAllByTestId } = render(
+    <Provider store={initialStore}>
+      <TodoList path="/" />
+    </Provider>
+  )
+
+  fireEvent.click(getByTestId('toggle-all-btn'))
+  expect((getAllByTestId('todo-item-complete-check')[0] as HTMLInputElement).checked).toBe(true) /* eslint-disable-line prettier/prettier */
+  expect((getAllByTestId('todo-item-complete-check')[1] as HTMLInputElement).checked).toBe(true) /* eslint-disable-line prettier/prettier */
+  expect((getAllByTestId('todo-item-complete-check')[2] as HTMLInputElement).checked).toBe(true) /* eslint-disable-line prettier/prettier */
+
+
+  fireEvent.click(getByTestId('toggle-all-btn'))
+  expect((getAllByTestId('todo-item-complete-check')[0] as HTMLInputElement).checked).toBe(false) /* eslint-disable-line prettier/prettier */
+  expect((getAllByTestId('todo-item-complete-check')[1] as HTMLInputElement).checked).toBe(false) /* eslint-disable-line prettier/prettier */
+  expect((getAllByTestId('todo-item-complete-check')[2] as HTMLInputElement).checked).toBe(false) /* eslint-disable-line prettier/prettier */
+})

src/App/TodoList/index.tsx

@@ -31,6 +31,7 @@ function TodoList({ path }: Props) {
           type="checkbox"
           onChange={toggleAll}
           data-cy="toggle-all-btn"
+          data-testid="toggle-all-btn"
         />
         <label htmlFor="toggle-all">Mark all as complete</label>
         <ul className="todo-list" data-testid="todo-list">