Automation: Filter quick starts catalog #9347

sanketpathak · 2021-06-26T15:04:53Z

Fix: https://issues.redhat.com/browse/ODC-6006

Problem: Automation to filter quick starts in the quick starts catalog page.

Solution: This script will filter quick starts in the quick starts catalog page.

Test Setup:

Cluster should be running on local
Change TAGS in frontend/packages/dev-console/integration-tests/cypress.json file to : "@smoke or @regression and not (@Manual or @to-do or @un-verified)",
Command to execute:
- yarn run dev
- yarn run test-cypress-devconsole
Execute the filter-quick-starts-catalog.feature file

Browser
Chrome 89

Test Execution Screenshot:

gajanan-more

Working as expected

/lgtm

makambalaji · 2021-06-29T10:49:34Z

/assign @makambalaji

makambalaji

looks good to me from QE code point of view. please update https://docs.jboss.org/display/ODC/Automation+Status+Report confluence page
Please get approval from engineering team

jerolimov · 2021-06-29T11:15:19Z

/assign

jerolimov

Hey @sanketpathak, I take a deep look and found some small things. I tried to explain the suggestion, but please ping me on slack if you have any additional questions.

jerolimov · 2021-06-29T22:22:59Z

frontend/packages/console-app/src/components/quick-starts/QuickStartCatalogPage.tsx

+        <Text
+          component="h1"
+          className="ocs-page-layout__title"
+          data-test="QuickStartCatalogPageTitle"


We want avoid global data-test attributes and use unique attributes within a scope. So you can use data-test="page-title" here.

Suggested change

data-test="QuickStartCatalogPageTitle"

data-test="page-title"

jerolimov · 2021-06-29T22:43:14Z

frontend/packages/console-app/src/components/quick-starts/QuickStartPanelContent.tsx

+      <DrawerPanelBody
+        hasNoPadding
+        className="co-quick-start-panel-content__body"
+        data-test="quickstart-sidebar-content"


Could you select the content also if you define just data-test="content" here,

when you add also data-test="quickstart drawer" (with space) to DrawerPanelContent above?

Your page object could use then quickStartSidebarBody: '[data-test="quickstart drawer"] [data-test="content"]' (with space between both selectors)

The idea of using a space and short non-global attributes is that we can also check them in a more generic way:

[data-test="quickstart drawer"] [data-test="content"] (same as above)

[data-test~="quickstart"][data-test~="drawer"] [data-test~="content"]' (with a more generic search) or just

[data-test~="drawer"] [data-test~="content"]' (more generic)

data-test~= allows you to search one of the space separated data-test attributes while you must be exact when you use data-test=

Suggested change

data-test="quickstart-sidebar-content"

data-test="content"

Thanks for the suggestion, updated the code

jerolimov · 2021-06-29T22:45:50Z

frontend/packages/console-app/src/components/quick-starts/catalog/QuickStartCatalog.tsx

@@ -72,7 +72,7 @@ const QuickStartCatalog: React.FC<QuickStartCatalogProps> = ({ quickStarts }) =>
        )}
      </EmptyStateBody>
      <EmptyStatePrimary>
-        <Button variant="link" onClick={clearFilters}>
+        <Button variant="link" onClick={clearFilters} data-test="clear-filter-button">


Suggested change

<Button variant="link" onClick={clearFilters} data-test="clear-filter-button">

<Button variant="link" onClick={clearFilters} data-test="clear-filters button">

jerolimov · 2021-06-29T23:04:18Z

frontend/packages/console-app/src/components/quick-starts/catalog/QuickStartTileHeader.tsx

