ODC-5577:Topology chart view automation

frontend/packages/console-shared/src/components/quick-search/QuickSearchBar.tsx

@@ -24,7 +24,7 @@ const QuickSearchBar: React.FC<QuickSearchBarProps> = ({
   const { t } = useTranslation();
 
   return (
-    <InputGroup className="odc-quick-search-bar">
+    <InputGroup className="odc-quick-search-bar" data-test="quick-search-bar">
       <InputGroupText>
         <QuickSearchIcon />
       </InputGroupText>
@@ -36,6 +36,7 @@ const QuickSearchBar: React.FC<QuickSearchBarProps> = ({
         onChange={onSearch}
         autoFocus={autoFocus}
         value={searchTerm}
+        data-test="input"
       />
       {!itemsLoaded && (
         <InputGroupText>

frontend/packages/dev-console/integration-tests/support/constants/staticText/global-text.ts

@@ -12,6 +12,7 @@ export const messages = {
     noRoutesFound: 'No Routes found for this resource.',
     privateGitRepoMessage:
       'URL is valid but cannot be reached. If this is a private repository, enter a source Secret in advanced Git options',
+    buildDeployMessage: 'Repository URL to build and deploy your code from source',
     rateLimitExceeded: 'Rate limit exceeded',
     unableToDetectBuilderImage: 'Unable to detect the Builder Image.',
   },

frontend/packages/dev-console/integration-tests/support/pages/add-flow/git-page.ts

@@ -36,6 +36,8 @@ export const gitPage = {
           .should('not.be.empty');
         cy.get('#form-input-application-name-field')
           .clear()
+          .should('not.have.value');
+        cy.get('#form-input-application-name-field')
           .type(appName)
           .should('have.value', appName);
         cy.log(`Application Name "${appName}" is created`);
@@ -230,12 +232,14 @@ export const gitPage = {
     }
   },
   verifyValidatedMessage: (gitUrl = 'https://github.com/sclorg/nodejs-ex.git') => {
-    cy.get(gitPO.gitSection.validatedMessage).should('not.have.text', 'Validating...');
+    cy.get(gitPO.gitSection.validatedMessage)
+      .should('not.include.text', 'Validating...')
+      .and('not.include.text', messages.addFlow.buildDeployMessage);
     cy.get('body').then(($body) => {
       if (
-        $body.text().includes(messages.addFlow.privateGitRepoMessage) ||
         $body.text().includes(messages.addFlow.rateLimitExceeded) ||
-        $body.find('[aria-label="Warning Alert"]').length
+        $body.find('[aria-label="Warning Alert"]').length ||
+        $body.text().includes(messages.addFlow.privateGitRepoMessage)
       ) {
         gitPage.selectBuilderImageForGitUrl(gitUrl);
       }

frontend/packages/topology/integration-tests/features/topology/topology-chart-area-visual.feature

@@ -7,32 +7,33 @@ Feature: Topology chart area
               And user has created or selected namespace "aut-topology-delete-workload"
 
 
-        @smoke @to-do
+        @smoke
         Scenario: Empty state of topology: T-06-TC01
              When user navigates to Topology page
              Then user sees Topology page with message "No resources found"
 
 
-        @regression @to-do
+        @regression
         Scenario: Navigate to Add page from Empty state of topology: T-06-TC02
             Given user is at the Topology page
              When user clicks on "Add page" link in the topology page
-             Then user will be redirected too Add page
+             Then user will be redirected to Add page
 
 
-        @regression @to-do
+        @regression
         Scenario: Add to project option in Empty state of topology: T-06-TC03
             Given user is at the Topology page
-             When user clicks on "Start building your application" link in the topology page
+             When user clicks on "Start building your application" link in the empty topology page
              Then user will be able to see Add to project search bar
 
 
-        @smoke @to-do
+        @smoke
         Scenario: Topology with workloads: T-06-TC04
-            Given user has created a workload named "nodejs-ex-git"
-              And user has created knative workload "nodejs-ex-git-1"
+            Given user has created a deployment workload named "nodejs-ex-git-1"
+              And user has created a deployment config workload "nodejs-ex-git-2"
              When user navigates to Topology page
-             Then user sees different workloads in topology chart area
+             Then user sees "nodejs-ex-git-1" and "nodejs-ex-git-2" workloads in topology chart area
+
 
 
         @regression @manual
@@ -134,16 +135,18 @@ Feature: Topology chart area
              Then user sees the chart area is reset to original
 
 
-        @regression @to-do
-        Scenario: Topology filter by resource: T-06-TC14
-            Given user created two workloads with resource type "Deployment" and "Deployment-Config"
+        @regression
+        Scenario Outline: Topology filter by resource: T-06-TC14
+            Given user created "<resource_type>" workload
              When user is at Topology page chart view
               And user clicks the filter by resource on top
-              And user will see "Deployment" and "Deployment-Config" options with '1' associated with it
-              And user clicks on Deployment
-              And user can see only the deployment workload
-              And user clicks on Deployment-Config
-             Then user can see only the deployment-config workload
+              And user clicks on "<resource_type>" option
+             Then user can see only the "<resource_type>" workload
+
+        Examples:
+                  | resource_type    |
+                  | Deployment       |
+                  | DeploymentConfig |
 
 
         @regression @to-do

frontend/packages/topology/integration-tests/support/page-objects/topology-po.ts

@@ -4,6 +4,7 @@ export const topologyPO = {
   title: 'h1.ocs-page-layout__title',
   search: '[data-test-id="item-filter"]',
   emptyStateIcon: 'div.pf-c-empty-state__icon',
+  emptyText: '[data-test="no-resources-found"]',
   graph: {
     reset: '#reset-view',
     zoomIn: '#zoom-in',
@@ -30,13 +31,13 @@ export const topologyPO = {
       applicationGroupingsDisabled: '.pf-c-check.pf-c-select__menu-item.pf-m-disabled',
     },
     filterByResource: {
-      filterByResourceDropDown: '.pf-c-select__toggle-text',
-      deploymentResource: '.co-m-resource-icon.co-m-resource-deployment',
-      deploymentConfigResource: '.co-m-resource-icon.co-m-resource-deploymentconfig',
+      filterByResourceDropDown: '[data-test="filter-by-resource"]',
     },
     contextMenuOptions: {
       addToProject: '.pf-topology-context-sub-menu',
     },
+    addLink: '[data-test="add-page"]',
+    quickSearch: '[data-test="quick-search-bar"]',
   },
   list: {
     appName: '#HelmRelease ul li div',
@@ -223,3 +224,10 @@ export const topologyPO = {
     tickButton: '[data-test-id="check-icon"]',
   },
 };
+
+export const typeOfWorkload = (workload: string) => {
+  return `[data-test~="icon"][data-test~="${workload
+    .toLowerCase()
+    .replace(' ', '')
+    .trim()}"]`;
+};

frontend/packages/topology/integration-tests/support/step-definitions/topology/chart-view.ts

@@ -0,0 +1,114 @@
+import { When, Then, Given } from 'cypress-cucumber-preprocessor/steps';
+import { pageTitle } from '@console/dev-console/integration-tests/support/constants';
+import { devNavigationMenu } from '@console/dev-console/integration-tests/support/constants/global';
+import { createGitWorkload } from '@console/dev-console/integration-tests/support/pages';
+import { app, navigateTo } from '@console/dev-console/integration-tests/support/pages/app';
+import { topologyPO, typeOfWorkload } from '../../page-objects/topology-po';
+import { topologyHelper } from '../../pages/topology';
+
+When('user navigates to Topology page', () => {
+  navigateTo(devNavigationMenu.Topology);
+});
+
+Then('user sees Topology page with message {string}', (message: string) => {
+  cy.get(topologyPO.emptyText).contains(message);
+});
+
+Given('user is at the Topology page', () => {
+  navigateTo(devNavigationMenu.Topology);
+});
+
+When('user clicks on {string} link in the topology page', (addLink) => {
+  cy.get(topologyPO.graph.addLink)
+    .should('be.visible')
+    .should('have.text', addLink);
+  cy.get(topologyPO.graph.addLink).click();
+});
+
+Then('user will be redirected to Add page', () => {
+  cy.url().should('include', 'add');
+  app.waitForLoad();
+  cy.contains(pageTitle.Add).should('be.visible');
+});
+
+When('user clicks on {string} link in the empty topology page', (build: string) => {
+  cy.byTestID(
+    build
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .trim(),
+  )
+    .should('be.visible')
+    .click();
+  cy.log(`Quick search bar can be seen with ${build} link`);
+});
+
+Then('user will be able to see Add to project search bar', () => {
+  cy.get(topologyPO.graph.quickSearch).should('be.visible');
+});
+
+Given('user has created a deployment workload named {string}', (componentName: string) => {
+  navigateTo(devNavigationMenu.Add);
+  createGitWorkload(
+    'https://github.com/sclorg/nodejs-ex.git',
+    componentName,
+    'Deployment',
+    'nodejs-ex-git-app',
+  );
+});
+
+Given('user has created a deployment config workload {string}', (componentName: string) => {
+  navigateTo(devNavigationMenu.Add);
+  createGitWorkload(
+    'https://github.com/sclorg/nodejs-ex.git',
+    componentName,
+    'Deployment Config',
+    'nodejs-ex-git-app',
+  );
+});
+
+When('user navigates to Topology page', () => {
+  navigateTo(devNavigationMenu.Topology);
+});
+
+Then(
+  'user sees {string} and {string} workloads in topology chart area',
+  (workload1: string, workload2: string) => {
+    topologyHelper.verifyWorkloadInTopologyPage(workload1);
+    topologyHelper.verifyWorkloadInTopologyPage(workload2);
+  },
+);
+
+Given(
+  'user created {string} workload',
+  (resourceType: string, componentName: string = `${resourceType.toLowerCase()}-ex-git`) => {
+    navigateTo(devNavigationMenu.Add);
+    createGitWorkload(
+      'https://github.com/sclorg/django-ex.git',
+      componentName,
+      resourceType,
+      'django-ex-git-app',
+    );
+  },
+);
+
+When('user is at Topology page chart view', () => {
+  navigateTo(devNavigationMenu.Topology);
+  cy.get(topologyPO.switcher).should('have.attr', 'aria-label', 'List view');
+});
+
+When('user clicks the filter by resource on top', () => {
+  cy.get(topologyPO.graph.filterByResource.filterByResourceDropDown)
+    .should('be.visible')
+    .click();
+});
+
+When('user clicks on {string} option', (resourceType: string) => {
+  cy.byTestID(resourceType)
+    .should('be.visible')
+    .click();
+});
+
+Then('user can see only the {string} workload', (workload: string) => {
+  cy.get(typeOfWorkload(workload)).should('be.visible');
+});

frontend/packages/topology/locales/en/topology.json

@@ -53,7 +53,7 @@
   "Unable to move connector of type {{type}}.": "Unable to move connector of type {{type}}.",
   "Topology": "Topology",
   "No resources found": "No resources found",
-  "<0>Start building your application</0> or visit the <3>Add page</3> for more details.": "<0>Start building your application</0> or visit the <3>Add page</3> for more details.",
+  "<0>Start building your application</0> or visit the <2>Add page</2> for more details.": "<0>Start building your application</0> or visit the <2>Add page</2> for more details.",
   "Select a Project to view the topology or <2>create a Project</2>.": "Select a Project to view the topology or <2>create a Project</2>.",
   "List view": "List view",
   "Graph view": "Graph view",

frontend/packages/topology/locales/ja/topology.json

@@ -53,7 +53,7 @@
   "Unable to move connector of type {{type}}.": "タイプ {{type}} のコネクターを移動できません。",
   "Topology": "トポロジー",
   "No resources found": "リソースが見つかりません",
-  "<0>Start building your application</0> or visit the <3>Add page</3> for more details.": "<0>アプリケーションのビルドを開始</0>するか、または <3>Add page</3> に移動して詳細を確認します。",
+  "<0>Start building your application</0> or visit the <2>Add page</2> for more details.": "<0>アプリケーションのビルドを開始</0>するか、または <2>Add page</2> に移動して詳細を確認します。",
   "Select a Project to view the topology or <2>create a Project</2>.": "トポロジーを表示するプロジェクトを選択するか、または<2>プロジェクトを作成</2>します。",
   "List view": "リストビュー",
   "Graph view": "グラフビュー",

frontend/packages/topology/locales/ko/topology.json

@@ -53,7 +53,7 @@
   "Unable to move connector of type {{type}}.": "{{type}} 유형의 커넥터를 이동할 수 없습니다.",
   "Topology": "토폴로지",
   "No resources found": "리소스를 찾을 수 없습니다",
-  "<0>Start building your application</0> or visit the <3>Add page</3> for more details.": "<0>애플리케이션 빌드를 시작</0>하거나 자세한 내용을 보려면 <3>페이지 추가</3>로 이동하십시오.",
+  "<0>Start building your application</0> or visit the <2>Add page</2> for more details.": "<0>애플리케이션 빌드를 시작</0>하거나 자세한 내용을 보려면 <2>페이지 추가</2>로 이동하십시오.",
   "Select a Project to view the topology or <2>create a Project</2>.": "토폴로지를 보거나 <2>프로젝트를 생성</2>하려면 프로젝트를 선택하십시오.",
   "List view": "목록 보기",
   "Graph view": "그래프 보기",

frontend/packages/topology/locales/zh/topology.json

@@ -52,7 +52,7 @@
   "Unable to move connector of type {{type}}.": "无法移动类型 {{type}} 的连接器。",
   "Topology": "拓扑",
   "No resources found": "没有找到资源",
-  "<0>Start building your application</0> or visit the <3>Add page</3> for more details.": "<0>开始构建应用程序</0> 或访问<3>添加页面</3>以了解更多详细信息。",
+  "<0>Start building your application</0> or visit the <2>Add page</2> for more details.": "<0>开始构建应用程序</0> 或访问<2>添加页面</2>以了解更多详细信息。",
   "Select a Project to view the topology or <2>create a Project</2>.": "选择一个项目查看拓扑或<2>创建一个项目</2>",
   "List view": "列表视图",
   "Graph view": "图形视图",

frontend/packages/topology/src/components/page/TopologyEmptyState.tsx

@@ -19,7 +19,11 @@ const TopologyEmptyState: React.FC<TopologyEmptyStateProps> = ({ setIsQuickSearc
   const { t } = useTranslation();
 
   return (
-    <EmptyState className="odc-topology__empty-state" variant={EmptyStateVariant.full}>
+    <EmptyState
+      className="odc-topology__empty-state"
+      variant={EmptyStateVariant.full}
+      data-test="no-resources-found"
+    >
       <EmptyStateIcon variant="container" component={TopologyIcon} />
       <Title headingLevel="h3" size="lg">
         {t('topology~No resources found')}
@@ -29,14 +33,19 @@ const TopologyEmptyState: React.FC<TopologyEmptyStateProps> = ({ setIsQuickSearc
           <Button
             isInline
             variant="link"
+            data-test="start-building-your-application"
             onClick={(e) => {
               e.stopPropagation();
               setIsQuickSearchOpen(true);
             }}
           >
             Start building your application
-          </Button>{' '}
-          or visit the <Link to="/add">Add page</Link> for more details.
+          </Button>
+          {' or visit the '}
+          <Link to="/add" data-test="add-page">
+            Add page
+          </Link>
+          {' for more details.'}
         </Trans>
       </EmptyStateSecondaryActions>
     </EmptyState>

frontend/packages/topology/src/components/svg/SvgResourceIcon.tsx

@@ -57,6 +57,7 @@ const ForwardSvgResourceIcon: React.FC<ResourceIconProps> = (
       className={cx('odc-resource-icon', {
         [`odc-resource-icon-${kindStr.toLowerCase()}`]: !kindColor,
       })}
+      data-test={`icon ${kindStr.toLowerCase()}`}
     >
       {rect}
       <title>{kindStr}</title>

frontend/packages/topology/src/filters/KindFilterDropdown.tsx

@@ -74,7 +74,12 @@ const KindFilterDropdown: React.FC<KindFilterDropdownProps> = ({
         </Button>
       </span>
       {kindFilters.map((filter) => (
-        <SelectOption key={filter.id} value={filter.id} isChecked={filter.value}>
+        <SelectOption
+          key={filter.id}
+          value={filter.id}
+          isChecked={filter.value}
+          data-test={filter.label}
+        >
           <ResourceIcon kind={filter.id} />
           {filter.label} ({supportedKinds[filter.id]})
         </SelectOption>

frontend/packages/topology/src/filters/TopologyFilterBar.tsx

@@ -92,7 +92,7 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarGroup variant={ToolbarGroupVariant['filter-group']}>
-          <ToolbarItem>
+          <ToolbarItem data-test="filter-by-resource">
             <KindFilterDropdown
               filters={filters}
               supportedKinds={supportedKinds}