diff --git a/minimal-app/src/__snapshots__/app.test.js.snap b/minimal-app/src/__snapshots__/app.test.js.snap deleted file mode 100644 index ce50593a1264fefe9e1e6f5b2728f70ba16a88e5..0000000000000000000000000000000000000000 --- a/minimal-app/src/__snapshots__/app.test.js.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`the app has one labeled button that displays the value from the store 1`] = ` -<div> - <label> - Taps - : - <button - class="blue" - > - 9999 - </button> - </label> -</div> -`; diff --git a/minimal-app/src/app.js b/minimal-app/src/app.js index 5767484efdb9d438a77b7439c6aa7e977dac0e0d..ec3c05320de3174785c862870d0a6d55a6b00650 100644 --- a/minimal-app/src/app.js +++ b/minimal-app/src/app.js @@ -8,8 +8,8 @@ export function App() { return ( <> <Route exact path={'/'}> - <InvisibleMaze/> - <Restart reset = {"Reset Maze"}/> + <InvisibleMaze /> + <Restart reset={"Reset Maze"}/> </Route> </> ); diff --git a/minimal-app/src/app.test.js b/minimal-app/src/app.test.js index d4af3bc58e6fe8d45d9aeb1b904c9af113739851..f55dd2d5529e3623d6cfe72c4f65f5da7aa48ec7 100644 --- a/minimal-app/src/app.test.js +++ b/minimal-app/src/app.test.js @@ -8,12 +8,39 @@ import { MemoryRouter as Router } from 'react-router-dom'; import { App } from './app.js'; import { - selectValue, -} from './features/counter/counterSlice.js'; -jest.mock('./features/counter/counterSlice.js', () => ({ - selectValue: jest.fn().mockName('selectValue'), + selectStepOne, + selectStepTwo, + selectStepThree, + selectButtonOne, + selectButtonTwo, + selectButtonThree, +} from './invisibleMazeSlice.js'; + +import { InvisibleMaze } from './invisibleMaze.js'; +import { App } from './invisibleMaze.js'; +jest.mock('./invisibleMazeSlice.js', () => ({ + selectStepOne: jest.fn().mockName('selectStepOne'), + selectStepTwo: jest.fn().mockName('selectStepTwo'), + selectStepThree: jest.fn().mockName('selectStepThree'), + selectButtonOne: jest.fn().mockName('selectButtonOne'), + selectButtonTwo: jest.fn().mockName('selectButtonTwo'), + selectButtonThree: jest.fn().mockName('selectButtonThree'), })); +describe('the app', () => { + test('has a grid of 3x3 buttons', () => { + selectStepOne.mockReturnValue(9998); + selectStepTwo.mockReturnValue(9997); + selectStepThree.mockReturnValue(9999); + selectButtonOne.mockReturnValue(9998); + selectButtonTwo.mockReturnValue(9997); + selectButtonThree.mockReturnValue(9999); + const { container } = render( + </> + ); + expect(container).toMatchSnapshot(); + }); +}); // describe('the app', () => { // test('has one labeled button that displays the value from the store', () => { // selectValue.mockReturnValue(9999); diff --git a/minimal-app/src/features/counter/counter.test.js b/minimal-app/src/features/counter/counter.test.js deleted file mode 100644 index 1710224bb9b86c3f93df8069b3c8e2cbe615f5c9..0000000000000000000000000000000000000000 --- a/minimal-app/src/features/counter/counter.test.js +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable no-magic-numbers */ - -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import '../../testing/mockRedux.js'; - -import { Counter } from './counter.js'; - -import { - selectValue, - setValue, -} from './counterSlice.js'; -jest.mock('./counterSlice.js', () => ({ - selectValue: jest.fn().mockName('selectValue'), - setValue: jest.fn().mockName('setValue'), -})); - -describe('the button', () => { - test('displays the value from the store', () => { - selectValue.mockReturnValue(9999); - render(<Counter label={'Foo'} />); - expect(screen.getByRole('button')).toHaveTextContent(/^9999$/); - }); - test('is red when the value from the store is even', () => { - selectValue.mockReturnValue(9998); - render(<Counter label={'Foo'} />); - expect(screen.getByRole('button')).toHaveClass('red'); - }); - test('is blue when the value from the store is odd', () => { - selectValue.mockReturnValue(9999); - render(<Counter label={'Foo'} />); - expect(screen.getByRole('button')).toHaveClass('blue'); - }); - test('increments the value in the store when clicked', () => { - selectValue.mockReturnValue(9999); - render(<Counter label={'Foo'} />); - userEvent.click(screen.getByRole('button')); - expect(setValue).toHaveBeenCalledTimes(1); - expect(setValue).toHaveBeenCalledWith({ - value: 9999 + 1, - }); - }); -}); diff --git a/minimal-app/src/features/counter/counterSlice.test.js b/minimal-app/src/features/counter/counterSlice.test.js deleted file mode 100644 index 63dbb64f943e32f015750a9d4bbbb20b512fb57e..0000000000000000000000000000000000000000 --- a/minimal-app/src/features/counter/counterSlice.test.js +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint-disable no-magic-numbers */ - -import counterSlice, { - selectValue, - setValue, -} from './counterSlice.js'; - -describe('the initial state', () => { - test('has a value of zero', () => { - const state = counterSlice.reducer(undefined, {}); - expect(state).toEqual({ - value: 0, - }); - }); -}); - -describe('selectValue', () => { - test('reads the stored value', () => { - const state = { - value: 9999, - }; - const result = selectValue({ [counterSlice.name]: state }); - expect(result).toBe(9999); - }); -}); - -describe('setValue', () => { - test('overwrites the stored value', () => { - const state = counterSlice.reducer({ - value: 8888, - }, setValue({ - value: 9999, - })); - expect(state).toEqual({ - value: 9999, - }); - }); -}); diff --git a/minimal-app/src/features/invisibleMaze/__snapshots__/invisibleMaze.test.js.snap b/minimal-app/src/features/invisibleMaze/__snapshots__/invisibleMaze.test.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..8206c7ac0a34f18ae8a0d6538c1c9e277b520970 --- /dev/null +++ b/minimal-app/src/features/invisibleMaze/__snapshots__/invisibleMaze.test.js.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`the maze has a grid of 3x3 buttons 1`] = ` +<div> + <main> + <div + class="maze" + > + <button + class="correct" + /> + <button + class="panel" + /> + <button + class="panel" + /> + </div> + <div + class="maze" + > + <button + class="panel" + /> + <button + class="correct" + /> + <button + class="panel" + /> + </div> + <div + class="maze" + > + <button + class="panel" + /> + <button + class="panel" + /> + <button + class="correct" + /> + </div> + </main> +</div> +`; diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.test.js b/minimal-app/src/features/invisibleMaze/invisibleMaze.test.js new file mode 100644 index 0000000000000000000000000000000000000000..3983b44b7f28ad9901d5e777f1ffe55af93597c3 --- /dev/null +++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.test.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import '../../testing/mockRedux.js'; + +import { + selectStepOne, + selectStepTwo, + selectStepThree, + selectButtonOne, + selectButtonTwo, + selectButtonThree, +} from './invisibleMazeSlice.js'; +import { InvisibleMaze } from './invisibleMaze.js'; +jest.mock('./invisibleMazeSlice.js', () => ({ + selectStepOne: jest.fn().mockName('selectStepOne'), + selectStepTwo: jest.fn().mockName('selectStepTwo'), + selectStepThree: jest.fn().mockName('selectStepThree'), + selectButtonOne: jest.fn().mockName('selectButtonOne'), + selectButtonTwo: jest.fn().mockName('selectButtonTwo'), + selectButtonThree: jest.fn().mockName('selectButtonThree'), +})); + +describe('the maze', () => { + test('has a grid of 3x3 buttons', () => { + selectStepOne.mockReturnValue(9998); + selectStepTwo.mockReturnValue(9997); + selectStepThree.mockReturnValue(9999); + selectButtonOne.mockReturnValue(9998); + selectButtonTwo.mockReturnValue(9997); + selectButtonThree.mockReturnValue(9999); + const { container } = render( + <InvisibleMaze/> + ); + expect(container).toMatchSnapshot(); + }); +}); \ No newline at end of file