update unit tests

packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.test.tsx

@@ -1,36 +1,49 @@
-import { fireEvent } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import { createMemoryHistory } from 'history';
 import React from 'react';
 import { Router } from 'react-router-dom';
 
+import { accountFactory } from 'src/factories';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { CreateMenu } from './CreateMenu';
 
 describe('CreateMenu', () => {
-  test('renders the Create button', () => {
+  it('renders the Create button', () => {
     const { getByText } = renderWithTheme(<CreateMenu />);
     const createButton = getByText('Create');
     expect(createButton).toBeInTheDocument();
   });
 
-  test('opens the menu on button click', () => {
+  it('opens the menu on button click', async () => {
     const { getByRole, getByText } = renderWithTheme(<CreateMenu />);
     const createButton = getByText('Create');
-    fireEvent.click(createButton);
+    await userEvent.click(createButton);
     const menu = getByRole('menu');
     expect(menu).toBeInTheDocument();
   });
 
-  test('renders Linode menu item', () => {
+  it('renders product family headings', async () => {
+    const { getAllByRole, getByText } = renderWithTheme(<CreateMenu />);
+    const createButton = getByText('Create');
+    await userEvent.click(createButton);
+    const headings = getAllByRole('heading', { level: 3 });
+    const expectedHeadings = ['Compute', 'Networking', 'Storage', 'Databases'];
+    headings.forEach((heading, i) => {
+      expect(heading).toHaveTextContent(expectedHeadings[i]);
+    });
+  });
+
+  it('renders Linode menu item', async () => {
     const { getByText } = renderWithTheme(<CreateMenu />);
     const createButton = getByText('Create');
-    fireEvent.click(createButton);
+    await userEvent.click(createButton);
     const menuItem = getByText('Linode');
     expect(menuItem).toBeInTheDocument();
   });
 
-  test('navigates to Linode create page on Linode menu item click', () => {
+  it('navigates to Linode create page on Linode menu item click', async () => {
     // Create a mock history object
     const history = createMemoryHistory();
 
@@ -42,21 +55,32 @@ describe('CreateMenu', () => {
     );
 
     const createButton = getByText('Create');
-    fireEvent.click(createButton);
+    await userEvent.click(createButton);
 
     const menuItem = getByText('Linode');
-    fireEvent.click(menuItem);
+    await userEvent.click(menuItem);
 
     // Assert that the history's location has changed to the expected URL
     expect(history.location.pathname).toBe('/linodes/create');
   });
 
-  test('does not render hidden menu items', () => {
+  it('does not render hidden menu items', async () => {
+    const account = accountFactory.build({
+      capabilities: [],
+    });
+
+    server.use(
+      http.get('*/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
+
     const { getByText, queryByText } = renderWithTheme(<CreateMenu />, {
-      flags: { databases: false },
+      flags: { databases: false, dbaasV2: { beta: false, enabled: false } },
     });
+
     const createButton = getByText('Create');
-    fireEvent.click(createButton);
+    await userEvent.click(createButton);
 
     ['Database'].forEach((createMenuItem: string) => {
       const hiddenMenuItem = queryByText(createMenuItem);