diff --git a/simon-says/src/app.js b/simon-says/src/app.js
index 9134e2f2f1cf5e313d7b642116c6f906cba38d5c..5d4c9054f9f4efd10d0280571ecb7f65ab7c60fc 100644
--- a/simon-says/src/app.js
+++ b/simon-says/src/app.js
@@ -1,8 +1,6 @@
import React from 'react';
import { Route } from 'react-router-dom';
-import { Pattern } from './features/patternGen/patternGeneration';
-
export function App() {
return (
<>
diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js
index 5410e737bbaa32bd4e6651af5691ddb73ea6b3ad..68a061a22dcc843361998cd7f4d05cdb7edd9150 100644
--- a/simon-says/src/features/patternGen/patternGeneration.js
+++ b/simon-says/src/features/patternGen/patternGeneration.js
@@ -1,8 +1,6 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
import styles from './patternGeneration.module.css';
import { Title } from './patternTitle.js';
@@ -22,7 +20,6 @@ import {
hideColorFour,
} from './patternSlice';
-
export function Pattern(props) {
const colorOne = useSelector(selectColorOne);
const colorTwo = useSelector(selectColorTwo);
@@ -57,19 +54,21 @@ export function Pattern(props) {
<main className={styles.flexbox}>
<Title title={'Color Learner'} />
<div className={styles.buttonGrid}>
- <button title='red' className={styles.redbutton} onPointerEnter={onRedEnter} onPointerLeave={onRedLeave}>
+ <button title="red" className={styles.redbutton} onPointerEnter={onRedEnter} onPointerLeave={onRedLeave}>
{colorOne}
</button>
- <button title='blue' className={styles.bluebutton} onPointerEnter={onBlueEnter} onPointerLeave={onBlueLeave}>
+ <button title="blue" className={styles.bluebutton} onPointerEnter={onBlueEnter} onPointerLeave={onBlueLeave}>
{colorTwo}
</button>
- <button title='yellow' className={styles.yellowbutton} onPointerEnter={onYellowEnter} onPointerLeave={onYellowLeave}>
+ <button title="yellow" className={styles.yellowbutton} onPointerEnter={onYellowEnter}
+ onPointerLeave={onYellowLeave}>
{colorThree}
</button>
- <button title='green' className={styles.greenbutton} onPointerEnter={onGreenEnter} onPointerLeave={onGreenLeave}>
- {colorFour}
+ <button title="green" className={styles.greenbutton} onPointerEnter={onGreenEnter}
+ onPointerLeave={onGreenLeave}>
+ {colorFour}
</button>
</div>
</main>
);
-}
\ No newline at end of file
+}
diff --git a/simon-says/src/features/patternGen/patternGeneration.test.js b/simon-says/src/features/patternGen/patternGeneration.test.js
index 9847e00a277784f7e012abf02a568615d73e8cdd..2fa6edeee3e7f3bc8dd1ea6c9d1c51810c095512 100644
--- a/simon-says/src/features/patternGen/patternGeneration.test.js
+++ b/simon-says/src/features/patternGen/patternGeneration.test.js
@@ -1,5 +1,3 @@
-/* eslint-disable no-magic-numbers */
-
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
@@ -20,104 +18,103 @@ import {
hideColorTwo,
hideColorThree,
hideColorFour,
-} from './patternSlice.js'
-jest.mock('./patternSlice.js', () =>({
- selectColorOne: jest.fn().mockName('selectColorOne'),
- showColorOne: jest.fn().mockName('showColorOne'),
- hideColorOne: jest.fn().mockName('hideColorOne'),
- selectColorTwo: jest.fn().mockName('selectColorTwo'),
- showColorTwo: jest.fn().mockName('showColorTwo'),
- hideColorTwo: jest.fn().mockName('hideColorTwo'),
- selectColorThree: jest.fn().mockName('selectColorThree'),
- showColorThree: jest.fn().mockName('showColorThree'),
- hideColorThree: jest.fn().mockName('hideColorThree'),
- selectColorFour: jest.fn().mockName('selectColorFour'),
- showColorFour: jest.fn().mockName('showColorFour'),
- hideColorFour: jest.fn().mockName('hideColorFour'),
+} from './patternSlice.js';
+jest.mock('./patternSlice.js', () => ({
+ selectColorOne: jest.fn().mockName('selectColorOne'),
+ showColorOne: jest.fn().mockName('showColorOne'),
+ hideColorOne: jest.fn().mockName('hideColorOne'),
+ selectColorTwo: jest.fn().mockName('selectColorTwo'),
+ showColorTwo: jest.fn().mockName('showColorTwo'),
+ hideColorTwo: jest.fn().mockName('hideColorTwo'),
+ selectColorThree: jest.fn().mockName('selectColorThree'),
+ showColorThree: jest.fn().mockName('showColorThree'),
+ hideColorThree: jest.fn().mockName('hideColorThree'),
+ selectColorFour: jest.fn().mockName('selectColorFour'),
+ showColorFour: jest.fn().mockName('showColorFour'),
+ hideColorFour: jest.fn().mockName('hideColorFour'),
}));
describe('red button', () => {
- test('displays nothing when no pointer is present', () => {
- selectColorOne.mockReturnValue('');
- render(<Pattern></Pattern>);
- expect(screen.getByTitle('red')).toHaveTextContent('');
- });
- test('changes to red when pointer is present', () => {
- selectColorOne.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('red'));
- expect(showColorOne).toHaveBeenCalledTimes(1);
- });
- test('changes back to nothing when pointer leaves', () => {
- selectColorOne.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('red'));
- expect(showColorOne).toHaveBeenCalledTimes(1);
- userEvent.unhover(screen.getByTitle('red'));
- expect(hideColorOne).toHaveBeenCalledTimes(1);
- });
+ test('displays nothing when no pointer is present', () => {
+ selectColorOne.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ expect(screen.getByTitle('red')).toHaveTextContent('');
+ });
+ test('changes to red when pointer is present', () => {
+ selectColorOne.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('red'));
+ expect(showColorOne).toHaveBeenCalledTimes(1);
+ });
+ test('changes back to nothing when pointer leaves', () => {
+ selectColorOne.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('red'));
+ expect(showColorOne).toHaveBeenCalledTimes(1);
+ userEvent.unhover(screen.getByTitle('red'));
+ expect(hideColorOne).toHaveBeenCalledTimes(1);
+ });
});
describe('blue button', () => {
- test('displays nothing when no pointer is present', () => {
- selectColorTwo.mockReturnValue('');
- render(<Pattern></Pattern>);
- expect(screen.getByTitle('blue')).toHaveTextContent('');
- });
- test('changes to blue when pointer is present', () => {
- selectColorTwo.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('blue'));
- expect(showColorTwo).toHaveBeenCalledTimes(1);
- });
- test('changes back to nothing when pointer leaves', () => {
- selectColorTwo.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('blue'));
- expect(showColorTwo).toHaveBeenCalledTimes(1);
- userEvent.unhover(screen.getByTitle('blue'));
- expect(hideColorTwo).toHaveBeenCalledTimes(1);
- });
+ test('displays nothing when no pointer is present', () => {
+ selectColorTwo.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ expect(screen.getByTitle('blue')).toHaveTextContent('');
+ });
+ test('changes to blue when pointer is present', () => {
+ selectColorTwo.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('blue'));
+ expect(showColorTwo).toHaveBeenCalledTimes(1);
+ });
+ test('changes back to nothing when pointer leaves', () => {
+ selectColorTwo.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('blue'));
+ expect(showColorTwo).toHaveBeenCalledTimes(1);
+ userEvent.unhover(screen.getByTitle('blue'));
+ expect(hideColorTwo).toHaveBeenCalledTimes(1);
+ });
});
describe('yellow button', () => {
- test('displays nothing when no pointer is present', () => {
- selectColorThree.mockReturnValue('');
- render(<Pattern></Pattern>);
- expect(screen.getByTitle('yellow')).toHaveTextContent('');
- });
- test('changes to yellow when pointer is present', () => {
- selectColorThree.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('yellow'));
- expect(showColorThree).toHaveBeenCalledTimes(1);
- });
- test('changes back to nothing when pointer leaves', () => {
- selectColorThree.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('yellow'));
- expect(showColorThree).toHaveBeenCalledTimes(1);
- userEvent.unhover(screen.getByTitle('yellow'));
- expect(hideColorThree).toHaveBeenCalledTimes(1);
- });
+ test('displays nothing when no pointer is present', () => {
+ selectColorThree.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ expect(screen.getByTitle('yellow')).toHaveTextContent('');
+ });
+ test('changes to yellow when pointer is present', () => {
+ selectColorThree.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('yellow'));
+ expect(showColorThree).toHaveBeenCalledTimes(1);
+ });
+ test('changes back to nothing when pointer leaves', () => {
+ selectColorThree.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('yellow'));
+ expect(showColorThree).toHaveBeenCalledTimes(1);
+ userEvent.unhover(screen.getByTitle('yellow'));
+ expect(hideColorThree).toHaveBeenCalledTimes(1);
+ });
});
describe('green button', () => {
- test('displays nothing when no pointer is present', () => {
- selectColorFour.mockReturnValue('');
- render(<Pattern></Pattern>);
- expect(screen.getByTitle('green')).toHaveTextContent('');
- });
- test('changes to green when pointer is present', () => {
- selectColorFour.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('green'));
- expect(showColorFour).toHaveBeenCalledTimes(1);
- });
- test('changes back to nothing when pointer leaves', () => {
- selectColorFour.mockReturnValue('');
- render(<Pattern></Pattern>);
- userEvent.hover(screen.getByTitle('green'));
- expect(showColorFour).toHaveBeenCalledTimes(1);
- userEvent.unhover(screen.getByTitle('green'));
- expect(hideColorFour).toHaveBeenCalledTimes(1);
- });
+ test('displays nothing when no pointer is present', () => {
+ selectColorFour.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ expect(screen.getByTitle('green')).toHaveTextContent('');
+ });
+ test('changes to green when pointer is present', () => {
+ selectColorFour.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('green'));
+ expect(showColorFour).toHaveBeenCalledTimes(1);
+ });
+ test('changes back to nothing when pointer leaves', () => {
+ selectColorFour.mockReturnValue('');
+ render(<Pattern></Pattern>);
+ userEvent.hover(screen.getByTitle('green'));
+ expect(showColorFour).toHaveBeenCalledTimes(1);
+ userEvent.unhover(screen.getByTitle('green'));
+ expect(hideColorFour).toHaveBeenCalledTimes(1);
+ });
});
-
diff --git a/simon-says/src/features/patternGen/patternSlice.js b/simon-says/src/features/patternGen/patternSlice.js
index fa13d35d4d8e828d24111a89e5b6bd3fe76d89ad..34b4f0859805cb0adb48ae255fd90f89cd0cff60 100644
--- a/simon-says/src/features/patternGen/patternSlice.js
+++ b/simon-says/src/features/patternGen/patternSlice.js
@@ -49,7 +49,6 @@ export const {
hideColorFour,
} = patternSlice.actions;
-
export function selectColorOne(state) {
return state.pattern.colorOne;
}
diff --git a/simon-says/src/features/patternGen/patternSlice.test.js b/simon-says/src/features/patternGen/patternSlice.test.js
index be01607b3d44e906c5972ffdd6f5a90a3b6a0d32..db39bf4a059922dca3e8f978b9948550e75b0ada 100644
--- a/simon-says/src/features/patternGen/patternSlice.test.js
+++ b/simon-says/src/features/patternGen/patternSlice.test.js
@@ -1,5 +1,3 @@
-/* eslint-disable no-magic-numbers */
-
import patternSlice, {
selectColorOne,
selectColorTwo,
@@ -17,26 +15,26 @@ import patternSlice, {
describe('the initial state', () => {
test('has no text', () => {
- const state = patternSlice.reducer(undefined, {});
- expect(state).toEqual({
- colorOne: '',
- colorTwo: '',
- colorThree: '',
- colorFour: '',
- });
+ const state = patternSlice.reducer(undefined, {});
+ expect(state).toEqual({
+ colorOne: '',
+ colorTwo: '',
+ colorThree: '',
+ colorFour: '',
+ });
});
});
describe('selectColorOne', () => {
test('reads the stored value', () => {
- const state = {
- colorOne: 'red',
- colorTwo:'',
- colorThree: '',
- colorFour: '',
- };
- const result = selectColorOne({ [patternSlice.name] : state });
- expect(result).toBe('red');
+ const state = {
+ colorOne: 'red',
+ colorTwo: '',
+ colorThree: '',
+ colorFour: '',
+ };
+ const result = selectColorOne({ [patternSlice.name]: state });
+ expect(result).toBe('red');
});
});
@@ -63,14 +61,14 @@ describe('hideColorOne', () => {
});
describe('selectColorTwo', () => {
test('reads the stored value', () => {
- const state = {
- colorOne: '',
- colorTwo:'blue',
- colorThree: '',
- colorFour: '',
- };
- const result = selectColorTwo({ [patternSlice.name] : state });
- expect(result).toBe('blue');
+ const state = {
+ colorOne: '',
+ colorTwo: 'blue',
+ colorThree: '',
+ colorFour: '',
+ };
+ const result = selectColorTwo({ [patternSlice.name]: state });
+ expect(result).toBe('blue');
});
});
@@ -96,14 +94,14 @@ describe('hideColorTwo', () => {
});
describe('selectColorThree', () => {
test('reads the stored value', () => {
- const state = {
- colorOne: '',
- colorTwo:'',
- colorThree: 'yellow',
- colorFour: '',
- };
- const result = selectColorThree({ [patternSlice.name] : state });
- expect(result).toBe('yellow');
+ const state = {
+ colorOne: '',
+ colorTwo: '',
+ colorThree: 'yellow',
+ colorFour: '',
+ };
+ const result = selectColorThree({ [patternSlice.name]: state });
+ expect(result).toBe('yellow');
});
});
describe('showColorThree', () => {
@@ -128,14 +126,14 @@ describe('hideColorThree', () => {
});
describe('selectColorFour', () => {
test('reads the stored value', () => {
- const state = {
- colorOne: '',
- colorTwo:'',
- colorThree: '',
- colorFour: 'green',
- };
- const result = selectColorFour({ [patternSlice.name] : state });
- expect(result).toBe('green');
+ const state = {
+ colorOne: '',
+ colorTwo: '',
+ colorThree: '',
+ colorFour: 'green',
+ };
+ const result = selectColorFour({ [patternSlice.name]: state });
+ expect(result).toBe('green');
});
});
describe('showColorFour', () => {
@@ -157,4 +155,4 @@ describe('hideColorFour', () => {
colorFour: '',
});
});
-});
\ No newline at end of file
+});
diff --git a/simon-says/src/features/patternGen/patternTitle.js b/simon-says/src/features/patternGen/patternTitle.js
index 769e674b89b4efebe4727989927b0a7070f60950..2d1ea1b2ca92d512631e9b6e18cf1dbd2c1994e8 100644
--- a/simon-says/src/features/patternGen/patternTitle.js
+++ b/simon-says/src/features/patternGen/patternTitle.js
@@ -2,12 +2,12 @@ import React from 'react';
import PropTypes from 'prop-types';
export function Title(props) {
- return (
- <h1>
- {props.title}:
- </h1>
- )
+ return (
+ <h1>
+ {props.title}:
+ </h1>
+ );
}
Title.propTypes = {
- title: PropTypes.string.isRequired,
- };
\ No newline at end of file
+ title: PropTypes.string.isRequired,
+};