Added login command for cypress and SSO protected pages

This commit is contained in:
Rick van Lieshout 2022-08-25 14:10:46 +02:00
parent e20fea679a
commit f76f91e667
9 changed files with 121 additions and 44 deletions

View File

@ -4,6 +4,10 @@ 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

View File

@ -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",
},
});

13
cypress/e2e/tenders.cy.ts Normal file
View File

@ -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");
});
});

View File

@ -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;
});
});

View File

@ -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>
// }
// }
// }

View File

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

14
cypress/support/index.ts Normal file
View File

@ -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>>;
}
}
}

37
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "react-starter-kit",
"version": "0.6.1",
"version": "0.7.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "react-starter-kit",
"version": "0.6.1",
"version": "0.7.0",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@ -32,6 +32,7 @@
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.3.0",
"@types/jest": "^28.1.6",
"@types/jwt-decode": "^3.1.0",
"@types/luxon": "^3.0.0",
"@types/node": "^18.6.1",
"@types/react": "^18.0.15",
@ -73,6 +74,7 @@
"jest-junit": "^14.0.0",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"jwt-decode": "^3.1.2",
"lint-staged": "^13.0.3",
"mini-css-extract-plugin": "^2.6.1",
"mocha-junit-reporter": "^2.0.2",
@ -4279,6 +4281,16 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true
},
"node_modules/@types/jwt-decode": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-3.1.0.tgz",
"integrity": "sha512-tthwik7TKkou3mVnBnvVuHnHElbjtdbM63pdBCbZTirCt3WAdM73Y79mOri7+ljsS99ZVwUFZHLMxJuJnv/z1w==",
"deprecated": "This is a stub types definition. jwt-decode provides its own type definitions, so you do not need this installed.",
"dev": true,
"dependencies": {
"jwt-decode": "*"
}
},
"node_modules/@types/luxon": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.0.0.tgz",
@ -13992,6 +14004,12 @@
"node": ">=4.0"
}
},
"node_modules/jwt-decode": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==",
"dev": true
},
"node_modules/keypress": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/keypress/-/keypress-0.2.1.tgz",
@ -24254,6 +24272,15 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true
},
"@types/jwt-decode": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-3.1.0.tgz",
"integrity": "sha512-tthwik7TKkou3mVnBnvVuHnHElbjtdbM63pdBCbZTirCt3WAdM73Y79mOri7+ljsS99ZVwUFZHLMxJuJnv/z1w==",
"dev": true,
"requires": {
"jwt-decode": "*"
}
},
"@types/luxon": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.0.0.tgz",
@ -31486,6 +31513,12 @@
"object.assign": "^4.1.2"
}
},
"jwt-decode": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==",
"dev": true
},
"keypress": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/keypress/-/keypress-0.2.1.tgz",

View File

@ -1,6 +1,6 @@
{
"name": "react-starter-kit",
"version": "0.6.2",
"version": "0.7.0",
"description": "A modern, create-react-app-based, starter kit for React projects",
"keywords": [
"react",
@ -67,6 +67,7 @@
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.3.0",
"@types/jest": "^28.1.6",
"@types/jwt-decode": "^3.1.0",
"@types/luxon": "^3.0.0",
"@types/node": "^18.6.1",
"@types/react": "^18.0.15",
@ -108,6 +109,7 @@
"jest-junit": "^14.0.0",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"jwt-decode": "^3.1.2",
"lint-staged": "^13.0.3",
"mini-css-extract-plugin": "^2.6.1",
"mocha-junit-reporter": "^2.0.2",