diff --git a/minimal-app/src/features/counter/counter.js b/minimal-app/src/features/counter/counter.js deleted file mode 100644 index a09d3e487b6e5f738d16b32c4babedebd3181db4..0000000000000000000000000000000000000000 --- a/minimal-app/src/features/counter/counter.js +++ /dev/null @@ -1,36 +0,0 @@ -import { useSelector, useDispatch } from 'react-redux'; -import PropTypes from 'prop-types'; - -import classNames from 'classnames'; -import styles from './counter.module.css'; - -import { - selectValue, - setValue, -} from './counterSlice.js'; - -export function Counter(props) { - const value = useSelector(selectValue); - const dispatch = useDispatch(); - - const classes = classNames({ - [styles.red]: value % 2 === 0, - [styles.blue]: value % 2 === 1, - }); - const onClick = () => dispatch(setValue({ - value: value + 1, - })); - - return ( - <label> - {props.label}: - <button className={classes} onClick={onClick}> - {value} - </button> - </label> - ); -} - -Counter.propTypes = { - label: PropTypes.string.isRequired, -}; diff --git a/minimal-app/src/features/counter/counter.module.css b/minimal-app/src/features/counter/counter.module.css deleted file mode 100644 index d78b8d90518fd3f4f5164a814fd59cc0ca248550..0000000000000000000000000000000000000000 --- a/minimal-app/src/features/counter/counter.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.red { - color: rgba(255 0 0 / 100%); -} - -.blue { - color: rgba(0 0 255 / 100%); -} 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 fedc10fb91fae823bf5da3e62469f7e9c22c5a35..0000000000000000000000000000000000000000 --- a/minimal-app/src/features/counter/counter.test.js +++ /dev/null @@ -1,41 +0,0 @@ -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', async() => { - selectValue.mockReturnValue(9999); - render(<Counter label={'Foo'} />); - await userEvent.click(screen.getByRole('button')); - expect(setValue).toHaveBeenCalledTimes(1); - expect(setValue).toHaveBeenCalledWith({ - value: 9999 + 1, - }); - }); -}); diff --git a/minimal-app/src/features/counter/counterSlice.js b/minimal-app/src/features/counter/counterSlice.js deleted file mode 100644 index 60b530ea9df1ea8926e7d47066d33e4c9e27c061..0000000000000000000000000000000000000000 --- a/minimal-app/src/features/counter/counterSlice.js +++ /dev/null @@ -1,25 +0,0 @@ -import { createSlice } from '@reduxjs/toolkit'; - -const counterSlice = createSlice({ - name: 'counter', - initialState: { - value: 0, - }, - reducers: { - setValue: (counter, action) => { - const { - value, - } = action.payload; - counter.value = value; - }, - }, -}); -export default counterSlice; - -export const { - setValue, -} = counterSlice.actions; - -export function selectValue(state) { - return state.counter.value; -} 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 b98407b1e8cf41316473c4ff7dd560eb16d6b55d..0000000000000000000000000000000000000000 --- a/minimal-app/src/features/counter/counterSlice.test.js +++ /dev/null @@ -1,36 +0,0 @@ -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, - }); - }); -});