test: [M3-10245] - Improve VPC unit tests

packages/manager/.changeset/pr-12429-tests-1750996385974.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Clean up VPC unit tests and mock queries over relying on server handlers ([#12429](https://github.com/linode/manager/pull/12429))

packages/manager/cypress/e2e/core/notificationsAndEvents/events-fetching.spec.ts

@@ -126,7 +126,6 @@ describe('Event fetching and polling', () => {
     // We need access to the `clock` object directly since we cannot call `cy.clock()` inside
     // a `should(() => {})` callback because Cypress commands are disallowed there.
     cy.clock(mockNow.toJSDate()).then((clock) => {
-
       // Confirm that Cloud manager polls the requests endpoint no more than
       // once every 16 seconds.
       mockGetEventsPolling([mockEvent], mockNowTimestamp).as('getEventsPoll');
@@ -196,7 +195,6 @@ describe('Event fetching and polling', () => {
     // We need access to the `clock` object directly since we cannot call `cy.clock()` inside
     // a `should(() => {})` callback because Cypress commands are disallowed there.
     cy.clock(Date.now()).then((clock) => {
-
       // Confirm that Cloud manager polls the requests endpoint no more than once
       // every 2 seconds.
       mockGetEventsPolling(mockEvents, mockNowTimestamp).as('getEventsPoll');

packages/manager/src/OAuth/oauth.test.tsx

@@ -182,7 +182,6 @@ describe('handleOAuthCallback', () => {
         params: 'state=fakenonce&code=gyuwyutfetyfew',
       })
     ).rejects.toThrowError('Request to POST /oauth/token was not ok.');
-
   });
 
   it('should throw if the /oauth/token response is not valid JSON', async () => {

packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx

@@ -18,9 +18,9 @@ describe('Subnet form content', () => {
       },
     });
 
-    getByText('Subnets');
-    getByText('Subnet Label');
-    getByText('Subnet IP Address Range');
-    getByText('Add another Subnet');
+    expect(getByText('Subnets')).toBeVisible();
+    expect(getByText('Subnet Label')).toBeVisible();
+    expect(getByText('Subnet IP Address Range')).toBeVisible();
+    expect(getByText('Add another Subnet')).toBeVisible();
   });
 });

packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx

@@ -22,8 +22,8 @@ describe('VPC Top Section form content', () => {
       },
     });
 
-    getByText('Region');
-    getByText('VPC Label');
-    getByText('Description');
+    expect(getByText('Region')).toBeVisible();
+    expect(getByText('VPC Label')).toBeVisible();
+    expect(getByText('Description')).toBeVisible();
   });
 });

packages/manager/src/features/VPCs/VPCCreate/VPCCreate.test.tsx

