Merge pull request #3 from Inforitnl/feature/contract-testing

Added a nestJS based contract api

.husky/pre-commit

@@ -2,5 +2,6 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npm run lint-staged
+npm run lint
 npm run test-ci
 npm run e2e-ci

.vscode/settings.json

@@ -3,15 +3,21 @@
     "browserslist",
     "camelcase",
     "deepmerge",
+    "etags",
     "flexbugs",
     "Immer",
+    "Keycloak",
     "languagedetector",
+    "lcov",
     "luxon",
+    "nestjs",
+    "oidc",
     "pmmmwh",
     "preinstall",
     "reduxjs",
     "SVGR",
     "tailwindcss",
+    "tendersguru",
     "testid",
     "typeahead",
     "uncompiled"

.vscode/typescriptreact.code-snippets

@@ -4,7 +4,7 @@
     "body": [
       "import { FunctionComponent } from \"react\";",
       "",
-      "type Props = {}",
+      "type Props = {};",
       "",
       "export const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = () => {",
       "  return <h1>${1:${TM_FILENAME_BASE}}</h1>;",
@@ -68,5 +68,27 @@
       "",
       "export default ${1:${TM_FILENAME_BASE}}Slice.reducer;"
     ]
+  },
+  "react-i18next useTranslate hook": {
+    "prefix": ["useTranslation", "translate", "i18-trans"],
+    "body": ["const [translate] = useTranslation();"]
+  },
+  "react-styled-component": {
+    "prefix": ["rsfc", "rsc", "react-styled-component"],
+    "body": [
+      "import { FunctionComponent } from \"react\";",
+      "import styled from \"styled-components\";",
+      "",
+      "type Props = { className?: string };",
+      "",
+      "const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = ({className}) => {",
+      "  return <h1 className={className}>${1:${TM_FILENAME_BASE}}</h1>;",
+      "};",
+      "",
+      "const Styled${1:${TM_FILENAME_BASE}} = styled(${1:${TM_FILENAME_BASE}})``;",
+      "",
+      "export { Styled${1:${TM_FILENAME_BASE}} as ${1:${TM_FILENAME_BASE}} };",
+      ""
+    ]
   }
 }

CHANGELOG.md

@@ -4,6 +4,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.2] - 2022-08-15
+
+- Added a nestJS based contract api
+  - Added an example with trucks and basic fetch in useEffect on page load
+  - Added simply test to see whether any data is displayed (and shows the interceptor)
+- Introduced "CypressStrictMode" which wraps React.StrictMode and checks whether Cypress is involved, if so disable StrictMode.
+
+## [0.6.1] - 2022-08-08
+
+- eslint now receives the glob itself
+
+## [0.6.0] - 2022-08-08
+
+- Added styled components
+  - also removed existing css
+  - left the capabilities included
+
+## [0.5.0] - 2022-06-26
+
+- Added react-oidc (use demo/demo)
+- Added an example of an authentication protected page (tenders)
+- Added an example with the built in proxy (to combat CORS) (tendersguru)
+
+## [0.4.1] - 2022-06-26
+
+- Moved examples into example directory
+- Moved routes to separate file
+- Used route constants
+
 ## [0.4.0] - 2022-07-25
 
 - Added the possibility to override partial configs during deployments

README.md

