Finished the unit tests for the selectors. Checkpoint 6.

simon-says/debug.log

@@ -189,3 +189,25 @@
 [0902/132649.421:ERROR:crash_report_database_win.cc(469)] failed to stat report
 [0902/132649.421:ERROR:crash_report_database_win.cc(469)] failed to stat report
 [0902/132649.422:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.529:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report

simon-says/src/features/patternGen/buttonLayout.css

@@ -12,47 +12,52 @@
     background-color: #f44336;
     border: none;
     width: 50%;
-    height: 20em;
+    height: 15em;
 }
 .redlit{
     background-color: #f44336;
     border: #ffffff;
     width: 50%;
-    height: 20em;
+    height: 15em;
 }
 .bluebutton{
     background-color: #008CBA;
     border: none;
     width: 50%;
-    height: 20em;
+    height: 15em;
 }
 .bluelit{
     background-color: #008CBA;
     border: #ffffff;
     width: 50%;
-    height: 20em;
+    height: 15em;
 }
 .yellowbutton{
     background-color: #ffff00;
     border: none;
     width: 50%;
-    height: 20em;
+    height: 15em;
 }
 .yellowlit{
     background-color: #ffff00;
     border: #ffffff;
     width: 50%;
-    height: 20em;
+    height: 15em;
 }
 .greenbutton{
     background-color: #4CAF50;
     border: none;
     width: 50%;
-    height: 20em;
+    height: 15em;
 }
 .greenlit{
     background-color: #4CAF50;
     border: #ffffff;
     width: 50%;
-    height: 20em;
+    height: 15em;
+}
+.start{
+    background-color: #0fc0fc;
+    width: 100%;
+    font-size:3em;
 }
\ No newline at end of file

simon-says/src/features/patternGen/patternGeneration.js

@@ -17,20 +17,20 @@ export function Pattern() {
   const score = useSelector(selectScore);
   const patternList = useSelector(selectPatternList);
   const redclasses = classNames({
-    ['redbutton']: borderState === 0,
-    ['redlit']: borderState === 1,
+    ['redbutton']: !borderState,
+    ['redlit']: borderState,
   });
   const blueclasses = classNames({
-    ['bluebutton']: borderState === 0,
-    ['bluelit']: borderState ===1,
+    ['bluebutton']: !borderState,
+    ['bluelit']: borderState,
   });
   const yellowclasses = classNames({
-    ['yellowbutton']: borderState === 0,
-    ['yellowlit']: borderState ===1,
+    ['yellowbutton']: !borderState,
+    ['yellowlit']: borderState,
   });
   const greenclasses = classNames({
-    ['greenbutton']: borderState === 0,
-    ['greenlit']: borderState ===1,
+    ['greenbutton']: !borderState,
+    ['greenlit']: borderState,
   });
   return (
     <main>
@@ -38,10 +38,10 @@ export function Pattern() {
         <blockquote class = 'title'>
           Simon Says
         </blockquote>
-        <blockquote class = 'score'>
+        <blockquote title = 'score' class = 'score'>
           Score: {score}
         </blockquote>
-        <button class = {redclasses}>
+        <button title = 'red' class = {redclasses}>
         </button>
         <button class = {blueclasses}>
         </button>
@@ -49,6 +49,9 @@ export function Pattern() {
         </button>
         <button class = {greenclasses}>  
         </button>
+        <button class = 'start'>
+          Start
+        </button>
       </div>
     </main>
   );

simon-says/src/features/patternGen/patternGeneration.test.js

+/* eslint-disable no-magic-numbers */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '../../testing/mockRedux.js';
+
+import { Pattern } from './patternGeneration.js';
+
+import {
+    selectBorderState,
+    selectPatternList,
+    selectScore,
+} from './patternSlice.js'
+jest.mock('./patternSlice.js', () =>({
+    selectBorderState: jest.fn().mockName('selectBorderState'),
+    selectPatternList: jest.fn().mockName('selectPatternList'),
+    selectScore: jest.fn().mockName('selectScore'),
+}));
+
+describe('red button', () => {
+    test('has a white border if borderState is true', () => {
+        selectBorderState.mockReturnValue(true);
+        render(<Pattern button={'Foo'}/>);
+        expect(screen.getByTitle('red')).toHaveClass('redlit');
+    });
+});
+describe('the score counter', () => {
+    test('displays the correct score', () => {
+        selectScore.mockReturnValue(100);
+        render(<Pattern></Pattern>);
+        expect(screen.getByTitle('score')).toHaveTextContent('Score: 100');
+    });
+});
+describe('the pattern list', () => {
+    test('works', () => {
+        const list = selectPatternList.mockReturnValue([0, 1, 3]);
+        render(<Pattern></Pattern>);
+        expect( list === [0,1,3]);
+    });
+});
\ No newline at end of file

simon-says/src/features/patternGen/patternSlice.js

@@ -3,7 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const patternSlice = createSlice({
   name: 'pattern',
   initialState: {
-    border: 0,
+    borderState: false,
     patternList: [],
     score: 0,
   },
@@ -16,7 +16,7 @@ export const {
 } = patternSlice.actions;
 
 export function selectBorderState(state) {
-  return state.pattern.border;
+  return state.pattern.borderState;
 }
 
 export function selectPatternList(state) {