@@ -15,17 +15,17 @@ vi.mock('@linode/utilities');
 
 describe('VPC create page', () => {
   it('should render the vpc and subnet sections', () => {
-    const { getAllByText } = renderWithTheme(<VPCCreate />);
+    const { getByText } = renderWithTheme(<VPCCreate />);
 
-    getAllByText('Region');
-    getAllByText('VPC Label');
-    getAllByText('Region');
-    getAllByText('Description');
-    getAllByText('Subnets');
-    getAllByText('Subnet Label');
-    getAllByText('Subnet IP Address Range');
-    getAllByText('Add another Subnet');
-    getAllByText('Create VPC');
+    expect(getByText('Region')).toBeVisible();
+    expect(getByText('VPC Label')).toBeVisible();
+    expect(getByText('Region')).toBeVisible();
+    expect(getByText('Description')).toBeVisible();
+    expect(getByText('Subnets')).toBeVisible();
+    expect(getByText('Subnet Label')).toBeVisible();
+    expect(getByText('Subnet IP Address Range')).toBeVisible();
+    expect(getByText('Add another Subnet')).toBeVisible();
+    expect(getByText('Create VPC')).toBeVisible();
   });
 
   it('should add and delete subnets correctly', async () => {

packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.test.tsx

@@ -27,20 +27,21 @@ const formOptions = {
 
 describe('VPC Create Drawer', () => {
   it('should render the vpc and subnet sections', () => {
-    const { getAllByText } = renderWithThemeAndHookFormContext({
+    const { getByText, getByRole } = renderWithThemeAndHookFormContext({
       component: <VPCCreateDrawer {...props} />,
       useFormOptions: formOptions,
     });
 
-    getAllByText('VPC Label');
-    getAllByText('Region');
-    getAllByText('Description');
-    getAllByText('Subnets');
-    getAllByText('Subnet Label');
-    getAllByText('Subnet IP Address Range');
-    getAllByText('Add another Subnet');
-    getAllByText('Cancel');
-    getAllByText('Create VPC');
+    expect(getByText('Region')).toBeVisible();
+    expect(getByText('VPC Label')).toBeVisible();
+    expect(getByText('Region')).toBeVisible();
+    expect(getByText('Description')).toBeVisible();
+    expect(getByText('Subnets')).toBeVisible();
+    expect(getByText('Subnet Label')).toBeVisible();
+    expect(getByText('Subnet IP Address Range')).toBeVisible();
+    expect(getByText('Add another Subnet')).toBeVisible();
+    expect(getByRole('button', { name: 'Create VPC' })).toBeVisible();
+    expect(getByText('Cancel')).toBeVisible();
   });
 
   it('should not be able to remove the first subnet', () => {

packages/manager/src/features/VPCs/VPCDetail/SubnetActionMenu.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PointerEventsCheckLevel } from '@testing-library/user-event';
 import * as React from 'react';
 
 import { subnetFactory } from 'src/factories';
@@ -23,92 +24,96 @@ const props = {
 };
 
 describe('SubnetActionMenu', () => {
-  it('should render the subnet action menu', () => {
-    const screen = renderWithTheme(<SubnetActionMenu {...props} />);
-    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
-    fireEvent.click(actionMenu);
-    screen.getByText('Assign Linodes');
-    screen.getByText('Unassign Linodes');
-    screen.getByText('Edit');
-    screen.getByText('Delete');
+  it('should render the subnet action menu', async () => {
+    const view = renderWithTheme(<SubnetActionMenu {...props} />);
+    const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`);
+    await userEvent.click(actionMenu);
+    view.getByText('Assign Linodes');
+    view.getByText('Unassign Linodes');
+    view.getByText('Edit');
+    view.getByText('Delete');
   });
 
-  it('should not allow the delete button to be clicked', () => {
-    const screen = renderWithTheme(<SubnetActionMenu {...props} />);
-    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
-    fireEvent.click(actionMenu);
+  it('should not allow the delete button to be clicked', async () => {
+    const view = renderWithTheme(<SubnetActionMenu {...props} />);
+    const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`);
+    await userEvent.click(actionMenu);
 
-    const deleteButton = screen.getByText('Delete');
-    fireEvent.click(deleteButton);
+    const deleteButton = view.getByRole('menuitem', { name: 'Delete' });
+    await userEvent.click(deleteButton, {
+      pointerEventsCheck: PointerEventsCheckLevel.Never,
+    });
     expect(props.handleDelete).not.toHaveBeenCalled();
-    const tooltipText = screen.getByLabelText(
+    const tooltipText = view.getByLabelText(
       'Linodes assigned to a subnet must be unassigned before the subnet can be deleted.'
     );
     expect(tooltipText).toBeInTheDocument();
   });
 
-  it('should not allow the delete button to be clicked when isNodebalancerVPCEnabled is true', () => {
-    const screen = renderWithTheme(<SubnetActionMenu {...props} />, {
+  it('should not allow the delete button to be clicked when isNodebalancerVPCEnabled is true', async () => {
+    const view = renderWithTheme(<SubnetActionMenu {...props} />, {
       flags: { nodebalancerVpc: true },
     });
 
-    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
-    fireEvent.click(actionMenu);
+    const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`);
+    await userEvent.click(actionMenu);
 
-    const deleteButton = screen.getByText('Delete');
-    fireEvent.click(deleteButton);
+    const deleteButton = view.getByText('Delete');
+    await userEvent.click(deleteButton, {
+      pointerEventsCheck: PointerEventsCheckLevel.Never,
+    });
     expect(props.handleDelete).not.toHaveBeenCalled();
-    const tooltipText = screen.getByLabelText(
+    const tooltipText = view.getByLabelText(
       'Resources assigned to a subnet must be unassigned before the subnet can be deleted.'
     );
     expect(tooltipText).toBeInTheDocument();
   });
 
-  it('should allow the delete button to be clicked', () => {
-    const screen = renderWithTheme(
+  it('should allow the delete button to be clicked', async () => {
+    const view = renderWithTheme(
       <SubnetActionMenu {...props} numLinodes={0} numNodebalancers={0} />
     );
-    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
-    fireEvent.click(actionMenu);
+    const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`);
+    await userEvent.click(actionMenu);
 
-    const deleteButton = screen.getByText('Delete');
-    fireEvent.click(deleteButton);
+    const deleteButton = view.getByText('Delete');
+    await userEvent.click(deleteButton);
     expect(props.handleDelete).toHaveBeenCalled();
-    const tooltipText = screen.queryByLabelText(
+    const tooltipText = view.queryByLabelText(
       'Linodes assigned to a subnet must be unassigned before the subnet can be deleted.'
     );
     expect(tooltipText).not.toBeInTheDocument();
   });
 
-  it('should allow the edit button to be clicked', () => {
-    const screen = renderWithTheme(
+  it('should allow the edit button to be clicked', async () => {
+    const view = renderWithTheme(
       <SubnetActionMenu {...props} numLinodes={0} numNodebalancers={0} />
     );
-    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
-    fireEvent.click(actionMenu);
+    const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`);
+    await userEvent.click(actionMenu);
 
-    const editButton = screen.getByText('Edit');
-    fireEvent.click(editButton);
+    const editButton = view.getByText('Edit');
+    await userEvent.click(editButton);
     expect(props.handleEdit).toHaveBeenCalled();
   });
 
-  it('should allow the Assign Linodes button to be clicked', () => {
-    const screen = renderWithTheme(<SubnetActionMenu {...props} />);
-    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
-    fireEvent.click(actionMenu);
+  it('should allow the Assign Linodes button to be clicked', async () => {
+    const view = renderWithTheme(<SubnetActionMenu {...props} />);
+    const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`);
+    await userEvent.click(actionMenu);
 
-    const assignButton = screen.getByText('Assign Linodes');
-    fireEvent.click(assignButton);
+    const assignButton = view.getByText('Assign Linodes');
+    await userEvent.click(assignButton);
     expect(props.handleAssignLinodes).toHaveBeenCalled();
   });
 
-  it('should disable action buttons if isVPCLKEEnterpriseCluster is true', () => {
+  it('should disable action buttons if isVPCLKEEnterpriseCluster is true', async () => {
     const updatedProps = { ...props, isVPCLKEEnterpriseCluster: true };
-    const screen = renderWithTheme(<SubnetActionMenu {...updatedProps} />);
-    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
-    fireEvent.click(actionMenu);
+    const view = renderWithTheme(<SubnetActionMenu {...updatedProps} />);
+    const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`);
+    await userEvent.click(actionMenu);
 
-    const actionButtons = screen.getAllByRole('menuitem');
+    const actionButtons = view.getAllByRole('menuitem');
     actionButtons.forEach((button) =>
       expect(button).toHaveAttribute('aria-disabled', 'true')
     );

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx

@@ -1,7 +1,8 @@
 import { linodeFactory } from '@linode/utilities';
-import { fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
+import { firewallSettingsFactory } from 'src/factories';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { http, HttpResponse, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
@@ -12,6 +13,18 @@ import type { Subnet } from '@linode/api-v4';
 
 beforeAll(() => mockMatchMedia());
 
+const queryMocks = vi.hoisted(() => ({
+  useFirewallSettingsQuery: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useFirewallSettingsQuery: queryMocks.useFirewallSettingsQuery,
+  };
+});
+
 const props = {
   isFetching: false,
   onClose: vi.fn(),
@@ -20,6 +33,10 @@ const props = {
     id: 1,
     ipv4: '10.0.0.0/24',
     label: 'subnet-1',
+    linodes: [],
+    nodebalancers: [],
+    created: '',
+    updated: '',
   } as Subnet,
   vpcId: 1,
   vpcRegion: 'us-east',
@@ -38,7 +55,7 @@ describe('Subnet Assign Linodes Drawer', () => {
   );
 
   it('should render a subnet assign linodes drawer', () => {
-    const { getByTestId, getByText, queryAllByText } = renderWithTheme(
+    const { getByTestId, getByText } = renderWithTheme(
       <SubnetAssignLinodesDrawer {...props} />
     );
 
@@ -52,7 +69,7 @@ describe('Subnet Assign Linodes Drawer', () => {
       `Select the Linodes you would like to assign to this subnet. Only Linodes in this VPC's region are displayed.`
     );
     expect(helperText).toBeVisible();
-    const linodeSelect = queryAllByText('Linode')[0];
+    const linodeSelect = getByTestId('add-linode-autocomplete');
     expect(linodeSelect).toBeVisible();
 
     const assignButton = getByText('Assign Linode');
@@ -65,33 +82,18 @@ describe('Subnet Assign Linodes Drawer', () => {
     expect(doneButton).toBeVisible();
   });
 
-  it.skip('should show the IPv4 textbox when the checkmark is clicked', async () => {
-    const { findByText, getByLabelText } = renderWithTheme(
-      <SubnetAssignLinodesDrawer {...props} />
-    );
-
-    const selectField = getByLabelText('Linode');
-    fireEvent.change(selectField, { target: { value: 'this-linode' } });
-
-    const checkbox = await findByText(
-      'Auto-assign a VPC IPv4 address for this Linode'
-    );
-
-    await waitFor(() => expect(checkbox).toBeVisible());
-    fireEvent.click(checkbox);
-
-    const ipv4Textbox = await findByText('VPC IPv4');
-    await waitFor(() => expect(ipv4Textbox).toBeVisible());
-  });
+  it('should close the drawer', async () => {
+    queryMocks.useFirewallSettingsQuery.mockReturnValue({
+      data: firewallSettingsFactory.build(),
+    });
 
-  it('should close the drawer', () => {
     const { getByText } = renderWithTheme(
       <SubnetAssignLinodesDrawer {...props} />
     );
 
     const doneButton = getByText('Done');
     expect(doneButton).toBeVisible();
-    fireEvent.click(doneButton);
+    await userEvent.click(doneButton);
     expect(props.onClose).toHaveBeenCalled();
   });
 });