ODC-6023-update devconsole-ci-tests #9361

makambalaji · 2021-06-28T16:08:39Z

Jira Id: https://issues.redhat.com/browse/ODC-6023

Description:
CI implemented for entire add flow

Browser & its version : Chrome 91

Pre-conditions/setup:

Checks for approving Epic scenarios Automation PR:

Execute the @to-do tagged gherkin scripts manually
Convert the @to-do gherkin scripts to cypress automation scripts
Once scripts are automated, replace tag @to-do with @epic-number
Execute the scripts in Remote cluster

Refactoring criteria for approving Automation PR:

update the test cases count in Automation status confluence Report

Execution Commands:
In below commands, please update url and password based on the cluster

export NO_HEADLESS=true && export CHROME_VERSION=$(/usr/bin/google-chrome-stable --version)
BRIDGE_KUBEADMIN_PASSWORD=YH3jN-PRFT2-Q429c-5KQDr
BRIDGE_BASE_ADDRESS=https://console-openshift-console.apps.dev-svc-4.8-042801.devcluster.openshift.com
export BRIDGE_KUBEADMIN_PASSWORD
export BRIDGE_BASE_ADDRESS
oc login -u kubeadmin -p $BRIDGE_KUBEADMIN_PASSWORD https://api.gamore48installer7thjune001.devcluster.openshift.com:6443  --insecure-skip-tls-verify
oc apply -f ./frontend/integration-tests/data/htpasswd-secret.yaml
oc patch oauths cluster --patch "$(cat ./frontend/integration-tests/data/patch-htpasswd.yaml)" --type=merge
./test-cypress.sh -p dev-console -h true

Results: 18 test cases are executed in 19 min [duration]
Screenshots

Browser conformance:

Chrome
Firefox
Safari
Edge

makambalaji · 2021-07-02T12:22:29Z

/retest

makambalaji · 2021-07-06T13:24:10Z

/retest

jerolimov · 2021-07-06T22:10:12Z

frontend/packages/dev-console/integration-tests/package.json

@@ -11,7 +11,7 @@
    "clean-reports": "rm -rf ../../../gui_test_screenshots",
    "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 DevConsole Cypress Test Results' -p 'OpenShift Cypress Test Results' --showPassed false --assetsDir ../../../gui_test_screenshots/cypress/assets ../../../gui_test_screenshots/cypress.json",
-    "test-headless": "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-headless": "node --max-old-space-size=4096 ../../../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome} --headless --spec \"features/addFlow/*.feature\";",


Should this package.json script test all features (smoke tests)??

Yes @jerolimov, it executes all Add flow test cases based on the tags mentioned in cypress.json

Buy why? Why not all? :)

If we need to execute all, it takes more time.. which is not required for CI

jerolimov

Verified this with a local run of cypress via yarn test-cypress-devconsole

With this PR:

Before:

Error details on master branch:

/lgtm
/retest

jerolimov · 2021-07-07T11:25:16Z

/retest

jerolimov

If you like you can also add the following data-tests attributes and change this here to this new data-test references. Wdyt?

In CatalogCategories.tsx I would recommend:

    return (
      <VerticalTabsTab
        key={id}
        title={label}
        active={active}
        className={tabClasses}
        onActivate={() => onSelectCategory(id)}
        hasActiveDescendant={hasActiveDescendant(selectedCategory, category)}
        shown={toplevelCategory}
+        data-test={`tab ${id}`}
      >
        {subcategories && (
          <VerticalTabs restrictTabs activeTab={isActiveTab(selectedCategoryID, category)}>
            {_.map(subcategories, (subcategory) =>
              renderTabs(subcategory, selectedCategoryID, false),
            )}
          </VerticalTabs>
        )}
      </VerticalTabsTab>
    );
  };

  return (
-    <VerticalTabs restrictTabs activeTab={activeTab}>
+    <VerticalTabs restrictTabs activeTab={activeTab} data-test="catalog-categories">
      {_.map(categories, (category) => renderTabs(category, selectedCategory, true))}
    </VerticalTabs>
  );

In CatalogTypeSelector.tsx:

-      <VerticalTabs>
+      <VerticalTabs data-test="catalog-types">
        {catalogTypes.map((type) => {
          const { value, label } = type;
          const typeCount = catalogTypeCounts[value];
          const queryParams = new URLSearchParams(search);
          queryParams.set(CatalogQueryParams.TYPE, type.value);

          const to = {
            pathname,
            search: `?${queryParams.toString()}`,
          };

          return typeCount > 0 ? (
-            <li key={value} className="vertical-tabs-pf-tab">
+            <li key={value} className="vertical-tabs-pf-tab" data-test={`tab ${value}`}>
              <Link to={to}>{`${label} (${typeCount})`}</Link>
            </li>
          ) : null;
        })}
      </VerticalTabs>

Wdyt?

jerolimov · 2021-07-07T13:01:30Z

frontend/packages/dev-console/integration-tests/support/pageObjects/add-flow-po.ts

+    helmCharts: 'a[href$="catalogType=HelmChart"]',
+    builderImage: 'a[href$="catalogType=BuilderImage"]',
+    template: 'a[href$="catalogType=Template"]',


With the recommended change above you can simplify the sectors here:

Suggested change

helmCharts: 'a[href$="catalogType=HelmChart"]',

builderImage: 'a[href$="catalogType=BuilderImage"]',

template: 'a[href$="catalogType=Template"]',

helmCharts: '[data-test="tab HelmChart"]',

builderImage: '[data-test="tab BuilderImage"]',

template: '[data-test="tab Template"]',

jerolimov · 2021-07-07T13:01:42Z

frontend/packages/dev-console/integration-tests/support/pageObjects/add-flow-po.ts

    serviceClass: '[data-test="kind-cluster-service-class"]',
    managedServices: '[data-test="kind-managed-service"]',
-    eventSources: 'a[href="/?catalogType=EventSource"]',
+    eventSources: 'a[href$="catalogType=EventSource"]',


Suggested change

eventSources: 'a[href$="catalogType=EventSource"]',

eventSources: '[data-test="tab EventSource"]',

jerolimov

Run the cypress tests locally again, and run successfully. Selectors looks good.
/lgtm

Approve the test-data frontend changes.
/approve

/retest

openshift-bot · 2021-07-08T10:26:51Z

/retest