@@ -17,6 +17,7 @@ Includes:
 
 - [Getting started](#getting-started)
 - [Project structure](#project-structure)
+- ["Forking" outside of Github](#forking-outside-of-github)
 - [Configuration](#configuration)
   - [Using the `config.ts` file](#using-the-configts-file)
   - [adding values](#adding-values)
@@ -56,6 +57,17 @@ Only the important files are shown
 └── tsconfig.json
 ```
 
+## "Forking" outside of Github
+
+To use this base in other git software (not Github) you will have to manually manage the upstream.
+Go into your existing repo and execute the following commands:
+
+1. `git remote add upstream <clone-url>`
+2. `git pull upstream master` # or other branchname
+3. `git push`
+
+Then, when you need to sync again you can repeat step 2 and 3
+
 ## Configuration
 
 This starter kit comes with runtime configuration out-of-the-box.

contracts/api/.eslintrc.js

@@ -0,0 +1,66 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint/eslint-plugin", "import"],
+  extends: ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: [".eslintrc.js"],
+  rules: {
+    "no-console": [
+      "error",
+      {
+        allow: ["debug", "error"],
+      },
+    ],
+    "no-eval": "error",
+    "import/first": "error",
+    camelcase: [
+      "error",
+      {
+        ignoreImports: true,
+        ignoreDestructuring: true,
+      },
+    ],
+    "consistent-return": "warn",
+    "comma-dangle": ["warn", "always-multiline"],
+    "constructor-super": "error",
+    curly: "error",
+    "eol-last": "warn",
+    eqeqeq: ["error", "smart"],
+    "import/order": "always",
+    "new-parens": "error",
+    "no-debugger": "error",
+    "no-fallthrough": "off",
+    "max-len": [
+      "warn",
+      {
+        code: 100,
+      },
+    ],
+    "no-shadow": [
+      "error",
+      {
+        hoist: "all",
+      },
+    ],
+    "no-trailing-spaces": "warn",
+    "no-underscore-dangle": "error",
+    "no-unsafe-finally": "error",
+    "no-var": "error",
+    "object-shorthand": "error",
+    "one-var": ["error", "never"],
+    "prefer-arrow/prefer-arrow-functions": "off",
+    "prefer-const": "error",
+    radix: "off",
+    "space-in-parens": ["off", "never"],
+    quotes: [2, "double"],
+  },
+};

contracts/api/.gitignore

@@ -0,0 +1,35 @@
+# compiled output
+/dist
+/node_modules
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+/coverage
+/.nyc_output
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

contracts/api/README.md

@@ -0,0 +1,11 @@
+# Contract api
+
+This API is meant to emulate the different contracts that you have with external systems
+
+## use api based routing
+
+You can use the first part of the URL as your contract and put your resources after that.
+e.g, for `fake` you could do:
+
+`URL/fake/trucks` and `URL/fake/containers`.
+Then simply make `URL/fake` your root url in the React config

contracts/api/nest-cli.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/nest-cli",
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src"
+}

contracts/api/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "contract-testing-api",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "nest build",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "start": "nest start",
+    "start:dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:e2e": "jest --config ./test/jest-e2e.json"
+  },
+  "dependencies": {
+    "@nestjs/common": "^9.0.0",
+    "@nestjs/core": "^9.0.0",
+    "@nestjs/platform-express": "^9.0.0",
+    "reflect-metadata": "^0.1.13",
+    "rimraf": "^3.0.2",
+    "rxjs": "^7.2.0"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^9.0.0",
+    "@nestjs/schematics": "^9.0.0",
+    "@nestjs/testing": "^9.0.0",
+    "@types/express": "^4.17.13",
+    "@types/jest": "28.1.4",
+    "@types/node": "^16.0.0",
+    "@types/supertest": "^2.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "inforit-prettier-config": "^1.0.0",
+    "jest": "28.1.2",
+    "prettier": "^2.3.2",
+    "source-map-support": "^0.5.20",
+    "supertest": "^6.1.3",
+    "ts-jest": "28.0.5",
+    "ts-loader": "^9.2.3",
+    "ts-node": "^10.0.0",
+    "tsconfig-paths": "4.0.0",
+    "typescript": "^4.3.5"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".*\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.(t|j)s"
+    ],
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  },
+  "prettier": "inforit-prettier-config"
+}

contracts/api/src/api.constants.ts

@@ -0,0 +1,3 @@
+export const API_CONSTANTS = {
+  fake: "fake",
+};

contracts/api/src/app.controller.ts

@@ -0,0 +1,9 @@
+import { Controller, Get } from "@nestjs/common";
+
+@Controller()
+export class AppController {
+  @Get()
+  getHello(): string {
+    return "Welcome to the contract api";
+  }
+}

contracts/api/src/app.module.ts

@@ -0,0 +1,10 @@
+import { Module } from "@nestjs/common";
+import { AppController } from "./app.controller";
+import { FakeTrucksController } from "./contracts/fake/trucks.controller";
+
+@Module({
+  imports: [],
+  controllers: [AppController, FakeTrucksController],
+  providers: [],
+})
+export class AppModule {}

contracts/api/src/contracts/fake/trucks.controller.ts

@@ -0,0 +1,21 @@
+import { Controller, Get } from "@nestjs/common";
+import { API_CONSTANTS } from "./../../api.constants";
+
+@Controller(`${API_CONSTANTS.fake}/trucks`)
+export class FakeTrucksController {
+  @Get()
+  get() {
+    return [
+      {
+        id: "de5ddb70-b2a7-4309-a992-62260a09683a",
+        licensePlate: "xx-yy-zz",
+        color: "black",
+      },
+      {
+        id: "087e0b0b-1c13-46e3-8920-762f5738072e",
+        licensePlate: "xx-yy-zz",
+        color: "red",
+      },
+    ];
+  }
+}

contracts/api/src/main.ts

@@ -0,0 +1,12 @@
+import { NestFactory } from "@nestjs/core";
+import { AppModule } from "./app.module";
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  // allow app to be called from everywhere
+  app.enableCors();
+  // you can disable etags so that you always get 200's instead of 304s :)
+  // app.getHttpAdapter().getInstance().set("etag", false);
+  await app.listen(9600);
+}
+bootstrap();

contracts/api/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}

contracts/api/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es2017",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "forceConsistentCasingInFileNames": false,
+    "noFallthroughCasesInSwitch": false
+  }
+}

contracts/docs/.gitkeep

@@ -0,0 +1 @@
+Put your written contracts here

cypress.config.ts

@@ -6,6 +6,9 @@ export default defineConfig({
       // implement node event listeners here
     },
   },
+  env: {
+    appBaseUrl: "http://localhost:3000",
+  },
   video: false,
   reporter: "mocha-junit-reporter",
   reporterOptions: {

cypress/e2e/trucks.cy.ts

@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+
+describe("Application trucks", () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env("appBaseUrl"));
+  });
+
+  it("Should render the navigation links", () => {
+    cy.get("[data-testid='nav']");
+  });
+
+  it("Should navigate to trucks and display a result when clicking on trucks", () => {
+    cy.get('[data-testid="nav.trucks"]').click();
+    cy.contains("trucks (contract api) page");
+  });
+
+  it("Should eventually (after the http call) display the results on screen", () => {
+    cy.intercept({
+      method: "GET",
+      url: "http://localhost:9600/fake/trucks",
+    }).as("getTrucks");
+    cy.get('[data-testid="nav.trucks"]').click();
+    cy.contains("trucks (contract api) page");
+    cy.wait("@getTrucks").its("response.statusCode").should("be.oneOf", [200, 304]);
+    cy.get('[data-testid="trucksResult"]').should("not.be.empty");
+  });
+});

cypress/support/commands.ts

@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }

cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-starter-kit",
-  "version": "0.4.0",
+  "version": "0.6.2",
   "description": "A modern, create-react-app-based, starter kit for React projects",
   "keywords": [
     "react",
@@ -28,16 +28,19 @@
     "build:prod": "npm run build",
     "cypress-run": "cypress run",
     "e2e": "cypress open -d --e2e",
-    "e2e-ci": "start-server-and-test start http://localhost:3000 cypress-run",
+    "e2e-ci": "start-server-and-test start-e2e-dependencies \"http://localhost:3000|9600\" cypress-run",
-    "postinstall": "husky install",
+    "postinstall": "husky install && npm install --prefix contracts/api",
-    "lint": "GLOBIGNORE='src/types' && eslint src/**",
+    "lint": "eslint \"src/**\"",
     "lint-staged": "lint-staged --relative",
     "organize-package-json": "npx format-package -w && npx sort-package-json",
     "pretty-quick": "pretty-quick --staged",
     "start": "node scripts/start.js",
+    "start-with-contract": "concurrently \"npm start\" \"npm run start-contract-api\"",
+    "start-contract-api": "npm run start:dev --prefix contracts/api",
+    "start-e2e-dependencies": "npm run start-with-contract",
     "test": "node scripts/test.js --verbose",
     "test-ci": "node scripts/test.js --ci --coverage",
-    "test-live-coverage": " concurrently --kill-others \"npm run test-with-coverage\" \"npx http-server -c-1 coverage/lcov-report\"",
+    "test-live-coverage": "concurrently \"npm run test-with-coverage\" \"npx http-server -c-1 coverage/lcov-report\"",
     "test-with-coverage": "node scripts/test.js --coverage",
     "test:prod": "npm run test-ci && npm run e2e-ci"
   },
@@ -45,6 +48,7 @@
     "*.{ts,js,jsx,tsx,css,scss,json,md}": "prettier --write"
   },
   "dependencies": {
+    "@axa-fr/react-oidc": "^6.0.0-beta10",
     "@reduxjs/toolkit": "^1.8.3",
     "deepmerge": "^4.2.2",
     "i18next-http-backend": "^1.4.1",
@@ -55,7 +59,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
-    "tailwindcss": "^3.1.6"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
@@ -70,6 +74,7 @@
     "@types/node": "^18.6.1",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.25",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.5",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -95,6 +100,7 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
     "html-webpack-plugin": "^5.5.0",
+    "http-proxy-middleware": "^2.0.6",
     "husky": "^8.0.1",
     "i18next": "^21.8.14",
     "i18next-browser-languagedetector": "^6.1.4",
@@ -110,7 +116,7 @@
     "mocha-junit-reporter": "^2.0.2",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^7.0.1",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.7.2",
     "prettier": "^2.7.1",

public/config.js

@@ -1,6 +1,30 @@
 const defaultConfig = {
   version: "0.1.0",
   name: "React-starter-kit",
+  services: {
+    fake: {
+      root: "http://localhost:9600/fake",
+      trucks: "trucks",
+    },
+  },
+  // oidc: {
+  //   url: "private_url",
+  //   realm: "inforit",
+  //   clientId: "react-base",
+  //   scope: "openid profile email",
+  //   redirectUri: "http://localhost:3000/authentication/callback",
+  //   silentRedirectUri: "http://localhost:3000/authentication/silent-callback",
+  //   serviceWorkerOnly: false,
+  // },
+  oidc: {
+    url: "https://sso.mastermindzh.tech/realms/public-tests",
+    realm: "public-tests",
+    clientId: "react-starter-kit",
+    scope: "openid profile email",
+    redirectUri: "http://localhost:3000/authentication/callback",
+    silentRedirectUri: "http://localhost:3000/authentication/silent-callback",
+    serviceWorkerOnly: false,
+  },
 };
 
 // ignore this :)

public/i18n/en.json

@@ -10,7 +10,9 @@
   "nav": {
     "home": "home",
     "about": "about",
-    "counter": "counter"
+    "counter": "counter",
+    "tenders": "tenders (with auth)",
+    "trucks": "trucks (contract api)"
   },
   "about": {
     "title": "About"

public/i18n/nl.json

@@ -10,7 +10,9 @@
   "nav": {
     "home": "home",
     "about": "over ons",
-    "counter": "teller"
+    "counter": "teller",
+    "tenders": "aanbestedingen (met auth)",
+    "trucks": "trucks (contract api)"
   },
   "about": {
     "title": "Over ons"

src/App.tsx

@@ -1,26 +1,13 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
-import { AboutContainer } from "./features/about/About";
-import { CounterContainer } from "./features/counter/Counter";
-import { HomeContainer } from "./features/home/Home";
 import { Navbar } from "./infrastructure/navbar/Navbar";
+import { AppRoutes } from "./Routes";
 
 function App() {
   return (
     <BrowserRouter>
       <div className="App">
         <Navbar />
-        <Routes>
+        <AppRoutes />
-          <Route path="/" element={<HomeContainer />} />
-          <Route path="/about" element={<AboutContainer />} />
-          <Route path="/counter" element={<CounterContainer />} />
-          {/* <Route index element={<Home />} /> */}
-          {/* <Route path="teams" element={<Teams />}>
-              <Route path=":teamId" element={<Team />} />
-              <Route path="new" element={<NewTeamForm />} />
-              <Route index element={<LeagueStandings />} />
-            </Route> */}
-          {/* </Route> */}
-        </Routes>
       </div>
     </BrowserRouter>
   );

src/Routes.tsx

@@ -0,0 +1,45 @@
+import { OidcSecure } from "@axa-fr/react-oidc";
+import { FunctionComponent } from "react";
+import { Route, Routes } from "react-router-dom";
+import { AboutContainer } from "./features/about/About";
+import { CounterContainer } from "./features/examples/counter/Counter";
+import { Tenders } from "./features/examples/tenders/Tenders";
+import { Trucks } from "./features/examples/trucks/Trucks";
+import { HomeContainer } from "./features/home/Home";
+type Props = {};
+
+export const ROUTE_KEYS = {
+  home: "",
+  about: "about",
+  counter: "counter",
+  tenders: "tenders",
+  trucks: "trucks",
+};
+
+export const AppRoutes: FunctionComponent<Props> = () => {
+  const { home, about, counter, tenders, trucks } = ROUTE_KEYS;
+  return (
+    <Routes>
+      <Route path={home} element={<HomeContainer />} />
+      <Route path={about} element={<AboutContainer />} />
+      <Route path={counter} element={<CounterContainer />} />
+      {/* a route with authentication */}
+      <Route
+        path={tenders}
+        element={
+          <OidcSecure>
+            <Tenders />
+          </OidcSecure>
+        }
+      />
+      <Route path={trucks} element={<Trucks />} />
+      {/* <Route index element={<Home />} /> */}
+      {/* <Route path="teams" element={<Teams />}>
+      <Route path=":teamId" element={<Team />} />
+      <Route path="new" element={<NewTeamForm />} />
+      <Route index element={<LeagueStandings />} />
+    </Route> */}
+      {/* </Route> */}
+    </Routes>
+  );
+};

src/app/store.ts

@@ -1,5 +1,5 @@
 import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
-import counterReducer from "../features/counter/state/counterSlice";
+import counterReducer from "../features/examples/counter/state/counterSlice";
 
 export const store = configureStore({
   reducer: {

src/app/tests/mocks/i18n/WithTestTranslations.tsx

@@ -2,7 +2,14 @@ import { FunctionComponent, ReactNode } from "react";
 import { I18nextProvider, useTranslation } from "react-i18next";
 import i18n from "./i18n";
 
-type Props = { children?: ReactNode; keysOnly?: boolean };
+type Props = {
+  children?: ReactNode;
+  /**
+   * Whether to show the translation keys instead of translated text
+   * Can be useful to test languages that don't have full translations
+   */
+  keysOnly?: boolean;
+};
 
 const ProvidedComponent: FunctionComponent<Props> = ({ children, keysOnly }) => {
   const [_translate, i18nSettings] = useTranslation();

src/features/counter/services/counterAPI.ts

@@ -1,4 +0,0 @@
-// A mock function to mimic making an async request for data
-export function fetchCount(amount = 1) {
-  return new Promise<{ data: number }>((resolve) => setTimeout(() => resolve({ data: amount }), 500));
-}

src/features/examples/counter/Counter.module.css

@@ -18,7 +18,7 @@
   padding-left: 16px;
   padding-right: 16px;
   margin-top: 2px;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
 }
 
 .button {
@@ -60,7 +60,7 @@
 }
 
 .asyncButton:after {
-  content: '';
+  content: "";
   background-color: rgba(112, 76, 182, 0.15);
   display: block;
   position: absolute;

src/features/examples/counter/Counter.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import styles from "./Counter.module.css";
 import { incrementAsync } from "./state/actions/incrementAsync";
 import {

src/features/examples/counter/services/counterAPI.ts

@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+  return new Promise<{ data: number }>((resolve) =>
+    setTimeout(() => resolve({ data: amount }), 500),
+  );
+}

src/features/examples/counter/state/counterSlice.spec.ts

@@ -1,8 +1,4 @@
-import counterReducer, {
+import counterReducer, { increment, decrement, incrementByAmount } from "./counterSlice";
-  increment,
-  decrement,
-  incrementByAmount,
-} from "./counterSlice";
 import { CounterState } from "../models/CounterState";
 
 describe("counter reducer", () => {

src/features/examples/counter/state/counterSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { AppThunk, RootState } from "../../../app/store";
+import { AppThunk, RootState } from "../../../../app/store";
 import { CounterState } from "../models/CounterState";
 import { incrementAsync } from "./actions/incrementAsync";
 

src/features/examples/tenders/Tenders.tsx

@@ -0,0 +1,33 @@
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+import { FunctionComponent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type Props = {};
+
+export const Tenders: FunctionComponent<Props> = () => {
+  const [tenders, setTenders] = useState(null);
+  const [translate] = useTranslation();
+  const { accessToken } = useOidcAccessToken();
+
+  useEffect(() => {
+    // this uses the CORS proxy in our webpack setup
+    // tendersguru is mapped to "https://tenders.guru" in setupProxy.js
+    // it will strip the tendersguru part, so the full url will be: https://tenders.guru/api/ro/tenders
+    fetch("tendersguru/api/ro/tenders", {
+      // fetch's way of adding headers. Not required to access the api... but :shrug:
+      headers: new Headers({
+        Authorization: `Bearer ${accessToken}`,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setTenders(data);
+      });
+  }, [accessToken]);
+  return (
+    <>
+      <h1>{translate("nav.tenders")}</h1>
+      {tenders ? <pre>{JSON.stringify(tenders, null, 2)}</pre> : <h2>loading...</h2>}
+    </>
+  );
+};

src/features/examples/trucks/Trucks.tsx

@@ -0,0 +1,34 @@
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+import { FunctionComponent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Config } from "../../../infrastructure/config";
+
+type Props = {};
+
+export const Trucks: FunctionComponent<Props> = () => {
+  const [trucks, setTrucks] = useState(null);
+  const [translate] = useTranslation();
+  const { accessToken } = useOidcAccessToken();
+
+  useEffect(() => {
+    const { fake } = Config.services;
+    fetch(`${fake.root}/${fake.trucks}`, {
+      // fetch's way of adding headers. Not required to access the api... but :shrug:
+      headers: new Headers({
+        Authorization: `Bearer ${accessToken}`,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setTrucks(data);
+      });
+  }, [accessToken]);
+  return (
+    <>
+      <h1>{translate("nav.trucks")} page</h1>
+      <div data-testid="trucksResult">
+        {trucks ? <pre>{JSON.stringify(trucks, null, 2)}</pre> : <h2>loading...</h2>}
+      </div>
+    </>
+  );
+};

src/features/home/Home.tsx

@@ -8,19 +8,39 @@ export const HomeContainer: FunctionComponent<Props> = () => {
       <p>This is the react base app :)</p>
       <span>
         <span>Learn </span>
-        <a className="App-link" href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://reactjs.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           React
         </a>
         <span>, </span>
-        <a className="App-link" href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://redux.js.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Redux
         </a>
         <span>, </span>
-        <a className="App-link" href="https://redux-toolkit.js.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://redux-toolkit.js.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Redux Toolkit
         </a>
         ,<span> and </span>
-        <a className="App-link" href="https://react-redux.js.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://react-redux.js.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           React Redux
         </a>
       </span>

src/index.css

@@ -1,11 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}

src/index.tsx

@@ -1,24 +1,43 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
+import { createGlobalStyle } from "styled-components";
 import App from "./App";
 import { store } from "./app/store";
-import "./index.css";
+import { CypressStrictMode } from "./infrastructure/CypressStrictMode";
 import "./infrastructure/i18n/init";
+import { OidcProvider } from "./infrastructure/sso/OidcProvider";
 import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
 import reportWebVitals from "./reportWebVitals";
 
 const container = document.getElementById("root")!;
 const root = createRoot(container);
 
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+      "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  }
+`;
+
 root.render(
-  <React.StrictMode>
+  <CypressStrictMode>
+    <GlobalStyle />
     <Provider store={store}>
-      <Loader>
+      <OidcProvider>
-        <App />
+        <Loader>
-      </Loader>
+          <App />
+        </Loader>
+      </OidcProvider>
     </Provider>
-  </React.StrictMode>,
+  </CypressStrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

src/infrastructure/CypressStrictMode.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent, ReactNode } from "react";
+
+type Props = { children?: ReactNode };
+
+/**
+ * React StrictMode that disables itself when detected to be running in Cypress
+ */
+export const CypressStrictMode: FunctionComponent<Props> = ({ children }) => {
+  const isInCypress = (window as any).Cypress;
+
+  if (isInCypress) {
+    return <>{children}</>;
+  } else {
+    return <React.StrictMode>{children}</React.StrictMode>;
+  }
+};

src/infrastructure/config/RunTimeConfig.ts

@@ -1,4 +1,18 @@
+import { OIDCConfig } from "../sso/models/OIDCConfig";
+
 export interface RunTimeConfig {
   version: number;
   name: string;
+
+  services: {
+    fake: {
+      root: string;
+      trucks: string;
+    };
+  };
+
+  /**
+   * Settings for the OIDC connection
+   */
+  oidc: OIDCConfig;
 }

src/infrastructure/config/config.ts

@@ -1,4 +1,5 @@
 import deepmerge from "deepmerge";
+import { RunTimeConfig } from "./RunTimeConfig";
 
 /**
  * gets and merges both the regular config and the override config from the window
@@ -12,4 +13,4 @@ export const mergeConfigs = () => {
 
 mergeConfigs();
 
-export const Config = window.mergedConfig;
+export const Config: RunTimeConfig = window.mergedConfig;

src/infrastructure/navbar/Navbar.css

@@ -1,3 +0,0 @@
-nav a {
-  padding-right: 10px;
-}

src/infrastructure/navbar/Navbar.spec.tsx

@@ -1,18 +1,25 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { WithTestTranslations } from "../../app/tests/mocks/i18n/WithTestTranslations";
+import { OidcProvider } from "../sso/OidcProvider";
 import { WithRouter } from "../wrappers/WithRouter";
 import { Navbar } from "./Navbar";
 
 describe("Navbar container", () => {
-  it.only("renders a navigation section identified by the nav test-id", () => {
+  it.only("renders a navigation section identified by the nav test-id", async () => {
     render(
       <WithTestTranslations>
-        <WithRouter>
+        {/* for simple tests where we don't need auth we don't actually have to mock responses */}
-          <Navbar />
+        <OidcProvider>
-        </WithRouter>
+          <WithRouter>
+            <Navbar />
+          </WithRouter>
+        </OidcProvider>
       </WithTestTranslations>,
     );
-
+    // because of the extra loaders we wait for a result just to be sure
-    expect(screen.getAllByTestId("nav")?.length).toBeGreaterThan(0);
+    // see: https://testing-library.com/docs/guide-disappearance/
+    await waitFor(() => {
+      expect(screen.getAllByTestId("nav")?.length).toBeGreaterThan(0);
+    });
   });
 });

