Add e2e tests for create rke1 custom cluster

cypress/e2e/po/components/agent-configuration-rke2.po.ts

@@ -1,9 +1,9 @@
 /* eslint-disable cypress/no-unnecessary-waiting */
 import ComponentPo from '@/cypress/e2e/po/components/component.po';
-import UnitInputPo from '~/cypress/e2e/po/components/unit-input.po';
-import LabeledSelectPo from '~/cypress/e2e/po/components/labeled-select.po';
-import RadioGroupInputPo from '~/cypress/e2e/po/components/radio-group-input.po';
-import TabbedPo from '~/cypress/e2e/po/components/tabbed.po';
+import UnitInputPo from '@/cypress/e2e/po/components/unit-input.po';
+import LabeledSelectPo from '@/cypress/e2e/po/components/labeled-select.po';
+import RadioGroupInputPo from '@/cypress/e2e/po/components/radio-group-input.po';
+import TabbedPo from '@/cypress/e2e/po/components/tabbed.po';
 import NameNsDescription from '@/cypress/e2e/po/components/name-ns-description.po';
 import ArrayList from '@/cypress/e2e/po/components/array-list.po';
 

cypress/e2e/po/components/button-group.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '~/cypress/e2e/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class ButtonGroupPo extends ComponentPo {
   /**

cypress/e2e/po/components/card.po.ts

@@ -1,5 +1,5 @@
-import ComponentPo from '~/cypress/e2e/po/components/component.po';
-import { CypressChainable } from '~/cypress/e2e/po/po.types';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
+import { CypressChainable } from '@/cypress/e2e/po/po.types';
 
 export default class CardPo extends ComponentPo {
   constructor(selector = '[data-testid="card"]') {

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 = '';
 
   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];
@@ -40,4 +42,8 @@ export default class ComponentPo {
   checkNotVisible(): Cypress.Chainable<boolean> {
     return this.self().scrollIntoView().should('not.be.visible');
   }
+
+  checkExists(): Cypress.Chainable<boolean> {
+    return this.self().should('exist');
+  }
 }

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

@@ -0,0 +1,24 @@
+import EmberComponentPo from '@/cypress/e2e/po/components/ember/ember-component.po';
+
+export default class EmberAccordionPo extends EmberComponentPo {
+  private headerSelector: string;
+  private contentSelector: string;
+
+  constructor(private rootTestId: string) {
+    super(`.accordion:has(> [data-testid="${ rootTestId }__header"])`); // This should work, but given current functionality it isn't used
+    this.headerSelector = `[data-testid="${ this.rootTestId }__header"]`;
+    this.contentSelector = `[data-testid="${ this.rootTestId }__content"]`;
+  }
+
+  expand() {
+    this.header().click();
+  }
+
+  header() {
+    return cy.iFrame().find(this.headerSelector);
+  }
+
+  content() {
+    return cy.iFrame().find(this.contentSelector);
+  }
+}

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

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

cypress/e2e/po/components/ember/ember-form-members.po.ts

@@ -0,0 +1,31 @@
+import EmberComponentPo from '@/cypress/e2e/po/components/ember/ember-component.po';
+import EmberModalAddCustomRolePo from '@/cypress/e2e/po/components/ember/ember-modal-add-custom-role.po';
+import EmberSearchableSelectPo from '@/cypress/e2e/po/components/ember/ember-searchable-select.po';
+
+export default class EmberFormMembersPo extends EmberComponentPo {
+  addMember() {
+    return cy.iFrame().find('button').contains('Add Member').click();
+  }
+
+  setNewMemberWithCustomRoles(principal: string, roles: { label: string, roleTemplateId: string }[]) {
+    const name = new EmberSearchableSelectPo('[data-testid="form-members__pending__0"] .principal-search');
+
+    name.setAndSelect(principal);
+
+    const role = new EmberSearchableSelectPo('[data-testid="form-members__pending__0"] td:nth-of-type(2)');
+
+    role.clickAndSelect('Custom');
+
+    const modal = new EmberModalAddCustomRolePo();
+
+    modal.checkExists();
+    modal.accordion().checkExists();
+
+    for (let i = 0; i < roles.length; i++) {
+      const role = roles[i];
+
+      modal.checkOption(role.label);
+    }
+    modal.save();
+  }
+}

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/ember/ember-modal-add-custom-role.po.ts

@@ -0,0 +1,16 @@
+import EmberAccordionPo from '@/cypress/e2e/po/components/ember/ember-accordion.po';
+import EmberModalPo from '@/cypress/e2e/po/components/ember/ember-modal.po';
+
+export default class EmberModalAddCustomRolePo extends EmberModalPo {
+  accordion() {
+    return new EmberAccordionPo(`modal-add-custom-roles__accordion`);
+  }
+
+  checkOption(value: string) {
+    return this.self().find('.form-control').contains(value).click();
+  }
+
+  save() {
+    return this.self().find('button').contains('Save').click();
+  }
+}

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

@@ -0,0 +1,7 @@
+import EmberComponentPo from '@/cypress/e2e/po/components/ember/ember-component.po';
+
+export default class EmberModalPo extends EmberComponentPo {
+  constructor() {
+    super('.modal-open');
+  }
+}

cypress/e2e/po/components/ember/ember-searchable-select.po.ts

@@ -0,0 +1,19 @@
+import EmberComponentPo from '@/cypress/e2e/po/components/ember/ember-component.po';
+
+export default class EmberSearchableSelectPo extends EmberComponentPo {
+  setAndSelect(value: string) {
+    // in some cases this won't actually select anything
+    this.self().find('input').type(value);
+    this.select(value);
+  }
+
+  clickAndSelect(value: string) {
+    this.self().click();
+    this.select(value);
+  }
+
+  select(value:string) {
+    // Assumes select drop down is open
+    cy.iFrame().find('.searchable-option').contains(value).click();
+  }
+}

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

@@ -1,5 +1,5 @@
 import ComponentPo from '@/cypress/e2e/po/components/component.po';
-import { CypressChainable } from '~/cypress/e2e/po/po.types';
+import { CypressChainable } from '@/cypress/e2e/po/po.types';
 
 export default class LabeledInputPo extends ComponentPo {
   static byLabel(self: CypressChainable, label: string): LabeledInputPo {

cypress/e2e/po/components/modal-with-card.po.ts

@@ -1,5 +1,5 @@
-import CardPo from '~/cypress/e2e/po/components/card.po';
-import { CypressChainable } from '~/cypress/e2e/po/po.types';
+import CardPo from '@/cypress/e2e/po/components/card.po';
+import { CypressChainable } from '@/cypress/e2e/po/po.types';
 
 export default class ModalWithCardPo {
   private readonly modalSelector: string;

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/components/workloads/pod.po.ts

@@ -1,6 +1,6 @@
 import CreateEditViewPo from '@/cypress/e2e/po/components/create-edit-view.po';
 import Kubectl from '@/cypress/e2e/po/components/kubectl.po';
-import NameNsDescription from '~/cypress/e2e/po/components/name-ns-description.po';
+import NameNsDescription from '@/cypress/e2e/po/components/name-ns-description.po';
 
 export default class PodPo extends CreateEditViewPo {
   constructor(selector = '.dashboard-root') {

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/catalog.cattle.io.clusterrepo.po.ts

@@ -1,9 +1,9 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
 import NameNsDescription from '@/cypress/e2e/po/components/name-ns-description.po';
 import ResourceDetailPo from '@/cypress/e2e/po/edit/resource-detail.po';
-import RadioGroupInputPo from '~/cypress/e2e/po/components/radio-group-input.po';
-import LabeledInputPo from '~/cypress/e2e/po/components/labeled-input.po';
-import AsyncButtonPo from '~/cypress/e2e/po/components/async-button.po';
+import RadioGroupInputPo from '@/cypress/e2e/po/components/radio-group-input.po';
+import LabeledInputPo from '@/cypress/e2e/po/components/labeled-input.po';
+import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
 
 /**
  * Covers core functionality that's common to the dashboard's import or create cluster pages

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

@@ -0,0 +1,40 @@
+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';
+import EmberFormMembersPo from '~/cypress/e2e/po/components/ember/ember-form-members.po';
+
+/**
+ * Create page for an RKE1 custom cluster
+ */
+export default class ClusterManagerCreateRke1CustomPagePo extends ClusterManagerCreateRKE1PagePo {
+  static url = `${ 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`);
+  }
+
+  // Create/Edit Page
+
+  clusterName(): EmberInputPo {
+    return new EmberInputPo('[data-testid="form-name-description__name"]');
+  }
+
+  memberRoles(): EmberAccordionPo {
+    return new EmberAccordionPo('cru-cluster__members');
+  }
+
+  memberRolesFormMembers(): EmberFormMembersPo {
+    return new EmberFormMembersPo('[data-testid="cru-cluster__members__form"]') ;
+  }
+
+  // Roles Page
+
+  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,35 @@
+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 { CypressChainable } from '@/cypress/e2e/po/po.types';
+
+/**
+ * RKE1 flavour of ClusterManagerCreatePagePo
+ *
+ * This structure is bit tricky. The page covers selecting an RKE and cluster type AND the rke specific create/edit page
+ *
+ * The rke create/edit page in this case is ember
+ */
+export default abstract class ClusterManagerCreateRKE1PagePo extends ClusterManagerCreatePagePo {
+  static url = '/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('[data-testid="driver-rke__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/po/lists/account-api-keys-list.po.ts

@@ -1,4 +1,4 @@
-import BaseResourceList from '~/cypress/e2e/po/lists/base-resource-list.po';
+import BaseResourceList from '@/cypress/e2e/po/lists/base-resource-list.po';
 
 /**
  * List component for api key resources

cypress/e2e/po/lists/catalog.cattle.io.clusterrepo.po.ts

@@ -1,4 +1,4 @@
-import BaseResourceList from '~/cypress/e2e/po/lists/base-resource-list.po';
+import BaseResourceList from '@/cypress/e2e/po/lists/base-resource-list.po';
 
 /**
  * List component for catalog.cattle.io.clusterrepo resources

cypress/e2e/po/pages/account-api-keys-create_key.po.ts

@@ -1,4 +1,4 @@
-import PagePo from '~/cypress/e2e/po/pages/page.po';
+import PagePo from '@/cypress/e2e/po/pages/page.po';
 import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
 import LabeledInputPo from '@/cypress/e2e/po/components/labeled-input.po';
 

cypress/e2e/po/pages/account-api-keys.po.ts

@@ -1,7 +1,7 @@
-import PagePo from '~/cypress/e2e/po/pages/page.po';
+import PagePo from '@/cypress/e2e/po/pages/page.po';
 import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
 import ApiKeysListPo from '@/cypress/e2e/po/lists/account-api-keys-list.po';
-import PasswordPo from '~/cypress/e2e/po/components/password.po';
+import PasswordPo from '@/cypress/e2e/po/components/password.po';
 
 export default class AccountPagePo extends PagePo {
   static url = '/account'

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

@@ -1,6 +1,6 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
-import AsyncButtonPo from '~/cypress/e2e/po/components/async-button.po';
-import LabeledSelectPo from '~/cypress/e2e/po/components/labeled-select.po';
+import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
+import LabeledSelectPo from '@/cypress/e2e/po/components/labeled-select.po';
 import TabbedPo from '@/cypress/e2e/po/components/tabbed.po';
 import ActionMenuPo from '@/cypress/e2e/po/components/action-menu.po';
 import NameNsDescriptionPo from '@/cypress/e2e/po/components/name-ns-description.po';