Completed Checkpoint 10

minimal-app/src/__snapshots__/app.test.js.snap

-// 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>
-`;

minimal-app/src/app.test.js

@@ -8,12 +8,39 @@ 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'),
+  selectStepOne,
+  selectStepTwo,
+  selectStepThree,
+  selectButtonOne,
+  selectButtonTwo,
+  selectButtonThree,
+} from './invisibleMazeSlice.js';
+
+import { InvisibleMaze } from './invisibleMaze.js';
+import { App } from './invisibleMaze.js';
+jest.mock('./invisibleMazeSlice.js', () => ({
+  selectStepOne: jest.fn().mockName('selectStepOne'),
+  selectStepTwo: jest.fn().mockName('selectStepTwo'),
+  selectStepThree: jest.fn().mockName('selectStepThree'), 
+  selectButtonOne: jest.fn().mockName('selectButtonOne'),
+  selectButtonTwo: jest.fn().mockName('selectButtonTwo'),
+  selectButtonThree: jest.fn().mockName('selectButtonThree'),
 }));
 
+describe('the app', () => {
+  test('has a grid of 3x3 buttons', () => {
+    selectStepOne.mockReturnValue(9998);
+    selectStepTwo.mockReturnValue(9997);
+    selectStepThree.mockReturnValue(9999);
+    selectButtonOne.mockReturnValue(9998);
+    selectButtonTwo.mockReturnValue(9997);
+    selectButtonThree.mockReturnValue(9999);
+    const { container } = render(
+        </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
 // describe('the app', () => {
 //   test('has one labeled button that displays the value from the store', () => {
 //     selectValue.mockReturnValue(9999);

minimal-app/src/features/counter/counter.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 { 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,
-    });
-  });
-});

minimal-app/src/features/counter/counterSlice.test.js

-/* 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,
-    });
-  });
-});

minimal-app/src/features/invisibleMaze/__snapshots__/invisibleMaze.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the maze has a grid of 3x3 buttons 1`] = `
+<div>
+  <main>
+    <div
+      class="maze"
+    >
+      <button
+        class="correct"
+      />
+      <button
+        class="panel"
+      />
+      <button
+        class="panel"
+      />
+    </div>
+    <div
+      class="maze"
+    >
+      <button
+        class="panel"
+      />
+      <button
+        class="correct"
+      />
+      <button
+        class="panel"
+      />
+    </div>
+    <div
+      class="maze"
+    >
+      <button
+        class="panel"
+      />
+      <button
+        class="panel"
+      />
+      <button
+        class="correct"
+      />
+    </div>
+  </main>
+</div>
+`;

minimal-app/src/features/invisibleMaze/invisibleMaze.test.js

+import React from 'react';
+import { render } from '@testing-library/react';
+import '../../testing/mockRedux.js';
+
+import {
+  selectStepOne,
+  selectStepTwo,
+  selectStepThree,
+  selectButtonOne,
+  selectButtonTwo,
+  selectButtonThree,
+} from './invisibleMazeSlice.js';
+import { InvisibleMaze } from './invisibleMaze.js';
+jest.mock('./invisibleMazeSlice.js', () => ({
+  selectStepOne: jest.fn().mockName('selectStepOne'),
+  selectStepTwo: jest.fn().mockName('selectStepTwo'),
+  selectStepThree: jest.fn().mockName('selectStepThree'), 
+  selectButtonOne: jest.fn().mockName('selectButtonOne'),
+  selectButtonTwo: jest.fn().mockName('selectButtonTwo'),
+  selectButtonThree: jest.fn().mockName('selectButtonThree'),
+}));
+
+describe('the maze', () => {
+  test('has a grid of 3x3 buttons', () => {
+    selectStepOne.mockReturnValue(9998);
+    selectStepTwo.mockReturnValue(9997);
+    selectStepThree.mockReturnValue(9999);
+    selectButtonOne.mockReturnValue(9998);
+    selectButtonTwo.mockReturnValue(9997);
+    selectButtonThree.mockReturnValue(9999);
+    const { container } = render(
+        <InvisibleMaze/>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
\ No newline at end of file