refactor: extract login from Cypress tests #981

gminetoma · 2025-01-24T06:05:13Z

Resolves #797

PR title follows Conventional Commits specs

🔧 What changed

✨ Linting

Fixed Cypress linting

🧪 Test Environment

Added Yarn support for .env.test to securely manage environment
variables required for testing. The .env.test file includes:

AUTH0_DOMAIN
AUTH0_USERNAME
AUTH0_PASSWORD

These variables are critical for the Auth0 login process. To ensure
security, only authorized individuals will have access to the
.env.test file, and it has been added to .gitignore to prevent
accidental commits of sensitive information.

🤖 Cypress

Add Cypress cy.login() custom command

Introduce an utils file with the following functions:
- auth0Login: Handles the Auth0 login routine
- hasOperation: Checks the request query for a specific operation
- aliasQuery: Adds an alias for an operation and stubs it
Change file extensions to .ts
Add Cypress plugin types to tsconfig.json
Import Cypress plugins in e2e.ts

This introduces a custom cy.login() command for Cypress that
uses the Auth0 login routine to create a login session. This optimizes
testing by reducing the need for repetitive logins during tests.

Additionally, it adds utility functions to simplify the manipulation of
GraphQL requests. Furthermore, Cypress plugins are now imported in a
centralized e2e.ts file, eliminating the need to import them
individually in each test file.

📝 Cypress Tests

Simplify login process and enhance cypress.intercept usage

Remove unnecessary plugin imports
Directly import JSON fake data
Use the new cy.login() command
Separate each test suite into a different spec file

This refactor streamlines the login process for tests, improving both
speed and efficiency. Instead of using fixtures for fake data, JSON
files are now directly imported, as fixtures are unnecessary due to how
GraphQL requests are manipulated.

Cypress plugin imports have been centralized in the support file,
removing the need for redundant imports in individual test files.

Additionally, test suites have been separated into different spec files
for better organization and maintainability.

🎬 GitHub Actions

Updated the configuration to ensure GitHub Actions runs E2E tests
using our custom command (yarn test:e2e) and GitHub secrets.
This guarantees that the tests follow our defined configurations,
ensuring consistency between local development and CI environments.

📑 References:

https://www.npmjs.com/package/eslint-plugin-cypress
https://www.npmjs.com/package/cypress-plugin-tab
https://docs.cypress.io/app/guides/network-requests#Working-with-GraphQL
https://docs.cypress.io/app/guides/authentication-testing/auth0-authentication
https://github.com/dmtrKovalenko/cypress-real-events#readme
https://github.com/cypress-io/github-action

netlify · 2025-01-24T06:05:29Z

✅ Deploy Preview for findadoc ready!

Name	Link
🔨 Latest commit	`a54a4ec`
🔍 Latest deploy log	https://app.netlify.com/sites/findadoc/deploys/67a24917fbe5810008198cfc
😎 Deploy Preview	https://deploy-preview-981--findadoc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

gminetoma · 2025-01-24T16:32:00Z

@NabbeunNabi

.env.test

NabbeunNabi

@gminetoma great work. Just a few initial questions

NabbeunNabi · 2025-01-25T10:52:26Z

.yarnrc.yml

@@ -5,3 +5,6 @@ enableGlobalCache: false
 nodeLinker: node-modules

 yarnPath: .yarn/releases/yarn-4.4.0.cjs
+
+injectEnvironmentFiles:
+  - .env.test?


Should this be changed to github secrets for the CI/CD?

The way it is now (with the env file and the Cypress action config) is working because yarn is loading the env variables. This should be changed if don't have the env file anymore.

I feel like there's a better option here like importing through the yarn command in package.json or through the yaml file 🤔

@ermish

We could install a package like dotenv or cross-env to set the env file in a yarn command.

I think we can't use the yaml file because we still want to load the variables during the development while creating moderation tests.

Those are fine to add 👍
we're actively using both of them in our projects already

This issue is solved here: [#981](#981)

ermish · 2025-01-26T02:35:28Z

eslint.config.js

@@ -94,32 +94,12 @@ export default withNuxt(
            'vue/html-indent': ['error', 4]
        }
    },
-    // Linting for tests (cypress + pinia)
+    // Linting for Cypress (https://www.npmjs.com/package/eslint-plugin-cypress)


We want to keep support for our pinia tests so we should split this config section into two then. One for cypress and one for pinia files.

Currently, for Pinia tests, we are using Vitest. I'm already addressing its rules here:
Issues: #982
Commit: commit

