finalized workflow + remove echos from e2e-docker-start + working on elemental spec

.github/workflows/extensions-compatibility-tests.yaml

@@ -1,4 +1,4 @@
-name: Extensions Compatibility Tests 2.9
+name: Extensions Compatibility Tests 2.10
 on:
   schedule:
     - cron: "0 0 * * *" # runs at midnight every day
@@ -19,43 +19,8 @@ env:
   # Build the dashboard to use in tests. When set to false it will grab `latest` from CDN (useful for running e2e tests quickly)
   BUILD_DASHBOARD: true
 
-  # E2E_BUILD_DIST_NAME: dist
-  # E2E_BUILD_DIST_DIR: dist
-  # E2E_BUILD_DIST_EMBER_NAME: dist_ember
-  # E2E_BUILD_DIST_EMBER_DIR: dist_ember
-
 jobs:
-  # e2e-ui-build:
-  #   if: "!contains( github.event.pull_request.labels.*.name, 'ci/skip-e2e')"
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #    - uses: actions/checkout@v3
-  #      with:
-  #       ref: master
-  #       fetch-depth: 1
-  #    - name: Setup env
-  #      uses: ./.github/actions/setup
-  #    - name: Build e2e
-  #      run: yarn e2e:build
-  #    - name: Upload e2e build
-  #      uses: actions/upload-artifact@v4
-  #      with:
-  #       name: ${{ env.E2E_BUILD_DIST_NAME }}
-  #       path: ${{ env.E2E_BUILD_DIST_DIR }}/
-  #       if-no-files-found: error
-  #       retention-days: 10
-  #       compression-level: 9
-  #    - name: Upload e2e build ember
-  #      uses: actions/upload-artifact@v4
-  #      with:
-  #       name: ${{ env.E2E_BUILD_DIST_EMBER_NAME }}
-  #       path: ${{ env.E2E_BUILD_DIST_EMBER_DIR }}
-  #       if-no-files-found: error
-  #       retention-days: 10
-  #       compression-level: 9
   e2e-test-extensions-compatibility:
-    # if: "!contains( github.event.pull_request.labels.*.name, 'ci/skip-e2e')"
-    # needs: e2e-ui-build
     strategy:
       fail-fast: false
       matrix:

cypress/e2e/po/components/labeled-select.po.ts

@@ -5,6 +5,12 @@ export default class LabeledSelectPo extends ComponentPo {
     return this.self().click();
   }
 
+  setOptionAndClick(label: string) {
+    this.self().get('input[type="search"]').type(label);
+
+    return this.clickOption(1);
+  }
+
   clickOption(optionIndex: number) {
     return this.self().get(`.vs__dropdown-menu .vs__dropdown-option:nth-child(${ optionIndex })`).click();
   }

cypress/e2e/po/pages/extensions-compatibility-tests/elemental.po.ts

@@ -0,0 +1,16 @@
+import ExtensionsCompatibiliyPo from '@/cypress/e2e/po/pages/extensions-compatibility-tests/extensions-compatibility.po';
+
+export default class ElementalPo extends ExtensionsCompatibiliyPo {
+  static url = '/elemental/c/_/dashboard';
+  static goTo(): Cypress.Chainable<Cypress.AUTWindow> {
+    return super.goTo(ElementalPo.url);
+  }
+
+  constructor(url: string) {
+    super(ElementalPo.url);
+  }
+
+  installOperatorBtnClick(): Cypress.Chainable {
+    return this.self().getId('charts-install-button').click();
+  }
+}

cypress/e2e/po/pages/extensions-compatibility-tests/extensions-compatibility.po.ts

@@ -0,0 +1,45 @@
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import { InstallChartPage } from '@/cypress/e2e/po/pages/explorer/charts/install-charts.po';
+import Kubectl from '@/cypress/e2e/po/components/kubectl.po';
+import ChartInstalledAppsPagePo from '@/cypress/e2e/po/pages/chart-installed-apps.po';
+
+const installChart = new InstallChartPage();
+const terminal = new Kubectl();
+const installedApps = new ChartInstalledAppsPagePo();
+
+export default class ExtensionsCompatibiliyPo extends PagePo {
+  title(selector: string): Cypress.Chainable<string> {
+    return this.self().find(selector).invoke('text');
+  }
+
+  waitForTitle(selector: string, title: string) {
+    return this.title(selector).should('contain', title);
+  }
+
+  waitForInstallChartPage() {
+    return installChart.waitForChartPage('rancher-charts', 'elemental');
+  }
+
+  chartInstallNext() {
+    return installChart.nextPage();
+  }
+
+  chartInstallClick() {
+    return installChart.installChart();
+  }
+
+  chartInstallWaitForInstallationAndCloseTerminal(interceptName: string) {
+    cy.wait(`@${ interceptName }`, { requestTimeout: 15000 }).its('response.statusCode').should('eq', 201);
+
+    // giving it a small buffer so that the install is properly triggered
+    cy.wait(3000);
+    terminal.closeTerminal();
+
+    installedApps.list().state('elemental-operator-crds').should('contain', 'Deployed');
+    installedApps.list().state('elemental-operator').should('contain', 'Deployed');
+
+    // timeout to give time for everything to be setup, otherwise the extension
+    // won't find the chart and show the correct screen
+    return cy.wait(5000);
+  }
+}

cypress/e2e/po/pages/extensions.po.ts

