Merge pull request #13070 from rhamilto/CONSOLE-3716

CONSOLE-3740: Upgrade Cypress

README.md

@@ -242,6 +242,8 @@ yarn run test-cypress-console
 This will launch the Cypress Test Runner UI in the `console` package, where you can run one or all cypress tests.
 By default, it will look for Chrome in the system and use it, but if you want to use Firefox instead, set `BRIDGE_E2E_BROWSER_NAME` environment variable in your shell with the value `firefox`.
 
+**Important:**  when testing with authentication, set `BRIDGE_KUBEADMIN_PASSWORD` environment variable in your shell.
+
 ##### Execute Cypress in different packages
 
 An alternate way to execute cypress tests is via [test-cypress.sh](test-cypress.sh) which takes a `-p <package>` parameter to allow execution in different packages. It also can run Cypress tests in the Test Runner UI or in `-- headless` mode:

dynamic-demo-plugin/console-extensions.json

@@ -252,7 +252,7 @@
       "id": "test-list-page",
       "perspective": "admin",
       "section": "admin-demo-section",
-      "name": "List Page",
+      "name": "%plugin__console-demo-plugin~List Page%",
       "href": "/demo-list-page"
     },
     "flags": {
@@ -272,7 +272,7 @@
       "id": "test-k8s-api",
       "perspective": "admin",
       "section": "admin-demo-section",
-      "name": "K8s API",
+      "name": "%plugin__console-demo-plugin~K8s API%",
       "href": "/test-k8sapi"
     },
     "flags": {
@@ -327,7 +327,7 @@
     "properties": {
       "id": "demo-plugin-tab",
       "navSection": "home",
-      "title": "Demo Dashboard"
+      "title": "%plugin__console-demo-plugin~Demo Dashboard%"
     }
   },
   {
@@ -381,7 +381,7 @@
       "id": "test-modal-page",
       "perspective": "admin",
       "section": "admin-demo-section",
-      "name": "Modal Launchers",
+      "name": "%plugin__console-demo-plugin~Modal Launchers%",
       "href": "/test-modal"
     }
   },

dynamic-demo-plugin/locales/en/plugin__console-demo-plugin.json

@@ -32,6 +32,16 @@
   "k8sUpdate": "k8sUpdate",
   "k8sList": "k8sList",
   "k8sDelete": "k8sDelete",
+  "Name": "Name",
+  "Namespace": "Namespace",
+  "OpenShift Pods List Page": "OpenShift Pods List Page",
+  "Create Pod": "Create Pod",
+  "Sample ResourceIcon": "Sample ResourceIcon",
+  "Storage Classes": "Storage Classes",
+  "StorageClasses present in this cluster:": "StorageClasses present in this cluster:",
+  "Component is resolving": "Component is resolving",
+  "Launch Modal": "Launch Modal",
+  "Launch Modal Asynchronously": "Launch Modal Asynchronously",
   "Added title": "Added title",
   "My value": "My value",
   "Added title - error": "Added title - error",
@@ -49,9 +59,13 @@
   "Test Utilities": "Test Utilities",
   "Foo item": "Foo item",
   "Bar item": "Bar item",
+  "Demo Dashboard": "Demo Dashboard",
   "Custom Overview Detail Title": "Custom Overview Detail Title",
   "Example Namespaced Page": "Example Namespaced Page",
   "Dashboard Card": "Dashboard Card",
+  "List Page": "List Page",
+  "K8s API": "K8s API",
+  "Modal Launchers": "Modal Launchers",
   "Dynamic Page 1": "Dynamic Page 1",
   "Dynamic Page 2": "Dynamic Page 2"
 }

dynamic-demo-plugin/src/components/ListPage.tsx

@@ -15,30 +15,7 @@ import {
   ResourceIcon,
   TableColumn,
 } from '@openshift-console/dynamic-plugin-sdk';
-
-const columns: TableColumn<K8sResourceCommon>[] = [
-  {
-    title: 'Name',
-    id: 'name',
-  },
-  {
-    title: 'Namespace',
-    id: 'namespace',
-  },
-];
-
-const PodRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
-  return (
-    <>
-      <TableData id={columns[0].id} activeColumnIDs={activeColumnIDs}>
-        <ResourceLink kind="Pod" name={obj.metadata.name} namespace={obj.metadata.namespace} />
-      </TableData>
-      <TableData id={columns[1].id} activeColumnIDs={activeColumnIDs}>
-        <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
-      </TableData>
-    </>
-  );
-};
+import { useTranslation } from 'react-i18next';
 
 type PodsTableProps = {
   data: K8sResourceCommon[];
@@ -48,6 +25,32 @@ type PodsTableProps = {
 };
 
 const PodsTable: React.FC<PodsTableProps> = ({ data, unfilteredData, loaded, loadError }) => {
+  const { t } = useTranslation();
+
+  const columns: TableColumn<K8sResourceCommon>[] = [
+    {
+      title: t('plugin__console-demo-plugin~Name'),
+      id: 'name',
+    },
+    {
+      title: t('plugin__console-demo-plugin~Namespace'),
+      id: 'namespace',
+    },
+  ];
+
+  const PodRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
+    return (
+      <>
+        <TableData id={columns[0].id} activeColumnIDs={activeColumnIDs}>
+          <ResourceLink kind="Pod" name={obj.metadata.name} namespace={obj.metadata.namespace} />
+        </TableData>
+        <TableData id={columns[1].id} activeColumnIDs={activeColumnIDs}>
+          <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
+        </TableData>
+      </>
+    );
+  };
+
   return (
     <VirtualizedTable<K8sResourceCommon>
       data={data}
@@ -92,15 +95,16 @@ const ListPage = () => {
     isList: true,
     namespaced: true,
   });
+  const { t } = useTranslation();
 
   const [data, filteredData, onFilterChange] = useListPageFilter(pods, filters, {
     name: { selected: ['openshift'] },
   });
 
   return (
     <>
-      <ListPageHeader title="OpenShift Pods List Page">
-        <ListPageCreate groupVersionKind="Pod">Create Pod</ListPageCreate>
+      <ListPageHeader title={t('plugin__console-demo-plugin~OpenShift Pods List Page')}>
+        <ListPageCreate groupVersionKind="Pod">{t('plugin__console-demo-plugin~Create Pod')}</ListPageCreate>
       </ListPageHeader>
       <ListPageBody>
         <ListPageFilter
@@ -117,7 +121,7 @@ const ListPage = () => {
         />
       </ListPageBody>
       <ListPageBody>
-        <p>Sample ResourceIcon</p>
+        <p>{t('plugin__console-demo-plugin~Sample ResourceIcon')}</p>
         <ResourceIcon kind="Pod" />
       </ListPageBody>
     </>

dynamic-demo-plugin/src/components/Modals/ModalPage.tsx

@@ -6,6 +6,7 @@ import {
   useModal,
 } from '@openshift-console/dynamic-plugin-sdk';
 import './modal.scss';
+import { useTranslation } from 'react-i18next';
 
 export const scResource = {
   kind: 'StorageClass',
@@ -15,9 +16,10 @@ export const scResource = {
 
 export const TestModal: React.FC<{ closeModal: () => void }> = (props) => {
   const [res] = useK8sWatchResource<K8sResourceCommon[]>(scResource);
+  const { t } = useTranslation();
   return (
-    <Modal isOpen onClose={props?.closeModal} title="Storage Classes">
-      StorageClasses present in this cluster:
+    <Modal isOpen onClose={props?.closeModal} title={t('plugin__console-demo-plugin~Storage Classes')}>
+      {t('plugin__console-demo-plugin~StorageClasses present in this cluster:')}
       <List>
         {!!res &&
           res.map((item) => <ListItem key={item.metadata.uid}>{item.metadata.name}</ListItem>)}
@@ -26,19 +28,24 @@ export const TestModal: React.FC<{ closeModal: () => void }> = (props) => {
   );
 };
 
-const LoadingComponent: React.FC = () => (
-  <Flex
-    className="demo-modal__loader"
-    alignItems={{ default: 'alignItemsCenter' }}
-    justifyContent={{ default: 'justifyContentCenter' }}
-    grow={{ default: 'grow' }}
-  >
-    <Spinner isSVG size="xl" aria-label="Component is resolving" />
-  </Flex>
-);
+const LoadingComponent: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex
+      className="demo-modal__loader"
+      alignItems={{ default: 'alignItemsCenter' }}
+      justifyContent={{ default: 'justifyContentCenter' }}
+      grow={{ default: 'grow' }}
+    >
+      <Spinner isSVG size="xl" aria-label={t('plugin__console-demo-plugin~Component is resolving')} />
+    </Flex>
+  );
+};
 
 export const TestModalPage: React.FC<{ closeComponent: any }> = () => {
   const launchModal = useModal();
+  const { t } = useTranslation();
 
   const TestComponent =
     ({ closeModal, ...rest }) =>
@@ -70,8 +77,8 @@ export const TestModalPage: React.FC<{ closeComponent: any }> = () => {
       direction={{ default: 'column' }}
       className="demo-modal__page"
     >
-      <Button onClick={onClick}>Launch Modal</Button>
-      <Button onClick={onAsyncClick}>Launch Modal Asynchronously</Button>
+      <Button onClick={onClick}>{t('plugin__console-demo-plugin~Launch Modal')}</Button>
+      <Button onClick={onAsyncClick}>{t('plugin__console-demo-plugin~Launch Modal Asynchronously')}</Button>
     </Flex>
   );
 };

dynamic-demo-plugin/src/i18n.ts

@@ -12,7 +12,11 @@
 // t('plugin__console-demo-plugin~Test Utilities')
 // t('plugin__console-demo-plugin~Foo item')
 // t('plugin__console-demo-plugin~Bar item')
+// t('plugin__console-demo-plugin~Demo Dashboard')
 // t('plugin__console-demo-plugin~Custom Overview Detail Title')
 // t('plugin__console-demo-plugin~Example Namespaced Page')
 // t('plugin__console-demo-plugin~Sample Error Boundary Page')
-// t('plugin__console-demo-plugin~Dashboard Card')
+// t('plugin__console-demo-plugin~Dashboard Card')
+// t('plugin__console-demo-plugin~List Page')
+// t('plugin__console-demo-plugin~K8s API')
+// t('plugin__console-demo-plugin~Modal Launchers')

frontend/.eslintignore

@@ -9,3 +9,4 @@ public/lib
 Godeps
 @types
 dynamic-demo-plugin
+integration-tests

frontend/package.json

@@ -32,9 +32,9 @@
     "test-protractor-suite": "yarn ts-node --project integration-tests/tsconfig.json ./node_modules/.bin/protractor integration-tests/protractor.conf.ts",
     "debug-protractor-suite": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' node -r ts-node/register --inspect-brk ./node_modules/.bin/protractor integration-tests/protractor.conf.ts",
     "test-cypress-console": "cd packages/integration-tests-cypress && cypress open --env openshift=true",
-    "test-cypress-olm": "cd packages/operator-lifecycle-manager/integration-tests-cypress && ../../../node_modules/.bin/cypress open --config-file cypress-olm.json --env openshift=true",
     "test-cypress-console-headless": "cd packages/integration-tests-cypress && node --max-old-space-size=4096 ../../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome}",
-    "test-cypress-olm-headless": "cd packages/operator-lifecycle-manager/integration-tests-cypress && node --max-old-space-size=4096 ../../../node_modules/.bin/cypress run --config-file cypress-olm.json --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome}",
+    "test-cypress-olm": "cd packages/operator-lifecycle-manager/integration-tests-cypress && ../../../node_modules/.bin/cypress open --env openshift=true",
+    "test-cypress-olm-headless": "cd packages/operator-lifecycle-manager/integration-tests-cypress && node --max-old-space-size=4096 ../../../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome}",
     "test-cypress-dev-console": "cd packages/dev-console/integration-tests && yarn run test-cypress",
     "test-cypress-dev-console-headless": "cd packages/dev-console/integration-tests && yarn run test-cypress-headless",
     "test-cypress-dev-console-nightly": "cd packages/dev-console/integration-tests && yarn run test-cypress-nightly",
@@ -153,8 +153,8 @@
     "@patternfly/react-table": "4.113.0",
     "@patternfly/react-tokens": "4.94.6",
     "@patternfly/react-topology": "4.93.6",
-    "@patternfly/react-virtualized-extension": "4.88.115",
     "@patternfly/react-user-feedback": "1.0.2",
+    "@patternfly/react-virtualized-extension": "4.88.115",
     "@prometheus-io/codemirror-promql": "^0.37.0",
     "@rjsf/core": "^2.5.1",
     "abort-controller": "3.0.0",
@@ -282,7 +282,7 @@
     "comment-json": "4.x",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^5.2.7",
-    "cypress": "^8.5.0",
+    "cypress": "^12.17.4",
     "cypress-axe": "^0.12.0",
     "cypress-cucumber-preprocessor": "latest",
     "cypress-file-upload": "^5.0.8",

frontend/packages/dev-console/integration-tests/plugins/index.js

@@ -84,6 +84,7 @@ module.exports = (on, config) => {
   config.env.BRIDGE_HTPASSWD_USERNAME = process.env.BRIDGE_HTPASSWD_USERNAME;
   config.env.BRIDGE_HTPASSWD_PASSWORD = process.env.BRIDGE_HTPASSWD_PASSWORD;
   config.env.BRIDGE_KUBEADMIN_PASSWORD = process.env.BRIDGE_KUBEADMIN_PASSWORD;
+  config.env.OAUTH_BASE_ADDRESS = process.env.OAUTH_BASE_ADDRESS;
   // eslint-disable-next-line global-require
   const configJson = require(config.configFile);
   if (configJson.extends) {

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

@@ -9,7 +9,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       alertTitleShouldContain(title: string): Chainable<Element>;
-      clickNavLink(path: [string, string]): Chainable<Element>;
+      clickNavLink(path: string[]): Chainable<Element>;
       selectByDropDownText(selector: string, dropdownText: string): Chainable<Element>;
       selectByAutoCompleteDropDownText(selector: string, dropdownText: string): Chainable<Element>;
       verifyDropdownselected(selector: string): Chainable<Element>;
@@ -22,7 +22,7 @@ declare global {
       dropdownSwitchTo(dropdownMenuOption: string): Chainable<Element>;
       isDropdownVisible(): Chainable<Element>;
       checkErrors(): Chainable<Element>;
-      waitUntilEnabled(selector: string): Chainable<Element>;
+      waitUntilEnabled(selector: string): void;
     }
   }
 }
@@ -31,7 +31,7 @@ Cypress.Commands.add('alertTitleShouldContain', (alertTitle: string) => {
   cy.byLegacyTestID('modal-title').should('contain.text', alertTitle);
 });
 
-Cypress.Commands.add('clickNavLink', (path: [string, string]) => {
+Cypress.Commands.add('clickNavLink', (path: string[]) => {
   cy.get(`[data-component="pf-nav-expandable"]`) // this assumes all top level menu items are expandable
     .contains(path[0])
     .click(); // open top, expandable menu

frontend/packages/integration-tests-cypress/cypress.config.js

@@ -0,0 +1,32 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  screenshotsFolder: '../../gui_test_screenshots/cypress/screenshots',
+  videosFolder: '../../gui_test_screenshots/cypress/videos',
+  video: true,
+  reporter: '../../node_modules/cypress-multi-reporters',
+  reporterOptions: {
+    configFile: 'reporter-config.json',
+  },
+  fixturesFolder: 'fixtures',
+  defaultCommandTimeout: 30000,
+  retries: {
+    runMode: 1,
+    openMode: 0,
+  },
+  e2e: {
+    // TODO: see https://issues.redhat.com/browse/CONSOLE-3781
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      // eslint-disable-next-line global-require
+      return require('./plugins/index.js')(on, config);
+    },
+    specPattern: 'tests/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'support/index.ts',
+    baseUrl: 'http://localhost:9000',
+    testIsolation: false,
+  },
+});

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

@@ -67,6 +67,7 @@ module.exports = (on, config) => {
   config.env.BRIDGE_HTPASSWD_USERNAME = process.env.BRIDGE_HTPASSWD_USERNAME;
   config.env.BRIDGE_HTPASSWD_PASSWORD = process.env.BRIDGE_HTPASSWD_PASSWORD;
   config.env.BRIDGE_KUBEADMIN_PASSWORD = process.env.BRIDGE_KUBEADMIN_PASSWORD;
+  config.env.OAUTH_BASE_ADDRESS = process.env.OAUTH_BASE_ADDRESS;
   config.env.OPENSHIFT_CI = process.env.OPENSHIFT_CI;
   return config;
 };