Bug 1915929: CONSOLE-2503: Cypress bump to version 6

frontend/.eslintignore

@@ -2,6 +2,7 @@
 __coverage__
 **/node_modules
 **/dist
+gui_test_screenshots
 *.min.js
 public/lib
 Godeps

frontend/package.json

@@ -194,7 +194,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
-    "@cypress/webpack-preprocessor": "^4.1.3",
+    "@cypress/webpack-preprocessor": "^5.5.0",
     "@graphql-codegen/cli": "^1.15.1",
     "@graphql-codegen/typescript": "^1.15.1",
     "@graphql-codegen/typescript-graphql-files-modules": "^1.15.1",
@@ -223,7 +223,8 @@
     "@types/react-virtualized": "9.x",
     "@types/semver": "^6.0.0",
     "@types/webpack": "4.x",
-    "acorn-jsx": "4.1.1",
+    "acorn": "^7.0.0",
+    "acorn-jsx": "5.2.0",
     "babel-loader": "^8.1.0",
     "bootstrap-sass": "^3.3.7",
     "browser-env": "3.x",
@@ -233,8 +234,8 @@
     "circular-dependency-plugin": "5.x",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "0.28.x",
-    "cypress": "^5.0.0",
-    "cypress-axe": "^0.8.1",
+    "cypress": "^6.0.0",
+    "cypress-axe": "^0.12.0",
     "cypress-cucumber-preprocessor": "latest",
     "cypress-jest-adapter": "^0.1.1",
     "cypress-multi-reporters": "^1.4.0",

frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationBody.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartAxis } from '@patternfly/react-charts';
+import { ChartAxis, ChartContainer } from '@patternfly/react-charts';
 import { Grid } from '@patternfly/react-core';
 import { useRefWidth } from '@console/internal/components/utils/ref-width-hook';
 import { useTranslation } from 'react-i18next';