@@ -29,14 +29,17 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({ status, dur

  return (
    <div className="co-quick-start-tile-header">
-      <Title headingLevel="h3">{name}</Title>
+      <Title headingLevel="h3" data-test={`tile-${name}`}>


Suggested change

<Title headingLevel="h3" data-test={`tile-${name}`}>

<Title headingLevel="h3" data-test="title">

Similar to above, this should be just title.

To differentiate the different tiles you should add a data-test={tile ${name}} to QuickStartTile.tsx.

I would prefer here if we use the QuickStart resource name here instead of the displayName?!

In QuickStartTile.tsx I would suggest:

const { + metadata: { name }, spec: { icon, displayName, description, durationMinutes, prerequisites }, } = quickStart; ... return ( <CatalogTile icon={quickStartIcon} className="co-quick-start-tile" featured={isActive} title={<QuickStartTileHeader name={displayName} status={status} duration={durationMinutes} />} onClick={onClick} + data-test={`tile ${name}`} > <QuickStartTileDescription description={description} prerequisites={prerequisites} /> </CatalogTile>

You need update your page object to

installOpenshiftPipelineOperatorCard: '[data-test~="tile"][data-test~="explore-pipelines"]', getStartedWithASampleApplicationCard: '[data-test~="tile"][data-test~="sample-application"]',

Thanks for the suggestion, updated the code

jerolimov · 2021-06-29T23:05:25Z

frontend/packages/console-app/src/components/quick-starts/catalog/QuickStartTileHeader.tsx

      <div className="co-quick-start-tile-header__status">
        {status !== QuickStartStatus.NOT_STARTED && (
          <Label
            className="co-quick-start-tile-header--margin"
            variant="outline"
            color={statusColorMap[status]}
            icon={<StatusIcon status={status} />}
+            data-test="quick-start-card-status"


Based on the context we know that we are in a quick start card (or tile)

Suggested change

data-test="quick-start-card-status"

data-test="status"

jerolimov · 2021-06-29T23:12:13Z

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

@@ -0,0 +1,20 @@
+export const quickStartsPO = {
+  quickStartTitle: '[data-test="QuickStartCatalogPageTitle"]',


Suggested change

quickStartTitle: '[data-test="QuickStartCatalogPageTitle"]',

quickStartTitle: '[data-test="page-title"]',

jerolimov · 2021-06-29T23:17:15Z

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

+  quickStartSidebarBody: '[data-test="quickstart-sidebar-content"]',
+  startButton: '[data-test="Start-quick-starts"]',
+  nextButton: '[data-test="Next-quick-starts"]',
+  closeButton: '[data-test="Close-quick-starts"]',


Suggested change

quickStartSidebarBody: '[data-test="quickstart-sidebar-content"]',

startButton: '[data-test="Start-quick-starts"]',

nextButton: '[data-test="Next-quick-starts"]',

closeButton: '[data-test="Close-quick-starts"]',

quickStartSidebarBody: '[data-test~="drawer"] [data-test~="content"]',

startButton: '[data-test~="drawer"] [data-test="Start button"]',

nextButton: '[data-test~="drawer"] [data-test="Next button"]',

closeButton: '[data-test~="drawer"] [data-test="Close button"]',

Instead of doing [data-test~="drawer"] [data-test="Start button"] for the button I've written it as [data-test="Start button"] in this file and in the code I used the quickStartSidebarBody page object and find the button element(startButton) in it as it is doing similar work and not hindering my test result

jerolimov · 2021-06-29T23:20:32Z

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

+  clearFilter: '[data-test="clear-filter-button"]',
+  cardStatus: '[data-test="quick-start-card-status"]',


Suggested change

clearFilter: '[data-test="clear-filter-button"]',

cardStatus: '[data-test="quick-start-card-status"]',

clearFilter: '[data-test="clear-filters button"]',

cardStatus: '[data-test~="tile"] [data-test~="status"]',

But notice, the card status will return potential all status fields for the complete page.

The cardStatus will be used with a particular quick start card to show it's status

jerolimov · 2021-06-29T23:21:40Z

...onsole/integration-tests/support/step-definitions/quck-starts/filter-quick-starts-catalog.ts

+When('user enters asdf', () => {
+  quickStartsPage.filterByKeyword('asdf');


Suggested change

When('user enters asdf', () => {

quickStartsPage.filterByKeyword('asdf');

When('user enters {string}', (filterKeyword: string) => {

quickStartsPage.filterByKeyword(filterKeyword);

jerolimov · 2021-06-29T23:23:14Z

...onsole/integration-tests/support/step-definitions/quck-starts/filter-quick-starts-catalog.ts

+Given('user has completed "Getting started with a sample application" Quick Start', () => {
+  quickStartsPage.executeQuickStart(quickStartsPO.getStartedWithASampleApplicationCard);
+});


If possible, a dynamic parameter would be cool here as well, or?

Suggested change

Given('user has completed "Getting started with a sample application" Quick Start', () => {

quickStartsPage.executeQuickStart(quickStartsPO.getStartedWithASampleApplicationCard);

});

Given('user has completed {string} Quick Start', (quickStartName: string) => {

quickStartsPage.executeQuickStart(quickStartsPO.getStartedWithASampleApplicationCard);

});

jerolimov

Sorry, one last request and then we are fine here. :)

jerolimov · 2021-07-01T12:54:49Z

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

+export function quickStartCard(quickStartDisplayName: string) {
+  const tile = quickStartDisplayNameToName(quickStartDisplayName);
+  const quickStartName = `[data-test~="tile"][data-test~="${tile}"]`;
+  return quickStartName;
+}


Let us use quickStartName instead of tile. The next line is a selector, you can also directly return it or use selector here.

Suggested change

export function quickStartCard(quickStartDisplayName: string) {

const tile = quickStartDisplayNameToName(quickStartDisplayName);

const quickStartName = `[data-test~="tile"][data-test~="${tile}"]`;

return quickStartName;

}

export function quickStartCard(quickStartDisplayName: string) {

const quickStartName = quickStartDisplayNameToName(quickStartDisplayName);

return `[data-test~="tile"][data-test~="${tile}"]`;

}

jerolimov · 2021-07-01T12:56:09Z

...onsole/integration-tests/support/step-definitions/quck-starts/filter-quick-starts-catalog.ts

+Then('user can see {string} Quick Start', (quickStartName: string) => {
+  quickStartsPage.cardPresent(quickStartCard(quickStartName));
+});


Suggested change

Then('user can see {string} Quick Start', (quickStartName: string) => {

quickStartsPage.cardPresent(quickStartCard(quickStartName));

});

Then('user can see {string} Quick Start', (quickStartDisplayName: string) => {

quickStartsPage.cardPresent(quickStartCard(quickStartDisplayName));

});

jerolimov · 2021-07-01T12:56:19Z

...onsole/integration-tests/support/step-definitions/quck-starts/filter-quick-starts-catalog.ts

+Given('user has completed {string} Quick Start', (quickStartName: string) => {
+  quickStartsPage.executeQuickStart(quickStartCard(quickStartName));
+});


Suggested change

Given('user has completed {string} Quick Start', (quickStartName: string) => {

quickStartsPage.executeQuickStart(quickStartCard(quickStartName));

});

Given('user has completed {string} Quick Start', (quickStartDisplayName: string) => {

quickStartsPage.executeQuickStart(quickStartCard(quickStartDisplayName));

});

jerolimov · 2021-07-01T12:56:33Z

...onsole/integration-tests/support/step-definitions/quck-starts/filter-quick-starts-catalog.ts

+Then('user can see {string} Quick Start is present', (quickStartName: string) => {
+  cy.get(quickStartCard(quickStartName)).should('be.visible');
+});


Suggested change

Then('user can see {string} Quick Start is present', (quickStartName: string) => {

cy.get(quickStartCard(quickStartName)).should('be.visible');

});

Then('user can see {string} Quick Start is present', (quickStartDisplayName: string) => {

cy.get(quickStartCard(quickStartDisplayName)).should('be.visible');

});

jerolimov

Thanks for applying all these data-test changes I requested. Looks good now 👍

Run filter-quick-starts-catalog.feature locally and all tests pass:

Because @gajanan-more added lgtm already before that changes, I re-add lgtm as well.

/lgtm
/approve

openshift-ci · 2021-07-01T15:11:04Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: gajanan-more, jerolimov, makambalaji, sanketpathak

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [jerolimov]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-bot · 2021-07-02T05:05:54Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2021-07-02T05:29:55Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-ci bot requested review from gajanan-more and rhamilto June 26, 2021 15:05

openshift-ci bot added component/core Related to console core functionality component/dev-console Related to dev-console labels Jun 26, 2021

sanketpathak force-pushed the automation-QuickStarts-filter-quick-starts-catalog branch from bd44662 to 025d241 Compare June 28, 2021 12:51

gajanan-more approved these changes Jun 28, 2021

View reviewed changes

openshift-ci bot assigned gajanan-more Jun 28, 2021

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jun 28, 2021

sanketpathak force-pushed the automation-QuickStarts-filter-quick-starts-catalog branch from 025d241 to 8fa3ed1 Compare June 29, 2021 09:31

openshift-ci bot added needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. and removed lgtm Indicates that a PR is ready to be merged. labels Jun 29, 2021

sanketpathak force-pushed the automation-QuickStarts-filter-quick-starts-catalog branch from 8fa3ed1 to a92f7ec Compare June 29, 2021 09:47

openshift-ci bot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 29, 2021

openshift-ci bot assigned makambalaji Jun 29, 2021

makambalaji suggested changes Jun 29, 2021

View reviewed changes

makambalaji approved these changes Jun 29, 2021

View reviewed changes

openshift-ci bot assigned jerolimov Jun 29, 2021

sanketpathak force-pushed the automation-QuickStarts-filter-quick-starts-catalog branch from a92f7ec to 71f11e3 Compare June 29, 2021 14:56

jerolimov suggested changes Jun 29, 2021

View reviewed changes

sanketpathak force-pushed the automation-QuickStarts-filter-quick-starts-catalog branch 3 times, most recently from 4964528 to 5baa96b Compare July 1, 2021 12:46

jerolimov reviewed Jul 1, 2021

View reviewed changes

ODC-6006:Automate quick starts - filter-quick-starts-catalog.feature

7f63d3b

sanketpathak force-pushed the automation-QuickStarts-filter-quick-starts-catalog branch from 5baa96b to 7f63d3b Compare July 1, 2021 14:28

jerolimov approved these changes Jul 1, 2021

View reviewed changes

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jul 1, 2021

openshift-ci bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jul 1, 2021

openshift-merge-robot merged commit 1af590b into openshift:master Jul 2, 2021

jschuler mentioned this pull request Jul 2, 2021

merge OS PR 9347 patternfly/patternfly-quickstarts#10

Merged

spadgett added this to the v4.9 milestone Jul 14, 2021

	data-test="QuickStartCatalogPageTitle"
	data-test="page-title"

	<Button variant="link" onClick={clearFilters} data-test="clear-filter-button">
	<Button variant="link" onClick={clearFilters} data-test="clear-filters button">

	<Title headingLevel="h3" data-test={`tile-${name}`}>
	<Title headingLevel="h3" data-test="title">

		@@ -0,0 +1,20 @@
		export const quickStartsPO = {
		quickStartTitle: '[data-test="QuickStartCatalogPageTitle"]',

	quickStartTitle: '[data-test="QuickStartCatalogPageTitle"]',
	quickStartTitle: '[data-test="page-title"]',

		clearFilter: '[data-test="clear-filter-button"]',
		cardStatus: '[data-test="quick-start-card-status"]',

		When('user enters asdf', () => {
		quickStartsPage.filterByKeyword('asdf');

Automation: Filter quick starts catalog #9347

Automation: Filter quick starts catalog #9347

Conversation

sanketpathak commented Jun 26, 2021 • edited

gajanan-more left a comment

Choose a reason for hiding this comment

makambalaji commented Jun 29, 2021

makambalaji left a comment

Choose a reason for hiding this comment

jerolimov commented Jun 29, 2021

jerolimov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sanketpathak Jul 1, 2021 • edited

Choose a reason for hiding this comment

jerolimov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jerolimov left a comment

Choose a reason for hiding this comment

openshift-ci bot commented Jul 1, 2021

openshift-bot commented Jul 2, 2021

openshift-bot commented Jul 2, 2021

sanketpathak commented Jun 26, 2021 •

edited

sanketpathak Jul 1, 2021 •

edited