diff --git a/cypress/e2e/po/components/select-icon-grid.po.ts b/cypress/e2e/po/components/select-icon-grid.po.ts new file mode 100644 index 0000000000..0804c1bc91 --- /dev/null +++ b/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 }"]`); + } +} diff --git a/cypress/e2e/po/pages/explorer/charts/chart.po.ts b/cypress/e2e/po/pages/explorer/charts/chart.po.ts index dc779a3745..ae9504d02f 100644 --- a/cypress/e2e/po/pages/explorer/charts/chart.po.ts +++ b/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() { diff --git a/cypress/e2e/po/pages/explorer/charts/charts.po.ts b/cypress/e2e/po/pages/explorer/charts/charts.po.ts index b1be5ad0c8..6575bafb85 100644 --- a/cypress/e2e/po/pages/explorer/charts/charts.po.ts +++ b/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() { diff --git a/cypress/e2e/tests/pages/explorer/apps/charts.spec.ts b/cypress/e2e/tests/pages/explorer/apps/charts.spec.ts index 6e85721f54..3e88d55e1d 100644 --- a/cypress/e2e/tests/pages/explorer/apps/charts.spec.ts +++ b/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); + }); }); diff --git a/cypress/e2e/tests/pages/explorer/apps/repositories.spec.ts b/cypress/e2e/tests/pages/explorer/apps/repositories.spec.ts index 3745e42681..ce8cfb79eb 100644 --- a/cypress/e2e/tests/pages/explorer/apps/repositories.spec.ts +++ b/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 diff --git a/shell/pages/c/_cluster/apps/charts/index.vue b/shell/pages/c/_cluster/apps/charts/index.vue index aaf2e47fc0..f82afa06c4 100644 --- a/shell/pages/c/_cluster/apps/charts/index.vue +++ b/shell/pages/c/_cluster/apps/charts/index.vue @@ -485,6 +485,8 @@ export default {