Add cypress integration test support for Ceph plugin

Add test for Subscription flow for OCS Operator

.gitignore

@@ -18,5 +18,6 @@
 /frontend/gui_test_screenshots
 /frontend/packages/integration-tests-cypress/cypress-a11y-report.json
 /frontend/packages/dev-console/integration-tests/cypress-a11y-report.json
+/frontend/packages/ceph-storage-plugin/integration-tests-cypress/cypress-a11y-report.json
 /frontend/@types
 /frontend/package-lock.json

frontend/package.json

@@ -33,6 +33,8 @@
     "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} --headless",
     "test-cypress-devconsole": "cd packages/dev-console/integration-tests && ../../../node_modules/.bin/cypress open --env openshift=true",
     "test-cypress-devconsole-headless": "cd packages/dev-console/integration-tests && node --max-old-space-size=4096 ../../../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome} --headless --spec \"features/project-creation.feature\";",
+    "test-cypress-ceph": "cd packages/ceph-storage-plugin/integration-tests-cypress && ../../../node_modules/.bin/cypress open --config-file cypress-ceph.json --env openshift=true",
+    "test-cypress-ceph-headless": "cd packages/ceph-storage-plugin/integration-tests-cypress && node --max-old-space-size=4096 ../../../node_modules/.bin/cypress run --config-file cypress-ceph.json --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome} --headless",
     "cypress-merge": "mochawesome-merge ./gui_test_screenshots/cypress_report*.json > ./gui_test_screenshots/cypress.json",
     "cypress-generate": "marge -o ./gui_test_screenshots/ -f cypress-report -t 'OpenShift Console Cypress Test Results' -p 'OpenShift Cypress Test Results' --showPassed false --assetsDir ./gui_test_screenshots/cypress/assets ./gui_test_screenshots/cypress.json",
     "cypress-a11y-report": "echo '\nA11y Test Results:' && mv packages/integration-tests-cypress/cypress-a11y-report.json ./gui_test_screenshots/ && node -e \"console.table(JSON.parse(require('fs').readFileSync(process.argv[1])));\" ./gui_test_screenshots/cypress-a11y-report.json",

frontend/packages/ceph-storage-plugin/integration-tests-cypress/cypress-ceph.json

@@ -0,0 +1,18 @@
+{
+  "integrationFolder": "tests",
+  "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"
+  },
+  "supportFile": "../../integration-tests-cypress/support/index.ts",
+  "pluginsFile": "../../integration-tests-cypress/plugins/index.js",
+  "fixturesFolder": false,
+  "defaultCommandTimeout": 30000,
+  "retries": {
+    "runMode": 1,
+    "openMode": 0
+  }
+}

frontend/packages/ceph-storage-plugin/integration-tests-cypress/reporter-config.json

@@ -0,0 +1,14 @@
+{
+  "reporterEnabled": "mocha-junit-reporter, mochawesome",
+  "mochaJunitReporterReporterOptions": {
+    "mochaFile": "../../../gui_test_screenshots/junit_cypress-[hash].xml",
+    "toConsole": false
+  },
+  "mochawesomeReporterOptions": {
+    "reportDir": "../../../gui_test_screenshots/",
+    "reportFilename": "cypress_report_ceph",
+    "overwrite": false,
+    "html": false,
+    "json": true
+  }
+}

frontend/packages/ceph-storage-plugin/integration-tests-cypress/tests/subscribe-to-ocs.spec.ts

@@ -0,0 +1,44 @@
+import { nav } from '../../../integration-tests-cypress/views/nav';
+import { primaryButton } from '../../../integration-tests-cypress/views/form';
+import { installSucess } from '../views/olm';
+
+describe('Subscribe to OCS Operator from OperatorHub', () => {
+  before(() => {
+    cy.login();
+    cy.visit('/');
+    nav.sidenav.clickNavLink(['Operators', 'OperatorHub']);
+  });
+
+  after(() => {
+    cy.logout();
+  });
+
+  it('Searches and finds OCS Operator', () => {
+    cy.byTestID('search-operatorhub').type('Openshift Container Storage');
+    cy.byTestID('ocs-operator-redhat-operators-openshift-marketplace').click({ force: true });
+  });
+
+  it('Subscribes to OCS Operator', () => {
+    cy.byLegacyTestID('operator-install-btn').click({ force: true });
+    cy.byTestID('Operator recommended namespace:-radio-input').should('be.checked');
+    cy.byTestID('enable-monitoring').click();
+    cy.get(primaryButton).click();
+
+    cy.get(installSucess, { timeout: 180000 }).should('be.visible');
+  });
+
+  it('openshift-storage namespace should be labelled properly', () => {
+    cy.exec('oc get project openshift-storage -o yaml')
+      .its('stdout')
+      .should('contain', 'openshift.io/cluster-monitoring: "true"');
+  });
+
+  // Rook, Noobaa and OCS pod should come up after installation.
+  it('Test for presence for 3 OCS Operator Pods', () => {
+    cy.exec('oc get po -n openshift-storage')
+      .its('stdout')
+      .should('contain', 'noobaa-operator')
+      .should('contain', 'ocs-operator')
+      .should('contain', 'rook-ceph-operator');
+  });
+});

frontend/packages/ceph-storage-plugin/integration-tests-cypress/views/olm.ts

@@ -0,0 +1 @@
+export const installSucess = 'svg[fill="#3e8635"]';

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

@@ -1,3 +1,4 @@
 export const submitButton = 'button[type=submit]';
 export const errorMessage = '.pf-c-alert.pf-m-inline.pf-m-danger';
 export const successMessage = '.pf-c-alert.pf-m-inline.pf-m-success';
+export const primaryButton = '.pf-c-button.pf-m-primary';

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-subscribe.tsx

@@ -445,6 +445,7 @@ export const OperatorHubSubscribeForm: React.FC<OperatorHubSubscribeFormProps> =
         <div className="co-form-subsection">
           <Checkbox
             id="enable-monitoring-checkbox"
+            data-test="enable-monitoring"
             label="Enable operator recommended cluster monitoring on this namespace"
             onChange={setEnableMonitoring}
             isChecked={enableMonitoring}

frontend/public/components/utils/tile-view-page.jsx

@@ -918,6 +918,7 @@ export class TileViewPage extends React.Component {
               <div>
                 <TextInput
                   className="co-catalog-page__input"
+                  data-test="search-operatorhub"
                   type="text"
                   ref={(ref) => (this.filterByKeywordInput = ref)}
                   placeholder="Filter by keyword..."