RHCLOUD-41924: E2E Test Setup

.gitignore

@@ -21,3 +21,5 @@ yarn-error.log*
 
 .DS_Store
 coverage
+
+test-results

.tekton/learning-resources-pull-request.yaml

@@ -9,7 +9,7 @@ metadata:
     pipelinesascode.tekton.dev/max-keep-runs: "3"
     pipelinesascode.tekton.dev/on-cel-expression: event == "pull_request" && target_branch
       == "master"
-    pipelinesascode.tekton.dev/pipeline: https://github.com/RedHatInsights/konflux-pipelines/raw/main/pipelines/platform-ui/docker-build-run-unit-tests.yaml
+    pipelinesascode.tekton.dev/pipeline: https://github.com/catastrophe-brandon/konflux-pipelines/raw/btweed/platform-ui-e2e/pipelines/platform-ui/docker-build-run-all-tests.yaml
   creationTimestamp: null
   labels:
     appstudio.openshift.io/application: learning-resources
@@ -39,10 +39,29 @@ spec:
       npm install
       npm run lint
       npm test --  --runInBand --no-cache
+  - name: e2e-tests-script
+    value: |
+      #!/usr/bin/env bash
+      set -ex
+      npm i >/dev/null 2>&1
+      KONFLUX_RUN=1 npm run start:konflux &
+      until curl -k 'https://stage.foo.redhat.com:1337' > /dev/null 2>&1; do
+        echo "Waiting for dev server to be ready"
+        sleep 5
+      done
+      echo "Dev server ready!"
+      KONFLUX_RUN=1 NO_COLOR=1 E2E_USER=$CHROME_ACCOUNT E2E_PASSWORD=$CHROME_PASSWORD npm run test:konflux
   pipelineRef:
     name: docker-build
   taskRunTemplate:
     serviceAccountName: build-pipeline-learning-resources
+    podTemplate:
+      hostAliases:
+        # Webpack explicitly binds to this address; don't remove or change this without careful consideration
+        - ip: "127.0.0.1"
+          hostnames:
+            - "stage.foo.redhat.com"
+            - "prod.foo.redhat.com"
   workspaces:
   - name: workspace
     volumeClaimTemplate:

cypress.config.ts

@@ -1,13 +1,39 @@
 import { defineConfig } from "cypress";
 
-
 export default defineConfig({
   component: {
-    specPattern: 'cypress/component/**/*.cy.{js,jsx,ts,tsx}',
+    specPattern: "cypress/component/**/*.cy.{js,jsx,ts,tsx}",
     devServer: {
       framework: "react",
       bundler: "webpack",
-      webpackConfig: require( './config/webpack.cy.js'),
+      webpackConfig: require("./config/webpack.cy.js"),
+    },
+  },
+
+  e2e: {
+    blockHosts: ['consent.trustarc.com'],
+    baseUrl: process.env.CYPRESS_BASE_URL || "https://stage.foo.redhat.com:1337",
+    env: {
+      E2E_USER: process.env.E2E_USER,
+      E2E_PASSWORD: process.env.E2E_PASSWORD,
+    },
+    // To avoid any flaky issues, we set the timeouts to be extra gracious
+    // Slow tests are faster than rerunning flaky tests
+    defaultCommandTimeout: 60000,
+    requestTimeout: 60000,
+    // required for the redirects to work correctly due to a chromium issue
+    userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
+    screenshotOnRunFailure: false,
+    // required for the SSO redirect
+    chromeWebSecurity: false,
+    video: false,
+    // setupNodeEvents(on, config) {
+    //   require('cypress-localstorage-commands/plugin')(on, config);
+    //   return config;
+    //   // implement node event listeners here
+    // },
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
     },
   },
 });

cypress/e2e/release-gate/all-learning-resources.cy.ts

@@ -0,0 +1,47 @@
+
+
+describe('All Learning Resources', () => {
+
+  it('appears in the help menu and the link works', () => {
+    cy.login();
+    cy.get('#HelpMenu').click().contains('All learning resources').click();
+    cy.url().should('include','/learning-resources');
+  });
+
+  it('has the appropriate number of items on the tab', () => {
+
+    cy.intercept('GET', '/api/quickstarts/v1/quickstarts?*').as('getQuickstarts');
+    // go to All Learning Resources page
+    cy.login();
+    cy.visit('/learning-resources');
+
+    // wait until the page has fully loaded with quickstarts data
+    cy.wait("@getQuickstarts").then((intercept) => {
+      expect(intercept.response.statusCode).to.eq(200)});
+
+    // confirm that 50 items appear on the 'All learning resources' tab
+    // Note: An ID would be a better way to locate the element
+    cy.get('.pf-v6-c-tabs__item-text').contains('All learning resources').then(elem => {
+      console.log(elem.text());
+      const tabText = elem.text();
+      expect(tabText).to.contain('50');
+    })
+  });
+
+  // == The following tests are prio 2 and can be implemented at a later time
+
+  it.skip('appears in search results', () => {});
+
+  it.skip('performs basic filtering by name', () => {});
+
+  it.skip('filters by product family', () => {});
+
+  it.skip('filters by console-wide services', () => {});
+
+  it.skip('filters by content type', () => {});
+
+  it.skip('filters by use case', () => {});
+
+  it.skip('displays bookmarked resources', () => {});
+
+})

