fix: upgrade react-router-dom from 6.8.2 to 6.9.0

Snyk has created this PR to upgrade react-router-dom from 6.8.2 to 6.9.0.

See this package in npm:
https://www.npmjs.com/package/react-router-dom

See this project in Snyk:
https://app.snyk.io/org/mastermindzh/project/1579c544-8846-4f3a-a47d-08a9afd505f2?utm_source=github&utm_medium=referral&page=upgrade-pr

.gitignore

@@ -70,3 +70,7 @@ bundle.zip
 cypress/videos
 cypress/screenshots
 dist-tests/**
+
+# ignore oidc fetch files
+public/OidcServiceWorker.js
+public/OidcTrustedDomains.js

CHANGELOG.md

@@ -4,6 +4,14 @@ 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.7.0] - 2022-08-25
+
+- Added login command for cypress and SSO protected pages
+
+## [0.6.2] - 2022-08-15
+
+- Added CypressStrictMode
+
 ## [0.6.1] - 2022-08-08
 
 - eslint now receives the glob itself

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.17.3
+FROM nginx:1.22.1
 
 RUN mkdir -p /usr/share/nginx/html
 COPY dist/ /usr/share/nginx/html

cypress.config.ts

@@ -13,4 +13,13 @@ export default defineConfig({
     mochaFile: "dist-tests/test-results/cypress/[hash].xml",
     outputs: true,
   },
+  env: {
+    oidcUrl: "https://sso.mastermindzh.tech/realms/public-tests/protocol/openid-connect/token",
+    oidcClientId: "demo",
+    oidcClientSecret: "lhlPHFUd3fC1Ky0Uwyb2ssC0XiAFeGGF",
+    oidcGrantType: "client_credentials",
+    oidcScope: "openid profile email",
+    oidcToken: "",
+    oidcCallbackUrl: "http://localhost:3000/authentication/callback",
+  },
 });

cypress/e2e/tenders.cy.ts

@@ -0,0 +1,13 @@
+describe("Tenders page", () => {
+  beforeEach(() => {
+    cy.oidcLogin();
+    // you can check that the user is logged in on this page:
+    cy.visit("http://localhost:3000");
+  });
+
+  it("Should navigate to tenders when clicking on Tenders", () => {
+    cy.get('[data-testid="nav.tenders"]').click();
+    cy.contains("tenders");
+    cy.contains("page_count");
+  });
+});

cypress/support/auth/commands.ts

@@ -0,0 +1,41 @@
+/// <reference types="cypress" />
+/* eslint-disable camelcase */
+import jwt_decode from "jwt-decode";
+import "./../index";
+
+Cypress.Commands.add("oidcLogin", () => {
+  const options = {
+    method: "POST",
+    url: Cypress.env("oidcUrl"),
+    form: true,
+    body: {
+      grant_type: Cypress.env("oidcGrantType"),
+      client_id: Cypress.env("oidcClientId"),
+      client_secret: Cypress.env("oidcClientSecret"),
+      scope: Cypress.env("oidcScope"),
+    },
+  };
+
+  return cy.request(options).then((response) => {
+    const { access_token, expires_in, id_token, token_type, scope } = response.body;
+    const accessTokenPayload = jwt_decode(access_token);
+    // stub email on the result, as service accounts don't generally have them but we use it in the UI
+    (accessTokenPayload as any).email = "cypress@e2e.email";
+
+    window.sessionStorage.setItem(
+      `oidc.default:${Cypress.env("oidcCallbackUrl")}`,
+      JSON.stringify({
+        tokens: {
+          accessToken: access_token,
+          expiresIn: expires_in,
+          idToken: id_token,
+          tokenType: token_type,
+          idTokenPayload: jwt_decode(id_token),
+          accessTokenPayload,
+          scope,
+        },
+      }),
+    );
+    return response;
+  });
+});

cypress/support/commands.ts

@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }

cypress/support/e2e.ts

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

