WIP

cypress/e2e/po/components/component.po.ts

@@ -9,6 +9,7 @@ const isVisible = (selector: string) => () => {
 export default class ComponentPo {
   public self: () => CypressChainable;
   public isVisible?: () => Cypress.Chainable<boolean>;
+  protected selector: string = '';
 
   constructor(self: CypressChainable);
   constructor(selector: string, parent?: CypressChainable);
@@ -21,6 +22,7 @@ export default class ComponentPo {
         // only works if we can find the element via jquery
         this.isVisible = isVisible(selector);
       }
+      this.selector = selector;
     } else {
       // Note - if the element is removed from screen and shown again this will fail
       const [self] = args as [CypressChainable];
@@ -36,4 +38,8 @@ export default class ComponentPo {
   checkVisible(): Cypress.Chainable<boolean> {
     return this.self().scrollIntoView().should('be.visible');
   }
+
+  checkExists(): Cypress.Chainable<boolean> {
+    return this.self().should('exist');
+  }
 }

cypress/e2e/po/components/ember/ember-accordion.po.ts

@@ -0,0 +1,4 @@
+import EmberComponentPo from '@/cypress/e2e/po/components/ember/ember-component.po';
+
+export default class EmberAccordionPo extends EmberComponentPo {
+}

cypress/e2e/po/components/ember/ember-component.po.ts

@@ -0,0 +1,7 @@
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
+
+export default class EmberComponentPo extends ComponentPo {
+  self = () => {
+    return cy.iFrame().find(this.selector);
+  }
+}

cypress/e2e/po/components/ember/ember-input.po.ts

@@ -0,0 +1,28 @@
+import EmberComponentPo from '@/cypress/e2e/po/components/ember/ember-component.po';
+
+export default class EmberInputPo extends EmberComponentPo {
+  /**
+   * Type value in the input
+   * @param value Value to be typed
+   * @returns
+   */
+  set(value: string): Cypress.Chainable {
+    this.input().should('be.visible');
+    this.input().focus();
+    this.input().clear();
+
+    return this.input().type(value);
+  }
+
+  clear() {
+    return this.input().clear();
+  }
+
+  /**
+   * Return the input HTML element from given container
+   * @returns HTML Element
+   */
+  private input(): Cypress.Chainable {
+    return this.self().find('input');
+  }
+}

cypress/e2e/po/components/toggle-switch.po.ts

@@ -4,4 +4,19 @@ export default class ToggleSwitchPo extends ComponentPo {
   toggle() {
     return this.self().click();
   }
+
+  value() {
+    return this.self().find('span.active').invoke('text');
+  }
+
+  set(label: string) {
+    return this.value()
+      .then((value) => {
+        if (value !== label) {
+          return this.toggle();
+        }
+      })
+      .then(() => this.value())
+      .then(value => expect(value).equal(label));
+  }
 }

cypress/e2e/po/detail/provisioning.cattle.io.cluster/cluster-detail-rke1-custom.po.ts

@@ -0,0 +1,8 @@
+import ClusterManagerDetailPagePo from '@/cypress/e2e/po/detail/provisioning.cattle.io.cluster/cluster-detail.po';
+
+/**
+ * Detail page for an RKE2 custom cluster
+ */
+export default class ClusterManagerDetailRke1CustomPagePo extends ClusterManagerDetailPagePo {
+
+}

cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke1-custom.po.ts

@@ -0,0 +1,27 @@
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import ClusterManagerCreatePagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create.po';
+import EmberInputPo from '@/cypress/e2e/po/components/ember/ember-input.po';
+import ClusterManagerCreateRKE1PagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke1.po';
+import EmberAccordionPo from '@/cypress/e2e/po/components/ember/ember-accordion.po';
+
+/**
+ * Create page for an RKE1 custom cluster
+ */
+export default class ClusterManagerCreateRke1CustomPagePo extends ClusterManagerCreateRKE1PagePo {
+  static url: string = `${ ClusterManagerCreatePagePo.url }/create?type=custom`
+  static goTo(): Cypress.Chainable<Cypress.AUTWindow> {
+    return PagePo.goTo(ClusterManagerCreateRke1CustomPagePo.url);
+  }
+
+  goToCustomClusterCreation(): Cypress.Chainable<Cypress.AUTWindow> {
+    return PagePo.goTo(`${ ClusterManagerCreatePagePo.url }?type=custom`);
+  }
+
+  clusterName(): EmberInputPo {
+    return new EmberInputPo('div[data-testid="form-name-description__name"]');
+  }
+
+  nodeCommand(): EmberAccordionPo {
+    return new EmberAccordionPo('.cluster-driver__role');
+  }
+}

cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke1.po.ts

@@ -0,0 +1,33 @@
+import ToggleSwitchPo from '@/cypress/e2e/po/components/toggle-switch.po';
+import ClusterManagerCreatePagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create.po';
+import NameNsDescription from '~/cypress/e2e/po/components/name-ns-description.po';
+import ResourceDetailPo from '~/cypress/e2e/po/edit/resource-detail.po';
+import { CypressChainable } from '~/cypress/e2e/po/po.types';
+
+/**
+ * TODO: RC
+ */
+export default abstract class ClusterManagerCreateRKE1PagePo extends ClusterManagerCreatePagePo {
+  static url: string = '/c/local/manager/provisioning.cattle.io.cluster/create'
+
+  // Form
+  nameNsDescription(): NameNsDescription {
+    throw new Error('RKE2 only');
+  }
+
+  create(): CypressChainable {
+    throw new Error('RKE2 only');
+  }
+
+  save(): CypressChainable {
+    throw new Error('RKE2 only');
+  }
+
+  next() {
+    return cy.iFrame().find('button').contains('Next').click();
+  }
+
+  done() {
+    return cy.iFrame().find('button').contains('Done').click();
+  }
+}

cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke2-custom.po.ts

@@ -1,6 +1,6 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
-import ClusterManagerCreatePagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create.po';
 import AgentConfigurationRke2 from '@/cypress/e2e/po/components/agent-configuration-rke2.po';
+import ClusterManagerCreatePagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create.po';
 
 /**
  * Create page for an RKE2 custom cluster

cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create.po.ts

@@ -12,7 +12,7 @@ export default abstract class ClusterManagerCreatePagePo extends ClusterManagerC
   }
 
   rkeToggle() {
-    return new ToggleSwitchPo(this.self().find('.toggle-container'));
+    return new ToggleSwitchPo('.toggle-container', this.self());
   }
 
   selectKubeProvider(index: number) {

cypress/e2e/tests/pages/cluster-manager.spec.ts

@@ -9,6 +9,8 @@ import ClusterManagerEditGenericPagePo from '@/cypress/e2e/po/edit/provisioning.
 import PromptRemove from '@/cypress/e2e/po/prompts/promptRemove.po';
 import * as path from 'path';
 import * as jsyaml from 'js-yaml';
+import ClusterManagerCreateRke1CustomPagePo from '~/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke1-custom.po';
+import ClusterManagerDetailRke1CustomPagePo from '~/cypress/e2e/po/detail/provisioning.cattle.io.cluster/cluster-detail-rke1-custom.po';
 
 // At some point these will come from somewhere central, then we can make tools to remove resources from this or all runs
 const runTimestamp = +new Date();
@@ -18,6 +20,7 @@ const runPrefix = `e2e-test-${ runTimestamp }`;
 const { baseUrl } = Cypress.config();
 const clusterRequestBase = `${ baseUrl }/v1/provisioning.cattle.io.clusters/fleet-default`;
 const clusterNamePartial = `${ runPrefix }-create`;
+const rke1CustomName = `${ clusterNamePartial }-rke1-custom`;
 const rke2CustomName = `${ clusterNamePartial }-rke2-custom`;
 const importGenericName = `${ clusterNamePartial }-import-generic`;
 
@@ -26,14 +29,13 @@ const downloadsFolder = Cypress.config('downloadsFolder');
 describe('Cluster Manager', () => {
   const clusterList = new ClusterManagerListPagePo('local');
 
-  const detailClusterPage = new ClusterManagerDetailRke2CustomPagePo(rke2CustomName);
-
   beforeEach(() => {
     cy.login();
   });
 
   describe('Created', () => {
-    const createClusterPage = new ClusterManagerCreateRke2CustomPagePo();
+    const createRKE2ClusterPage = new ClusterManagerCreateRke2CustomPagePo();
+    const detailRKE2ClusterPage = new ClusterManagerDetailRke2CustomPagePo(rke2CustomName);
 
     describe('RKE2 Custom', () => {
       const editCreatedClusterPage = new ClusterManagerEditRke2CustomPagePo(rke2CustomName);
@@ -45,13 +47,14 @@ describe('Cluster Manager', () => {
         clusterList.checkIsCurrentPage();
         clusterList.createCluster();
 
-        createClusterPage.waitForPage();
-        createClusterPage.rkeToggle().toggle();
-        createClusterPage.selectCustom(0);
-        createClusterPage.nameNsDescription().name().set(rke2CustomName);
-        createClusterPage.create();
+        createRKE2ClusterPage.waitForPage();
+        createRKE2ClusterPage.rkeToggle().set('RKE2/K3s');
 
-        detailClusterPage.waitForPage(undefined, 'registration');
+        createRKE2ClusterPage.selectCustom(0);
+        createRKE2ClusterPage.nameNsDescription().name().set(rke2CustomName);
+        createRKE2ClusterPage.create();
+
+        detailRKE2ClusterPage.waitForPage(undefined, 'registration');
       });
 
       it('can edit cluster and see changes afterwards', () => {
@@ -115,6 +118,47 @@ describe('Cluster Manager', () => {
         });
       });
     });
+
+    const createClusterRKE1Page = new ClusterManagerCreateRke1CustomPagePo();
+    const detailRKE1ClusterPage = new ClusterManagerDetailRke1CustomPagePo(rke1CustomName); // TODO: RC
+
+    describe.only('RKE1 Custom', () => {
+      it('can create new cluster', () => {
+        clusterList.goTo();
+        clusterList.checkIsCurrentPage();
+        clusterList.createCluster();
+
+        createClusterRKE1Page.waitForPage();
+
+        createClusterRKE1Page.rkeToggle().set('RKE1');
+        createClusterRKE1Page.selectCustom(0);
+
+        createClusterRKE1Page.clusterName().set(rke1CustomName);
+        createClusterRKE1Page.next();
+
+        createClusterRKE1Page.nodeCommand().checkExists();
+        createClusterRKE1Page.done();// <---- TODO:RC no
+
+        clusterList.waitForPage();
+        clusterList.sortableTable().rowElementWithName(rke1CustomName).should('exist');
+      });
+
+      // it('can delete cluster', () => {
+      //   cy.intercept('DELETE', `${ clusterRequestBase }/${ rke1CustomName }`).as('deleteRequest');
+
+      //   clusterList.goTo(); // TODO: RC nav
+      //   clusterList.list().actionMenu(rke1CustomName).getMenuItem('Delete').click();
+
+      //   const promptRemove = new PromptRemove();
+
+      //   promptRemove.confirm(rke1CustomName);
+      //   promptRemove.remove();
+
+      //   cy.wait('@deleteRequest').then(() => {
+      //     return clusterList.sortableTable().rowElementWithName(rke1CustomName).should('not.exist', { timeout: 15000 });
+      //   });
+      // });
+    });
   });
 
   describe('Imported', () => {

cypress/globals.d.ts

@@ -34,5 +34,7 @@ declare namespace Cypress {
      */
     // eslint-disable-next-line no-undef
     userPreferences(preferences?: Partial<UserPreferences>): Chainable<null>;
+
+    iFrame(): Chainable<Element>;
   }
 }

cypress/support/commands.ts

@@ -94,3 +94,11 @@ Cypress.Commands.add('userPreferences', (preferences: Partial<UserPreferences> =
     });
   });
 });
+
+Cypress.Commands.add('iFrame', () => {
+  return cy
+    .get('[data-testid="ember-iframe"]')
+    .its('0.contentDocument.body')
+    .should('not.be.empty')
+    .then(cy.wrap);
+});

shell/components/EmberPage.vue

@@ -252,6 +252,7 @@ export default {
       if (iframeEl === null) {
         iframeEl = document.createElement('iframe');
         iframeEl.setAttribute('id', EMBER_FRAME);
+        iframeEl.setAttribute('data-testid', EMBER_FRAME);
         iframeEl.classList.add(EMBER_FRAME_HIDE_CLASS);
 
         if (this.inline) {