ermish · 2025-01-26T02:37:54Z

eslint.config.js

-            cypress: pluginCypress
-        },
+        files: ['test/cypress/**/*'],
+        ...pluginCypress.configs.recommended,


Did you check that we actually want all the rules from here? I haven't checked cypress recommended, but it's pretty common they can be more annoying than helpful.
I'm ok with it if we check they make sense first 🙏

Please confirm on this one

We are not using any rules for Cypress right now. We are using the plugin only for the globals. We are overriding the rules as you can see here.

// Linting for Cypress (https://www.npmjs.com/package/eslint-plugin-cypress) { files: ['test/cypress/**/*'], ...pluginCypress.configs.recommended, rules: { 'cypress/no-unnecessary-waiting': 'off' } }

I would recommend activating the rules since they follow Cypress best practices. I tested the recommended rules, and we will have a lot to refactor if we decide to activate them.

Here are the plugin's recommended options:

Object.assign(plugin.configs, { recommended: { name: 'cypress/recommended', plugins: { cypress: plugin }, rules: { 'cypress/no-assigning-return-values': 'error', 'cypress/no-unnecessary-waiting': 'error', 'cypress/no-async-tests': 'error', 'cypress/unsafe-to-chain-command': 'error', }, languageOptions: { globals: commonGlobals, ...commonLanguageOptions } } })

Cypress recommended rules
Cypress best practices

I agree we should activate them 👍 let's do it in a separate PR though with the corresponding changes

I was thinking it would add the rules in addition to ours but I realized it's the config section and not the rules set

@ermish

Do you want me to move all the linting part to another PR? Should I remove the commit?

ermish

Added some comments

ermish · 2025-01-31T09:03:02Z

test/cypress/utils.ts

