Skip to content
Snippets Groups Projects
Commit bba8900d authored by jherman5's avatar jherman5
Browse files

completed testing and refactoring, ready for Checkpoint ten check-off.

parent 6535fae0
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 379 additions and 58 deletions
simon-says/debug.log
+ 44
− 0
View file @ bba8900d
...@@ -233,3 +233,47 @@ ...@@ -233,3 +233,47 @@
[0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report [0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report [0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report [0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.239:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.240:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/184126.241:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.337:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.337:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.337:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.337:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.337:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.337:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.337:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0903/202655.338:ERROR:crash_report_database_win.cc(469)] failed to stat report
simon-says/src/app.js
+ 0
− 1
View file @ bba8900d
...@@ -7,7 +7,6 @@ export function App() { ...@@ -7,7 +7,6 @@ export function App() {
return ( return (
<> <>
<Route exact path={'/'}> <Route exact path={'/'}>
<Pattern label={'Taps'} />
</Route> </Route>
</> </>
); );
......
simon-says/src/features/patternGen/patternGeneration.js
+ 32
− 25
View file @ bba8900d
...@@ -3,7 +3,9 @@ import { useSelector, useDispatch } from 'react-redux'; ...@@ -3,7 +3,9 @@ import { useSelector, useDispatch } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './buttonLayout.css'; import styles from './patternGeneration.module.css';
import { Title } from './patternTitle.js';
import { import {
selectColorOne, selectColorOne,
...@@ -15,51 +17,56 @@ import { ...@@ -15,51 +17,56 @@ import {
showColorThree, showColorThree,
showColorFour, showColorFour,
hideColorOne, hideColorOne,
hideColorTwo,
hideColorThree,
hideColorFour,
} from './patternSlice'; } from './patternSlice';
export function Pattern() { export function Pattern(props) {
const colorOne = useSelector(selectColorOne); const colorOne = useSelector(selectColorOne);
const colorTwo = useSelector(selectColorTwo); const colorTwo = useSelector(selectColorTwo);
const colorThree = useSelector(selectColorThree); const colorThree = useSelector(selectColorThree);
const colorFour = useSelector(selectColorFour); const colorFour = useSelector(selectColorFour);
const dispatch = useDispatch(); const dispatch = useDispatch();
const onRedEnter = () => {
const onRedClick = () => {
dispatch(showColorOne()); dispatch(showColorOne());
} };
const onRedLeave = () => { const onRedLeave = () => {
dispatch(hideColorOne()); dispatch(hideColorOne());
} };
const onBlueEnter = () => {
const onBlueClick = () => {
dispatch(showColorTwo()); dispatch(showColorTwo());
} };
const onBlueLeave = () => {
const onYellowClick = () => { dispatch(hideColorTwo());
};
const onYellowEnter = () => {
dispatch(showColorThree()); dispatch(showColorThree());
} };
const onYellowLeave = () => {
const onGreenClick = () => { dispatch(hideColorThree());
};
const onGreenEnter = () => {
dispatch(showColorFour()); dispatch(showColorFour());
} };
const onGreenLeave = () => {
dispatch(hideColorFour());
};
return ( return (
<main> <main className={styles.flexbox}>
<div> <Title title={'Color Learner'} />
<blockquote className={'title'}> <div className={styles.buttonGrid}>
Color Learner <button title='red' className={styles.redbutton} onPointerEnter={onRedEnter} onPointerLeave={onRedLeave}>
</blockquote>
<button title='red' class={'redbutton'} onPointerEnter={onRedClick} onPointerLeave={onRedLeave}>
{colorOne} {colorOne}
</button> </button>
<button title='blue' class={'bluebutton'} onClick={onBlueClick}> <button title='blue' className={styles.bluebutton} onPointerEnter={onBlueEnter} onPointerLeave={onBlueLeave}>
{colorTwo} {colorTwo}
</button> </button>
<button title='yellow' class={'yellowbutton'} onClick={onYellowClick}> <button title='yellow' className={styles.yellowbutton} onPointerEnter={onYellowEnter} onPointerLeave={onYellowLeave}>
{colorThree} {colorThree}
</button> </button>
<button title='green' class={'greenbutton'} onClick={onGreenClick}> <button title='green' className={styles.greenbutton} onPointerEnter={onGreenEnter} onPointerLeave={onGreenLeave}>
{colorFour} {colorFour}
</button> </button>
</div> </div>
......
simon-says/src/features/patternGen/buttonLayout.css → simon-says/src/features/patternGen/patternGeneration.module.css
+ 12
− 8
View file @ bba8900d
.title{ .title{
flex: 0 1 auto;
font-size: 1.5em; font-size: 1.5em;
width: 50%; width: 50%;
left: 10em; left: 10em;
right: 10em; right: 10em;
} }
.buttonGrid {
flex: 0 1 auto;
}
.redbutton{ .redbutton{
vertical-align: top;
background-color: #f44336; background-color: #f44336;
border: none; border: none;
width: 50%; width: 50%;
height: 15em; height: 15em;
padding: 0;
margin: 0;
} }
.bluebutton{ .bluebutton{
vertical-align: top;
background-color: #008CBA; background-color: #008CBA;
border: none; border: none;
width: 50%; width: 50%;
height: 15em; height: 15em;
padding: 0;
margin: 0;
} }
.yellowbutton{ .yellowbutton{
vertical-align: top;
background-color: #ffff00; background-color: #ffff00;
border: none; border: none;
width: 50%; width: 50%;
height: 15em; height: 15em;
padding: 0;
margin: 0;
} }
.greenbutton{ .greenbutton{
vertical-align: top;
background-color: #4CAF50; background-color: #4CAF50;
border: none; border: none;
width: 50%; width: 50%;
height: 15em; height: 15em;
padding: 0; }
margin: 0; .flexbox{
display: flex;
flex-flow: column nowrap;
} }
simon-says/src/features/patternGen/patternGeneration.test.js
+ 101
− 19
View file @ bba8900d
...@@ -8,34 +8,116 @@ import '../../testing/mockRedux.js'; ...@@ -8,34 +8,116 @@ import '../../testing/mockRedux.js';
import { Pattern } from './patternGeneration.js'; import { Pattern } from './patternGeneration.js';
import { import {
selectBorderState, selectColorOne,
selectPatternList, selectColorTwo,
selectScore, selectColorThree,
selectColorFour,
showColorOne,
showColorTwo,
showColorThree,
showColorFour,
hideColorOne,
hideColorTwo,
hideColorThree,
hideColorFour,
} from './patternSlice.js' } from './patternSlice.js'
jest.mock('./patternSlice.js', () =>({ jest.mock('./patternSlice.js', () =>({
selectBorderState: jest.fn().mockName('selectBorderState'), selectColorOne: jest.fn().mockName('selectColorOne'),
selectPatternList: jest.fn().mockName('selectPatternList'), showColorOne: jest.fn().mockName('showColorOne'),
selectScore: jest.fn().mockName('selectScore'), 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', () => { describe('red button', () => {
test('has a white border if borderState is true', () => { test('displays nothing when no pointer is present', () => {
selectBorderState.mockReturnValue(true); selectColorOne.mockReturnValue('');
render(<Pattern button={'Foo'}/>); render(<Pattern></Pattern>);
expect(screen.getByTitle('red')).toHaveClass('redlit'); 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('the score counter', () => { describe('blue button', () => {
test('displays the correct score', () => { test('displays nothing when no pointer is present', () => {
selectScore.mockReturnValue(100); selectColorTwo.mockReturnValue('');
render(<Pattern></Pattern>); render(<Pattern></Pattern>);
expect(screen.getByTitle('score')).toHaveTextContent('Score: 100'); 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);
}); });
describe('the pattern list', () => { test('changes back to nothing when pointer leaves', () => {
test('works', () => { selectColorTwo.mockReturnValue('');
const list = selectPatternList.mockReturnValue([0, 1, 3]);
render(<Pattern></Pattern>); render(<Pattern></Pattern>);
expect( list === [0,1,3]); 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);
});
});
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);
});
});
simon-says/src/features/patternGen/patternSlice.js
+ 17
− 5
View file @ bba8900d
...@@ -25,6 +25,15 @@ const patternSlice = createSlice({ ...@@ -25,6 +25,15 @@ const patternSlice = createSlice({
hideColorOne: (pattern, action) => { hideColorOne: (pattern, action) => {
pattern.colorOne = ''; pattern.colorOne = '';
}, },
hideColorTwo: (pattern, action) => {
pattern.colorTwo = '';
},
hideColorThree: (pattern, action) => {
pattern.colorThree = '';
},
hideColorFour: (pattern, action) => {
pattern.colorFour = '';
},
}, },
}); });
export default patternSlice; export default patternSlice;
...@@ -35,6 +44,9 @@ export const { ...@@ -35,6 +44,9 @@ export const {
showColorThree, showColorThree,
showColorFour, showColorFour,
hideColorOne, hideColorOne,
hideColorTwo,
hideColorThree,
hideColorFour,
} = patternSlice.actions; } = patternSlice.actions;
......
simon-says/src/features/patternGen/patternSlice.test.js 0 → 100644
+ 160
− 0
View file @ bba8900d
/* eslint-disable no-magic-numbers */
import patternSlice, {
selectColorOne,
selectColorTwo,
selectColorThree,
selectColorFour,
showColorOne,
showColorTwo,
showColorThree,
showColorFour,
hideColorOne,
hideColorTwo,
hideColorThree,
hideColorFour,
} from './patternslice.js';
describe('the initial state', () => {
test('has no text', () => {
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');
});
});
describe('showColorOne', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorOne: '',
}, showColorOne());
expect(state).toEqual({
colorOne: 'red',
});
});
});
describe('hideColorOne', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorOne: 'red',
}, hideColorOne());
expect(state).toEqual({
colorOne: '',
});
});
});
describe('selectColorTwo', () => {
test('reads the stored value', () => {
const state = {
colorOne: '',
colorTwo:'blue',
colorThree: '',
colorFour: '',
};
const result = selectColorTwo({ [patternSlice.name] : state });
expect(result).toBe('blue');
});
});
describe('showColorTwo', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorTwo: '',
}, showColorTwo());
expect(state).toEqual({
colorTwo: 'blue',
});
});
});
describe('hideColorTwo', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorTwo: 'blue',
}, hideColorTwo());
expect(state).toEqual({
colorTwo: '',
});
});
});
describe('selectColorThree', () => {
test('reads the stored value', () => {
const state = {
colorOne: '',
colorTwo:'',
colorThree: 'yellow',
colorFour: '',
};
const result = selectColorThree({ [patternSlice.name] : state });
expect(result).toBe('yellow');
});
});
describe('showColorThree', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorThree: '',
}, showColorThree());
expect(state).toEqual({
colorThree: 'yellow',
});
});
});
describe('hideColorThree', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorThree: 'yellow',
}, hideColorThree());
expect(state).toEqual({
colorThree: '',
});
});
});
describe('selectColorFour', () => {
test('reads the stored value', () => {
const state = {
colorOne: '',
colorTwo:'',
colorThree: '',
colorFour: 'green',
};
const result = selectColorFour({ [patternSlice.name] : state });
expect(result).toBe('green');
});
});
describe('showColorFour', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorFour: '',
}, showColorFour());
expect(state).toEqual({
colorFour: 'green',
});
});
});
describe('hideColorFour', () => {
test('overwrites the stored value', () => {
const state = patternSlice.reducer({
colorFour: 'green',
}, hideColorFour());
expect(state).toEqual({
colorFour: '',
});
});
});
\ No newline at end of file
simon-says/src/features/patternGen/patternTitle.js 0 → 100644
+ 13
− 0
View file @ bba8900d
import React from 'react';
import PropTypes from 'prop-types';
export function Title(props) {
return (
<h1>
{props.title}:
</h1>
)
}
Title.propTypes = {
title: PropTypes.string.isRequired,
};
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment