add e2e tests for #10389 and #9926 (#10745)

* add e2e tests for #10389 and #9926 * disable eslint for massive blueprint schema file * fix e2e test issue + sneaky improvement for carousel unit test * uncomment missing e2e test * simplify schemas data and logic to generate a V2 monitoring on a local cluster for e2e tests * minor code cleanup
rancher · Apr 10, 2024 · 764fa60 · 764fa60
1 parent c0b8eaa
commit 764fa60
Show file tree

Hide file tree

Showing 12 changed files with 8,160 additions and 1 deletion.
diff --git a/cypress/e2e/blueprints/other-products/v2-monitoring.js b/cypress/e2e/blueprints/other-products/v2-monitoring.js
diff --git a/cypress/e2e/po/other-products/v2-monitoring-list.po.ts b/cypress/e2e/po/other-products/v2-monitoring-list.po.ts
@@ -0,0 +1,15 @@
+import BaseResourceList from '@/cypress/e2e/po/lists/base-resource-list.po';
+
+export default class V2MonitoringListPo extends BaseResourceList {
+  openBulkActionDropdown() {
+    return this.resourceTable().sortableTable().bulkActionDropDownOpen();
+  }
+
+  bulkActionButton(name: string) {
+    return this.resourceTable().sortableTable().bulkActionDropDownButton(name);
+  }
+
+  details(name: string, index: number) {
+    return this.resourceTable().sortableTable().rowWithName(name).column(index);
+  }
+}
diff --git a/cypress/e2e/po/other-products/v2-monitoring.po.ts b/cypress/e2e/po/other-products/v2-monitoring.po.ts
@@ -0,0 +1,103 @@
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import ResourceTablePo from '@/cypress/e2e/po/components/resource-table.po';
+import CodeMirrorPo from '@/cypress/e2e/po/components/code-mirror.po';
+import V2MonitoringListPo from '@/cypress/e2e/po/other-products/v2-monitoring-list.po';
+import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
+import TabbedPo from '@/cypress/e2e/po/components/tabbed.po';
+import LabeledInputPo from '@/cypress/e2e/po/components/labeled-input.po';
+import NameNsDescription from '@/cypress/e2e/po/components/name-ns-description.po';
+import UnitInputPo from '@/cypress/e2e/po/components/unit-input.po';
+
+export default class V2MonitoringPo extends PagePo {
+  static createPath(clusterId: string) {
+    return `/c/${ clusterId }/monitoring`;
+  }
+
+  static goTo(clusterId: string): Cypress.Chainable<Cypress.AUTWindow> {
+    return super.goTo(V2MonitoringPo.createPath(clusterId));
+  }
+
+  constructor(clusterId = 'local') {
+    super(V2MonitoringPo.createPath(clusterId));
+  }
+
+  create(): Cypress.Chainable {
+    return this.list().masthead().actions().contains('Create');
+  }
+
+  createFromYaml(): Cypress.Chainable {
+    return this.list().masthead().actions().contains('Create from YAML');
+  }
+
+  editV2MonitoringItem(name: string) {
+    const resourceTable = new ResourceTablePo(this.self());
+
+    return resourceTable.sortableTable().rowActionMenuOpen(name).getMenuItem('Edit Config').click();
+  }
+
+  alertManagerConfigAddReceiver() {
+    return cy.get('[data-testid="v2-monitoring-add-receiver"]').click();
+  }
+
+  clickTab(selector: string) {
+    return new TabbedPo().clickTabWithSelector(selector);
+  }
+
+  addPagerDutyReceiver() {
+    return cy.get('div[add-label="Add PagerDuty"] button').click();
+  }
+
+  receiverName() {
+    return new LabeledInputPo(cy.get('[data-testid="v2-monitoring-receiver-name"]'));
+  }
+
+  proxyUrl() {
+    return new LabeledInputPo(cy.get('[data-testid="v2-monitoring-receiver-pagerduty-proxy-url"]'));
+  }
+
+  nameNsDescription() {
+    return new NameNsDescription(this.self());
+  }
+
+  prometheusRuleGroupName(index: number) {
+    return new LabeledInputPo(cy.get(`[data-testid="v2-monitoring-prom-rules-group-name-${ index }"]`));
+  }
+
+  prometheusRuleGroupInterval(index: number) {
+    return new UnitInputPo(cy.get(`[data-testid="v2-monitoring-prom-rules-group-interval-${ index }"]`));
+  }
+
+  newPrometheusRuleAddBtn() {
+    return cy.get('[data-testid="tab-list-add"]');
+  }
+
+  prometheusRulesAddRecord(index: number) {
+    return cy.get(`[id=group-${ index }] [data-testid="v2-monitoring-add-record"]`);
+  }
+
+  prometheusRulesRecordName(index: number) {
+    return new LabeledInputPo(cy.get(`[id=group-${ index }] [data-testid="v2-monitoring-prom-rules-recording-name"]`));
+  }
+
+  prometheusRulesRecordPromQl(index: number): CodeMirrorPo {
+    return CodeMirrorPo.bySelector(cy.get(`body [id=group-${ index }]`), '[data-testid="v2-monitoring-prom-rules-recording-promql"]');
+  }
+
+  goToDetailsPage(elemName: string) {
+    const resourceTable = new ResourceTablePo(this.self());
+
+    return resourceTable.sortableTable().detailsPageLinkWithName(elemName).click();
+  }
+
+  list(): V2MonitoringListPo {
+    return new V2MonitoringListPo('[data-testid="sortable-table-list-container"]');
+  }
+
+  yamlEditor(): CodeMirrorPo {
+    return CodeMirrorPo.bySelector(this.self(), '[data-testid="yaml-editor-code-mirror"]');
+  }
+
+  saveCreateForm(): AsyncButtonPo {
+    return new AsyncButtonPo('[data-testid="form-save"]', this.self());
+  }
+}
diff --git a/cypress/e2e/tests/pages/charts/v2-monitoring.spec.ts b/cypress/e2e/tests/pages/charts/v2-monitoring.spec.ts
@@ -0,0 +1,135 @@
+import { generateV2MonitoringForLocalCluster } from '~/cypress/e2e/blueprints/other-products/v2-monitoring.js';
+import V2Monitoring from '~/cypress/e2e/po/other-products/v2-monitoring.po';
+
+describe('V2 monitoring Chart', { tags: ['@charts', '@adminUser'] }, () => {
+  beforeEach(() => {
+    cy.login();
+
+    // all intercepts needed to mock install of V2 monitoring
+    generateV2MonitoringForLocalCluster();
+  });
+
+  describe('V2 monitoring resources', () => {
+    it('alertmanagerconfig should have property "proxyURL" correctly filled out', () => {
+      // this intercept is for the payload of the receiver, which is what we want to test
+      cy.intercept('PUT', 'k8s/clusters/local/v1/monitoring.coreos.com.alertmanagerconfigs/default/test-alert', (req: any) => {
+        req.reply({
+          statusCode: 201,
+          body:       {}
+        });
+      }).as('receiverCreation');
+
+      const v2Monitoring = new V2Monitoring('local');
+
+      // go to v2 monitoring on local cluster
+      v2Monitoring.goTo();
+      v2Monitoring.waitForPage();
+
+      // open Alerting group
+      v2Monitoring.navToSideMenuGroupByLabel('Alerting');
+      v2Monitoring.waitForPage();
+
+      // edit a pre-added alert manager config
+      v2Monitoring.editV2MonitoringItem('test-alert');
+      v2Monitoring.waitForPage();
+
+      // edit form and click save
+      v2Monitoring.alertManagerConfigAddReceiver();
+      v2Monitoring.clickTab('#pagerduty');
+      v2Monitoring.addPagerDutyReceiver();
+
+      v2Monitoring.receiverName().set('some-name');
+      v2Monitoring.proxyUrl().set('some-url');
+      v2Monitoring.saveCreateForm().click();
+
+      cy.wait('@receiverCreation', { requestTimeout: 4000 }).then((req) => {
+        expect(req.request.body.spec.receivers[0].pagerdutyConfigs[0].httpConfig.proxyURL).to.equal('some-url');
+      });
+    });
+
+    it('multiple Alerting Rules in PrometheusRule should have different values', () => {
+      // this intercept is for the payload of the creation of prometheusrules, which is what we want to test
+      cy.intercept('POST', 'k8s/clusters/local/v1/monitoring.coreos.com.prometheusrules', (req: any) => {
+        req.reply({
+          statusCode: 201,
+          body:       {}
+        });
+      }).as('prometheusRulesCreation');
+
+      const v2Monitoring = new V2Monitoring('local');
+
+      // go to v2 monitoring on local cluster
+      v2Monitoring.goTo();
+      v2Monitoring.waitForPage();
+
+      // open Advanced group (default is PrometheusRules)
+      v2Monitoring.navToSideMenuGroupByLabel('Advanced');
+      v2Monitoring.waitForPage();
+
+      // create a new PrometheusRule
+      v2Monitoring.create().click();
+      v2Monitoring.waitForPage();
+
+      // edit form and click save;
+      v2Monitoring.nameNsDescription().name().set('some-prom-rules');
+
+      v2Monitoring.prometheusRuleGroupName(0).self().scrollIntoView();
+      v2Monitoring.prometheusRuleGroupName(0).set('group-name-0');
+      v2Monitoring.prometheusRuleGroupInterval(0).setValue('60');
+      v2Monitoring.prometheusRulesAddRecord(0).click();
+      v2Monitoring.prometheusRulesRecordName(0).self().scrollIntoView();
+      v2Monitoring.prometheusRulesRecordName(0).set('record-0');
+      v2Monitoring.prometheusRulesRecordPromQl(0).self().scrollIntoView();
+      v2Monitoring.prometheusRulesRecordPromQl(0).set('promql-0');
+
+      v2Monitoring.newPrometheusRuleAddBtn().click();
+      v2Monitoring.clickTab('#group-1');
+
+      v2Monitoring.prometheusRuleGroupName(1).self().scrollIntoView();
+      v2Monitoring.prometheusRuleGroupName(1).set('group-name-1');
+      v2Monitoring.prometheusRuleGroupInterval(1).setValue('61');
+      v2Monitoring.prometheusRulesAddRecord(1).click();
+      v2Monitoring.prometheusRulesRecordName(1).self().scrollIntoView();
+      v2Monitoring.prometheusRulesRecordName(1).set('record-1');
+      v2Monitoring.prometheusRulesRecordPromQl(1).self().scrollIntoView();
+      v2Monitoring.prometheusRulesRecordPromQl(1).set('promql-1');
+
+      v2Monitoring.saveCreateForm().click();
+
+      cy.wait('@prometheusRulesCreation', { requestTimeout: 4000 }).then((req) => {
+        expect(req.request.body.spec.groups[0]).to.deep.equal({
+          name:     'group-name-0',
+          interval: '60s',
+          rules:    [
+            {
+              record: 'record-0',
+              expr:   'promql-0',
+              labels: {
+                severity:     'none',
+                namespace:    'default',
+                cluster_id:   'local',
+                cluster_name: 'local'
+              }
+            }
+          ]
+        });
+        expect(req.request.body.spec.groups[1]).to.deep.equal({
+          name:     'group-name-1',
+          interval: '61s',
+          rules:    [
+            {
+              record: 'record-1',
+              expr:   'promql-1',
+              labels: {
+                severity:     'none',
+                namespace:    'default',
+                cluster_id:   'local',
+                cluster_name: 'local'
+              }
+            }
+          ]
+        });
+      });
+    });
+  });
+});
diff --git a/shell/components/Tabbed/index.vue b/shell/components/Tabbed/index.vue
@@ -291,6 +291,7 @@ export default {
           <button
             type="button"
             class="btn bg-transparent"
+            data-testid="tab-list-add"
             @click="tabAddClicked"
           >
             <i class="icon icon-plus" />
@@ -299,6 +300,7 @@ export default {
             type="button"
             class="btn bg-transparent"
             :disabled="!sortedTabs.length"
+            data-testid="tab-list-remove"
             @click="tabRemoveClicked"
           >
             <i class="icon icon-minus" />

diff --git a/shell/components/__tests__/Carousel.test.ts b/shell/components/__tests__/Carousel.test.ts
@@ -37,7 +37,7 @@ describe('component: Carousel', () => {
 
     // testing https://github.com/rancher/dashboard/issues/9975
     sliders.forEach((slider, index) => {
-      expect(wrapper.find(`#slide${ index } h1`).html()).toContain(slider.chartNameDisplay);
+      expect(wrapper.find(`#slide${ index } h1`).text()).toContain(slider.chartNameDisplay);
     });
   });
 });
diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/index.vue b/shell/edit/monitoring.coreos.com.alertmanagerconfig/index.vue
@@ -234,6 +234,7 @@ export default {
                 class="btn role-primary"
                 :disabled="mode === create"
                 :tooltip="t('monitoring.alertmanagerConfig.disabledReceiverButton')"
+                data-testid="v2-monitoring-add-receiver"
               >
                 {{ t('monitoring.receiver.addReceiver') }}
                 <i

diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue b/shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue
@@ -288,6 +288,7 @@ export default {
           :required="true"
           :mode="mode"
           :rules="fvGetAndReportPathRules('name')"
+          data-testid="v2-monitoring-receiver-name"
         />
       </div>
     </div>

diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue
@@ -188,6 +188,7 @@ export default {
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"
+          data-testid="v2-monitoring-receiver-pagerduty-proxy-url"
         />
       </div>
     </div>

diff --git a/shell/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue b/shell/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue
@@ -144,6 +144,7 @@ export default {
             :disabled="disableAddRecord"
             type="button"
             class="btn role-tertiary"
+            data-testid="v2-monitoring-add-record"
             @click="addRule('record')"
           >
             <t k="prometheusRule.recordingRules.addLabel" />

diff --git a/shell/edit/monitoring.coreos.com.prometheusrule/RecordingRule.vue b/shell/edit/monitoring.coreos.com.prometheusrule/RecordingRule.vue
@@ -58,6 +58,7 @@ export default {
           v-model="value.record"
           :label="t('prometheusRule.recordingRules.name')"
           :required="true"
+          data-testid="v2-monitoring-prom-rules-recording-name"
         />
       </div>
     </div>
@@ -77,6 +78,7 @@ export default {
                 foldGutter: false,
                 readOnly: mode === 'view',
               }"
+              data-testid="v2-monitoring-prom-rules-recording-promql"
               @onInput="queueUpdate"
             />
           </template>

diff --git a/shell/edit/monitoring.coreos.com.prometheusrule/index.vue b/shell/edit/monitoring.coreos.com.prometheusrule/index.vue
@@ -166,6 +166,7 @@ export default {
                 :label="t('prometheusRule.groups.name')"
                 :mode="mode"
                 :required="true"
+                :data-testid="`v2-monitoring-prom-rules-group-name-${idx}`"
               />
             </div>
           </div>
@@ -179,6 +180,7 @@ export default {
                 "
                 :label="t('prometheusRule.groups.groupInterval.label')"
                 :mode="mode"
+                :data-testid="`v2-monitoring-prom-rules-group-interval-${idx}`"
                 @input="(e) => updateGroupInterval(filteredGroups[idx], e)"
               />
             </div>