test: Fix and clean up smoke-billing-activity.spec.ts and `Database…

…Backups.test.tsx` (#11394) * fix and clean up some tests * add changesets --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · Dec 10, 2024 · 681acc6 · 681acc6
1 parent 7abce3b
commit 681acc6
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 68 deletions.
diff --git a/packages/manager/.changeset/pr-11394-tests-1733856095533.md b/packages/manager/.changeset/pr-11394-tests-1733856095533.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Improve assertions made in `smoke-billing-activity.spec.ts` ([#11394](https://github.com/linode/manager/pull/11394))
diff --git a/packages/manager/.changeset/pr-11394-tests-1733856145159.md b/packages/manager/.changeset/pr-11394-tests-1733856145159.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Clean up `DatabaseBackups.test.tsx` ([#11394](https://github.com/linode/manager/pull/11394))
diff --git a/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts b/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts
@@ -329,11 +329,14 @@ describe('Billing Activity Feed', () => {
     // Time zones against which to verify invoice and payment dates.
     const timeZonesList = [
       { key: 'America/New_York', human: 'Eastern Time - New York' },
-      { key: 'GMT', human: 'Coordinated Universal Time' },
+      { key: 'UTC', human: 'Coordinated Universal Time' },
       { key: 'Asia/Hong_Kong', human: 'Hong Kong Standard Time' },
     ];
 
-    const mockProfile = profileFactory.build();
+    const mockProfile = profileFactory.build({
+      timezone: 'Pacific/Honolulu',
+    });
+
     const mockInvoice = invoiceFactory.build({
       date: DateTime.now().minus({ days: 2 }).toISO(),
     });
@@ -349,10 +352,16 @@ describe('Billing Activity Feed', () => {
     cy.visitWithLogin('/profile/display');
     cy.wait('@getProfile');
 
+    // Verify the user's initial timezone is selected by default
+    cy.findByLabelText('Timezone')
+      .should('be.visible')
+      .should('contain.value', 'Hawaii-Aleutian Standard Time');
+
     // Iterate through each timezone and confirm that payment and invoice dates
     // reflect each timezone.
     timeZonesList.forEach((timezone) => {
       const timezoneId = timezone.key;
+      const timezoneLabel = timezone.human;
 
       mockUpdateProfile({
         ...mockProfile,
@@ -366,7 +375,7 @@ describe('Billing Activity Feed', () => {
       cy.findByText('Timezone')
         .should('be.visible')
         .click()
-        .type('Pacific Time - Los Angeles{enter}');
+        .type(`${timezoneLabel}{enter}`);
 
       ui.button
         .findByTitle('Update Timezone')
@@ -376,6 +385,11 @@ describe('Billing Activity Feed', () => {
 
       cy.wait('@updateProfile');
 
+      // Verify the new timezone remains selected after clicking "Update Timezone"
+      cy.findByLabelText('Timezone')
+        .should('be.visible')
+        .should('contain.value', timezoneLabel);
+
       // Navigate back to Billing & Contact Information page to confirm that
       // invoice and payment data correctly reflects updated timezone.
       navigateToBilling();

diff --git a/...es/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx b/...es/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
@@ -1,18 +1,14 @@
-import * as React from 'react';
+import { waitFor } from '@testing-library/react';
+import React from 'react';
 
-import {
-  databaseBackupFactory,
-  databaseFactory,
-  profileFactory,
-} from 'src/factories';
+import { databaseBackupFactory, databaseFactory } from 'src/factories';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { HttpResponse, http, server } from 'src/mocks/testServer';
-import { formatDate } from 'src/utilities/formatDate';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import DatabaseBackups from './DatabaseBackups';
 
-describe('Database Backups', () => {
+describe('Database Backups (Legacy)', () => {
   it('should render a list of backups after loading', async () => {
     const mockDatabase = databaseFactory.build({
       platform: 'rdbms-legacy',
@@ -21,9 +17,6 @@ describe('Database Backups', () => {
     const backups = databaseBackupFactory.buildList(7);
 
     server.use(
-      http.get('*/profile', () => {
-        return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
-      }),
       http.get('*/databases/:engine/instances/:id', () => {
         return HttpResponse.json(mockDatabase);
       }),
@@ -32,20 +25,12 @@ describe('Database Backups', () => {
       })
     );
 
-    const { findByText, getAllByRole } = renderWithTheme(<DatabaseBackups />);
-
-    const backupPromises = backups.map((backup) => {
-      const expectedDate = formatDate(backup.created, { timezone: 'utc' });
-      return findByText(expectedDate);
-    });
+    const { getAllByRole } = renderWithTheme(<DatabaseBackups />);
 
-    const backupElements = await Promise.all(backupPromises);
-    backupElements.forEach((backupItem) => {
-      expect(backupItem).toBeVisible();
+    await waitFor(() => {
+      // Verify there is a table row for each backup (and a row for the table header)
+      expect(getAllByRole('row')).toHaveLength(backups.length + 1);
     });
-
-    // Verify there is a table row for each backup (and a row for the table header)
-    expect(getAllByRole('row')).toHaveLength(backups.length + 1);
   });
 
   it('should render an empty state if there are no backups', async () => {
@@ -78,9 +63,6 @@ describe('Database Backups', () => {
     const backups = databaseBackupFactory.buildList(7);
 
     server.use(
-      http.get('*/profile', () => {
-        return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
-      }),
       http.get('*/databases/:engine/instances/:id', () => {
         return HttpResponse.json(mockDatabase);
       }),
@@ -89,15 +71,17 @@ describe('Database Backups', () => {
       })
     );
 
-    const { findAllByText } = renderWithTheme(
-      <DatabaseBackups disabled={true} />
-    );
+    const { findAllByText } = renderWithTheme(<DatabaseBackups disabled />);
+
     const buttonSpans = await findAllByText('Restore');
-    expect(buttonSpans.length).toEqual(7);
-    buttonSpans.forEach((span: HTMLSpanElement) => {
+
+    // There should be a button for each backup
+    expect(buttonSpans).toHaveLength(7);
+
+    for (const span of buttonSpans) {
       const button = span.closest('button');
       expect(button).toBeDisabled();
-    });
+    }
   });
 
   it('should enable the restore button if disabled = false', async () => {
@@ -107,9 +91,6 @@ describe('Database Backups', () => {
     const backups = databaseBackupFactory.buildList(7);
 
     server.use(
-      http.get('*/profile', () => {
-        return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
-      }),
       http.get('*/databases/:engine/instances/:id', () => {
         return HttpResponse.json(mockDatabase);
       }),
@@ -121,42 +102,37 @@ describe('Database Backups', () => {
     const { findAllByText } = renderWithTheme(
       <DatabaseBackups disabled={false} />
     );
+
     const buttonSpans = await findAllByText('Restore');
-    expect(buttonSpans.length).toEqual(7);
-    buttonSpans.forEach((span: HTMLSpanElement) => {
+
+    // There should be a button for each backup
+    expect(buttonSpans).toHaveLength(7);
+
+    for (const span of buttonSpans) {
       const button = span.closest('button');
       expect(button).toBeEnabled();
-    });
+    }
   });
+});
 
+describe('Database Backups (v2)', () => {
   it('should disable the restore button if no oldest_restore_time is returned', async () => {
     const mockDatabase = databaseFactory.build({
       oldest_restore_time: undefined,
       platform: 'rdbms-default',
     });
-    const backups = databaseBackupFactory.buildList(7);
 
     server.use(
-      http.get('*/profile', () => {
-        return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
-      }),
       http.get('*/databases/:engine/instances/:id', () => {
         return HttpResponse.json(mockDatabase);
-      }),
-      http.get('*/databases/:engine/instances/:id/backups', () => {
-        return HttpResponse.json(makeResourcePage(backups));
       })
     );
 
-    const { findAllByText } = renderWithTheme(
-      <DatabaseBackups disabled={true} />
-    );
-    const buttonSpans = await findAllByText('Restore');
-    expect(buttonSpans.length).toEqual(1);
-    buttonSpans.forEach((span: HTMLSpanElement) => {
-      const button = span.closest('button');
-      expect(button).toBeDisabled();
-    });
+    const { findByText } = renderWithTheme(<DatabaseBackups />);
+
+    const restoreButton = (await findByText('Restore')).closest('button');
+
+    expect(restoreButton).toBeDisabled();
   });
 
   it('should render a date picker when it is a default database', async () => {
@@ -170,33 +146,30 @@ describe('Database Backups', () => {
       })
     );
 
-    const rendered = renderWithTheme(<DatabaseBackups disabled={false} />);
-    expect(
-      rendered.container.getElementsByClassName('MuiDateCalendar-root')
-    ).toBeDefined();
+    const { container } = renderWithTheme(<DatabaseBackups disabled={false} />);
+
+    await waitFor(() => {
+      expect(
+        container.getElementsByClassName('MuiDateCalendar-root')
+      ).toHaveLength(1);
+    });
   });
 
   it('should render a time picker when it is a default database', async () => {
     const mockDatabase = databaseFactory.build({
       platform: 'rdbms-default',
     });
-    const backups = databaseBackupFactory.buildList(7);
 
     server.use(
-      http.get('*/profile', () => {
-        return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
-      }),
       http.get('*/databases/:engine/instances/:id', () => {
         return HttpResponse.json(mockDatabase);
-      }),
-      http.get('*/databases/:engine/instances/:id/backups', () => {
-        return HttpResponse.json(makeResourcePage(backups));
       })
     );
 
     const { findByText } = renderWithTheme(
       <DatabaseBackups disabled={false} />
     );
+
     const timePickerLabel = await findByText('Time (UTC)');
     expect(timePickerLabel).toBeInTheDocument();
   });