From 529c84f0fdb2e41b95bd6c2395241cffd059a9f1 Mon Sep 17 00:00:00 2001 From: Cameron Hutchison Date: Wed, 11 Dec 2024 13:23:31 -0600 Subject: [PATCH] Add UI E2E tests for the login page for OIDC being enabled and when it is disabled --- frontend/js/app/dashboard/main.ejs | 2 +- frontend/js/login/ui/login.ejs | 10 +- test/cypress/e2e/ui/Login.cy.js | 185 +++++++++++++++++++++++++++++ test/cypress/support/commands.js | 116 +++++++++++++++++- test/cypress/support/constants.js | 16 +++ 5 files changed, 321 insertions(+), 8 deletions(-) create mode 100644 test/cypress/e2e/ui/Login.cy.js create mode 100644 test/cypress/support/constants.js diff --git a/frontend/js/app/dashboard/main.ejs b/frontend/js/app/dashboard/main.ejs index c00aa6d0..94718a92 100644 --- a/frontend/js/app/dashboard/main.ejs +++ b/frontend/js/app/dashboard/main.ejs @@ -1,5 +1,5 @@
-

<%- i18n('dashboard', 'title', {name: getUserName()}) %>

+

<%- i18n('dashboard', 'title', {name: getUserName()}) %>

