test(add): add e2e test - basic path

.eslintignore

@@ -3,7 +3,7 @@ static/*
 dist/*
 @types/*
 .eslintrc.cjs
-integration-tests/*
+e2e-tests/*
 commitlint.config.js
 **.config.js
 config/*

.github/workflows/main.yaml

@@ -31,7 +31,11 @@ jobs:
           cache: 'yarn'
 
       - name: Install Dependencies 🥁
-        run: yarn install --frozen-lockfile
+        run: | 
+        yarn install --frozen-lockfile
+        cd e2e-tests
+        yarn install
+        cd ..
 
       - name: Lint ✅
         run: yarn lint

e2e-tests/.dockerignore

@@ -0,0 +1,2 @@
+cypress/
+node_modules

e2e-tests/.eslintrc.cjs

@@ -0,0 +1,39 @@
+module.exports = {
+  env: {
+    "cypress/globals": true,
+    "node": true
+  },
+  extends: [
+    "../.eslintrc.cjs",
+    "plugin:cypress/recommended",
+    "plugin:cypress/recommended"
+  ],
+  plugins: [
+    "cypress"
+  ],
+  rules: {
+    "no-console": "off",
+    "no-namespace": "off",
+    "no-redeclare": "off",
+    "promise/catch-or-return": "off",
+    "promise/no-nesting": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "cypress/no-unnecessary-waiting": "off"
+  },
+  settings: {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ],
+        "moduleDirectory": [
+          "node_modules",
+          "e2e-tests/"
+        ]
+      }
+    }
+  }
+};

e2e-tests/.gitignore

@@ -0,0 +1,2 @@
+cypress/
+node_modules

e2e-tests/Dockerfile

@@ -0,0 +1,26 @@
+FROM quay.io/hacdev/hac-tests:base
+
+RUN curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl" && \
+    install -o root -g root -m 0755 kubectl /usr/local/bin/kubectl
+
+RUN wget "https://github.com/sigstore/cosign/releases/download/v2.0.0/cosign-linux-amd64" && \
+    mv cosign-linux-amd64 /usr/local/bin/cosign && \
+    chmod +x /usr/local/bin/cosign
+
+USER node:0
+
+COPY --chown=node:root --chmod=775 . /tmp/e2e
+RUN chmod -R 775 /tmp/e2e
+
+RUN cd /tmp/e2e && \
+    umask 0002 && \
+    npm i && \
+    node_modules/.bin/cypress install && \
+    mkdir -p /tmp/artifacts && \
+    chmod -R a+rwx /tmp/artifacts ${CYPRESS_CACHE_FOLDER}
+
+WORKDIR /tmp/
+COPY --chown=node:root --chmod=775 entrypoint.sh /tmp/
+
+ENTRYPOINT ["/tmp/entrypoint.sh"]
+CMD [""]

e2e-tests/OWNERS

@@ -0,0 +1,6 @@
+reviewers:
+  - sahil143
+  - Katka92
+approvers:
+  - sahil143
+  - Katka92

e2e-tests/README.md

@@ -0,0 +1,149 @@
+# Konflux UI Tests
+Functional tests using [Cypress](https://docs.cypress.io/guides/overview/why-cypress)
+
+## What can be found here
+The important bits are as follows:
+
+| Path | Description |
+| -- | -- |
+| `cypress.config.ts` | cypress configuration file, contains all the environment and plugin setup |
+| `support` | contains helper files for cypress, like hooks, custom commands, page objects or plugin integration |
+| `tests` | the actual spec files reside here |
+| `utils` | utilities for easier test development, from UI interaction tasks to network requests |
+| `cypress` | test results, including screenshots, video recordings, HTML reports, xunit files, etc. |
+
+## Running the tests locally
+Prerequisites:
+* Nodejs (20+ version)
+* Access (credentials) to Konflux staging instance
+
+Certain environment variables will need to be set up. The most convenient way is to export them from the CLI, in which case they need to be prefixed with `CYPRESS_`, e.g. `USERNAME` is set as `export CYPRESS_USERNAME=username`. Alternatively, they can be passed to cypress via `-e` flag, e.g `npx cypress run -e USERNAME=username`.
+
+Find the supported variables in the table below:
+| Variable name | Description | Required | Default Value |
+| -- | -- | -- | -- |
+| `KONFLUX_BASE_URL` | The URL to the main page of RHTAP UI | Yes | 'https://prod.foo.redhat.com:1337/beta/hac/application-pipeline' |
+| `USERNAME` | Username for SSO login | Yes | '' |
+| `PASSWORD` | Password for SSO login | Yes | '' |
+| `PR_CHECK` | Assume the test is a PR check, enable report portal, assume keycloak is used instead of RH-SSO | For PR checks | false |
+| `PERIODIC_RUN` | Assume the test is a nightly run, keycloak is used instead of RH-SSO | For runs using ephemeral RHTAP environment | false |
+| `REMOVE_APP_ON_FAIL` | Clean up applications from the cluster even if tests fail | No | false |
+| `GH_TOKEN` | Github token for network requests | Yes | '' |
+| |
+| `RP_TOKEN` | Report portal token for PR checks | No | '' |
+| `GH_PR_TITLE` | Report portal setup | No | '' |
+| `GH_PR_LINK` | Report portal setup | No | '' |
+
+### Running from source
+This is the recommended way when either developing tests, or a headed test runner is preferred. After running `yarn install` and setting the appropriate environment variables, use one of the following commands to run cypress.
+
+For the headed test runner:
+```
+$ npx cypress open
+```
+Select E2E testing and the browser of your choice (chrome is recommended though), then launch any spec by clicking it in the list, and watch as it runs.
+
+For headless execution:
+```
+$ npx cypress run
+```
+Runs all available specs, by default in the Electron browser. Flags that might come in handy are `-b` to specify the browser, or `-s` to filter spec files based on a glob pattern. For example, running the basic happy path spec in chrome:
+```
+$ npx cypress run -b chrome -s 'tests/basic-happy-path*'
+```
+
+### Running using docker image
+TBD - currently we don't have a docker image
+<!-- This folder contains a Dockerfile that specifies an image with all the dependencies and test code included. It should be available on quay.io and should be updated no more than 30 minutes after a change is pushed to this folder.
+
+If there are no changes in your local test code, you can pull and run the image from quay, providing the required environment variables. Feel free to use docker or podman, we will be using podman in this example:
+```
+$ podman run -e CYPRESS_KONFLUX_BASE_URL=https://<HOSTNAME>/hac/application-pipeline -e CYPRESS_USERNAME="user1" -e CYPRESS_PASSWORD="user1" quay.io/hacdev/hac-tests:next
+```
+Note that the container specific arguments like environment and mountpoints are defined before the image tag. Any arguments defined after the image tag will be interpreted as options and passed directly to cypress. 
+In general, the the command structure is as follows:
+```
+$ <container engine> run <mount points> <container environment variables> quay.io/hacdev/hac-tests:next <cypress arguments>
+```
+
+Since the image already contains all the test code, in case you'd like to run the tests with your local changes, you would need to mount the local code:
+```
+$ podman run -v <path to e2e-tests>:/e2e:Z -e CYPRESS_KONFLUX_BASE_URL=https://<HOSTNAME>/hac/application-pipeline -e CYPRESS_USERNAME="user1" -e CYPRESS_PASSWORD="user1" quay.io/hacdev/hac-tests:next
+```
+The entrypoint searches for any code within `/e2e` path and runs it instead of any code that was already present inside the image.
+
+#### Passing arguments to cypress
+The cypress run command can be customized using flags, as per the [documentation](https://docs.cypress.io/guides/guides/command-line#cypress-run). To pass these into the entrypoint, simply add them to the end of your container run command.
+
+For example, we can limit what spec files will be run:
+```
+$ podman run -e CYPRESS_KONFLUX_BASE_URL=https://<HOSTNAME>/hac/application-pipeline quay.io/hacdev/hac-tests:next --spec tests/basic-happy-path.spec.ts
+```
+Or if instead of using container environment variables, you prefer to pass them directly to cypress:
+```
+$ podman run quay.io/hacdev/hac-tests:next -e KONFLUX_BASE_URL=https://<HOSTNAME>/hac/application-pipeline
+```
+There is no need for the `CYPRESS` prefix this way. Passing `KONFLUX_BASE_URL` is equivalent to setting a variable in the container called `CYPRESS_KONFLUX_BASE_URL`.
+
+Keep in mind that it is the image tag that divides the command between container setup on its left, and the entrypoint arguments on the right (those will be passed to cypress).
+
+#### Accessing test results
+Test artifacts (reports, screenshots, videos, etc.) are only accessible to the host system if the appropriate container folder is mounted.
+
+When running with local test code mounted, with the `-v <path to e2e-tests>:/e2e:Z` option, all the test artifacts are available to the host at `<path to e2e-tests>/cypress`.
+
+When running the container with the included test code, the tests artifacts are available inside the container at `/tmp/artifacts`. Mouning the folder, the host can then access the artifacts at the `<chosen path>`:
+```
+$ podman run -v <chosen path>:/tmp/artifacts:Z <environment variables> quay.io/hacdev/hac-tests:next
+```
+
+#### Building the image
+To build the image locally, navigate to this folder and run (using your favorite container runtime)
+```
+$ podman build -f Dockerfile -t <awesome tag>
+```
+
+#### Publishing the image
+The image is being published automatically after a change to this folder is pushed to main. If however, the need arises to publish it manually, you will first need access to the `quay.io/hacdev/hac-tests` repository, ask `jrichter`, `kfoniok`, or `skhileri` for rights. 
+
+Of course we will now need to build the image with the appropriate tag and push it (after logging in):
+```
+$ podman build -f Dockerfile -t quay.io/hacdev/hac-tests:next
+$ podman login -u="$USERNAME" -p="$TOKEN" quay.io
+$ podman push quay.io/hacdev/hac-tests:next
+``` -->
+
+## Tests on CI
+TBD - CI setup is currently prepared.
+<!-- For CI we are using a dual cluster setup. The frontend is deployed per run on an ephemeral cluster using `bonfire`, and generally only lives as long as the CI run is active. The backend RHTAP runs on an [OSD cluster](https://console-openshift-console.apps.hac-devsandbox.5unc.p1.openshiftapps.com/dashboards) that we maintain and keep up to date with the latest RHTAP. For access to our CI cluster, contact `kfoniok`. The backend configuration can be found in our [fork of infra-deployments](https://github.com/redhat-hac-qe/infra-deployments).
+
+The two clusters communicate through a proxy. The frontend SSO url is also replaced with a url to a keycloak instance running on the CI cluster. For each CI run, a new user is generated and registered in the toolchain host operator.
+
+Finally, the tests are run using the `quay.io/hacdev/hac-tests:next` image.
+
+For step-by-step setup, refer to the [pr_check.sh](../pr_check.sh) file. 
+
+### PR checks
+Our Cypress tests run on every pull request, using a [jenkins job](https://ci.int.devshift.net/job/openshift-hac-dev-pr-check/) (VPN required). The job runs the aforementioned `pr_check.sh` file. Note that even though the job exposes all results generated by the tests, the HTML report will not open properly, unless downloaded, due to javascript restrictions on the jenkins instance.
+
+By default, the `advanced-happy-path` spec file (component with custom build pipeline) is skipped for PR checks, due to long run time (~20 minutes). To run the full suite of tests, comment `[test]` on the PR. To rerun the default suite, comment `/retest`.
+
+The job also uploads results to the RHTAP QE [report portal](https://reportportal-appstudio-qe.apps.ocp-c1.prod.psi.redhat.com/ui/#hac-dev) (ask `jrichter` for access if interested).
+
+### Periodic tests
+Additionally, the tests also run nightly on openshift-ci. Unlike the PR check, this job always runs the entire test suite.
+
+The job history can be found [here](https://prow.ci.openshift.org/job-history/gs/origin-ci-test/logs/periodic-ci-openshift-hac-dev-main-periodic-tests), the job definition is available [here](https://github.com/openshift/release/tree/master/ci-operator/step-registry/openshift/hac-dev/e2e).
+
+The test results will also be reported on the `#forum-rhtap-test-execution-alerts` slack channel.
+
+### Infra-deployments PR checks
+The upstream infra-deployments [repo](https://github.com/redhat-appstudio/infra-deployments) is also starting to incorporate our cypress tests in their PR checks to test new backend changes against our frontend. Currently, the `basic-happy-path` spec is being used.
+
+Job history is available [here](https://prow.ci.openshift.org/job-history/gs/origin-ci-test/pr-logs/directory/pull-ci-redhat-appstudio-infra-deployments-main-appstudio-hac-e2e-tests).
+-->
+
+## Reporting issues
+If you find a problem with the tests, feel free to open an issue at the [Konflux-UI Jira project](https://issues.redhat.com/projects/KFLUXUI). You can set the label as `qe` to indicate it is a quality problem.
+
+<!-- If you discover a production bug thanks to a test failure, please label any issue created for that bug as `ci-fail`. That way we can see all this automation has actually generated some value. -->