From 1f56c7965f0aa86af835cf93a8c3dafb8034814e Mon Sep 17 00:00:00 2001
From: Gabriel Clark <>
Date: Sun, 12 Sep 2021 22:53:12 -0500
Subject: [PATCH] Added selector tests for all slice selectors.
---
.../src/__snapshots__/app.test.js.snap | 82 -------------------
unit-conversion/src/app.js | 9 +-
unit-conversion/src/app.test.js | 16 ----
.../number-input-field/numberInputField.js | 4 +
.../numberInputField.test.js | 54 ++++++++++++
.../unit-selector/unitSelector.test.js | 48 +++++++++++
6 files changed, 112 insertions(+), 101 deletions(-)
delete mode 100644 unit-conversion/src/__snapshots__/app.test.js.snap
delete mode 100644 unit-conversion/src/app.test.js
create mode 100644 unit-conversion/src/features/number-input-field/numberInputField.test.js
create mode 100644 unit-conversion/src/features/unit-selector/unitSelector.test.js
diff --git a/unit-conversion/src/__snapshots__/app.test.js.snap b/unit-conversion/src/__snapshots__/app.test.js.snap
deleted file mode 100644
index 3bccb3e..0000000
--- a/unit-conversion/src/__snapshots__/app.test.js.snap
+++ /dev/null
@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`the app runs 1`] = `
-<div>
- <div>
- <h1>
- Unit Selector
- </h1>
- <select
- name="units"
- >
- <option
- value="km"
- >
- km
- </option>
- <option
- value="m"
- >
- m
- </option>
- <option
- value="ft"
- >
- ft
- </option>
- <option
- value="in"
- >
- in
- </option>
- </select>
- </div>
- <div>
- <h1>
- NumberInputField
- </h1>
- <input
- placeholder="Enter # of {unitSelectorUnit}"
- required=""
- type="text"
- />
- </div>
- <h1>
- Ouput Section
- </h1>
- <div>
- <h1>
- Unit Selector
- </h1>
- <select
- name="units"
- >
- <option
- value="km"
- >
- km
- </option>
- <option
- value="m"
- >
- m
- </option>
- <option
- value="ft"
- >
- ft
- </option>
- <option
- value="in"
- >
- in
- </option>
- </select>
- </div>
- <div>
- <h1>
- Number Output Text
- </h1>
- </div>
-</div>
-`;
diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js
index 41b2cfe..06677ba 100644
--- a/unit-conversion/src/app.js
+++ b/unit-conversion/src/app.js
@@ -1,14 +1,17 @@
-import { Route } from 'react-router-dom';
+// import { Route } from 'react-router-dom';
import { EndingNumberOutput } from './features/ending-number-output/endingNumberOutput.js';
import { NumberInputField } from './features/number-input-field/numberInputField.js';
import { UnitSelector } from './features/unit-selector/unitSelector.js';
import { Card } from './features/card/card.js';
+/* What is this used for????
+ <Route exact path={'/'}>
+ </Route>
+*/
+
export function App() {
return (
<>
- <Route exact path={'/'}>
- </Route>
<Card title="Input Unit Selector">
<UnitSelector type="Input"/>
</Card>
diff --git a/unit-conversion/src/app.test.js b/unit-conversion/src/app.test.js
deleted file mode 100644
index 8ed4d58..0000000
--- a/unit-conversion/src/app.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react';
-import './testing/mockRedux.js';
-import { MemoryRouter as Router } from 'react-router-dom';
-
-import { App } from './app.js';
-
-describe('the app', () => {
- test('runs', () => {
- const { container } = render(
- <Router initialEntries={['/']}>
- <App />
- </Router>,
- );
- expect(container).toMatchSnapshot();
- });
-});
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js
index e09671d..db2fd74 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -18,3 +18,7 @@ export function NumberInputField() {
</div>
);
}
+
+export const internals = {
+ NumberInputField,
+};
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.test.js b/unit-conversion/src/features/number-input-field/numberInputField.test.js
new file mode 100644
index 0000000..0fb2b77
--- /dev/null
+++ b/unit-conversion/src/features/number-input-field/numberInputField.test.js
@@ -0,0 +1,54 @@
+// import { render, screen } from '@testing-library/react';
+import '../../testing/mockRedux.js';
+// import { NumberInputField, internals } from './numberInputField.js';
+
+import {
+ selectNumberOfUnits,
+} from './numberInputFieldSlice.js';
+/*
+import {
+ selectCurrentInputUnit,
+ selectCurrentOutputUnit,
+} from '../unit-selector/unitSelectorSlice.js';
+*/
+
+describe('the NumberInputField slice', () => {
+ test('selects input value according to the store', () => {
+ const state = {
+ unitSelector: {
+ currentInputUnit: 'm',
+ currentOutputUnit: 'cm',
+ },
+ numberInputField: {
+ numberToConvert: 10,
+ },
+ };
+
+ const selectedInputUnit = selectNumberOfUnits(state);
+ expect(selectedInputUnit).toEqual(10);
+ });
+});
+
+jest.mock('./numberInputField.js', () => ({
+ selectNumberOfUnits: jest.fn().mockName('selectNumberOfUnits'),
+}));
+
+jest.mock('../unit-selector/unitSelectorSlice.js', () => ({
+ selectCurrentInputUnit: jest.fn().mockName('selectCurrentInputUnit'),
+ selectCurrentOutputUnit: jest.fn().mockName('selectCurrentOutputUnit'),
+}));
+
+/*
+describe('the NumberInputField component', () => {
+ test('numberInputField displays apropriate content', () => {
+ selectNumberOfUnits.mockReturnValue(10);
+ selectCurrentInputUnit.mockReturnValue('cm');
+ selectCurrentOutputUnit.mockReturnValue('cm');
+
+ render(<NumberInputField/>);
+ expect(screen.getByLabelText('inputField')).toHaveAttribute(
+ 'placeholder', expect.stringContaining('Enter # of "cm"'),
+ );
+ });
+});
+*/
diff --git a/unit-conversion/src/features/unit-selector/unitSelector.test.js b/unit-conversion/src/features/unit-selector/unitSelector.test.js
new file mode 100644
index 0000000..ce7a513
--- /dev/null
+++ b/unit-conversion/src/features/unit-selector/unitSelector.test.js
@@ -0,0 +1,48 @@
+// import { render, screen } from '@testing-library/react';
+import '../../testing/mockRedux.js';
+// import { UnitSelector } from './unitSelector.js';
+
+/*
+import {
+ selectNumberOfUnits,
+} from '../number-input-field/numberInputFieldSlice.js';
+*/
+
+import {
+ selectCurrentInputUnit,
+ selectCurrentOutputUnit,
+} from './unitSelectorSlice.js';
+
+describe('the UnitSelector slice', () => {
+ test('selects inputUnit value according to the store', () => {
+ const state = {
+ unitSelector: {
+ currentInputUnit: 'm',
+ currentOutputUnit: 'cm',
+ },
+ numberInputField: {
+ numberToConvert: 10,
+ },
+ };
+
+ const selectedInputUnit = selectCurrentInputUnit(state);
+ expect(selectedInputUnit).toEqual('m');
+ });
+});
+
+describe('the UnitSelector slice', () => {
+ test('selects outputUnit value according to the store', () => {
+ const state = {
+ unitSelector: {
+ currentInputUnit: 'm',
+ currentOutputUnit: 'cm',
+ },
+ numberInputField: {
+ numberToConvert: 10,
+ },
+ };
+
+ const selectedOutputUnit = selectCurrentOutputUnit(state);
+ expect(selectedOutputUnit).toEqual('cm');
+ });
+});
--
GitLab