cypress/support/commands.ts

@@ -34,4 +34,32 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }
+
+Cypress.Commands.add('login', () => {
+  cy.session(
+    `login-${Cypress.env('E2E_USER')}`,
+    () => {
+      cy.intercept({ url: '/beta/apps/*', times: 1 }, {});
+      cy.intercept({ url: '/api/', times: 4 }, {});
+      // This JS file causes randomly an uncaught exception on login page which blocks the tests
+      // Cannot read properties of undefined (reading 'setAttribute')
+      cy.intercept({ url: 'https://sso.stage.redhat.com/auth/resources/0833r/login/rhd-theme/dist/pfelements/bundle.js' }, {});
+      cy.visit('/');
+      // disable analytics integrations
+      // cy.setLocalStorage('chrome:analytics:disable', 'true');
+      // cy.setLocalStorage('chrome:segment:disable', 'true');
+
+      cy.wait(1000);
+      // login into the session
+
+      cy.get('body').then(() => {
+        cy.get('#username-verification').type(Cypress.env('E2E_USER'));
+        cy.get('#login-show-step2').click();
+        cy.get('#password').type(Cypress.env('E2E_PASSWORD'));
+        cy.get('#rh-password-verification-submit-button').click();
+      });
+    },
+    { cacheAcrossSpecs: true }
+  );
+});

cypress/support/component.ts

@@ -29,6 +29,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       mount: typeof mount
+      login(): Chainable<void>
     }
   }
 }

cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

package.json

@@ -15,8 +15,9 @@
     "lint:js:fix": "eslint src --fix",
     "patch:hosts": "fec patch-etc-hosts",
     "start": "HOT=true fec dev",
+    "start:konflux": "HOT=true fec dev --clouddotEnv=stage",
     "static": "fec static",
-    "test": "TZ=UTC jest --verbose --no-cache --passWithNoTests",
+    "test:konflux": "npx cypress run --env CLOUDDOT_ENV=stage --spec cypress/e2e/release-gate/**/*",
     "verify": "npm-run-all build lint test",
     "postinstall": "ts-patch install"
   },
@@ -54,6 +55,7 @@
     "jest_workaround": "^0.79.19",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "4.1.5",
+    "@playwright/test": "^1.43.1",
     "ts-jest": "^29.1.1",
     "ts-patch": "^3.1.2",
     "typescript": "^5.3.3",

playwright/all-learning-resources.spec.ts

@@ -0,0 +1,34 @@
+import { Page, test, expect } from '@playwright/test';
+
+
+async function login(page: Page, user: string, password: string): Promise<void> {
+  // Fail in a friendly way if the proxy config is not set up correctly
+  await expect(page.locator("text=Lockdown"), 'proxy config incorrect').toHaveCount(0)
+  await page.getByLabel('Red Hat login').first().fill(user);
+  await page.getByRole('button', { name: 'Next' }).click();
+  await page.getByLabel('Password').first().fill(password);
+  await page.getByRole('button', { name: 'Log in' }).click();
+  // confirm login was valid
+  await expect(page.getByText('Invalid login')).not.toBeVisible();
+}
+
+test.describe('all learning resources', async () => {
+
+  test.beforeEach(async ({page}): Promise<void> => {
+    await page.goto('https://console.stage.redhat.com');
+    const user = process.env.E2E_USER || 'misconfigured';
+    const password = process.env.E2E_PASSWORD || 'misconfigured';
+    await login(page, user, password);
+    await page.waitForLoadState("load");
+    await expect(page.getByText('Invalid login')).not.toBeVisible();
+  });
+
+  test('appears in the help menu and the link works', async({page}) => {
+    await expect(page.getByRole('button', { name: 'Add widgets' }), 'dashboard not displayed').toBeVisible();
+  });
+});
+
+
+
+
+