@@ -13,10 +13,12 @@ const formatDate = (date: Date): string => {
 
 const UtilizationAxis: React.FC<UtilizationAxisProps> = ({ timestamps = [] }) => {
   const [containerRef, width] = useRefWidth();
+  const { t } = useTranslation();
   return (
     <div ref={containerRef}>
       {!!timestamps.length && (
         <ChartAxis
+          containerComponent={<ChartContainer title={t('dashboard~time axis')} />}
           scale={{ x: 'time' }}
           domain={{ x: [timestamps[0], timestamps[timestamps.length - 1]] }}
           tickFormat={formatDate}

frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx

@@ -67,7 +67,10 @@ export const MultilineUtilizationItem: React.FC<MultilineUtilizationItemProps> =
         height={70}
         byteDataType={byteDataType}
         showAllTooltip
-        ariaChartLabel={`View ${title || ''} Graph in Query Browser`}
+        ariaChartLinkLabel={t('dashboard~View {{title}} metrics in query browser', {
+          title,
+        })}
+        ariaChartTitle={title}
       />
     );
 
@@ -154,7 +157,10 @@ export const UtilizationItem: React.FC<UtilizationItemProps> = React.memo(
 
     const chart = (
       <AreaChart
-        ariaChartLabel={`View ${title || ''} Graph in Query Browser`}
+        ariaChartLinkLabel={t('dashboard~View {{title}} metrics in query browser', {
+          title,
+        })}
+        ariaChartTitle={title}
         data={data}
         loading={!error && isLoading}
         query={query}

frontend/packages/dev-console/integration-tests/support/pages/add-flow/catalog-page.ts

@@ -64,7 +64,7 @@ export const catalogPage = {
       .click(),
   clickOnInstallButton: () => {
     cy.get(catalogPO.installHelmChart.install).click();
-    cy.get('.co-m-loader', { timeout: 40000 }).should('not.be.visible');
+    cy.get('.co-m-loader', { timeout: 40000 }).should('not.exist');
   },
   enterReleaseName: (releaseName: string) =>
     cy

frontend/packages/dev-console/integration-tests/support/pages/app.ts

@@ -6,8 +6,7 @@ import { devNavigationMenuPO } from '../pageObjects/global-po';
 import { pageTitle } from '../constants/pageTitle';
 
 export const app = {
-  waitForLoad: (timeout: number = 30000) =>
-    cy.get('.co-m-loader', { timeout }).should('not.be.visible'),
+  waitForLoad: (timeout: number = 30000) => cy.get('.co-m-loader', { timeout }).should('not.exist'),
 };
 
 export const perspective = {

frontend/packages/dev-console/integration-tests/support/pages/modal.ts

@@ -3,15 +3,15 @@ import { eventSourcePO } from '../pageObjects/add-flow-po';
 export const modal = {
   clickCancel: () => {
     cy.byLegacyTestID('modal-cancel-action').click();
-    cy.get('form').should('not.be.visible');
+    cy.get('form').should('not.exist');
   },
   clicKSave: () => {
     cy.byTestID('confirm-action').click();
-    cy.get('form').should('not.be.visible');
+    cy.get('form').should('not.exist');
   },
   clicKDelete: () => {
     cy.byTestID('confirm-action').click();
-    cy.get('form').should('not.be.visible');
+    cy.get('form').should('not.exist');
   },
   verifySaveButtonIsDisplayed: () => {
     cy.byTestID('confirm-action').should('be.visible');
@@ -103,7 +103,7 @@ export const deleteApplication = {
     cy.byTestID('confirm-action')
       .should('be.enabled')
       .click();
-    cy.get('form').should('not.be.visible');
+    cy.get('form').should('not.exist');
   },
   deleteApp: () => {
     cy.get('p strong').then((ele) => {

frontend/packages/dev-console/integration-tests/support/pages/topology/topology-page.ts

@@ -7,7 +7,7 @@ export const topologyPage = {
     cy.get('h1.ocs-page-layout__title').should('have.text', 'Topology');
   },
   verifyTopologyPage: () => {
-    cy.get('.co-m-loader', { timeout: 40000 }).should('not.be.visible');
+    cy.get('.co-m-loader', { timeout: 40000 }).should('not.exist');
     cy.get(topologyPO.graph.reset).should('be.visible');
   },
   verifyContextMenu: () => cy.get('#popper-container ul').should('be.visible'),

frontend/packages/dev-console/integration-tests/support/pages/topology/topology-side-pane-page.ts

@@ -71,7 +71,7 @@ export const topologySidePane = {
       .scrollIntoView()
       .should('be.visible');
     cy.byLegacyTestID('modal-cancel-action').click();
-    cy.get('form').should('not.be.visible');
+    cy.get('form').should('not.exist');
   },
   verifyAnnotaiton: (annotationName: string) => {
     cy.byTestID('edit-annotations').click();

frontend/packages/integration-tests-cypress/plugins/index.js

@@ -14,7 +14,7 @@ module.exports = (on, config) => {
           {
             test: /\.tsx?$/,
             loader: 'ts-loader',
-            options: { transpileOnly: true },
+            options: { happyPackMode: true, transpileOnly: true },
           },
         ],
       },
@@ -42,15 +42,6 @@ module.exports = (on, config) => {
     },
   });
   on('file:preprocessor', wp(options));
-  /* In a Docker container, the default size of the /dev/shm shared memory space is 64MB. This is not typically enough
-   to run Chrome and can cause the browser to crash. You can fix this by passing the --disable-dev-shm-usage flag to
-   Chrome with the following workaround: */
-  on('before:browser:launch', (browser = {}, launchOptions) => {
-    if (browser.family === 'chromium' && browser.name !== 'electron') {
-      launchOptions.args.push('--disable-dev-shm-usage');
-    }
-    return launchOptions;
-  });
   // `config` is the resolved Cypress config
   config.baseUrl = `${process.env.BRIDGE_BASE_ADDRESS || 'http://localhost:9000'}${(
     process.env.BRIDGE_BASE_PATH || '/'

frontend/packages/integration-tests-cypress/support/a11y.ts

@@ -41,6 +41,7 @@ Cypress.Commands.add('testA11y', (target: string, selector?: string) => {
       { id: 'color-contrast', enabled: false }, // seem to be somewhat inaccurate and has difficulty always picking up the correct colors, tons of open issues for it on axe-core
       { id: 'focusable-content', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
       { id: 'scrollable-region-focusable', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
+      { id: 'list', enabled: false }, // introduced in Cypress 6.0. fix devconsole's sidebar NavList UL to only have LI as direct child elements. see https://bugzilla.redhat.com/show_bug.cgi?id=1908772
     ],
   });
   a11yTestResults.numberChecks += 1;

frontend/packages/integration-tests-cypress/support/index.ts

@@ -16,7 +16,7 @@ Cypress.Commands.overwrite('log', (originalFn, message) => {
 });
 
 before(() => {
-  cy.task('readFileIfExists', 'cypress-a11y-report.json').then((a11yReportOrNull) => {
+  cy.task('readFileIfExists', 'cypress-a11y-report.json').then((a11yReportOrNull: string) => {
     if (a11yReportOrNull !== null) {
       try {
         const a11yReport = JSON.parse(a11yReportOrNull);

frontend/packages/integration-tests-cypress/tests/crud/k8-openshift-cruds.spec.ts

@@ -98,6 +98,10 @@ describe('Kubernetes resource CRUD operations', () => {
 
   testObjs.forEach(
     ({ kind, namespaced = true, humanizeKind = true, testI18n = true }, resource) => {
+      // Ex: to execute just the Pod crud tests, set environment var 'cypress_k8sTestResource=Pod' before running cypress
+      if (Cypress.env('k8sTestResource') && kind !== Cypress.env('k8sTestResource')) {
+        return;
+      }
       describe(kind, () => {
         const name = `${testName}-${_.kebabCase(kind)}`;
 

frontend/packages/integration-tests-cypress/tests/crud/namespace-crud.spec.ts

@@ -70,7 +70,7 @@ describe('Namespace', () => {
     nav.sidenav.clickNavLink(['Workloads', 'Secrets']);
     projectDropdown.shouldContain('All Projects');
     cy.log(
-      'Nav back to list page from details page via sidebar nav menu should change Project back to "All Projects"',
+      'Nav back to list page from details page via breadcrumb should change Project back to "All Projects"',
     );
     cy.get(`[data-test-rows="resource-row"]`)
       .first()

frontend/packages/integration-tests-cypress/tests/crud/other-routes.spec.ts

@@ -47,7 +47,7 @@ describe('Visiting other routes', () => {
       cy.visit(route);
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(5000); // wait for page to load
-      cy.byLegacyTestID('error-page').should('not.be.visible');
+      cy.byLegacyTestID('error-page').should('not.exist');
       cy.testA11y(`${route} page`);
     });
   });

frontend/packages/integration-tests-cypress/views/list-page.ts

@@ -57,7 +57,7 @@ export const listPage = {
         .contains(resourceName)
         .click(),
     shouldNotExist: (resourceName: string) =>
-      cy.get(`[data-test-id="${resourceName}"]`, { timeout: 90000 }).should('not.be.visible'),
+      cy.get(`[data-test-id="${resourceName}"]`, { timeout: 90000 }).should('not.exist'),
   },
 };
 

frontend/packages/integration-tests-cypress/views/modal.ts

@@ -2,9 +2,9 @@ import { submitButton } from './form';
 
 export const modal = {
   shouldBeOpened: () => cy.byLegacyTestID('modal-cancel-action').should('be.visible'),
-  shouldBeClosed: () => cy.byLegacyTestID('modal-cancel-action').should('not.be.visible'),
-  submitShouldBeDisabled: () => cy.get(submitButton).should('be', 'disabled'),
-  submitShouldBeEnabled: () => cy.get(submitButton).should('not.be', 'disabled'),
+  shouldBeClosed: () => cy.byLegacyTestID('modal-cancel-action').should('not.exist'),
+  submitShouldBeDisabled: () => cy.get(submitButton).should('be.disabled'),
+  submitShouldBeEnabled: () => cy.get(submitButton).should('not.be.disabled'),
   cancel: (force: boolean = false) => cy.byLegacyTestID('modal-cancel-action').click({ force }),
   submit: (force: boolean = false) => cy.get(submitButton).click({ force }),
   modalTitleShouldContain: (modalTitle: string) =>

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/tests/descriptors.spec.ts

@@ -70,9 +70,7 @@ describe('Using OLM descriptor components', () => {
     cy.visit(
       `/k8s/ns/${testName}/operators.coreos.com~v1alpha1~ClusterServiceVersion/${testCSV.metadata.name}/${group}~${version}~${kind}/${testCR.metadata.name}`,
     );
-    cy.byLegacyTestID('resource-title')
-      .invoke('text')
-      .should('be', `${testCR.metadata.name}`);
+    cy.byLegacyTestID('resource-title').should('have.text', `${testCR.metadata.name}`);
   });
 
   testCSV.spec.customresourcedefinitions.owned[0].specDescriptors.forEach((descriptor) => {

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/tests/operator-install-global.spec.ts

@@ -124,7 +124,7 @@ describe(`Interacting with a global install mode Operator (${operatorName})`, ()
     modal.submit(true);
     modal.shouldBeClosed();
     cy.log('verify the Operator is not installed');
-    cy.get('.loading-skeleton--table').should('not.be.visible');
+    cy.get('.loading-skeleton--table').should('not.exist');
     cy.byTestOperatorRow(operatorRow).should('not.exist');
   });
 });

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/tests/operator-install-single-namespace.spec.ts

@@ -119,7 +119,7 @@ describe(`Interacting with a single namespace install mode Operator (${operatorN
       `/k8s/ns/${testName}/operators.coreos.com~v1alpha1~ClusterServiceVersion`,
     );
     cy.log(`verify the Operator is not installed in namespace ${testName}`);
-    cy.get('.loading-skeleton--table').should('not.be.visible');
+    cy.get('.loading-skeleton--table').should('not.exist');
     cy.byTestOperatorRow(operatorRow).should('not.exist');
   });
 });

frontend/public/components/graphs/area.tsx

@@ -55,7 +55,8 @@ export const AreaChart: React.FC<AreaChartProps> = ({
   query,
   tickCount = DEFAULT_TICK_COUNT,
   title,
-  ariaChartLabel,
+  ariaChartLinkLabel,
+  ariaChartTitle,
   xAxis = true,
   yAxis = true,
   chartStyle,
@@ -136,8 +137,9 @@ export const AreaChart: React.FC<AreaChartProps> = ({
   return (
     <PrometheusGraph className={className} ref={containerRef} title={title}>
       {processedData?.length ? (
-        <PrometheusGraphLink query={query} ariaChartLabel={ariaChartLabel}>
+        <PrometheusGraphLink query={query} ariaChartLinkLabel={ariaChartLinkLabel}>
           <Chart
+            ariaTitle={ariaChartTitle || title}
             containerComponent={container}
             domainPadding={{ y: 20 }}
             height={height}
@@ -220,7 +222,8 @@ export type AreaChartProps = {
   theme?: any; // TODO figure out the best way to import VictoryThemeDefinition
   tickCount?: number;
   title?: string;
-  ariaChartLabel?: string;
+  ariaChartLinkLabel?: string;
+  ariaChartTitle?: string;
   data?: DataPoint[][];
   xAxis?: boolean;
   yAxis?: boolean;

frontend/public/components/graphs/gauge.tsx

@@ -26,6 +26,8 @@ export const GaugeChart: React.FC<GaugeChartProps> = ({
   themeColor = ChartThemeColor.green,
   thresholds = DEFAULT_THRESHOLDS,
   title,
+  ariaChartLinkLabel,
+  ariaChartTitle,
   usedLabel = 'used',
   // Don't sort, Uses previously declared props
   label = data ? humanize(data.y).string : 'No Data',
@@ -42,8 +44,9 @@ export const GaugeChart: React.FC<GaugeChartProps> = ({
       ref={ref}
       title={title}
     >
-      <PrometheusGraphLink query={query}>
+      <PrometheusGraphLink query={query} ariaChartLinkLabel={ariaChartLinkLabel}>
         <ChartDonutThreshold
+          ariaTitle={ariaChartTitle || title}
           data={thresholds}
           height={width} // Changes the scale of the graph, not actual width and height
           padding={0}
@@ -121,6 +124,8 @@ type GaugeChartProps = {
     color?: string;
   }[];
   title?: string;
+  ariaChartLinkLabel?: string;
+  ariaChartTitle?: string;
   usedLabel?: string;
   className?: string;
 };

frontend/public/components/graphs/prometheus-graph.tsx

@@ -33,7 +33,7 @@ export const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
   children,
   query,
   namespace,
-  ariaChartLabel,
+  ariaChartLinkLabel,
 }) => {
   const [perspective] = useActivePerspective();
   if (!query) {
@@ -49,7 +49,11 @@ export const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
       : `/dev-monitoring/ns/${namespace}/metrics?${params.toString()}`;
 
   return (
-    <Link to={url} aria-label={ariaChartLabel} style={{ color: 'inherit', textDecoration: 'none' }}>
+    <Link
+      to={url}
+      aria-label={ariaChartLinkLabel}
+      style={{ color: 'inherit', textDecoration: 'none' }}
+    >
       {children}
     </Link>
   );
@@ -69,7 +73,7 @@ type PrometheusGraphLinkProps = {
   canAccessMonitoring: boolean;
   query: string;
   namespace?: string;
-  ariaChartLabel?: string;
+  ariaChartLinkLabel?: string;
 };
 
 type PrometheusGraphProps = {

frontend/public/components/graphs/stack.tsx

@@ -38,6 +38,8 @@ export const StackChart: React.FC<AreaChartProps> = ({
   query,
   tickCount = DEFAULT_TICK_COUNT,
   title,
+  ariaChartLinkLabel,
+  ariaChartTitle,
   xAxis = true,
   yAxis = true,
   chartStyle,
@@ -110,8 +112,9 @@ export const StackChart: React.FC<AreaChartProps> = ({
   return (
     <PrometheusGraph className={className} ref={containerRef} title={title}>
       {data?.[0]?.length ? (
-        <PrometheusGraphLink query={query}>
+        <PrometheusGraphLink query={query} ariaChartLinkLabel={ariaChartLinkLabel}>
           <Chart
+            ariaTitle={ariaChartTitle || title}
             containerComponent={container}
             domainPadding={{ y: 20 }}
             height={height}

frontend/public/components/monitoring/alerting.tsx

@@ -392,7 +392,9 @@ const Graph: React.FC<GraphProps> = ({
 
   const GraphLink = () =>
     query ? (
-      <Link to={queryBrowserURL(query, namespace)}>{t('public~View in Metrics')}</Link>
+      <Link aria-label={t('public~View in Metrics')} to={queryBrowserURL(query, namespace)}>
+        {t('public~View in Metrics')}
+      </Link>
     ) : null;
 
   return (