cypress/support/index.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+// load type definitions that come with Cypress module
+/// <reference types="cypress" />
+export {};
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Login to the oidc provider
+       */
+      oidcLogin(): Chainable<Response<any>>;
+    }
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-starter-kit",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A modern, create-react-app-based, starter kit for React projects",
   "keywords": [
     "react",
@@ -45,95 +45,97 @@
     "*.{ts,js,jsx,tsx,css,scss,json,md}": "prettier --write"
   },
   "dependencies": {
-    "@axa-fr/react-oidc": "^6.0.0-beta10",
+    "@axa-fr/react-oidc": "^6.10.8",
-    "@reduxjs/toolkit": "^1.8.3",
+    "@reduxjs/toolkit": "^1.9.3",
-    "deepmerge": "^4.2.2",
+    "deepmerge": "^4.3.0",
-    "i18next-http-backend": "^1.4.1",
+    "i18next-http-backend": "^2.1.1",
-    "luxon": "^2.4.0",
+    "luxon": "^3.1.0",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.2",
+    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.9.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.20.2",
     "@mastermindzh/prettier-config": "^1.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.5.1",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.3.0",
+    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^29.2.2",
-    "@types/luxon": "^3.0.0",
+    "@types/jwt-decode": "^3.1.0",
-    "@types/node": "^18.6.1",
+    "@types/luxon": "^3.1.0",
-    "@types/react": "^18.0.15",
+    "@types/node": "^18.11.9",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.25",
-    "@types/styled-components": "^5.1.25",
+    "@types/react-dom": "^18.0.8",
-    "babel-jest": "^27.4.2",
+    "@types/styled-components": "^5.1.26",
-    "babel-loader": "^8.2.5",
+    "babel-jest": "^29.3.0",
+    "babel-loader": "^9.1.0",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
-    "browserslist": "^4.21.2",
+    "browserslist": "^4.21.4",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "concurrently": "^7.3.0",
+    "concurrently": "^7.5.0",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
+    "css-minimizer-webpack-plugin": "^4.2.2",
-    "cypress": "^10.3.1",
+    "cypress": "^10.11.0",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.0.3",
-    "dotenv-expand": "^5.1.0",
+    "dotenv-expand": "^9.0.0",
-    "eslint": "^8.20.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-watch": "^8.0.0",
     "eslint-webpack-plugin": "^3.2.0",
     "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",
+    "husky": "^8.0.2",
-    "i18next": "^21.8.14",
+    "i18next": "^22.0.4",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-browser-languagedetector": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "immer": "^9.0.15",
+    "immer": "^9.0.16",
-    "jest": "^27.4.3",
+    "jest": "^29.3.0",
-    "jest-environment-jsdom": "^27.4.3",
+    "jest-environment-jsdom": "^29.3.0",
-    "jest-junit": "^14.0.0",
+    "jest-junit": "^14.0.1",
-    "jest-resolve": "^27.4.2",
+    "jest-resolve": "^29.3.0",
-    "jest-watch-typeahead": "^1.0.0",
+    "jest-watch-typeahead": "^2.2.0",
+    "jwt-decode": "^3.1.2",
     "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.6.1",
-    "mocha-junit-reporter": "^2.0.2",
+    "mocha-junit-reporter": "^2.1.1",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.18",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^7.0.1",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.7.2",
+    "postcss-preset-env": "^7.8.2",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "prompts": "^2.4.2",
-    "react-i18next": "^11.18.1",
+    "react-i18next": "^12.0.0",
     "react-refresh": "^0.14.0",
     "resolve": "^1.22.1",
-    "resolve-url-loader": "^4.0.0",
+    "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^12.3.0",
+    "sass-loader": "^13.1.0",
-    "semver": "^7.3.7",
+    "semver": "^7.3.8",
-    "source-map-loader": "^3.0.0",
+    "source-map-loader": "^4.0.1",
     "start-server-and-test": "^1.14.0",
     "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.3",
+    "terser-webpack-plugin": "^5.3.6",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.4",
-    "web-vitals": "^2.1.4",
+    "web-vitals": "^3.0.4",
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
-    "webpack-dev-server": "^4.9.3",
+    "webpack-dev-server": "^4.11.1",
-    "webpack-manifest-plugin": "^4.0.2",
+    "webpack-manifest-plugin": "^5.0.0",
-    "workbox-webpack-plugin": "^6.5.3"
+    "workbox-webpack-plugin": "^6.5.4"
   }
 }

src/index.tsx

@@ -1,9 +1,9 @@
-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 { CypressStrictMode } from "./infrastructure/CypressStrictMode";
 import "./infrastructure/i18n/init";
 import { OidcProvider } from "./infrastructure/sso/OidcProvider";
 import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
@@ -27,7 +27,7 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 root.render(
-  <React.StrictMode>
+  <CypressStrictMode>
     <GlobalStyle />
     <Provider store={store}>
       <OidcProvider>
@@ -36,7 +36,7 @@ root.render(
         </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>;
+  }
+};