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

+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/index.css

+:root {
+  /* Colors */
+  --letterbox-color: rgba(0 0 0 / 100%);
+  --app-background-color: rgba(239 239 239 / 100%);
+  --font-color: rgba(0 0 0 / 100%);
+
+  /* Sizes */
+  --minimum-app-size: 300px;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  color: var(--font-color);
+}
+
+#root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--letterbox-color);
+}
+
+#portrait {
+  position: relative;
+  margin: auto;
+  min-width: var(--minimum-app-size);
+  min-height: var(--minimum-app-size);
+  width: 100%;
+  height: 100%;
+  max-width: 62.5vh;
+  background: var(--app-background-color);
+  overflow: hidden;
+  transform: scale(1);
+}
+
+button {
+  -webkit-tap-highlight-color: transparent;
+}

minimal-app/src/index.js

+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { HashRouter as Router } from 'react-router-dom';
+
+import { store } from './app/store.js';
+import { App } from './app.js';
+
+import './index.css';
+
+createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <Router>
+        <div id="portrait">
+          <App />
+        </div>
+      </Router>
+    </Provider>
+  </React.StrictMode>,
+);

minimal-app/src/setupTests.js

+import '@testing-library/jest-dom/extend-expect';

minimal-app/src/testing/mockRedux.js

+export const mockDispatch = jest.fn().mockName('dispatch');
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn((selector) => {
+    if (selector.mock === undefined) {
+      throw new Error(`Call to unmocked selector ${selector.name}`);
+    }
+    return selector();
+  }).mockName('useSelector'),
+  useDispatch: jest.fn().mockName('useDispatch').mockReturnValue(mockDispatch),
+}));

package.json

+{
+  "name": "@unlsoft/starter-code",
+  "version": "1.0.0",
+  "description": "A project skeleton to be used as starter code for labs and homework.",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "postinstall:stylelint-config": "cd stylelint-config && npm install",
+    "postinstall:eslint-config": "cd eslint-config && npm install",
+    "postinstall:app": "cd minimal-app && npm install",
+    "postinstall": "run-s postinstall:**",
+    "lint:app": "cd minimal-app && npm run lint",
+    "lint": "run-s --continue-on-error lint:**",
+    "test-once:app": "cd minimal-app && npm run test-once",
+    "test-once": "run-s --continue-on-error test-once:**",
+    "test": "run-s test-once",
+    "start": "cd minimal-app && npm run start",
+    "build:app": "cd minimal-app && npm run build",
+    "build": "run-s build:**"
+  },
+  "devDependencies": {
+    "ghooks": "^2.0.4",
+    "npm-run-all": "^4.1.5"
+  },
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run lint"
+    }
+  }
+}

react-redux-starter-code.code-workspace

+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"files.eol": "\n",
+		"files.exclude": {
+			"**/node_modules": true
+		},
+		"files.trimFinalNewlines": true,
+		"files.trimTrailingWhitespace": true
+	}
+}

stylelint-config @ 948fc884

+Subproject commit 948fc884d068e87763fa0f0c165ca0cd256bf43d