From 78a65323adbf7bed0a0f73d1b389632f0f1bdd34 Mon Sep 17 00:00:00 2001
From: jackmnolley <jackmnolley@gmail.com>
Date: Wed, 1 Sep 2021 22:04:00 -0500
Subject: [PATCH] checkpoint 1
---
.../src/__snapshots__/app.test.js.snap | 14 +-----
unit-conversion/src/app.js | 4 +-
unit-conversion/src/app.test.js | 12 +-----
.../src/features/counter/counter.js | 36 ----------------
.../src/features/counter/counter.module.css | 7 ---
.../src/features/counter/counter.test.js | 43 -------------------
.../src/features/counter/counterSlice.js | 25 -----------
.../src/features/counter/counterSlice.test.js | 38 ----------------
8 files changed, 3 insertions(+), 176 deletions(-)
delete mode 100644 unit-conversion/src/features/counter/counter.js
delete mode 100644 unit-conversion/src/features/counter/counter.module.css
delete mode 100644 unit-conversion/src/features/counter/counter.test.js
delete mode 100644 unit-conversion/src/features/counter/counterSlice.js
delete mode 100644 unit-conversion/src/features/counter/counterSlice.test.js
diff --git a/unit-conversion/src/__snapshots__/app.test.js.snap b/unit-conversion/src/__snapshots__/app.test.js.snap
index ce50593..083ebbe 100644
--- a/unit-conversion/src/__snapshots__/app.test.js.snap
+++ b/unit-conversion/src/__snapshots__/app.test.js.snap
@@ -1,15 +1,3 @@
// 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>
-`;
+exports[`the app runs 1`] = `<div />`;
diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js
index 848a3df..bd6e971 100644
--- a/unit-conversion/src/app.js
+++ b/unit-conversion/src/app.js
@@ -1,12 +1,10 @@
import { Route } from 'react-router-dom';
-import { Counter } from './features/counter/counter.js';
-
export function App() {
return (
<>
<Route exact path={'/'}>
- <Counter label={'Taps'} />
+
</Route>
</>
);
diff --git a/unit-conversion/src/app.test.js b/unit-conversion/src/app.test.js
index 317413b..8ed4d58 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 a09d3e4..0000000
--- 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 d78b8d9..0000000
--- 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 6ca3f63..0000000
--- 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 60b530e..0000000
--- 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 63dbb64..0000000
--- 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,
- });
- });
-});
--
GitLab