Merge pull request #10973 from richard-cox/e2e-chart-icon

Add automated tests to ensure Chart icons are correct

cypress/e2e/po/components/select-icon-grid.po.ts

@@ -0,0 +1,15 @@
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
+
+export default class SelectIconGridPo extends ComponentPo {
+  constructor(selector: string, private componentId = 'select-icon-grid') {
+    super(selector);
+  }
+
+  select(name: string) {
+    return this.self().find('.name').contains(name).click();
+  }
+
+  getGridEntry(idx: number, componentTestId = this.componentId) {
+    return this.self().find(`[data-testid="${ componentTestId }-${ idx }"]`);
+  }
+}

cypress/e2e/po/pages/explorer/charts/chart.po.ts

@@ -19,7 +19,7 @@ export class ChartPage extends PagePo {
     const chartsPage = new ChartsPage(clusterId);
 
     ChartsPage.navTo();
-    chartsPage.selectChart(chartName);
+    chartsPage.charts().select(chartName);
   }
 
   goToInstall() {

cypress/e2e/po/pages/explorer/charts/charts.po.ts

@@ -3,6 +3,7 @@ import SelectPo from '@/cypress/e2e/po/components/select.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 BannersPo from '@/cypress/e2e/po/components/banners.po';
+import SelectIconGridPo from '@/cypress/e2e/po/components/select-icon-grid.po';
 
 export class ChartsPage extends PagePo {
   private static createPath(clusterId: string) {
@@ -46,8 +47,26 @@ export class ChartsPage extends PagePo {
     return new SelectPo(this.self().find('[data-testid="charts-filter-repos"]'));
   }
 
-  selectChart(name: string) {
-    return cy.get('.grid .name').contains(name).click();
+  charts() {
+    return new SelectIconGridPo('[data-testid="chart-selection-grid"]', 'chart-selection');
+  }
+
+  getChart(idx: number) {
+    return this.charts().getGridEntry(idx);
+  }
+
+  getChartByName(name: string) {
+    return this.charts().self().contains(name).parent();
+  }
+
+  checkChartGenericIcon(name: string, isGeneric = true) {
+    const src = this.getChartByName(name).find('.logo img').invoke('attr', 'src');
+
+    if (isGeneric) {
+      return src.should('contain', 'generic-catalog');
+    }
+
+    return src.should('not.contain', 'generic-catalog');
   }
 
   bannerContent() {

cypress/e2e/tests/pages/explorer/apps/charts.spec.ts

@@ -1,13 +1,13 @@
 import { ChartsPage } from '@/cypress/e2e/po/pages/explorer/charts/charts.po';
 
+const chartsPage = new ChartsPage();
+
 describe('Apps/Charts', { tags: ['@explorer', '@adminUser'] }, () => {
   beforeEach(() => {
     cy.login();
   });
 
   it('should render an informational message inside of a banner', () => {
-    const chartsPage = new ChartsPage();
-
     chartsPage.goTo();
     chartsPage.waitForPage();
 
@@ -15,9 +15,6 @@ describe('Apps/Charts', { tags: ['@explorer', '@adminUser'] }, () => {
   });
 
   it('filtering the Charts (search box) should not impact the Charts carousel', () => {
-    let length = 0;
-    const chartsPage = new ChartsPage();
-
     chartsPage.goTo();
     chartsPage.waitForPage();
 
@@ -25,31 +22,44 @@ describe('Apps/Charts', { tags: ['@explorer', '@adminUser'] }, () => {
     // testing https://github.com/rancher/dashboard/issues/9822
     cy.title().should('eq', 'Rancher - local - Charts');
 
+    chartsPage.chartsFilterCategoriesSelect().checkOptionSelected('All Categories');
+    chartsPage.chartsFilterReposSelect().checkOptionSelected('All');
+    chartsPage.chartsFilterInput().clear();
+
     // testing https://github.com/rancher/dashboard/issues/10027
     chartsPage.chartsCarouselSlides().then(($val) => {
-      length = $val.length;
+      const length = $val.length;
 
+      // Test text filter
       chartsPage.chartsFilterInput().type('just some random text');
-
+      chartsPage.chartsCarouselSlides().should('have.length', length);
+      chartsPage.chartsFilterInput().clear();
       chartsPage.chartsCarouselSlides().should('have.length', length);
 
-      // reset text filter input
-      chartsPage.chartsFilterInput().clear();
-
+      // Test categories filter
       chartsPage.chartsFilterCategoriesSelect().toggle();
       chartsPage.chartsFilterCategoriesSelect().clickOptionWithLabel('Applications');
-
       chartsPage.chartsCarouselSlides().should('have.length', length);
-
-      // reset categories filter
       chartsPage.chartsFilterCategoriesSelect().toggle();
       chartsPage.chartsFilterCategoriesSelect().clickOptionWithLabel('All Categories');
+      chartsPage.chartsCarouselSlides().should('have.length', length);
 
+      // Test repo filter
       chartsPage.chartsFilterReposSelect().toggle();
-      chartsPage.chartsFilterReposSelect().getOptions();
       chartsPage.chartsFilterReposSelect().clickOptionWithLabelForChartReposFilter('Rancher');
-
+      chartsPage.chartsCarouselSlides().should('have.length', length);
+      chartsPage.chartsFilterReposSelect().clickOptionWithLabelForChartReposFilter('All');
       chartsPage.chartsCarouselSlides().should('have.length', length);
     });
   });
+
+  it('Charts have expected icons', () => {
+    chartsPage.goTo();
+    chartsPage.waitForPage();
+
+    chartsPage.checkChartGenericIcon('External IP Webhook', true);
+    chartsPage.checkChartGenericIcon('Alerting Driver', false);
+    chartsPage.checkChartGenericIcon('CIS Benchmark', false);
+    chartsPage.checkChartGenericIcon('Logging', false);
+  });
 });

cypress/e2e/tests/pages/explorer/apps/repositories.spec.ts

@@ -80,10 +80,11 @@ describe('Apps', () => {
 
         // Nav to a summary page for a specific chart
         ChartsPage.navTo(clusterId);
-        chartsPage.chartsFilterReposSelect().toggle();
-        chartsPage.chartsFilterReposSelect().clickOptionWithLabelForChartReposFilter('All');
+        chartsPage.chartsFilterCategoriesSelect().checkOptionSelected('All Categories');
+        chartsPage.chartsFilterReposSelect().checkOptionSelected('All');
+        chartsPage.chartsFilterInput().clear();
 
-        chartsPage.selectChart('Rancher Backups');
+        chartsPage.charts().select('Rancher Backups');
         chartPage.waitForPage();
 
         // The repo charts should have been fetched

shell/pages/c/_cluster/apps/charts/index.vue

@@ -485,6 +485,8 @@ export default {
       </div>
       <SelectIconGrid
         v-else
+        data-testid="chart-selection-grid"
+        component-test-id="chart-selection"
         :rows="filteredCharts"
         name-field="chartNameDisplay"
         description-field="chartDescription"