src/infrastructure/navbar/Navbar.tsx

@@ -1,38 +1,64 @@
+import { useOidc, useOidcAccessToken } from "@axa-fr/react-oidc";
 import { DateTime } from "luxon";
 import { FunctionComponent } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { ROUTE_KEYS } from "../../Routes";
 import { Config } from "../config";
-import "./Navbar.css";
+type Props = { className?: string };
-type Props = {};
 
-export const Navbar: FunctionComponent<Props> = () => {
+const Navbar: FunctionComponent<Props> = ({ className }) => {
   const [translate, i18n] = useTranslation();
+  const { login, logout, isAuthenticated } = useOidc();
+  const { accessTokenPayload } = useOidcAccessToken();
+  const { home, about, counter, tenders, trucks } = ROUTE_KEYS;
   return (
-    <>
+    <div className={className}>
       <h1>{translate("navBar.intro")}</h1>
       <p>
         {/* trans can also be used to translate */}
         {Config.name} <Trans i18nKey="navBar.version">version:</Trans>
         {JSON.stringify(Config.version)}
+        <button
+          onClick={() => {
+            isAuthenticated ? logout() : login("/");
+          }}
+        >
+          {isAuthenticated ? `logout (${accessTokenPayload.email})` : "login"}
+        </button>
       </p>
 
       {/* This translation uses a formatter in the translation files  */}
       <p>{translate("navBar.currentDate", { date: DateTime.now().toJSDate() })}</p>
       <nav data-testid="nav">
-        <Link to="/" data-testid="nav.home">
+        <Link to={home} data-testid="nav.home">
           {translate("nav.home")}
         </Link>
-        <Link to="/about" data-testid="nav.about">
+        <Link to={about} data-testid="nav.about">
           {translate("nav.about")}
         </Link>
-        <Link to="/counter" data-testid="nav.counter">
+        <Link to={counter} data-testid="nav.counter">
           {translate("nav.counter")}
         </Link>
+        <Link to={tenders} data-testid="nav.tenders">
+          {translate("nav.tenders")}
+        </Link>
+        <Link to={trucks} data-testid="nav.trucks">
+          {translate("nav.trucks")}
+        </Link>
         <button onClick={() => i18n.changeLanguage("en")}>en</button>
         <button onClick={() => i18n.changeLanguage("nl")}>nl</button>
         <hr />
       </nav>
-    </>
+    </div>
   );
 };
+
+const StyledNavBar = styled(Navbar)`
+  nav a {
+    padding-right: 10px;
+  }
+`;
+
+export { StyledNavBar as Navbar };

src/infrastructure/navbar/TestComponent.tsx

@@ -0,0 +1,12 @@
+import { FunctionComponent } from "react";
+import styled from "styled-components";
+
+type Props = {};
+
+const TestComponent: FunctionComponent<Props> = () => {
+  return <h1>TestComponent</h1>;
+};
+
+const StyledTestComponent = styled(TestComponent)``;
+
+export { StyledTestComponent as TestComponent };

src/infrastructure/sso/Configuration.ts

@@ -0,0 +1,14 @@
+import { OidcConfiguration } from "@axa-fr/react-oidc/dist/vanilla/oidc";
+import { Config } from "../config";
+
+const { clientId, redirectUri, silentRedirectUri, scope, url } = Config.oidc;
+
+/* eslint-disable camelcase */
+export const SSOConfiguration: OidcConfiguration = {
+  client_id: clientId,
+  redirect_uri: redirectUri,
+  silent_redirect_uri: silentRedirectUri,
+  scope,
+  authority: url,
+  service_worker_only: false,
+};

src/infrastructure/sso/OidcProvider.tsx

@@ -0,0 +1,28 @@
+import { OidcProvider as ReactOidcProvider } from "@axa-fr/react-oidc";
+import { FunctionComponent, ReactNode } from "react";
+import { AppLoader } from "../loader/appLoader";
+import { SSOConfiguration } from "./Configuration";
+import { Authenticating } from "./overrides/Authenticating";
+import { AuthenticatingError } from "./overrides/AuthenticatingError";
+import { CallBackSuccess } from "./overrides/CallBackSuccess";
+import { ServiceWorkerNotSupported } from "./overrides/ServiceWorkerNotSupported";
+import { SessionLost } from "./overrides/SessionLost";
+
+type Props = { children?: ReactNode; [x: string]: any };
+
+export const OidcProvider: FunctionComponent<Props> = ({ children, ...rest }) => {
+  return (
+    <ReactOidcProvider
+      loadingComponent={AppLoader}
+      authenticatingErrorComponent={AuthenticatingError}
+      authenticatingComponent={Authenticating}
+      sessionLostComponent={SessionLost}
+      serviceWorkerNotSupportedComponent={ServiceWorkerNotSupported}
+      callbackSuccessComponent={CallBackSuccess}
+      configuration={SSOConfiguration}
+      {...rest}
+    >
+      {children}
+    </ReactOidcProvider>
+  );
+};

src/infrastructure/sso/models/OIDCConfig.tsx

@@ -0,0 +1,31 @@
+export interface OIDCConfig {
+  /**
+   * Authority URL
+   */
+  url: string;
+
+  /**
+   * Realm to authenticate against
+   */
+  realm: string;
+
+  /**
+   * Id of this client
+   */
+  clientId: string;
+
+  /**
+   * Scope(s) that you want to request
+   */
+  scope: string;
+
+  /**
+   * URI to redirect to after successful login
+   */
+  redirectUri: string;
+
+  /**
+   * redirect uri for the silent refresh
+   */
+  silentRedirectUri: string;
+}

src/infrastructure/sso/models/SSOResult.tsx

@@ -0,0 +1,3 @@
+export interface SSOResult {
+  configurationName: string;
+}

src/infrastructure/sso/overrides/Authenticating.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const Authenticating: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Authentication in progress for {configurationName}</h1>
+    <p>You will be redirected to the login page.</p>
+  </>
+);

