Setup Cypress UI testing #234

Griffin-Sullivan · 2024-07-30T19:35:05Z

Description

This PR adds all of the setup and configuration for running Cypress mock tests. I've also included some changes that will account for adding things like code coverage and e2e testing in the future. At the moment, I wrote one small test to show that the tests are working which checks that the home page loads and the 404 page loads. I also removed a unit test file, as we are planning to add unit tests in a future PR and figured it'd be better to start with a clean slate.

How Has This Been Tested?

So far I have been npm run commands in the ./clients/ui/frontend directory. Making sure the commands I added to package.json work like building, serving, and running mock tests.

To test the changes you can:

cd clients/ui/frontend
npm install
npm run cypress:run:mock

Merge criteria:

The commits and have meaningful messages; the author will squash them after approval or will ask to merge with squash.
Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
The developer has manually tested the changes and verified that the changes work

ederign · 2024-07-31T11:45:02Z

@Griffin-Sullivan, I'll be back tomorrow to review this PR. Sorry for the delay on it!

lucferbux

Ok, I've left a couple of comments here, I'm running the commands now, if I find something else I'll re-review it.

lucferbux · 2024-08-01T10:29:15Z

clients/ui/frontend/.env.cypress.mock

@@ -0,0 +1,2 @@
+# Test against prod build hosted by lightweight http server
+BASE_URL=http://localhost:9001


We'll need to do a follow up to better handled .env variables.

I've created a follow up doc to handle this, but it's more than enough right now.

lucferbux · 2024-08-01T10:42:47Z

clients/ui/frontend/src/__tests__/cypress/cypress.config.ts

+import { env, BASE_URL } from '~/src/__tests__/cypress/cypress/utils/testConfig';
+
+
+const resultsDir = `${env.CY_RESULTS_DIR || 'results'}/${env.CY_MOCK ? 'mocked' : 'e2e'}`;


We need to be sure we carry over som of these env variables to either a .env file or a package.json command, where CY_RESULTS_DIR comes from? if we get the default, it might be great to document it somewhere.

lucferbux · 2024-08-01T10:44:04Z

clients/ui/frontend/src/__tests__/cypress/cypress.config.ts

+  videosFolder: `${resultsDir}/videos`,
+  env: {
+    MOCK: !!env.CY_MOCK,
+    coverage: !!env.CY_COVERAGE,


Same as this, we got a cypress:run:mock_coverage command with that env variable set to true, but here it will be always false, should we add that command or just handle this?

lucferbux · 2024-08-01T10:45:32Z

clients/ui/frontend/src/__tests__/cypress/cypress/utils/testConfig.ts

+  }),
+);
+
+export const BASE_URL = env.BASE_URL || '';


Ok great, we'll need to do follow ups with env variables, but head to a great start here.

ederign · 2024-08-01T17:27:05Z

@Griffin-Sullivan can you also update ../ui/frontend/docs/dev-setup.md together with this PR?

ederign · 2024-08-01T17:58:28Z

@Griffin-Sullivan could you please also reintroduce test runs in GHA? #237

Griffin-Sullivan · 2024-08-02T13:34:06Z

@ederign Ok I updated everything if you want to take another look

ederign · 2024-08-05T13:07:59Z

/ok-to-test

tarilabs · 2024-08-05T13:09:54Z

/ok-to-test

lucferbux

There's only a couple of nits left, but really great work here!!

lucferbux · 2024-08-05T13:12:33Z

clients/ui/frontend/docs/testing.md

Just one nit, can you update the CONTRIBUTING.MD file?
Thre're the Debugging and Testing section, there you can put something like:

See [frontend testing guidelines](docs/testing.md) for more information.

lucferbux · 2024-08-05T13:13:51Z

clients/ui/frontend/docs/testing.md

+
+Single command to run all Cypress tests or a specific test (build frontend, start HTTP server, run Cypress):
+```bash


leave a blank space: MD031/blanks-around-fences

lucferbux · 2024-08-05T13:13:59Z

clients/ui/frontend/docs/testing.md

+
+To best match production, build the frontend and use a lightweight HTTP server to host the files. This method will require manual rebuilds when changes are made to the dashboard frontend code.
+```bash


leave a blan space: MD031/blanks-around-fences

lucferbux · 2024-08-05T13:14:18Z

clients/ui/frontend/docs/testing.md

