test: [M3-8133] - Add Cypress test for Login History page (#10575)

* M3-8133 Add Cypress test for Login History page * fixed comments * Added changeset: Add Cypress test for Login History page
linode · Jul 8, 2024 · 0f2e15c · 0f2e15c
1 parent dadc451
commit 0f2e15c
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 12 deletions.
diff --git a/packages/manager/.changeset/pr-10575-tests-1720464616116.md b/packages/manager/.changeset/pr-10575-tests-1720464616116.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add Cypress test for Login History page ([#10575](https://github.com/linode/manager/pull/10575))
diff --git a/packages/manager/cypress/e2e/core/account/account-login-history.spec.ts b/packages/manager/cypress/e2e/core/account/account-login-history.spec.ts
@@ -7,6 +7,10 @@ import { accountLoginFactory } from 'src/factories/accountLogin';
 import { formatDate } from 'src/utilities/formatDate';
 import { mockGetAccountLogins } from 'support/intercepts/account';
 import { mockGetProfile } from 'support/intercepts/profile';
+import {
+  loginHelperText,
+  loginEmptyStateMessageText,
+} from 'support/constants/account';
 import { PARENT_USER } from 'src/features/Account/constants';
 
 describe('Account login history', () => {
@@ -42,9 +46,7 @@ describe('Account login history', () => {
     cy.wait(['@getProfile']);
 
     // Confirm helper text above table is visible.
-    cy.findByText(
-      'Logins across all users on your account over the last 90 days.'
-    ).should('be.visible');
+    cy.findByText(loginHelperText).should('be.visible');
 
     // Confirm the login table includes the expected column headers and mocked logins are visible in table.
     cy.findByLabelText('Account Logins').within(() => {
@@ -72,9 +74,6 @@ describe('Account login history', () => {
         .closest('tr')
         .within(() => {
           // Confirm that successful login and status icon display in table.
-          cy.findByText(mockSuccessfulLogin.status, { exact: false }).should(
-            'be.visible'
-          );
           cy.findAllByLabelText(`Status is ${mockSuccessfulLogin.status}`);
 
           // Confirm all other fields display in table.
@@ -108,9 +107,7 @@ describe('Account login history', () => {
     cy.wait(['@getProfile']);
 
     // Confirm helper text above table and table are not visible.
-    cy.findByText(
-      'Logins across all users on your account over the last 90 days.'
-    ).should('not.exist');
+    cy.findByText(loginHelperText).should('not.exist');
     cy.findByLabelText('Account Logins').should('not.exist');
 
     cy.findByText(
@@ -137,13 +134,114 @@ describe('Account login history', () => {
     cy.wait(['@getProfile']);
 
     // Confirm helper text above table and table are not visible.
-    cy.findByText(
-      'Logins across all users on your account over the last 90 days.'
-    ).should('not.exist');
+    cy.findByText(loginHelperText).should('not.exist');
     cy.findByLabelText('Account Logins').should('not.exist');
 
     cy.findByText(
       "You don't have permissions to edit this Account. Please contact your account administrator to request the necessary permissions."
     );
   });
+
+  /*
+   * - Vaildates login history landing page with mock data.
+   * - Confirms that each login is listed in the Login History table.
+   * - Confirms that "Successful" indicator is shown for successful login attempts, and the "Failure" indicator is shown for the failed ones.
+   * - Confirms that clicking on the username for the login navigates to the expected user page
+   */
+  it('shows each login in the Login History landing page as expected', () => {
+    const mockProfile = profileFactory.build({
+      username: 'mock-user',
+      restricted: false,
+      user_type: 'default',
+    });
+    const mockFailedLogin = accountLoginFactory.build({
+      status: 'failed',
+      username: 'mock-user-failed',
+      restricted: false,
+    });
+    const mockSuccessfulLogin = accountLoginFactory.build({
+      status: 'successful',
+      username: 'mock-user-successful',
+      restricted: false,
+    });
+
+    mockGetProfile(mockProfile).as('getProfile');
+    mockGetAccountLogins([mockFailedLogin, mockSuccessfulLogin]).as(
+      'getAccountLogins'
+    );
+
+    // Navigate to Account Login History page.
+    cy.visitWithLogin('/account/login-history');
+    cy.wait(['@getProfile']);
+
+    // Confirm helper text above table is visible.
+    cy.findByText(loginHelperText).should('be.visible');
+
+    // Confirm the login table includes the expected column headers and mocked logins are visible in table.
+    cy.findByLabelText('Account Logins').within(() => {
+      cy.get('thead').findByText('Date').should('be.visible');
+      cy.get('thead').findByText('Username').should('be.visible');
+      cy.get('thead').findByText('IP').should('be.visible');
+      cy.get('thead').findByText('Permission Level').should('be.visible');
+      cy.get('thead').findByText('Access').should('be.visible');
+
+      // Confirm that restricted user's failed login and status icon display in table.
+      cy.findByText(mockFailedLogin.username)
+        .should('be.visible')
+        .closest('tr')
+        .within(() => {
+          // cy.findByText(mockFailedLogin.status, { exact: false }).should(
+          //   'be.visible'
+          // );
+          cy.findAllByLabelText(`Status is ${mockFailedLogin.status}`);
+          cy.findByText('Unrestricted').should('be.visible');
+        });
+
+      // Confirm that unrestricted user login displays in table.
+      cy.findByText(mockSuccessfulLogin.username)
+        .should('be.visible')
+        .closest('tr')
+        .within(() => {
+          // Confirm that successful login and status icon display in table.
+          cy.findAllByLabelText(`Status is ${mockSuccessfulLogin.status}`);
+
+          // Confirm all other fields display in table.
+          cy.findByText(
+            formatDate(mockSuccessfulLogin.datetime, {
+              timezone: mockProfile.timezone,
+            })
+          ).should('be.visible');
+          cy.findByText(mockSuccessfulLogin.ip).should('be.visible');
+          cy.findByText('Unrestricted').should('be.visible');
+        });
+    });
+  });
+
+  /*
+   * - Confirms that empty state is handled gracefully, showing corresponding message.
+   */
+  it('shows empty message when there is no login history', () => {
+    mockGetAccountLogins([]).as('getAccountLogins');
+
+    // Navigate to Login History landing page.
+    cy.visitWithLogin('/account/login-history');
+    cy.wait('@getAccountLogins');
+
+    // Confirm helper text above table is visible.
+    cy.findByText(loginHelperText).should('be.visible');
+
+    cy.findByLabelText('Account Logins').within(() => {
+      cy.get('thead').findByText('Date').should('be.visible');
+      cy.get('thead').findByText('Username').should('be.visible');
+      cy.get('thead').findByText('IP').should('be.visible');
+      cy.get('thead').findByText('Permission Level').should('be.visible');
+      cy.get('thead').findByText('Access').should('be.visible');
+    });
+
+    cy.get('[data-testid="table-row-empty"]')
+      .should('be.visible')
+      .within(() => {
+        cy.findByText(loginEmptyStateMessageText).should('be.visible');
+      });
+  });
 });
diff --git a/packages/manager/cypress/support/constants/account.ts b/packages/manager/cypress/support/constants/account.ts
@@ -18,3 +18,14 @@ We cannot cancel this account until the balance has been paid.';
  */
 export const sshFormatErrorMessage =
   'SSH Key key-type must be ssh-dss, ssh-rsa, ecdsa-sha2-nistp, ssh-ed25519, or sk-ecdsa-sha2-nistp256.';
+
+/**
+ * Helper text that appears above the login history table.
+ */
+export const loginHelperText =
+  'Logins across all users on your account over the last 90 days.';
+
+/**
+ * Empty state message that appears when there is no item in the login history table.
+ */
+export const loginEmptyStateMessageText = 'No account logins';