Skip to content

Commit

Permalink
ODC-6006:Automate quick starts - filter-quick-starts-catalog.feature
Browse files Browse the repository at this point in the history
  • Loading branch information
sanketpathak committed Jul 1, 2021
1 parent f7b4300 commit 4964528
Show file tree
Hide file tree
Showing 13 changed files with 229 additions and 20 deletions.
Expand Up @@ -14,7 +14,7 @@ const QuickStartCatalogPage: React.FC = () => {
<title>{t('quickstart~Quick Starts')}</title>
</Helmet>
<div className="ocs-page-layout__header">
<Text component="h1" className="ocs-page-layout__title">
<Text component="h1" className="ocs-page-layout__title" data-test="page-title">
{t('quickstart~Quick Starts')}
</Text>
<div className="ocs-page-layout__hint">
Expand Down
Expand Up @@ -45,7 +45,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
});

return quickStart ? (
<DrawerPanelContent isResizable>
<DrawerPanelContent isResizable data-test="quickstart drawer">
<div className={`co-quick-start-panel-content-head ${headerClasses}`}>
<DrawerHead>
<div className="co-quick-start-panel-content__title">
Expand All @@ -67,7 +67,11 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
</DrawerActions>
</DrawerHead>
</div>
<DrawerPanelBody hasNoPadding className="co-quick-start-panel-content__body">
<DrawerPanelBody
hasNoPadding
className="co-quick-start-panel-content__body"
data-test="content"
>
<AsyncComponent
loader={() => import('./QuickStartController').then((c) => c.default)}
quickStart={quickStart}
Expand Down
Expand Up @@ -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">
{t('quickstart~Clear all filters')}
</Button>
</EmptyStatePrimary>
Expand Down
Expand Up @@ -22,6 +22,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
onClick,
}) => {
const {
metadata: { name },
spec: { icon, displayName, description, durationMinutes, prerequisites },
} = quickStart;

Expand All @@ -42,6 +43,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
featured={isActive}
title={<QuickStartTileHeader name={displayName} status={status} duration={durationMinutes} />}
onClick={onClick}
data-test={`tile ${name}`}
>
<QuickStartTileDescription description={description} prerequisites={prerequisites} />
</CatalogTile>
Expand Down
Expand Up @@ -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="title">
{name}
</Title>
<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="status"
>
{statusLocaleMap[status]}
</Label>
Expand Down
Expand Up @@ -66,7 +66,12 @@ const QuickStartFooter: React.FC<QuickStartFooterProps> = ({

const getPrimaryButton = React.useMemo(
() => (
<Button variant="primary" className="co-quick-start-footer__actionbtn" onClick={onNext}>
<Button
variant="primary"
className="co-quick-start-footer__actionbtn"
onClick={onNext}
data-test={`${getPrimaryButtonText} button`}
>
{getPrimaryButtonText}
</Button>
),
Expand Down
Expand Up @@ -4,47 +4,44 @@ Feature: Add ability to filter Quick Starts catalog

Background:
Given user is at developer perspective
And sample-application CR Quick Start is available
And explore-serverless CR Quick Start is available
And explore-pipeline CR Quick Start is available
And add-healthchecks CR Quick Start is available
And user is at Add page
And user has created or selected namespace "aut-filter-quickstarts"


@regression @to-do
@smoke
Scenario: Quick Starts Catalog Page: QS-01-TC01
Given user is at Add page
When user clicks on "View all quick starts" on Build with guided documentation card
Then user can see Quick Starts catalog page
And user can see filter toolbar
And user can see filter by keyword search bar
And user can see Status filter dropdown


@regression @to-do
@regression
Scenario: Filter by keyword: QS-01-TC02
Given user is at Quick Starts catalog page
When user clicks on filter by keyword search bar
And user enters "pipeline"
Then user can see two pipleline cards
Then user can see "Install the OpenShift Pipelines Operator" Quick Start


@regression @to-do
@regression
Scenario: Filter based on status: QS-01-TC03
Given user is at Quick Starts catalog page
When user clicks on Status filter menu
Then user can see completed, In progress and Not started with number of cards available in each categories
Then user can see Complete, In progress and Not started categories


@regression @to-do
@regression
Scenario: Apply Filter based on status: QS-01-TC04
Given user is at Quick Starts catalog page
And user has completed "Getting started with a sample application" Quick Start
When user clicks on Status filter menu
And user clicks see completed
Then user can see only the "Getting started with a sample application" Quick Start is present
And user clicks on completed
Then user can see "Getting started with a sample application" Quick Start is present


@regression @to-do
@regression
Scenario: No result condition for filter: QS-01-TC05
Given user is at Quick Starts catalog page
When user clicks on filter by keyword search bar
Expand Down
Expand Up @@ -9,6 +9,7 @@ export const addPagePO = {
kebabMenuGettingStarted: '[data-test="actions"]',
hideGettingStarted: '[data-test="hide"]',
closeButton: '[aria-label="label-close-button"]',
viewAllQuickStarts: '[data-test="item all-quick-starts"]',
};

export const gitPO = {
Expand Down
Expand Up @@ -5,3 +5,4 @@ export * from './helm-po';
export * from './monitoring-po';
export * from './operators-po';
export * from '@console/topology/integration-tests/support/page-objects/topology-po';
export * from './quickStarts-po';
@@ -0,0 +1,37 @@
export const quickStartsPO = {
quickStartTitle: '[data-test="page-title"]',
filterKeyword: 'input.pf-c-search-input__text-input',
statusFilter: 'button.pf-c-select__toggle',
statusDropdown: '[aria-label="Select filter"]',
statusComplete: '[data-key="Complete"]',
emptyState: 'div.pf-c-empty-state__content',
clearFilter: '[data-test="clear-filter button"]',
cardStatus: '[data-test~="tile"] [data-test~="status"]',
};

export const quickStartSidebarPO = {
quickStartSidebarBody: '[data-test~="drawer"] [data-test~="content"]',
startButton: `[data-test="Start button"]`,
nextButton: '[data-test="Next button"]',
closeButton: '[data-test="Close button"]',
};

export const quickStartTile = (tile: string) => {
switch (tile) {
case 'Getting started with a sample application': {
return 'sample-application';
}
case 'Install the OpenShift Pipelines Operator': {
return 'explore-pipelines';
}
default: {
throw new Error('Option is not available');
}
}
};

export function quickStartCard(quickStartName: string) {
const tile = quickStartTile(quickStartName);
const card = `[data-test~="tile"][data-test~="${tile}"]`;
return card;
}
Expand Up @@ -6,3 +6,4 @@ export * from './app';
export * from './modal';
export * from './operators-page';
export * from './functions/index';
export * from './quickStartsPage';
@@ -0,0 +1,65 @@
import { devNavigationMenu } from '../constants/global';
import { addPagePO, quickStartSidebarPO, quickStartsPO } from '../pageObjects';
import { catalogPage } from './add-flow/catalog-page';
import { app, navigateTo } from './app';

function clickVisibleButton(el: string) {
cy.get(quickStartSidebarPO.quickStartSidebarBody).then(($button) => {
const isVisible = $button.find(el).is(':visible');
if (isVisible) {
cy.get(el).click();
clickVisibleButton(el);
} else {
cy.log('quick start is complete');
}
});
}

export const quickStartsPage = {
quickStartsCatalog: () => {
navigateTo(devNavigationMenu.Add);
app.waitForDocumentLoad();
cy.get(addPagePO.viewAllQuickStarts).click();
cy.get(quickStartsPO.quickStartTitle)
.scrollIntoView()
.should('be.visible');
catalogPage.isCardsDisplayed();
},
filterByKeyword: (filterName: string) => {
cy.get(quickStartsPO.filterKeyword)
.scrollIntoView()
.click();
cy.get(quickStartsPO.filterKeyword).type(filterName);
},
cardPresent: (cardName: string) => {
cy.get(cardName)
.scrollIntoView()
.should('be.visible');
},
status: () => {
cy.get(quickStartsPO.statusFilter)
.scrollIntoView()
.click();
app.waitForLoad();
cy.get(quickStartsPO.statusDropdown).should('be.visible');
},
executeQuickStart: (quickStart: string) => {
cy.get(quickStart)
.scrollIntoView()
.click();
app.waitForDocumentLoad();
cy.get(quickStartSidebarPO.quickStartSidebarBody).should('be.visible');
cy.get(quickStartSidebarPO.quickStartSidebarBody)
.find(quickStartSidebarPO.startButton)
.click();
clickVisibleButton(quickStartSidebarPO.nextButton);
cy.get(quickStartSidebarPO.quickStartSidebarBody)
.find(quickStartSidebarPO.closeButton)
.click();
cy.get(quickStart)
.parent()
.find(quickStartsPO.cardStatus)
.should('be.visible')
.contains('Complete');
},
};
@@ -0,0 +1,93 @@
import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
import { quickStartCard, quickStartsPO } from '../../pageObjects';
import { quickStartsPage } from '../../pages';

When('user clicks on "View all quick starts" on Build with guided documentation card', () => {
quickStartsPage.quickStartsCatalog();
});

Then('user can see Quick Starts catalog page', () => {
cy.get(quickStartsPO.quickStartTitle).should('be.visible');
});

Then('user can see filter by keyword search bar', () => {
cy.get(quickStartsPO.filterKeyword).should('be.visible');
});

Then('user can see Status filter dropdown', () => {
cy.get(quickStartsPO.statusFilter).should('be.visible');
});

Given('user is at Quick Starts catalog page', () => {
quickStartsPage.quickStartsCatalog();
});

When('user clicks on filter by keyword search bar', () => {
cy.get(quickStartsPO.filterKeyword).click();
});

When('user enters {string}', (filterName: string) => {
quickStartsPage.filterByKeyword(filterName);
});

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

Given('user is at Quick Starts catalog page', () => {
quickStartsPage.quickStartsCatalog();
});

When('user clicks on Status filter menu', () => {
quickStartsPage.status();
});

Then('user can see Complete, In progress and Not started categories', () => {
cy.get(quickStartsPO.statusDropdown).contains('Complete');
cy.get(quickStartsPO.statusDropdown).contains('In progress');
cy.get(quickStartsPO.statusDropdown).contains('Not started');
});

Given('user is at Quick Starts catalog page', () => {
quickStartsPage.quickStartsCatalog();
});

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

When('user clicks on Status filter menu', () => {
quickStartsPage.status();
});

When('user clicks on completed', () => {
cy.get(quickStartsPO.statusComplete)
.should('be.visible')
.click();
});

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

Given('user is at Quick Starts catalog page', () => {
quickStartsPage.quickStartsCatalog();
});

When('user clicks on filter by keyword search bar', () => {
cy.get(quickStartsPO.filterKeyword).click();
});

When('user enters {string}', (filterKeyword: string) => {
quickStartsPage.filterByKeyword(filterKeyword);
});

Then('user can see "No results found" message', () => {
cy.get(quickStartsPO.emptyState).should('be.visible');
cy.get(quickStartsPO.emptyState).contains('No results found');
});

Then('user can see Clear all filters option', () => {
cy.get(quickStartsPO.clearFilter).should('be.visible');
cy.get(quickStartsPO.clearFilter).contains('Clear all filters');
});

0 comments on commit 4964528

Please sign in to comment.