+
+To run all Cypress tests or a specific test headless
+```bash


same: MD031/blanks-around-fences

lucferbux · 2024-08-05T13:20:22Z

clients/ui/frontend/package.json

+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "cypress:run": "cypress run -b chrome --project src/__tests__/cypress",
+    "cypress:run:mock": "CY_MOCK=1 npm run cypress:run -- ",


Suggested change

"cypress:run:mock": "CY_MOCK=1 npm run cypress:run -- ",

"cypress:run:mock": "CY_MOCK=1 npm run cypress:run -- ",

"cypress:run": "cypress run -b chrome --project src/__tests__/cypress",

"cypress:open": "cypress open --project src/__tests__/cypress",

Can we add cypress:open too, to have the cypress dashboard? It's quite handy and works really great to debut stuff, if you like that, we can add it to the testing docs too.

In the dashboard docs:

There are two commands to run Cypress mock tests (always use the `:mock` variants). - `open`: Open the Cypress GUI \`\`\`bash npm run cypress:open:mock \`\`\` - `run`: Run all Cypress tests or a specific test headless \`\`\`bash npm run cypress:run:mock npm run cypress:run:mock -- --spec "**/testfile.cy.ts" \`\`\`

Signed-off-by: Griffin-Sullivan <gsulliva@redhat.com>

lucferbux

/lgtm

google-oss-prow · 2024-08-05T14:31:01Z

@lucferbux: changing LGTM is restricted to collaborators

In response to this:

/lgtm

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

ederign · 2024-08-05T14:52:48Z

/ok-to-test

ederign · 2024-08-05T18:17:58Z

/approve

ederign · 2024-08-05T18:18:19Z

/lgtm

ederign · 2024-08-05T18:59:06Z

/lgtm

tarilabs

based on #234 (comment)

/approve

google-oss-prow · 2024-08-05T19:06:44Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign, lucferbux, tarilabs

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [tarilabs]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

…low#234)

google-oss-prow bot requested review from andreyvelich, ederign and zijianjoy July 30, 2024 19:35

google-oss-prow bot added the size/XXL label Jul 30, 2024

Griffin-Sullivan force-pushed the cypress branch from 2808e1e to 73eb429 Compare July 30, 2024 19:43

tarilabs assigned ederign Jul 31, 2024

Griffin-Sullivan mentioned this pull request Jul 31, 2024

Enhance UI client docs and bundler configuration #233

Merged

3 tasks

Griffin-Sullivan force-pushed the cypress branch from 73eb429 to 3fdebb0 Compare July 31, 2024 17:13

lucferbux suggested changes Aug 1, 2024

View reviewed changes

ederign mentioned this pull request Aug 1, 2024

chore: removing temporarly test execution #237

Merged

Griffin-Sullivan force-pushed the cypress branch 2 times, most recently from b0f9495 to de49516 Compare August 2, 2024 13:33

lucferbux suggested changes Aug 5, 2024

View reviewed changes

Setup Cypress UI testing

7e45812

Signed-off-by: Griffin-Sullivan <gsulliva@redhat.com>

Griffin-Sullivan force-pushed the cypress branch from de49516 to 7e45812 Compare August 5, 2024 14:20

lucferbux approved these changes Aug 5, 2024

View reviewed changes

ederign approved these changes Aug 5, 2024

View reviewed changes

google-oss-prow bot added the lgtm label Aug 5, 2024

tarilabs approved these changes Aug 5, 2024

View reviewed changes

google-oss-prow bot added the approved label Aug 5, 2024

google-oss-prow bot merged commit e9fbf26 into kubeflow:main Aug 5, 2024
13 of 14 checks passed

tarilabs mentioned this pull request Aug 6, 2024

periodic sync upstream KF to midstream ODH opendatahub-io/model-registry#105

Merged

dhirajsb pushed a commit to dhirajsb/model-registry-kfp that referenced this pull request Aug 30, 2024

build(deps): bump github.com/spf13/viper from 1.17.0 to 1.18.1 (kubef…

3f53d77

…low#234)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setup Cypress UI testing #234

Setup Cypress UI testing #234

Griffin-Sullivan commented Jul 30, 2024 •

edited

Loading

ederign commented Jul 31, 2024

lucferbux left a comment

lucferbux Aug 1, 2024

lucferbux Aug 1, 2024

lucferbux Aug 1, 2024

lucferbux Aug 1, 2024

lucferbux Aug 1, 2024

ederign commented Aug 1, 2024

ederign commented Aug 1, 2024

Griffin-Sullivan commented Aug 2, 2024

ederign commented Aug 5, 2024

tarilabs commented Aug 5, 2024

lucferbux left a comment

lucferbux Aug 5, 2024

lucferbux Aug 5, 2024

lucferbux Aug 5, 2024

lucferbux Aug 5, 2024

lucferbux Aug 5, 2024

lucferbux Aug 5, 2024

lucferbux left a comment

google-oss-prow bot commented Aug 5, 2024

ederign commented Aug 5, 2024

ederign commented Aug 5, 2024

ederign commented Aug 5, 2024

ederign commented Aug 5, 2024

tarilabs left a comment

google-oss-prow bot commented Aug 5, 2024

		@@ -0,0 +1,2 @@
		# Test against prod build hosted by lightweight http server
		BASE_URL=http://localhost:9001

		import { env, BASE_URL } from '~/src/__tests__/cypress/cypress/utils/testConfig';


		const resultsDir = `${env.CY_RESULTS_DIR \|\| 'results'}/${env.CY_MOCK ? 'mocked' : 'e2e'}`;


		Single command to run all Cypress tests or a specific test (build frontend, start HTTP server, run Cypress):
		```bash


		To best match production, build the frontend and use a lightweight HTTP server to host the files. This method will require manual rebuilds when changes are made to the dashboard frontend code.
		```bash

Setup Cypress UI testing #234

Setup Cypress UI testing #234

Conversation

Griffin-Sullivan commented Jul 30, 2024 • edited Loading

Description

How Has This Been Tested?

Merge criteria:

ederign commented Jul 31, 2024

lucferbux 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

ederign commented Aug 1, 2024

ederign commented Aug 1, 2024

Griffin-Sullivan commented Aug 2, 2024

ederign commented Aug 5, 2024

tarilabs commented Aug 5, 2024

lucferbux 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

lucferbux left a comment

Choose a reason for hiding this comment

google-oss-prow bot commented Aug 5, 2024

ederign commented Aug 5, 2024

ederign commented Aug 5, 2024

ederign commented Aug 5, 2024

ederign commented Aug 5, 2024

tarilabs left a comment

Choose a reason for hiding this comment

google-oss-prow bot commented Aug 5, 2024

Griffin-Sullivan commented Jul 30, 2024 •

edited

Loading