@@ -91,13 +91,15 @@ export default class ExtensionsPagePo extends PagePo {
    * @param name - A name for the repository
    * @returns {Cypress.Chainable}
    */
-  addExtensionsRepositoryNew(repo: string, branch: string, name: string, waitForActiveState = true): Cypress.Chainable {
+  addExtensionsRepositoryDirectLink(repo: string, branch: string, name: string, waitForActiveState = true): Cypress.Chainable {
     const appRepoList = new RepositoriesPagePo('local', 'apps');
     const appRepoCreate = new AppClusterRepoEditPo('local', 'create');
 
     appRepoCreate.goTo();
     appRepoCreate.waitForPage();
 
+    appRepoCreate.nameNsDescription().name().self().scrollIntoView()
+      .should('be.visible');
     appRepoCreate.nameNsDescription().name().set(name);
     appRepoCreate.selectRadioOptionGitRepo(1);
     // fill the git repo form
@@ -141,6 +143,14 @@ export default class ExtensionsPagePo extends PagePo {
     return this.self().get('[data-modal="installPluginDialog"]');
   }
 
+  installModalSelectVersionLabel(label: string): Cypress.Chainable {
+    const selectVersion = new LabeledSelectPo(this.extensionInstallModal().getId('install-ext-modal-select-version'));
+
+    selectVersion.toggle();
+
+    return selectVersion.setOptionAndClick(label);
+  }
+
   installModalSelectVersionClick(optionIndex: number): Cypress.Chainable {
     const selectVersion = new LabeledSelectPo(this.extensionInstallModal().getId('install-ext-modal-select-version'));
 

cypress/e2e/tests/pages/extensions-compatibility-tests/elemental.spec.ts

@@ -1,31 +1,28 @@
 import ExtensionsPagePo from '@/cypress/e2e/po/pages/extensions.po';
+import ElementalPo from '@/cypress/e2e/po/pages/extensions-compatibility-tests/elemental.po';
 
 import HomePagePo from '@/cypress/e2e/po/pages/home.po';
 import AboutPagePo from '@/cypress/e2e/po/pages/about.po';
 
 const EXTENSION_NAME = 'elemental';
+const EXTENSION_VERSION = '1.3.1-rc7';
+const EXTENSION_REPO = 'https://github.com/rancher/elemental-ui';
+const EXTENSION_BRANCH = 'gh-pages';
+const EXTENSION_CLUSTER_REPO_NAME = 'elemental-ui-extension';
+const EXTENSION_CHART_CREATION = 'chartCreation';
+
+const elementalPo = new ElementalPo();
 
 describe('Extensions Compatibility spec', { tags: ['@elemental', '@adminUser'] }, () => {
   beforeEach(() => {
     cy.login();
   });
 
-  it('add main extensions repository', () => {
+  it('add extension repository', () => {
     // // This should be in a `before` however is flaky. Move it to an `it` to let cypress retry
     const extensionsPo = new ExtensionsPagePo();
 
-    extensionsPo.addExtensionsRepositoryNew('https://github.com/rancher/ui-plugin-charts', 'main', 'rancher-extensions');
-  });
-
-  // TODO: TO REMOVE ONCE EVERYTHING IS GOOD!
-  it('can navigate to About page (get version from about page screenshots to make sure we are on the right system)', () => {
-    const aboutPage = new AboutPagePo();
-
-    HomePagePo.goToAndWaitForGet();
-    AboutPagePo.navTo();
-    aboutPage.waitForPage();
-    cy.wait(5000); // eslint-disable-line cypress/no-unnecessary-waiting
-    // just enough to render the page on sorry-cypress so that we can check the version
+    extensionsPo.addExtensionsRepositoryDirectLink(EXTENSION_REPO, EXTENSION_BRANCH, EXTENSION_CLUSTER_REPO_NAME, false);
   });
 
   it('Should install an extension', () => {
@@ -40,7 +37,7 @@ describe('Extensions Compatibility spec', { tags: ['@elemental', '@adminUser'] }
     extensionsPo.extensionInstallModal().should('be.visible');
 
     // select version and click install
-    extensionsPo.installModalSelectVersionClick(2);
+    extensionsPo.installModalSelectVersionLabel(EXTENSION_VERSION);
     extensionsPo.installModalInstallClick();
 
     // let's check the extension reload banner and reload the page
@@ -53,4 +50,21 @@ describe('Extensions Compatibility spec', { tags: ['@elemental', '@adminUser'] }
     extensionsPo.extensionDetailsTitle().should('contain', EXTENSION_NAME);
     extensionsPo.extensionDetailsCloseClick();
   });
+
+  it('Should setup all of the needed backend parts', () => {
+    cy.intercept('POST', 'v1/catalog.cattle.io.clusterrepos/rancher-charts?action=install').as(EXTENSION_CHART_CREATION);
+
+    elementalPo.goTo();
+    elementalPo.waitForTitle('h1', 'OS Management');
+
+    elementalPo.installOperatorBtnClick();
+
+    elementalPo.waitForInstallChartPage();
+    elementalPo.chartInstallNext();
+    elementalPo.chartInstallClick();
+    elementalPo.chartInstallWaitForInstallationAndCloseTerminal(EXTENSION_CHART_CREATION);
+
+    elementalPo.goTo();
+    elementalPo.waitForTitle('[data-testid="elemental-main-title"]', 'OS Management Dashboard');
+  });
 });

scripts/e2e-docker-start

@@ -16,9 +16,6 @@ if [ $# -eq 1 ]; then
   HAS_ARGS="true"
 fi
 
-echo "HAS_ARGS: ${HAS_ARGS}"
-echo "RANCHER_IMG_VERSION: ${RANCHER_IMG_VERSION}"
-
 if [ "$HAS_ARGS" == "false" ]; then
   # this flow is what test.yaml is expected to to be following
   echo "normal flow without args. Defaults to v2.9-head"