diff --git a/unit-conversion/src/__snapshots__/app.test.js.snap b/unit-conversion/src/__snapshots__/app.test.js.snap index 1b22075b7f74340ffbcc9a31cc8ea2c2cab22dde..3bccb3e6a9335b2644dc8b3fbeb967bf52398775 100644 --- a/unit-conversion/src/__snapshots__/app.test.js.snap +++ b/unit-conversion/src/__snapshots__/app.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`the app has one labeled button that displays the value from the store 1`] = ` +exports[`the app runs 1`] = ` <div> <div> <h1> diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js index c2a952966a9a73eaa58c1f6f87155b28d0bffc40..c3df7b060a458d49b1034d769a94934a8e49505d 100644 --- a/unit-conversion/src/app.js +++ b/unit-conversion/src/app.js @@ -1,3 +1,4 @@ +import { Route } from 'react-router-dom'; import { EndingNumberOutput } from './features/ending-number-output/endingNumberOutput.js'; import { NumberInputField } from './features/number-input-field/numberInputField.js'; import { UnitSelector } from './features/unit-selector/unitSelector.js'; @@ -5,6 +6,8 @@ import { UnitSelector } from './features/unit-selector/unitSelector.js'; export function App() { return ( <> + <Route exact path={'/'}> + </Route> <UnitSelector id="inputUnitSelector"/> <NumberInputField /> <h1>Ouput Section</h1> diff --git a/unit-conversion/src/app.test.js b/unit-conversion/src/app.test.js index 317413ba1d08d9d7d396dfc2a665eaf51a55c2d2..8ed4d58975235ca6341259322ec7e37c4a8f5e1a 100644 --- a/unit-conversion/src/app.test.js +++ b/unit-conversion/src/app.test.js @@ -1,21 +1,11 @@ -/* eslint-disable no-magic-numbers */ - import { render } from '@testing-library/react'; import './testing/mockRedux.js'; 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'), -})); - describe('the app', () => { - test('has one labeled button that displays the value from the store', () => { - selectValue.mockReturnValue(9999); + test('runs', () => { const { container } = render( <Router initialEntries={['/']}> <App /> diff --git a/unit-conversion/src/features/counter/counter.js b/unit-conversion/src/features/counter/counter.js deleted file mode 100644 index a09d3e487b6e5f738d16b32c4babedebd3181db4..0000000000000000000000000000000000000000 --- a/unit-conversion/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/unit-conversion/src/features/counter/counter.module.css b/unit-conversion/src/features/counter/counter.module.css deleted file mode 100644 index d78b8d90518fd3f4f5164a814fd59cc0ca248550..0000000000000000000000000000000000000000 --- a/unit-conversion/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/unit-conversion/src/features/counter/counter.test.js b/unit-conversion/src/features/counter/counter.test.js deleted file mode 100644 index 6ca3f630da129cbb8297738672137a396fc47988..0000000000000000000000000000000000000000 --- a/unit-conversion/src/features/counter/counter.test.js +++ /dev/null @@ -1,43 +0,0 @@ -/* eslint-disable no-magic-numbers */ - -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/unit-conversion/src/features/counter/counterSlice.js b/unit-conversion/src/features/counter/counterSlice.js deleted file mode 100644 index 60b530ea9df1ea8926e7d47066d33e4c9e27c061..0000000000000000000000000000000000000000 --- a/unit-conversion/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/unit-conversion/src/features/counter/counterSlice.test.js b/unit-conversion/src/features/counter/counterSlice.test.js deleted file mode 100644 index 63dbb64f943e32f015750a9d4bbbb20b512fb57e..0000000000000000000000000000000000000000 --- a/unit-conversion/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, - }); - }); -});