<% if (columns) { %> diff --git a/frontend/js/login/ui/login.ejs b/frontend/js/login/ui/login.ejs index 84aa90a0..3cde0a6f 100644 --- a/frontend/js/login/ui/login.ejs +++ b/frontend/js/login/ui/login.ejs @@ -17,19 +17,19 @@
<%- i18n('login', 'title') %>
- +
- -
+ +
- +
OR
-
diff --git a/test/cypress/e2e/ui/Login.cy.js b/test/cypress/e2e/ui/Login.cy.js new file mode 100644 index 00000000..2b17ffa8 --- /dev/null +++ b/test/cypress/e2e/ui/Login.cy.js @@ -0,0 +1,185 @@ +/// + +import {TEST_USER_EMAIL, TEST_USER_NICKNAME, TEST_USER_PASSWORD} from "../../support/constants"; + +describe('Login', () => { + beforeEach(() => { + // Clear all cookies and local storage so we start fresh + cy.clearCookies(); + cy.clearLocalStorage(); + }); + + describe('when OIDC is not enabled', () => { + beforeEach(() => { + cy.configureOidc(false); + cy.visit('/'); + }) + + it('should show the login form', () => { + cy.get('input[data-cy="identity"]').should('exist'); + cy.get('input[data-cy="password"]').should('exist'); + cy.get('button[data-cy="sign-in"]').should('exist'); + }); + + it('should NOT show the button to sign in with an identity provider', () => { + cy.get('button[data-cy="oidc-login"]').should('not.exist'); + }); + + describe('logging in with a username and password', () => { + // These tests are duplicated below. The difference is that OIDC is disabled here. + beforeEach(() => { + // Delete and recreate the test user + cy.deleteTestUser(); + cy.createTestUser(); + }); + + it('should log the user in when the credentials are correct', () => { + // Fill in the form with the test user's email and the correct password + cy.get('input[data-cy="identity"]').type(TEST_USER_EMAIL); + cy.get('input[data-cy="password"]').type(TEST_USER_PASSWORD); + + // Intercept the POST request to /api/tokens, so we can wait for it to complete before proceeding + cy.intercept('POST', '/api/tokens').as('login'); + + // Click the sign-in button + cy.get('button[data-cy="sign-in"]').click(); + cy.wait('@login'); + + // Expect a 200 from the backend + cy.get('@login').its('response.statusCode').should('eq', 200); + + // Expect the user to be redirected to the dashboard with a welcome message + cy.get('h1[data-cy="page-title"]').should('contain.text', `Hi ${TEST_USER_NICKNAME}`); + }); + + it('should show an error message if the password is incorrect', () => { + // Fill in the form with the test user's email and an incorrect password + cy.get('input[data-cy="identity"]').type(TEST_USER_EMAIL); + cy.get('input[data-cy="password"]').type(`${TEST_USER_PASSWORD}_obviously_not_correct`); + + // Intercept the POST request to /api/tokens, so we can wait for it to complete before checking the error message + cy.intercept('POST', '/api/tokens').as('login'); + + // Click the sign-in button + cy.get('button[data-cy="sign-in"]').click(); + cy.wait('@login'); + + // Expect a 401 from the backend + cy.get('@login').its('response.statusCode').should('eq', 401); + // Expect an error message on the UI + cy.get('div[data-cy="password-error"]').should('contain.text', 'Invalid password'); + }); + + it('should show an error message if the email is incorrect', () => { + // Fill in the form with the test user's email and an incorrect password + cy.get('input[data-cy="identity"]').type(`definitely_not_${TEST_USER_EMAIL}`); + cy.get('input[data-cy="password"]').type(TEST_USER_PASSWORD); + + // Intercept the POST request to /api/tokens, so we can wait for it to complete before checking the error message + cy.intercept('POST', '/api/tokens').as('login'); + + // Click the sign-in button + cy.get('button[data-cy="sign-in"]').click(); + cy.wait('@login'); + + // Expect a 401 from the backend + cy.get('@login').its('response.statusCode').should('eq', 401); + // Expect an error message on the UI + cy.get('div[data-cy="password-error"]').should('contain.text', 'No relevant user found'); + }); + }); + }); + + describe('when OIDC is enabled', () => { + beforeEach(() => { + cy.configureOidc(true); + cy.visit('/'); + }); + + it('should show the login form', () => { + cy.get('input[data-cy="identity"]').should('exist'); + cy.get('input[data-cy="password"]').should('exist'); + cy.get('button[data-cy="sign-in"]').should('exist'); + }); + + it('should show the button to sign in with the configured identity provider', () => { + cy.get('button[data-cy="oidc-login"]').should('exist'); + cy.get('button[data-cy="oidc-login"]').should('contain.text', 'Sign in with ACME OIDC Provider'); + }); + + describe('logging in with a username and password', () => { + // These tests are the same as the ones above, but we need to repeat them here because the OIDC configuration + beforeEach(() => { + // Delete and recreate the test user + cy.deleteTestUser(); + cy.createTestUser(); + }); + + it('should log the user in when the credentials are correct', () => { + // Fill in the form with the test user's email and the correct password + cy.get('input[data-cy="identity"]').type(TEST_USER_EMAIL); + cy.get('input[data-cy="password"]').type(TEST_USER_PASSWORD); + + // Intercept the POST request to /api/tokens, so we can wait for it to complete before proceeding + cy.intercept('POST', '/api/tokens').as('login'); + + // Click the sign-in button + cy.get('button[data-cy="sign-in"]').click(); + cy.wait('@login'); + + // Expect a 200 from the backend + cy.get('@login').its('response.statusCode').should('eq', 200); + + // Expect the user to be redirected to the dashboard with a welcome message + cy.get('h1[data-cy="page-title"]').should('contain.text', `Hi ${TEST_USER_NICKNAME}`); + + }); + + it('should show an error message if the password is incorrect', () => { + // Fill in the form with the test user's email and an incorrect password + cy.get('input[data-cy="identity"]').type(TEST_USER_EMAIL); + cy.get('input[data-cy="password"]').type(`${TEST_USER_PASSWORD}_obviously_not_correct`); + + // Intercept the POST request to /api/tokens, so we can wait for it to complete before checking the error message + cy.intercept('POST', '/api/tokens').as('login'); + + // Click the sign-in button + cy.get('button[data-cy="sign-in"]').click(); + cy.wait('@login'); + + // Expect a 401 from the backend + cy.get('@login').its('response.statusCode').should('eq', 401); + // Expect an error message on the UI + cy.get('div[data-cy="password-error"]').should('contain.text', 'Invalid password'); + }); + + it('should show an error message if the email is incorrect', () => { + // Fill in the form with the test user's email and an incorrect password + cy.get('input[data-cy="identity"]').type(`definitely_not_${TEST_USER_EMAIL}`); + cy.get('input[data-cy="password"]').type(TEST_USER_PASSWORD); + + // Intercept the POST request to /api/tokens, so we can wait for it to complete before checking the error message + cy.intercept('POST', '/api/tokens').as('login'); + + // Click the sign-in button + cy.get('button[data-cy="sign-in"]').click(); + cy.wait('@login'); + + // Expect a 401 from the backend + cy.get('@login').its('response.statusCode').should('eq', 401); + // Expect an error message on the UI + cy.get('div[data-cy="password-error"]').should('contain.text', 'No relevant user found'); + }); + }); + + describe('logging in with OIDC', () => { + beforeEach(() => { + // Delete and recreate the test user + cy.deleteTestUser(); + cy.createTestUser(); + }); + + // TODO: Create a dummy OIDC provider that we can use for testing so we can test this fully. + }); + }); +}); diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js index 7d602ecb..10c30a76 100644 --- a/test/cypress/support/commands.js +++ b/test/cypress/support/commands.js @@ -10,6 +10,13 @@ // import 'cypress-wait-until'; +import { + DEFAULT_ADMIN_EMAIL, + DEFAULT_ADMIN_PASSWORD, + TEST_USER_EMAIL, + TEST_USER_NAME, + TEST_USER_NICKNAME, TEST_USER_PASSWORD +} from "./constants"; Cypress.Commands.add('randomString', (length) => { var result = ''; @@ -40,13 +47,118 @@ Cypress.Commands.add('validateSwaggerSchema', (method, code, path, data) => { }).should('equal', null); }); +/** + * Configure OIDC settings in the backend, so we can test scenarios around OIDC being enabled or disabled. + */ +Cypress.Commands.add('configureOidc', (enabled) => { + cy.getToken().then((token) => { + if (enabled) { + cy.task('backendApiPut', { + token: token, + path: '/api/settings/oidc-config', + data: { + meta: { + name: 'ACME OIDC Provider', + clientID: 'clientID', + clientSecret: 'clientSecret', + // TODO: Create dummy OIDC provider for testing + issuerURL: 'https://oidc.example.com', + redirectURL: 'https://redirect.example.com/api/oidc/callback', + enabled: true, + } + }, + }) + } else { + cy.task('backendApiPut', { + token: token, + path: '/api/settings/oidc-config', + data: { + meta: { + name: '', + clientID: '', + clientSecret: '', + issuerURL: '', + redirectURL: '', + enabled: false, + } + }, + }) + } + }); +}); + +/** + * Create a new user in the backend for testing purposes. + * + * The created user will have a name, nickname, email, and password as defined in the constants file (TEST_USER_*). + * + * @param {boolean} withPassword Whether to create the user with a password or not (default: true) + */ +Cypress.Commands.add('createTestUser', (withPassword) => { + if (withPassword === undefined) { + withPassword = true; + } + + cy.getToken().then((token) => { + cy.task('backendApiPost', { + token: token, + path: '/api/users', + data: { + name: TEST_USER_NAME, + nickname: TEST_USER_NICKNAME, + email: TEST_USER_EMAIL, + roles: ['admin'], + is_disabled: false, + auth: withPassword ? { + type: 'password', + secret: TEST_USER_PASSWORD + } : {} + } + }) + }); +}); + + +/** + * Delete the test user from the backend. + * The test user is identified by the email address defined in the constants file (TEST_USER_EMAIL). + * + * This command will only attempt to delete the test user if it exists. + */ +Cypress.Commands.add('deleteTestUser', () => { + cy.getToken().then((token) => { + cy.task('backendApiGet', { + token: token, + path: '/api/users', + }).then((data) => { + // Find the test user + const testUser = data.find(user => user.email === TEST_USER_EMAIL); + + // If the test user doesn't exist, we don't need to delete it + if (!testUser) { + return; + } + + // Delete the test user + cy.task('backendApiDelete', { + token: token, + path: `/api/users/${testUser.id}`, + }); + }); + }); +}); + +/** + * Get a new token from the backend. + * The token will be created using the default admin email and password defined in the constants file (DEFAULT_ADMIN_*). + */ Cypress.Commands.add('getToken', () => { // login with existing user cy.task('backendApiPost', { path: '/api/tokens', data: { - identity: 'admin@example.com', - secret: 'changeme' + identity: DEFAULT_ADMIN_EMAIL, + secret: DEFAULT_ADMIN_PASSWORD } }).then(res => { cy.wrap(res.token); diff --git a/test/cypress/support/constants.js b/test/cypress/support/constants.js new file mode 100644 index 00000000..9e2edcab --- /dev/null +++ b/test/cypress/support/constants.js @@ -0,0 +1,16 @@ +// Description: Constants used in the tests. + +/** + * The default admin user is used to get tokens from the backend API to make requests. + * It is also used to create the test user. + */ +export const DEFAULT_ADMIN_EMAIL = Cypress.env('DEFAULT_ADMIN_EMAIL') || 'admin@example.com'; +export const DEFAULT_ADMIN_PASSWORD = Cypress.env('DEFAULT_ADMIN_PASSWORD') || 'changeme'; + +/** + * The test user is created and deleted by the tests using `cy.createTestUser()` and `cy.deleteTestUser()`. + */ +export const TEST_USER_NAME = 'Robert Ross'; +export const TEST_USER_NICKNAME = 'Bob'; +export const TEST_USER_EMAIL = 'bob@ross.com'; +export const TEST_USER_PASSWORD = 'changeme';