src/infrastructure/sso/overrides/AuthenticatingError.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const AuthenticatingError: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Error for {configurationName}</h1>
+    <p>An error occurred during authentication.</p>
+  </>
+);

src/infrastructure/sso/overrides/CallBackSuccess.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const CallBackSuccess: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Authentication complete for {configurationName}</h1>
+    <p>You will be redirected...</p>
+  </>
+);

src/infrastructure/sso/overrides/ServiceWorkerNotSupported.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const ServiceWorkerNotSupported: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Unable to authenticate on this browser for {configurationName}</h1>
+    <p>Your browser is not configured to support Service Workers.</p>
+  </>
+);

src/infrastructure/sso/overrides/SessionLost.tsx

@@ -0,0 +1,17 @@
+import { useOidc } from "@axa-fr/react-oidc";
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const SessionLost: FunctionComponent<SSOResult> = ({ configurationName }) => {
+  const { login } = useOidc(configurationName);
+
+  return (
+    <>
+      <h1>Session timed out for {configurationName}</h1>
+      <p>Your session has expired. Please re-authenticate.</p>
+      <button type="button" onClick={() => login("/")}>
+        Login
+      </button>
+    </>
+  );
+};

src/setupProxy.js

@@ -0,0 +1,28 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+/**
+ * Create a simple proxy that automatically removes the prefix endpoint
+ * @param {*} app app to configure proxy on
+ * @param {*} endpoint endpoint you want to use for the proxy
+ * @param {*} target proxy target
+ */
+const createSimpleProxy = (app, endpoint, target) => {
+  app.use(
+    endpoint,
+    createProxyMiddleware({
+      target,
+      changeOrigin: true,
+      pathRewrite: {
+        [`^${endpoint}`]: "",
+      },
+    }),
+  );
+};
+
+/**
+ * Actual proxy configuration
+ * @param {*} app app to configure proxy on
+ */
+module.exports = function (app) {
+  createSimpleProxy(app, "/tendersguru", "https://tenders.guru");
+};