Added cypress test for home page - part 2 (#5026)

openmetadata-ui/src/main/resources/ui/cypress/constants/constants.js

@@ -21,7 +21,37 @@ export const MYDATA_SUMMARY_OPTIONS = {
   terms: 'terms',
 };
 
+export const SEARCH_TERMS = {
+  raw_product_catalog: {
+    term: 'raw_product_catalog',
+    entity: MYDATA_SUMMARY_OPTIONS.tables,
+  },
+  raw_customer: { term: 'raw_customer', entity: MYDATA_SUMMARY_OPTIONS.tables },
+  fact_session: { term: 'fact_session', entity: MYDATA_SUMMARY_OPTIONS.tables },
+  sales: { term: 'sales', entity: MYDATA_SUMMARY_OPTIONS.topics },
+  orders: { term: 'orders', entity: MYDATA_SUMMARY_OPTIONS.topics },
+  eta_predictions_performance: {
+    term: 'ETA Predictions Performance',
+    entity: MYDATA_SUMMARY_OPTIONS.dashboards,
+  },
+  video_game_sales: {
+    term: 'Video Game Sales',
+    entity: MYDATA_SUMMARY_OPTIONS.dashboards,
+  },
+  unicode_test: {
+    term: 'Unicode Test',
+    entity: MYDATA_SUMMARY_OPTIONS.dashboards,
+  },
+  snowflake_etl: {
+    term: 'Snowflake ETL',
+    entity: MYDATA_SUMMARY_OPTIONS.pipelines,
+  },
+  hive_etl: { term: 'Hive ETL', entity: MYDATA_SUMMARY_OPTIONS.pipelines },
+};
+
 export const RECENT_SEARCH_TITLE = 'Recent Search Terms';
 export const RECENT_VIEW_TITLE = 'Recent Views';
 export const MY_DATA_TITLE = 'My Data';
 export const FOLLOWING_TITLE = 'Following';
+
+export const NO_SEARCHED_TERMS = 'No searched terms';

openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/myData.spec.js

@@ -16,8 +16,10 @@ import {
   FOLLOWING_TITLE,
   MYDATA_SUMMARY_OPTIONS,
   MY_DATA_TITLE,
+  NO_SEARCHED_TERMS,
   RECENT_SEARCH_TITLE,
   RECENT_VIEW_TITLE,
+  SEARCH_TERMS,
 } from '../../constants/constants';
 
 describe('MyData page should work', () => {
@@ -34,8 +36,88 @@ describe('MyData page should work', () => {
     cy.get('[data-testid="inactive-link"]')
       .invoke('text')
       .then((text) => {
-        cy.get('#openmetadata_logo > [data-testid="image"]').click();
-        cy.get(`[title="${text}"]`).should('be.visible');
+        cy.clickOnLogo();
+        cy.get(`[title="${text}"]`).should('be.visible').click();
+        cy.get('[data-testid="inactive-link"]')
+          .invoke('text')
+          .then((newText) => {
+            expect(newText).equal(text);
+          });
+        cy.clickOnLogo();
+      });
+  };
+
+  const checkRecentlySearchElement = (term) => {
+    cy.get('[data-testid="searchBox"]').should('be.visible');
+    cy.get('[data-testid="searchBox"]').scrollIntoView().type(term);
+    cy.get('.tw-cursor-pointer > [data-testid="image"]').click();
+    cy.clickOnLogo();
+    cy.get(`[data-testid="search-term-${term}"]`).should('be.visible').click();
+    cy.get('[data-testid="searchBox"]')
+      .invoke('val')
+      .then((text) => {
+        expect(text).equal(term);
+      });
+    cy.clickOnLogo();
+    cy.get(
+      `[data-testid="Recently-Search-${term}"] > :nth-child(1) > .tw-flex > .tw-opacity-0 > [data-testid="image"]`
+    )
+      .invoke('show')
+      .click();
+    cy.contains(NO_SEARCHED_TERMS).should('be.visible');
+  };
+
+  const followAndOwnTheEntity = (termObj) => {
+    // search for the term and redirect to the respective entity tab
+    cy.get('[data-testid="searchBox"]').should('be.visible');
+    cy.get('[data-testid="searchBox"]').scrollIntoView().type(termObj.term);
+    cy.get('.tw-cursor-pointer > [data-testid="image"]').click();
+    cy.get(`[data-testid="${termObj.entity}-tab"]`)
+      .should('be.visible')
+      .click();
+    cy.get(`[data-testid="${termObj.entity}-tab"]`)
+      .should('be.visible')
+      .should('have.class', 'active')
+      .click();
+
+    // click on the 1st result and go to entity details page and follow the entity
+    cy.get('[data-testid="table-link"]').first().should('be.visible').click();
+    cy.get('[data-testid="follow-button"]').should('be.visible').click();
+
+    // got to manage tab and search for logged in user and set the owner
+    cy.get('[data-testid="Manage"]').should('be.visible').click();
+
+    cy.get(
+      '[data-testid="dropdown-profile"] > [data-testid="dropdown-item"] > :nth-child(1) > [data-testid="menu-button"]'
+    )
+      .should('be.visible')
+      .click();
+    cy.get('[data-testid="greeting-text"] > a > :nth-child(1)')
+      .should('be.visible')
+      .invoke('text')
+      .then((name) => {
+        cy.get('.tw-z-10').click();
+        cy.get('[data-testid="owner-dropdown"]').should('be.visible').click();
+        cy.get('[data-testid="searchInputText"]').type(name);
+        cy.get('[data-testid="list-item"]').should('be.visible').click();
+        cy.get('[data-testid="owner-dropdown"] > .tw-truncate')
+          .invoke('text')
+          .then((text) => {
+            expect(text).equal(name);
+          });
+        cy.clickOnLogo();
+
+        // checks newly generated feed for follow and setting owner
+        cy.get('[data-testid="message-container"]')
+          .first()
+          .contains(`Added owner: ${name}`)
+          .should('be.visible');
+
+        cy.get('[data-testid="message-container"]')
+          .eq(1)
+          .scrollIntoView()
+          .contains(`Started to follow ${termObj.entity.slice(0, -1)}`)
+          .should('be.visible');
       });
   };
 
@@ -70,7 +152,7 @@ describe('MyData page should work', () => {
     visitEntityTab(MYDATA_SUMMARY_OPTIONS.pipelines);
   });
 
-  it('Listing entity in Recent views section should work properly', () => {
+  it('Listing entity in Recent views section with redirection should work properly', () => {
     // checking for table entity
     checkRecentlyViewElement(0, MYDATA_SUMMARY_OPTIONS.tables);
 
@@ -83,4 +165,48 @@ describe('MyData page should work', () => {
     // checking for pipeline entity
     checkRecentlyViewElement(0, MYDATA_SUMMARY_OPTIONS.pipelines);
   });
+
+  it('Listing Recent search terms with redirection should work properly', () => {
+    cy.contains(NO_SEARCHED_TERMS).should('be.visible');
+
+    checkRecentlySearchElement(SEARCH_TERMS.eta_predictions_performance.term);
+    checkRecentlySearchElement(SEARCH_TERMS.fact_session.term);
+    checkRecentlySearchElement(SEARCH_TERMS.hive_etl.term);
+    checkRecentlySearchElement(SEARCH_TERMS.sales.term);
+  });
+
+  it('My data, following & feed section should work properly', () => {
+    const termArr = Object.values(SEARCH_TERMS);
+
+    termArr.forEach((term) => {
+      followAndOwnTheEntity(term);
+    });
+
+    cy.get('[data-testid="my-data-container"]')
+      .children()
+      .should('have.length', 9);
+    cy.get('[data-testid="following-data-container"]')
+      .children()
+      .should('have.length', 9);
+
+    cy.get('[data-testid="my-data-total-count"]')
+      .invoke('text')
+      .then((text) => {
+        expect(text).equal(`(${termArr.length})`);
+      });
+
+    cy.get('[data-testid="my-data-total-count"]').click();
+    cy.get('[data-testid="table-data-card"]').first().should('be.visible');
+    cy.clickOnLogo();
+
+    cy.get('[data-testid="following-data-total-count"]')
+      .invoke('text')
+      .then((text) => {
+        expect(text).equal(`(${termArr.length})`);
+      });
+
+    cy.get('[data-testid="following-data-total-count"]').click();
+    cy.get('[data-testid="table-data-card"]').first().should('be.visible');
+    cy.clickOnLogo();
+  });
 });

openmetadata-ui/src/main/resources/ui/cypress/support/commands.js

@@ -69,3 +69,7 @@ Cypress.Commands.add('goToHomePage', () => {
   cy.get('[data-testid="WhatsNewModalFeatures"]').should('not.exist');
   cy.get('[data-testid="tables"]').should('be.visible');
 });
+
+Cypress.Commands.add('clickOnLogo', () => {
+  cy.get('#openmetadata_logo > [data-testid="image"]').click();
+});

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx

@@ -123,53 +123,63 @@ const MyData: React.FC<MyDataProps> = ({
   const getRightPanel = useCallback(() => {
     return (
       <div className="tw-mt-12">
-        <EntityList
-          entityList={ownedData}
-          headerText={
-            <div className="tw-flex tw-justify-between">
-              My Data
-              {ownedData.length ? (
-                <Link
-                  data-testid="my-data"
-                  to={getExploreLinkByFilter(
-                    Ownership.OWNER,
-                    AppState.userDetails,
-                    AppState.nonSecureUserDetails
-                  )}>
-                  <span className="link-text tw-font-normal tw-text-xs">
-                    View All <span>({ownedDataCount})</span>
-                  </span>
-                </Link>
-              ) : null}
-            </div>
-          }
-          noDataPlaceholder={<>You have not owned anything yet.</>}
-          testIDText="My data"
-        />
+        <div data-testid="my-data-container">
+          <EntityList
+            entityList={ownedData}
+            headerText={
+              <div className="tw-flex tw-justify-between">
+                My Data
+                {ownedData.length ? (
+                  <Link
+                    data-testid="my-data"
+                    to={getExploreLinkByFilter(
+                      Ownership.OWNER,
+                      AppState.userDetails,
+                      AppState.nonSecureUserDetails
+                    )}>
+                    <span className="link-text tw-font-normal tw-text-xs">
+                      View All{' '}
+                      <span data-testid="my-data-total-count">
+                        ({ownedDataCount})
+                      </span>
+                    </span>
+                  </Link>
+                ) : null}
+              </div>
+            }
+            noDataPlaceholder={<>You have not owned anything yet.</>}
+            testIDText="My data"
+          />
+        </div>
         <div className="tw-filter-seperator tw-mt-3" />
-        <EntityList
-          entityList={followedData}
-          headerText={
-            <div className="tw-flex tw-justify-between">
-              Following
-              {followedData.length ? (
-                <Link
-                  data-testid="following-data"
-                  to={getExploreLinkByFilter(
-                    Ownership.FOLLOWERS,
-                    AppState.userDetails,
-                    AppState.nonSecureUserDetails
-                  )}>
-                  <span className="link-text tw-font-normal tw-text-xs">
-                    View All <span>({followedDataCount})</span>
-                  </span>
-                </Link>
-              ) : null}
-            </div>
-          }
-          noDataPlaceholder={<>You have not followed anything yet.</>}
-          testIDText="Following data"
-        />
+        <div data-testid="following-data-container">
+          <EntityList
+            entityList={followedData}
+            headerText={
+              <div className="tw-flex tw-justify-between">
+                Following
+                {followedData.length ? (
+                  <Link
+                    data-testid="following-data"
+                    to={getExploreLinkByFilter(
+                      Ownership.FOLLOWERS,
+                      AppState.userDetails,
+                      AppState.nonSecureUserDetails
+                    )}>
+                    <span className="link-text tw-font-normal tw-text-xs">
+                      View All{' '}
+                      <span data-testid="following-data-total-count">
+                        ({followedDataCount})
+                      </span>
+                    </span>
+                  </Link>
+                ) : null}
+              </div>
+            }
+            noDataPlaceholder={<>You have not followed anything yet.</>}
+            testIDText="Following data"
+          />
+        </div>
         <div className="tw-filter-seperator tw-mt-3" />
       </div>
     );

openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTerms.tsx

@@ -60,7 +60,7 @@ const RecentSearchedTerms: FunctionComponent = () => {
                     to={getExplorePathWithSearch(item.term)}>
                     <button
                       className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
-                      data-testid="recently-searched">
+                      data-testid={`search-term-${item.term}`}>
                       {item.term.length > 20 ? (
                         <PopOver
                           html={