ui/test: Fix the volumelist table test

Author: ChengYanJin

ui/cypress/integration/volume/volumelist.spec.js

@@ -5,6 +5,7 @@ beforeEach(() => {
 
 // Navigation tests
 describe('Volume list', () => {
+  const UNHEALTHY_VOLUME_NAME = 'master-0-alertmanager';
   it('brings me to the overview tab of the unhealthy volume', () => {
     // Specify a fake now timestamp to make sure the alert is active.
     const now = new Date('2020-11-09T08:33:26.330Z').getTime();
@@ -19,36 +20,40 @@ describe('Volume list', () => {
     // According to the default sorting rule, it should appear at the first place.
     cy.location('pathname').should(
       'eq',
-      '/volumes/master-0-alertmanager/overview',
+      `/volumes/${UNHEALTHY_VOLUME_NAME}/overview`,
     );
   });
 
-  it('brings me to the overview tab of worker-0-burry-1 Volume', () => {
-    // After implementing the virtualized table, not all the volumes are visible at the first render.
-    // So we should test the first several volumes which are visiable.
-
-    cy.visit('/volumes');
-    cy.stubHistory();
-    // The application re-renders, it's possible the element we're interacting with has become "dead"
-    // cy... failed because the element has been detached from the DOM
-
-    cy.findByText('worker-0-burry-1').click();
-
-    cy.get('@historyPush').should('be.calledWithExactly', {
-      pathname: '/volumes/worker-0-burry-1/overview',
-      search: '',
-    });
-  });
+  it(
+    'brings me to the overview tab of master-0-alertmanager Volume',
+    { scrollBehavior: false },
+    () => {
+      // After implementing the virtualized table, not all the volumes are visible at the first render.
+      // So we should test the first several volumes which are visiable.
+      cy.visit('/volumes');
+      // The application re-renders, it's possible the element we're interacting with has become "dead"
+      // cy... failed because the element has been detached from the DOM
+      cy.findAllByLabelText('Check-circle status healthy');
+      cy.findByRole('gridcell', {
+        name: UNHEALTHY_VOLUME_NAME,
+      }).click({ force: true });
+      cy.get('[data-cy="volume_detail_card_name"]').should(
+        'contain',
+        UNHEALTHY_VOLUME_NAME,
+      );
+      cy.url().should('include', `/volumes/${UNHEALTHY_VOLUME_NAME}/overview`);
+    },
+  );
 
   it('brings me to another volume with the same tab selected and queryString kept', () => {
     cy.visit('/volumes/master-1-prometheus/metrics?from=now-7d');
-    cy.stubHistory();
 
-    cy.findByText('master-0-alertmanager').click();
-    cy.get('@historyPush').should('be.calledOnce').and('be.calledWithExactly', {
-      pathname: '/volumes/master-0-alertmanager/metrics',
-      search: 'from=now-7d',
-    });
+    cy.findByText(UNHEALTHY_VOLUME_NAME).click({ force: true });
+    cy.findByText(/advanced metrics/i);
+    cy.url().should(
+      'include',
+      `/volumes/${UNHEALTHY_VOLUME_NAME}/metrics?from=now-7d`,
+    );
   });
 
   it('brings me to create volume page', () => {
@@ -59,22 +64,26 @@ describe('Volume list', () => {
     cy.get('@historyPush').and('be.calledWithExactly', '/volumes/createVolume');
   });
 
-  it('updates url with the search', () => {
-    cy.visit('/volumes');
-    cy.stubHistory();
-
-    cy.get('[data-cy="volume_list_search"]').type('hello');
-    cy.get('@historyPush').and('be.calledWithExactly', '?search=hello');
+  it('updates url query param with the search input', () => {
+    cy.visit('/volumes/master-1-prometheus/overview');
+    //E
+    cy.findAllByLabelText('Check-circle status healthy');
+    cy.findByText(/delete volume/i);
+    cy.findByRole('textbox').type('hello');
+    //V
+    cy.url().should(
+      'include',
+      `/volumes/master-1-prometheus/overview?search=hello`,
+    );
   });
 
-  it(`keeps warning severity for the alert while searching the node`, () => {
+  it('keeps warning severity for the alert while searching the node', () => {
     cy.visit('/volumes/master-1-prometheus/alerts?severity=warning');
-    cy.stubHistory();
 
-    cy.get('[data-cy="volume_list_search"]').type('hello');
-    cy.get('@historyPush').should(
-      'be.calledWithExactly',
-      '?severity=warning&search=hello',
+    cy.findByRole('textbox').type('hello');
+    cy.url().should(
+      'include',
+      '/volumes/master-1-prometheus/alerts?severity=warning&search=hello',
     );
   });
 });