Revert "test: [M3-7863] - Use happy-dom instead of jsdom in unit …

…tests (#11085)" (#11128)

This reverts commit efa8580.

Co-authored-by: Banks Nussman <banks@nussman.us>

packages/manager/package.json

@@ -195,7 +195,7 @@
     "eslint-plugin-xss": "^0.1.10",
     "factory.ts": "^0.5.1",
     "glob": "^10.3.1",
-    "happy-dom": "^15.7.4",
+    "jsdom": "^24.1.1",
     "junit2json": "^3.1.4",
     "lint-staged": "^15.2.9",
     "mocha-junit-reporter": "^2.2.1",

packages/manager/src/components/Avatar/Avatar.test.tsx

@@ -31,7 +31,7 @@ describe('Avatar', () => {
     const avatarStyles = getComputedStyle(avatar);
 
     expect(getByTestId('avatar-letter')).toHaveTextContent('M');
-    expect(avatarStyles.backgroundColor).toBe('#0174bc'); // theme.color.primary.dark (#0174bc)
+    expect(avatarStyles.backgroundColor).toBe('rgb(1, 116, 188)'); // theme.color.primary.dark (#0174bc)
   });
 
   it('should render a background color from props', () => {
@@ -48,8 +48,8 @@ describe('Avatar', () => {
     const avatarTextStyles = getComputedStyle(avatarText);
 
     // Confirm background color contrasts with text color.
-    expect(avatarStyles.backgroundColor).toBe('#000000'); // black
-    expect(avatarTextStyles.color).toBe('#fff'); // white
+    expect(avatarStyles.backgroundColor).toBe('rgb(0, 0, 0)'); // black
+    expect(avatarTextStyles.color).toBe('rgb(255, 255, 255)'); // white
   });
 
   it('should render the first letter of username from props', async () => {

packages/manager/src/components/BetaChip/BetaChip.test.tsx

@@ -17,7 +17,7 @@ describe('BetaChip', () => {
     const { getByTestId } = renderWithTheme(<BetaChip color="primary" />);
     const betaChip = getByTestId('betaChip');
     expect(betaChip).toBeInTheDocument();
-    expect(betaChip).toHaveStyle('background-color: #108ad6');
+    expect(betaChip).toHaveStyle('background-color: rgb(16, 138, 214)');
   });
 
   it('triggers an onClick callback', () => {

packages/manager/src/components/DescriptionList/DescriptionList.test.tsx

@@ -32,7 +32,7 @@ describe('Description List', () => {
   it('has it title bolded', () => {
     const { getByText } = renderWithTheme(<DescriptionList items={items} />);
     const title = getByText('Random title');
-    expect(title).toHaveStyle('font-family: LatoWebBold, sans-serif');
+    expect(title).toHaveStyle('font-family: "LatoWebBold",sans-serif');
   });
 
   it('renders a column by default', () => {

packages/manager/src/components/HighlightedMarkdown/__snapshots__/HighlightedMarkdown.test.tsx.snap

@@ -4,52 +4,52 @@ exports[`HighlightedMarkdown component > should highlight text consistently 1`]
 <DocumentFragment>
   <p
     class="MuiTypography-root MuiTypography-body1 formatted-text undefined css-ma9s0e-MuiTypography-root"
-  >
-    <h1>
-      Some markdown
-    </h1>
-    
+  />
+  <h1>
+    Some markdown
+  </h1>
+  
 
-    <pre>
-      <code
-        class="hljs javascript"
+  <pre>
+    <code
+      class="hljs javascript"
+    >
+      <span
+        class="hljs-keyword"
+      >
+        const
+      </span>
+       x = 
+      <span
+        class="hljs-function"
       >
         <span
           class="hljs-keyword"
         >
-          const
-        </span>
-         x = 
-        <span
-          class="hljs-function"
-        >
-          <span
-            class="hljs-keyword"
-          >
-            function
-          </span>
-          (
-          <span
-            class="hljs-params"
-          />
-          ) 
-        </span>
-        { 
-        <span
-          class="hljs-keyword"
-        >
-          return
+          function
         </span>
-         
+        (
         <span
-          class="hljs-literal"
-        >
-          true
-        </span>
-        ; }
+          class="hljs-params"
+        />
+        ) 
+      </span>
+      { 
+      <span
+        class="hljs-keyword"
+      >
+        return
+      </span>
+       
+      <span
+        class="hljs-literal"
+      >
+        true
+      </span>
+      ; }
 
-      </code>
-    </pre>
-  </p>
+    </code>
+  </pre>
+  <p />
 </DocumentFragment>
 `;

packages/manager/src/components/Notice/Notice.test.tsx

@@ -11,8 +11,8 @@ describe('Notice Component', () => {
     const notice = container.firstChild;
 
     expect(notice).toHaveStyle('margin-bottom: 24px');
-    expect(notice).toHaveStyle('margin-left: 0px');
-    expect(notice).toHaveStyle('margin-top: 0px');
+    expect(notice).toHaveStyle('margin-left: 0');
+    expect(notice).toHaveStyle('margin-top: 0');
   });
 
   it('renders with text', () => {

packages/manager/src/components/Tabs/Tab.test.tsx

@@ -20,7 +20,7 @@ describe('Tab Component', () => {
 
     expect(tabElement).toHaveStyle(`
       display: inline-flex;
-      color: #0174bc;
+      color: rgb(0, 156, 222);
     `);
   });
 

packages/manager/src/components/TextTooltip/TextTooltip.test.tsx

@@ -56,7 +56,7 @@ describe('TextTooltip', () => {
 
     const displayText = getByText(props.displayText);
 
-    expect(displayText).toHaveStyle('color: #0174bc');
+    expect(displayText).toHaveStyle('color: rgb(0, 156, 222)');
     expect(displayText).toHaveStyle('font-size: 18px');
   });
 

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx

@@ -24,9 +24,7 @@ describe('Database Create', () => {
     const { getAllByTestId, getAllByText } = renderWithTheme(
       <DatabaseCreate />
     );
-    await waitForElementToBeRemoved(getAllByTestId(loadingTestId), {
-      timeout: 10_000,
-    });
+    await waitForElementToBeRemoved(getAllByTestId(loadingTestId));
 
     getAllByText('Cluster Label');
     getAllByText('Database Engine');

packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx

@@ -1,4 +1,4 @@
-import { screen, waitFor, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import { fireEvent } from '@testing-library/react';
 import { waitForElementToBeRemoved } from '@testing-library/react';
 import { DateTime } from 'luxon';
@@ -71,7 +71,6 @@ describe('Database Table Row', () => {
 
 describe('Database Table', () => {
   it('should render database landing table with items', async () => {
-    const database = databaseInstanceFactory.build({ status: 'active' });
     const mockAccount = accountFactory.build({
       capabilities: [managedDBBetaCapability],
     });
@@ -82,25 +81,32 @@ describe('Database Table', () => {
     );
     server.use(
       http.get(databaseInstancesEndpoint, () => {
-        return HttpResponse.json(makeResourcePage([database]));
+        const databases = databaseInstanceFactory.buildList(1, {
+          status: 'active',
+        });
+        return HttpResponse.json(makeResourcePage(databases));
       })
     );
 
-    const { getByText } = renderWithTheme(<DatabaseLanding />);
+    const { getAllByText, getByTestId, queryAllByText } = renderWithTheme(
+      <DatabaseLanding />
+    );
 
-    // wait for API data to load
-    await waitFor(() => expect(getByText(database.label)).toBeVisible(), {
-      timeout: 10_000,
-    });
-    expect(getByText('Active')).toBeVisible();
+    // Loading state should render
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
     // Static text and table column headers
-    expect(getByText('Cluster Label')).toBeVisible();
-    expect(getByText('Status')).toBeVisible();
-    expect(getByText('Configuration')).toBeVisible();
-    expect(getByText('Engine')).toBeVisible();
-    expect(getByText('Region')).toBeVisible();
-    expect(getByText('Created')).toBeVisible();
+    getAllByText('Cluster Label');
+    getAllByText('Status');
+    getAllByText('Configuration');
+    getAllByText('Engine');
+    getAllByText('Region');
+    getAllByText('Created');
+
+    // Check to see if the mocked API data rendered in the table
+    queryAllByText('Active');
   });
 
   it('should render database landing with empty state', async () => {

packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx

@@ -1,4 +1,4 @@
-import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
 import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
@@ -42,11 +42,11 @@ describe('HAControlPlane', () => {
     await findByText(/\$60\.00/);
   });
 
-  it('should call the handleChange function on change', async () => {
+  it('should call the handleChange function on change', () => {
     const { getByTestId } = renderWithTheme(<HAControlPlane {...props} />);
     const haRadioButton = getByTestId('ha-radio-button-yes');
 
-    await userEvent.click(haRadioButton);
+    fireEvent.click(haRadioButton);
     expect(props.setHighAvailability).toHaveBeenCalled();
   });
 });

packages/manager/src/features/Linodes/CloneLanding/Disks.test.tsx

@@ -33,7 +33,7 @@ describe('Disks', () => {
     const { getByTestId } = render(wrapWithTheme(<Disks {...props} />));
     disks.forEach((eachDisk) => {
       const checkbox = getByTestId(`checkbox-${eachDisk.id}`).parentNode;
-      fireEvent.click(checkbox!);
+      fireEvent.click(checkbox as any);
       expect(mockHandleSelect).toHaveBeenCalledWith(eachDisk.id);
     });
   });
@@ -47,10 +47,10 @@ describe('Disks', () => {
   });
 
   it('checks the disk if the associated config is selected', () => {
-    const { getByRole } = render(
+    const { getByTestId } = render(
       wrapWithTheme(<Disks {...props} selectedConfigIds={[9859511]} />)
     );
-    const checkbox = getByRole('checkbox', { name: '512 MB Swap Image' });
-    expect(checkbox).toBeChecked();
+    const checkbox: any = getByTestId('checkbox-19040624').firstElementChild;
+    expect(checkbox).toHaveAttribute('checked');
   });
 });

packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.test.tsx

@@ -69,7 +69,7 @@ describe('VPC', () => {
 
   it('renders VPC IPv4, NAT checkboxes, and IP Ranges inputs when a subnet is selected', async () => {
     const {
-      getByRole,
+      getByLabelText,
       getByText,
     } = renderWithThemeAndHookFormContext<CreateLinodeRequest>({
       component: <VPC />,
@@ -82,23 +82,21 @@ describe('VPC', () => {
     });
 
     expect(
-      getByRole('checkbox', {
-        name: 'Auto-assign a VPC IPv4 address for this Linode in the VPC',
-      })
+      getByLabelText(
+        'Auto-assign a VPC IPv4 address for this Linode in the VPC'
+      )
     ).toBeInTheDocument();
 
     expect(
-      getByRole('checkbox', {
-        name: 'Assign a public IPv4 address for this Linode',
-      })
+      getByLabelText('Assign a public IPv4 address for this Linode')
     ).toBeInTheDocument();
 
     expect(getByText('Assign additional IPv4 ranges')).toBeInTheDocument();
   });
 
   it('should check the VPC IPv4 if a "ipv4.vpc" is null/undefined', async () => {
     const {
-      getByRole,
+      getByLabelText,
     } = renderWithThemeAndHookFormContext<CreateLinodeRequest>({
       component: <VPC />,
       useFormOptions: {
@@ -114,16 +112,15 @@ describe('VPC', () => {
     });
 
     expect(
-      getByRole('checkbox', {
-        name: 'Auto-assign a VPC IPv4 address for this Linode in the VPC',
-      })
+      getByLabelText(
+        'Auto-assign a VPC IPv4 address for this Linode in the VPC'
+      )
     ).toBeChecked();
   });
 
   it('should uncheck the VPC IPv4 if a "ipv4.vpc" is a string value and show the VPC IP TextField', async () => {
     const {
       getByLabelText,
-      getByRole,
     } = renderWithThemeAndHookFormContext<CreateLinodeRequest>({
       component: <VPC />,
       useFormOptions: {
@@ -135,9 +132,9 @@ describe('VPC', () => {
     });
 
     expect(
-      getByRole('checkbox', {
-        name: 'Auto-assign a VPC IPv4 address for this Linode in the VPC',
-      })
+      getByLabelText(
+        'Auto-assign a VPC IPv4 address for this Linode in the VPC'
+      )
     ).not.toBeChecked();
 
     expect(getByLabelText('VPC IPv4 (required)')).toBeVisible();

packages/manager/src/features/Linodes/LinodeCreate/index.test.tsx

@@ -23,10 +23,10 @@ describe('Linode Create', () => {
   });
 
   it('Should not render the region select when creating from a backup', () => {
-    const { queryByLabelText } = renderWithTheme(<LinodeCreate />, {
+    const { queryByText } = renderWithTheme(<LinodeCreate />, {
       MemoryRouter: { initialEntries: ['/linodes/create?type=Backups'] },
     });
 
-    expect(queryByLabelText('Region')).toBeNull();
+    expect(queryByText('Region')).toBeNull();
   });
 });