Automation: Update network-policy tests

cypress/e2e/po/components/name-ns-description.po.ts

@@ -12,7 +12,12 @@ export default class NameNsDescription extends ComponentPo {
   }
 
   namespace() {
-    return new LabeledSelectPo(this.self().find('[data-testid="name-ns-description-namespace"]'));
+    return new LabeledSelectPo(`[data-testid="name-ns-description-namespace"]`, this.self());
+  }
+
+  selectNamespace(label: string) {
+    this.namespace().toggle();
+    this.namespace().clickLabel(label);
   }
 
   project() {

cypress/e2e/po/pages/explorer/network-policy.po.ts

@@ -1,16 +1,19 @@
-import PagePo from '@/cypress/e2e/po/pages/page.po';
-import BaseResourceList from '@/cypress/e2e/po/lists/base-resource-list.po';
+import { BaseListPagePo } from '@/cypress/e2e/po/pages/base/base-list-page.po';
+import { BaseDetailPagePo } from '@/cypress/e2e/po/pages/base/base-detail-page.po';
 import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
 import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
-import CreateEditNetworkPolicyPagePo from '@/cypress/e2e/po/edit/policy/network-policy.po';
+import CheckboxInputPo from '@/cypress/e2e/po/components/checkbox-input.po';
+import LabeledSelectPo from '@/cypress/e2e/po/components/labeled-select.po';
+import BannersPo from '@/cypress/e2e/po/components/banners.po';
+import ArrayListPo from '@/cypress/e2e/po/components/array-list.po';
 
-export class NetworkPolicyPagePo extends PagePo {
+export class NetworkPolicyListPagePo extends BaseListPagePo {
   private static createPath(clusterId: string) {
     return `/c/${ clusterId }/explorer/networking.k8s.io.networkpolicy`;
   }
 
   static goTo(clusterId: string): Cypress.Chainable<Cypress.AUTWindow> {
-    return super.goTo(NetworkPolicyPagePo.createPath(clusterId));
+    return super.goTo(NetworkPolicyListPagePo.createPath(clusterId));
   }
 
   static navTo(clusterId = 'local') {
@@ -23,26 +26,58 @@ export class NetworkPolicyPagePo extends PagePo {
   }
 
   constructor(private clusterId = 'local') {
-    super(NetworkPolicyPagePo.createPath(clusterId));
+    super(NetworkPolicyListPagePo.createPath(clusterId));
+  }
+}
+
+export class NetworkPolicyCreateEditPagePo extends BaseDetailPagePo {
+  private static createPath(clusterId: string, namespace?: string, id?: string ) {
+    const root = `/c/${ clusterId }/explorer/networking.k8s.io.networkpolicy`;
+
+    return id ? `${ root }/${ namespace }/${ id }` : `${ root }/create`;
+  }
+
+  static goTo(path: string): Cypress.Chainable<Cypress.AUTWindow> {
+    throw new Error('invalid');
+  }
+
+  constructor(clusterId = 'local', namespace?: string, id?: string) {
+    super(NetworkPolicyCreateEditPagePo.createPath(clusterId, namespace, id));
+  }
+
+  enableIngressCheckbox() {
+    return new CheckboxInputPo('[data-testid="network-policy-ingress-enable-checkbox"]');
+  }
+
+  newNetworkPolicyRuleAddBtn() {
+    return cy.get('[data-testid="tab-list-add"]');
+  }
+
+  addAllowedTrafficSourceButton() {
+    return cy.get('[data-testid="array-list-button"]').contains('Add allowed traffic source');
+  }
+
+  addAllowedPortButton() {
+    return cy.get('[data-testid="array-list-button"]').contains('Add allowed port');
   }
 
-  list() {
-    return new BaseResourceList(this.self());
+  ingressRuleItem(index: number) {
+    return new ArrayListPo('section #rule-ingress0', this.self()).arrayListItem(index);
   }
 
-  clickCreate() {
-    return this.list().masthead().create();
+  ingressRuleItemPortInput(index: number) {
+    return this.ingressRuleItem(index).find('.col:nth-of-type(1) input');
   }
 
-  listElementWithName(name:string) {
-    return this.list().resourceTable().sortableTable().rowElementWithName(name);
+  policyRuleTargetSelect(index: number) {
+    return new LabeledSelectPo(`[data-testid="policy-rule-target-${ index }"] [data-testid="policy-rule-target-type-labeled-select"]`, this.self());
   }
 
-  searchForNetworkPolicy(name: string) {
-    return this.list().resourceTable().sortableTable().filter(name);
+  matchingNamespacesMessage(index: number) {
+    return new BannersPo(`[data-testid="policy-rule-target-${ index }"] [data-testid="matching-namespaces-message"]`);
   }
 
-  createEditNetworkPolicyForm(namespace?: string, id?: string): CreateEditNetworkPolicyPagePo {
-    return new CreateEditNetworkPolicyPagePo(this.clusterId, namespace, id);
+  policyRuleKeyInput(index: number) {
+    return cy.get(`[data-testid="policy-rule-target-${ index }"] [data-testid="input-match-expression-key-control-0"]`);
   }
 }

cypress/e2e/tests/pages/explorer/policy/network-policy.spec.ts

@@ -1,13 +1,14 @@
-import { NetworkPolicyPagePo } from '@/cypress/e2e/po/pages/explorer/network-policy.po';
+import { NetworkPolicyCreateEditPagePo, NetworkPolicyListPagePo } from '@/cypress/e2e/po/pages/explorer/network-policy.po';
 import PromptRemove from '@/cypress/e2e/po/prompts/promptRemove.po';
 
-const networkPolicyPage = new NetworkPolicyPagePo('local');
+const networkPolicyPage = new NetworkPolicyListPagePo('local');
 const customNetworkPolicyName = 'custom-network-policy';
 const networkPolicyDescription = 'Custom Network Policy Description';
 const namespace = 'default';
 let networkPolicyName = '';
 let removeNetworkPolicy = false;
 const networkPolicyToDelete = [];
+const portValue = 8080;
 
 describe('NetworkPolicies', { testIsolation: 'off', tags: ['@explorer', '@adminUser'] }, () => {
   before(() => {
@@ -20,95 +21,119 @@ describe('NetworkPolicies', { testIsolation: 'off', tags: ['@explorer', '@adminU
   it('creates a network policy and displays it in the list', () => {
     // Visit the main menu and select the 'local' cluster
     // Navigate to Policy => Network Policies
-    NetworkPolicyPagePo.goTo('local');
+    NetworkPolicyListPagePo.goTo('local');
     networkPolicyPage.waitForPage();
     // Go to Create Page
-    networkPolicyPage.clickCreate();
+    networkPolicyPage.baseResourceList().masthead().create();
+
+    const networkPolicyCreatePage = new NetworkPolicyCreateEditPagePo('local', namespace);
+
+    networkPolicyCreatePage.waitForPage();
 
     // Enter name & description
-    networkPolicyPage.createEditNetworkPolicyForm().nameInput().set(customNetworkPolicyName);
-    networkPolicyPage.createEditNetworkPolicyForm().descriptionInput().set(networkPolicyDescription);
+    networkPolicyCreatePage.resourceDetail().createEditView().nameNsDescription().name()
+      .set(customNetworkPolicyName);
+    networkPolicyCreatePage.resourceDetail().createEditView().nameNsDescription().description()
+      .set(networkPolicyDescription);
+    networkPolicyCreatePage.resourceDetail().createEditView().nameNsDescription().selectNamespace(namespace);
     // Enable ingress checkbox
-    networkPolicyPage.createEditNetworkPolicyForm().enableIngressCheckbox().set();
+    networkPolicyCreatePage.enableIngressCheckbox().set();
     // Add a new rule without a key to match all the namespaces
-    networkPolicyPage.createEditNetworkPolicyForm().newNetworkPolicyRuleAddBtn().click();
-    networkPolicyPage.createEditNetworkPolicyForm().addAllowedTrafficSourceButton().click();
-    networkPolicyPage.createEditNetworkPolicyForm().policyRuleTargetSelect(0).toggle();
-    networkPolicyPage.createEditNetworkPolicyForm().policyRuleTargetSelect(0).clickOptionWithLabel('Namespace Label Selector');
+    networkPolicyCreatePage.newNetworkPolicyRuleAddBtn().click();
+    networkPolicyCreatePage.addAllowedTrafficSourceButton().click();
+    networkPolicyCreatePage.policyRuleTargetSelect(0).toggle();
+    networkPolicyCreatePage.policyRuleTargetSelect(0).clickOptionWithLabel('Namespace Label Selector');
 
     cy.getRancherResource('v1', 'namespaces').then((resp: Cypress.Response<any>) => {
       cy.wrap(resp.body.count).as('namespaceCount');
     });
 
     cy.get('@namespaceCount').then((count) => {
-      networkPolicyPage.createEditNetworkPolicyForm().matchingNamespacesMessage(0).should('contain.text', `Matches ${ count } of ${ count }`);
+      networkPolicyCreatePage.matchingNamespacesMessage(0).shouldContainText(`Matches ${ count } of ${ count }`);
       // Add a second rule a key to match none of the namespaces
-      networkPolicyPage.createEditNetworkPolicyForm().addAllowedTrafficSourceButton().click();
-      networkPolicyPage.createEditNetworkPolicyForm().policyRuleTargetSelect(1).toggle();
-      networkPolicyPage.createEditNetworkPolicyForm().policyRuleTargetSelect(1).clickOptionWithLabel('Namespace Label Selector');
-      networkPolicyPage.createEditNetworkPolicyForm().policyRuleKeyInput(1).focus().type('something-with-no-matching-namespaces');
-      networkPolicyPage.createEditNetworkPolicyForm().policyRuleTargetSelect(1).self().scrollIntoView();
-      networkPolicyPage.createEditNetworkPolicyForm().matchingNamespacesMessage(1).should('contain.text', `Matches 0 of ${ count }`);
+      networkPolicyCreatePage.addAllowedTrafficSourceButton().click();
+      networkPolicyCreatePage.policyRuleTargetSelect(1).toggle();
+      networkPolicyCreatePage.policyRuleTargetSelect(1).clickOptionWithLabel('Namespace Label Selector');
+      networkPolicyCreatePage.policyRuleKeyInput(1).focus().type('something-with-no-matching-namespaces');
+      networkPolicyCreatePage.policyRuleTargetSelect(1).self().scrollIntoView();
+      networkPolicyCreatePage.matchingNamespacesMessage(1).shouldContainText(`Matches 0 of ${ count }`);
       // Click on Create
-      networkPolicyPage.createEditNetworkPolicyForm().saveCreateForm().click();
+      networkPolicyCreatePage.resourceDetail().cruResource().saveOrCreate().click();
       // Check if the NetworkPolicy is created successfully
       networkPolicyPage.waitForPage();
-      networkPolicyPage.searchForNetworkPolicy(customNetworkPolicyName);
+      networkPolicyPage.baseResourceList().resourceTable().sortableTable().filter(customNetworkPolicyName);
       networkPolicyPage.waitForPage(`q=${ customNetworkPolicyName }`);
-      networkPolicyPage.listElementWithName(customNetworkPolicyName).should('exist').and('be.visible');
+      networkPolicyPage.baseResourceList().resourceTable().sortableTable().rowElementWithName(customNetworkPolicyName)
+        .should('exist')
+        .and('be.visible');
       // Navigate back to the edit page and check if the matching message is still correct
       networkPolicyPage.list().actionMenu(customNetworkPolicyName).getMenuItem('Edit Config').click();
-      networkPolicyPage.createEditNetworkPolicyForm().matchingNamespacesMessage(0).should('contain.text', `Matches ${ count } of ${ count }`);
-      networkPolicyPage.createEditNetworkPolicyForm().matchingNamespacesMessage(1).should('contain.text', `Matches 0 of ${ count }`);
+
+      const networkPolicyEditPage = new NetworkPolicyCreateEditPagePo('local', namespace, customNetworkPolicyName);
+
+      networkPolicyEditPage.waitForPage();
+      networkPolicyEditPage.matchingNamespacesMessage(0).shouldContainText(`Matches ${ count } of ${ count }`);
+      networkPolicyEditPage.matchingNamespacesMessage(1).shouldContainText(`Matches 0 of ${ count }`);
     });
   });
 
   it('can open "Edit as YAML"', () => {
-    NetworkPolicyPagePo.navTo();
+    NetworkPolicyListPagePo.navTo();
     networkPolicyPage.waitForPage();
-    networkPolicyPage.clickCreate();
+    networkPolicyPage.baseResourceList().masthead().create();
 
-    networkPolicyPage.createEditNetworkPolicyForm().editAsYaml().click();
-    networkPolicyPage.createEditNetworkPolicyForm().yamlEditor().checkExists();
+    const networkPolicyCreatePage = new NetworkPolicyCreateEditPagePo('local', namespace);
+
+    networkPolicyCreatePage.waitForPage();
+    networkPolicyCreatePage.resourceDetail().createEditView().editAsYaml();
+    networkPolicyCreatePage.resourceDetail().resourceYaml().codeMirror().checkExists();
   });
 
   // testing https://github.com/rancher/dashboard/issues/11856
   it('port value is sent correctly in request payload', () => {
     cy.intercept('POST', 'v1/networking.k8s.io.networkpolicies').as('createNetworkPolicy');
 
-    NetworkPolicyPagePo.navTo();
+    NetworkPolicyListPagePo.navTo();
     networkPolicyPage.waitForPage();
-    networkPolicyPage.clickCreate();
-    networkPolicyPage.createEditNetworkPolicyForm().waitForPage(null, 'ingress');
+    networkPolicyPage.baseResourceList().masthead().create();
+
+    const networkPolicyCreatePage = new NetworkPolicyCreateEditPagePo('local', namespace);
 
-    networkPolicyPage.createEditNetworkPolicyForm().nameInput().set(networkPolicyName);
-    networkPolicyPage.createEditNetworkPolicyForm().descriptionInput().set(networkPolicyDescription);
-    networkPolicyPage.createEditNetworkPolicyForm().enableIngressCheckbox().set();
-    networkPolicyPage.createEditNetworkPolicyForm().newNetworkPolicyRuleAddBtn().click();
-    networkPolicyPage.createEditNetworkPolicyForm().addAllowedPortButton().click();
-    networkPolicyPage.createEditNetworkPolicyForm().ingressRuleItem(0).find('.col:nth-of-type(1) input').type('8080');
-    networkPolicyPage.createEditNetworkPolicyForm().saveCreateForm().click();
+    networkPolicyCreatePage.waitForPage();
+
+    networkPolicyCreatePage.resourceDetail().createEditView().nameNsDescription().name()
+      .set(networkPolicyName);
+    networkPolicyCreatePage.resourceDetail().createEditView().nameNsDescription().description()
+      .set(networkPolicyDescription);
+    networkPolicyCreatePage.resourceDetail().createEditView().nameNsDescription().selectNamespace(namespace);
+    networkPolicyCreatePage.enableIngressCheckbox().set();
+    networkPolicyCreatePage.newNetworkPolicyRuleAddBtn().click();
+    networkPolicyCreatePage.addAllowedPortButton().click();
+    networkPolicyCreatePage.ingressRuleItemPortInput(0).type(portValue.toString());
+    networkPolicyCreatePage.resourceDetail().cruResource().saveOrCreate().click();
 
     // check request payload
     cy.wait('@createNetworkPolicy').then(({ request, response }) => {
       expect(response?.statusCode).to.eq(201);
       removeNetworkPolicy = true;
       networkPolicyToDelete.push(`${ namespace }/${ networkPolicyName }`);
-      expect(request?.body.spec.ingress).to.deep.include({ ports: [{ port: 8080 }] });
+      expect(request?.body.spec.ingress).to.deep.include({ ports: [{ port: portValue }] });
     });
     networkPolicyPage.waitForPage();
-    networkPolicyPage.searchForNetworkPolicy(networkPolicyName);
+    networkPolicyPage.baseResourceList().resourceTable().sortableTable().filter(networkPolicyName);
     networkPolicyPage.waitForPage(`q=${ networkPolicyName }`);
     networkPolicyPage.list().resourceTable().sortableTable().checkLoadingIndicatorNotVisible();
     networkPolicyPage.list().resourceTable().sortableTable().checkRowCount(false, 1);
     networkPolicyPage.list().actionMenu(networkPolicyName).getMenuItem('Edit Config').click();
-    networkPolicyPage.createEditNetworkPolicyForm(namespace, networkPolicyName).waitForPage(`mode=edit#rule-ingress0`);
+    const networkPolicyEditPage = new NetworkPolicyCreateEditPagePo('local', namespace, networkPolicyName);
+
+    networkPolicyEditPage.waitForPage(`mode=edit#rule-ingress0`);
     // check elements value property
-    networkPolicyPage.createEditNetworkPolicyForm().ingressRuleItem(0).find('.col:nth-of-type(1) input').should('have.value', '8080');
+    networkPolicyEditPage.ingressRuleItemPortInput(0).should('have.value', portValue.toString());
   });
 
   it('can delete a network policy', () => {
-    NetworkPolicyPagePo.navTo();
+    NetworkPolicyListPagePo.navTo();
     networkPolicyPage.waitForPage();
     networkPolicyPage.list().actionMenu(customNetworkPolicyName).getMenuItem('Delete').click();
     const promptRemove = new PromptRemove();