+}
+
+// https://docs.cypress.io/app/guides/network-requests#Working-with-GraphQL
+export const aliasQuery = (req: IncomingHttpRequest, operation: string, responseBody: unknown) => {


What is this for? I can't tell from quickly reading it

Set the alias for a request based on the operation name. After setting it, we can use cy.wait(@{alias}).

I'm following the Cypress documentation for working with GraphQL.

ermish · 2025-01-31T09:03:53Z

test/cypress/utils.ts

+    })
+}
+
+export const hasOperation = (req: IncomingHttpRequest, operation) => {


Why do we need this?

Check if the GraphQL operation is included in the request body

ermish · 2025-01-31T09:05:21Z

test/cypress/utils.ts

+}
+
+// https://docs.cypress.io/api/commands/intercept#Interception-lifecycle
+export const requestHandler = (req: IncomingHttpRequest) => {


Since this is only doing one purpose of clearing the cache, that would be a better function name here

const preventRequestCache = (req: IncomingHttpRequest) => { req.on('before:response', res => { // force all API responses to not be cached res.headers['cache-control'] = 'no-store' }) }

ermish · 2025-01-31T09:06:30Z

test/cypress/support/index.d.ts

-            isInViewport(args?: string): Chainable<JQuery<HTMLElement>>
-            isNotInViewport(args?: string): Chainable<JQuery<HTMLElement>>
-        }
+declare namespace Cypress{


Can this type come from cypress types or an @types/cypress library?

We are using the Cypress namespace, and we don't have @types/cypress. We are extending the Cypress namespace with our custom command.

Types for custom commands

Sorry, I think I didn't understand your question. Could you elaborate more, please?

ermish · 2025-01-31T09:08:24Z

test/cypress/support/commands.ts

+        autoEnd: false
+    })
+
+    log.snapshot('before')


Instead of "before" and "after", can be more explicit like
"connecting to auth0"
And
"Successfully logged in"

I don't know if you meant to ask this, but those snapshots are only for debugging.

To me, it doesn’t make much sense to do it this way. 'Before' the auth and 'After' makes more sense to me.

If this is your intention, I'll do it your way.

ermish · 2025-01-31T09:08:43Z

eslint.config.js

-            cypress: pluginCypress
-        },
+        files: ['test/cypress/**/*'],
+        ...pluginCypress.configs.recommended,


Please confirm on this one

socket-security · 2025-02-03T09:24:49Z

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

- Set the correct Cypress path - Set eslint-plugin-cypress config to recommended Reference: https://www.npmjs.com/package/eslint-plugin-cypress

- Add Cypress environment variables in `cypress.config` - Remove unnecessary support folder configuration - Change e2e support file extension to `.ts` - Update `.gitignore` to ignore `.env.test` Added Yarn support for `.env.test` to securely manage environment variables required for testing. The `.env.test` file includes: - `AUTH0_DOMAIN` - `AUTH0_USERNAME` - `AUTH0_PASSWORD` These variables are critical for the Auth0 login process. To ensure security, only authorized individuals will have access to the `.env.test` file, and it has been added to `.gitignore` to prevent accidental commits of sensitive information.

- Introduce a utils file with the following functions: - `auth0Login`: Handles the Auth0 login routine - `hasOperation`: Checks the request query for a specific operation - `aliasQuery`: Adds an alias for an operation and stubs it - Change file extensions to `.ts` - Add Cypress plugin types to `tsconfig.json` - Import Cypress plugins in `e2e.ts` This commit introduces a custom `cy.login()` command for Cypress that uses the Auth0 login routine to create a login session. This optimizes testing by reducing the need for repetitive logins during tests. Additionally, it adds utility functions to simplify the manipulation of GraphQL requests. Furthermore, Cypress plugins are now imported in a centralized `e2e.ts` file, eliminating the need to import them individually in each test file. References: https://docs.cypress.io/app/guides/network-requests#Working-with-GraphQL https://docs.cypress.io/app/guides/authentication-testing/auth0-authentication https://github.com/dmtrKovalenko/cypress-real-events#readme https://www.npmjs.com/package/cypress-plugin-tab

- Remove unnecessary plugin imports - Directly import JSON fake data - Use the new `cy.login()` command - Separate each test suite into a different spec file This refactor streamlines the login process for tests, improving both speed and efficiency. Instead of using fixtures for fake data, JSON files are now directly imported, as fixtures are unnecessary due to how GraphQL requests are manipulated. Cypress plugin imports have been centralized in the support file, removing the need for redundant imports in individual test files. Additionally, test suites have been separated into different spec files for better organization and maintainability.

- Remove the `--record` and `--key` parameters Updated the e2e tests to use the default browser instead of Chrome. Chrome requires manual permissions for certain actions, such as copying text, which can disrupt automated testing. This change ensures a smoother and more reliable testing process. Additionally, removing the `--record` parameter restores the runner UI in screenshots. This is essential for debugging issues in CLI mode, as the UI provides critical context for test failures.

Updated the configuration to ensure GitHub Actions runs e2e tests using our custom command (`yarn test:e2e`). This guarantees that the tests use our defined configurations, providing consistency between local development and CI environments.

Co-authored-by: Cinnamoroll <[email protected]>

- Add `dotenv-cli` to load environment variables from `.env` files - Add a new package script: - `test:e2e:open` - Opens the Cypress UI with `.env.test` variables Introduced `dotenv-cli` to simplify loading environment variables for tests. Due to `dotenv-cli` loading the env variables only after `--`, additional scripts were added to ensure proper loading. - Use `yarn test:e2e` and `yarn test:e2e:open` for running tests. - Other scripts are included only for debugging and running Cypress commands. - These commands will not work without the `.env.test` file.

Issue appeared after merging [#989](#989)

socket-security · 2025-02-04T17:06:44Z

Report too large to display inline

View full report↗︎

gminetoma linked an issue Jan 24, 2025 that may be closed by this pull request

Refactor the login on moderation into the cypress.config.ts #797

Open

3 tasks

gminetoma changed the title ~~Refactor/cypress login~~ refactor: extract login from Cypress tests Jan 24, 2025

gminetoma force-pushed the refactor/cypress-login branch 2 times, most recently from 263c85e to fe4eeaf Compare January 24, 2025 07:05

gminetoma self-assigned this Jan 24, 2025

gminetoma added code quality testing cypress Tests related to user interface interactions using Cypress. labels Jan 24, 2025

gminetoma force-pushed the refactor/cypress-login branch 17 times, most recently from 032c510 to 6b82aff Compare January 24, 2025 16:26

gminetoma requested a review from NabbeunNabi January 25, 2025 04:52

NabbeunNabi reviewed Jan 25, 2025

View reviewed changes

.env.test Outdated Show resolved Hide resolved

NabbeunNabi reviewed Jan 25, 2025

View reviewed changes

gminetoma force-pushed the refactor/cypress-login branch from 480d9c7 to f50356c Compare January 25, 2025 12:43

gminetoma requested a review from NabbeunNabi January 25, 2025 12:55

gminetoma marked this pull request as ready for review January 25, 2025 12:56

gminetoma requested review from theyokohamalife and ermish as code owners January 25, 2025 12:56

gminetoma added a commit that referenced this pull request Jan 27, 2025

fix: ignore Cypress folder

ee1b281

This issue is solved here: [#981](#981)

ermish requested changes Jan 31, 2025

View reviewed changes

gminetoma force-pushed the refactor/cypress-login branch from e7d00a6 to a3674fc Compare February 3, 2025 09:23

gminetoma requested a review from ermish February 3, 2025 09:27

gminetoma force-pushed the refactor/cypress-login branch from b4d5b4c to 8c09bd3 Compare February 3, 2025 09:32

gminetoma removed the request for review from NabbeunNabi February 3, 2025 10:26

gminetoma force-pushed the refactor/cypress-login branch 2 times, most recently from 9bc8279 to c432760 Compare February 3, 2025 10:29

gminetoma and others added 11 commits February 5, 2025 01:26

fix: Cypress eslint config

1fc611c

- Set the correct Cypress path - Set eslint-plugin-cypress config to recommended Reference: https://www.npmjs.com/package/eslint-plugin-cypress

fix: typo - healthcareprofessionals to healthcareProfessionals

2c3dc41

hack: ignore vitest (eslint is broken)

4a10d82

refactor: run e2e tests using yarn test:e2e

643d834

Updated the configuration to ensure GitHub Actions runs e2e tests using our custom command (`yarn test:e2e`). This guarantees that the tests use our defined configurations, providing consistency between local development and CI environments.

feat: add Cypress GitHub secrets

0388693

Co-authored-by: Cinnamoroll <[email protected]>

refactor: add comments and moved unused exports

989417a

gminetoma force-pushed the refactor/cypress-login branch from c432760 to 989417a Compare February 4, 2025 16:31

test: fix moderation dashboard test order

a54a4ec

Issue appeared after merging [#989](#989)

gminetoma force-pushed the refactor/cypress-login branch from 819a841 to a54a4ec Compare February 4, 2025 17:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: extract login from Cypress tests #981

refactor: extract login from Cypress tests #981

gminetoma commented Jan 24, 2025 •

edited

Loading

netlify bot commented Jan 24, 2025 •

edited

Loading

gminetoma commented Jan 24, 2025

NabbeunNabi left a comment

NabbeunNabi Jan 25, 2025

gminetoma Jan 25, 2025

ermish Jan 26, 2025

gminetoma Jan 27, 2025 •

edited

Loading

ermish Jan 31, 2025

ermish Jan 26, 2025

gminetoma Jan 31, 2025

ermish Jan 26, 2025

ermish Jan 31, 2025

gminetoma Jan 31, 2025 •

edited

Loading

ermish Jan 31, 2025

ermish Jan 31, 2025

gminetoma Jan 31, 2025 •

edited

Loading

ermish left a comment

ermish Jan 31, 2025

gminetoma Jan 31, 2025

ermish Jan 31, 2025

gminetoma Jan 31, 2025

ermish Jan 31, 2025

gminetoma Jan 31, 2025

ermish Jan 31, 2025

gminetoma Jan 31, 2025

ermish Jan 31, 2025

gminetoma Jan 31, 2025 •

edited

Loading

ermish Jan 31, 2025

socket-security bot commented Feb 3, 2025 •

edited

Loading

socket-security bot commented Feb 4, 2025

refactor: extract login from Cypress tests #981

Are you sure you want to change the base?

refactor: extract login from Cypress tests #981

Conversation

gminetoma commented Jan 24, 2025 • edited Loading

🔧 What changed

✨ Linting

🧪 Test Environment

🤖 Cypress

📝 Cypress Tests

🎬 GitHub Actions

📑 References:

netlify bot commented Jan 24, 2025 • edited Loading

✅ Deploy Preview for findadoc ready!

gminetoma commented Jan 24, 2025

NabbeunNabi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gminetoma Jan 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gminetoma Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gminetoma Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

ermish left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gminetoma Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

socket-security bot commented Feb 3, 2025 • edited Loading

socket-security bot commented Feb 4, 2025

gminetoma commented Jan 24, 2025 •

edited

Loading

netlify bot commented Jan 24, 2025 •

edited

Loading

gminetoma Jan 27, 2025 •

edited

Loading

gminetoma Jan 31, 2025 •

edited

Loading

gminetoma Jan 31, 2025 •

edited

Loading

gminetoma Jan 31, 2025 •

edited

Loading

socket-security bot commented Feb 3, 2025 •

edited

Loading