test: [M3-8591, M3-8594] - Add unit tests for AccountActivationLanding component, remove AddNewLink component

packages/manager/.changeset/pr-10966-removed-1726765827523.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+`AddNewLink` component, replacing instances with `Button` ([#10966](https://github.com/linode/manager/pull/10966))

packages/manager/.changeset/pr-10966-tests-1726678346834.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit tests for `AccountActivationLanding` component ([#10966](https://github.com/linode/manager/pull/10966))

packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx

@@ -0,0 +1,38 @@
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import AccountActivationLanding from './AccountActivationLanding';
+
+const openSupportTicket = 'Open a Support Ticket';
+
+describe('AccountActivationLanding', () => {
+  it('renders the AccountActivationLanding component', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <AccountActivationLanding />
+    );
+
+    expect(
+      getByText('Your account is currently being reviewed.')
+    ).toBeVisible();
+    expect(
+      getByText(
+        /Thanks for signing up! You’ll receive an email from us once our review is complete, so hang tight. If you have questions during this process/
+      )
+    ).toBeVisible();
+    expect(getByText(/please open a Support ticket/)).toBeVisible();
+    expect(queryByText(openSupportTicket)).not.toBeInTheDocument();
+  });
+
+  it('toggles open the Support Ticket dialog', async () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <AccountActivationLanding />
+    );
+
+    expect(queryByText(openSupportTicket)).not.toBeInTheDocument();
+    const supportButtonLink = getByText(/please open a Support ticket/);
+    await userEvent.click(supportButtonLink);
+    expect(getByText(openSupportTicket)).toBeVisible();
+  });
+});

packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx

@@ -1,29 +1,16 @@
 import Warning from '@mui/icons-material/CheckCircle';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Typography } from 'src/components/Typography';
-import { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';
 import { SupportTicketDialog } from 'src/features/Support/SupportTickets/SupportTicketDialog';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  cta: {
-    ...theme.applyLinkStyles,
-  },
-  errorHeading: {
-    marginBottom: theme.spacing(2),
-  },
-  subheading: {
-    margin: '0 auto',
-    maxWidth: '60%',
-  },
-}));
+import { StyledLinkButton } from '../Button/StyledLinkButton';
+
+import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';
 
 const AccountActivationLanding = () => {
-  const { classes } = useStyles();
   const history = useHistory();
 
   const [supportDrawerIsOpen, toggleSupportDrawer] = React.useState<boolean>(
@@ -46,19 +33,24 @@ const AccountActivationLanding = () => {
     <ErrorState
       errorText={
         <React.Fragment>
-          <Typography className={classes.errorHeading} variant="h2">
+          <Typography
+            sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+            variant="h2"
+          >
             Your account is currently being reviewed.
           </Typography>
-          <Typography className={classes.subheading}>
+          <Typography
+            sx={{
+              margin: '0 auto',
+              maxWidth: '60%',
+            }}
+          >
             Thanks for signing up! You&rsquo;ll receive an email from us once
             our review is complete, so hang tight. If you have questions during
             this process{' '}
-            <button
-              className={classes.cta}
-              onClick={() => toggleSupportDrawer(true)}
-            >
+            <StyledLinkButton onClick={() => toggleSupportDrawer(true)}>
               please open a Support ticket
-            </button>
+            </StyledLinkButton>
             .
           </Typography>
           <SupportTicketDialog

packages/manager/src/components/Button/Button.tsx

@@ -1,7 +1,6 @@
 import HelpOutline from '@mui/icons-material/HelpOutline';
-import _Button, { ButtonProps as _ButtonProps } from '@mui/material/Button';
-import { Theme, styled } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
+import _Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import Reload from 'src/assets/icons/reload.svg';
@@ -10,6 +9,10 @@ import { Tooltip } from 'src/components/Tooltip';
 import { rotate360 } from '../../styles/keyframes';
 import { omittedProps } from '../../utilities/omittedProps';
 
+import type { ButtonProps as _ButtonProps } from '@mui/material/Button';
+import type { Theme } from '@mui/material/styles';
+import type { SxProps } from '@mui/system';
+
 export type ButtonType = 'outlined' | 'primary' | 'secondary';
 
 export interface ButtonProps extends _ButtonProps {

packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx

@@ -33,19 +33,21 @@ describe('Access Controls', () => {
 
   it('Should disable "Manage Access Control" button if disabled = true', () => {
     const database = databaseFactory.build();
-    const { getByTitle } = renderWithTheme(
+    const { getByRole } = renderWithTheme(
       <AccessControls database={database} disabled={true} />
     );
-    const manageAccessControlBtn = getByTitle('Manage Access Controls');
-    expect(manageAccessControlBtn).toBeDisabled();
+    expect(
+      getByRole('button', { name: 'Manage Access Controls' })
+    ).toBeDisabled();
   });
 
   it('Should enable "Manage Access Control" button if disabled = false', () => {
     const database = databaseFactory.build();
-    const { getByTitle } = renderWithTheme(
+    const { getByRole } = renderWithTheme(
       <AccessControls database={database} disabled={false} />
     );
-    const manageAccessControlBtn = getByTitle('Manage Access Controls');
-    expect(manageAccessControlBtn).toBeEnabled();
+    expect(
+      getByRole('button', { name: 'Manage Access Controls' })
+    ).toBeEnabled();
   });
 });

packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { Notice } from 'src/components/Notice/Notice';
@@ -197,12 +197,14 @@ export const AccessControls = (props: Props) => {
           </div>
           <div className={classes.sectionText}>{description ?? null}</div>
         </div>
-        <AddNewLink
+        <Button
+          buttonType="primary"
           className={classes.addAccessControlBtn}
           disabled={disabled}
-          label="Manage Access Controls"
           onClick={() => setAddAccessControlDrawerOpen(true)}
-        />
+        >
+          Manage Access Controls
+        </Button>
       </div>
       {ipTable(allowList)}
       <ConfirmationDialog

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx

@@ -25,30 +25,28 @@ describe('DatabaseSettings Component', () => {
   });
 
   it('Should disable buttons if disabled = true', () => {
-    const { getByTitle } = renderWithTheme(
+    const { getByRole, getByTitle } = renderWithTheme(
       <DatabaseSettings database={database} disabled={true} />
     );
-    const disabledButtons = [
-      'Manage Access Controls',
-      'Reset Root Password',
-      'Save Changes',
-    ];
+    const disabledButtons = ['Reset Root Password', 'Save Changes'];
 
     for (const buttonTitle of disabledButtons) {
       const button = getByTitle(buttonTitle);
       expect(button).toBeDisabled();
     }
+    expect(
+      getByRole('button', { name: 'Manage Access Controls' })
+    ).toBeDisabled();
   });
 
   it('Should enable buttons if disabled = false', () => {
-    const { getByTitle } = renderWithTheme(
+    const { getByRole, getByTitle } = renderWithTheme(
       <DatabaseSettings database={database} />
     );
-    const enabledButtons = ['Manage Access Controls', 'Reset Root Password'];
 
-    for (const buttonTitle of enabledButtons) {
-      const button = getByTitle(buttonTitle);
-      expect(button).toBeEnabled();
-    }
+    expect(getByTitle('Reset Root Password')).toBeEnabled();
+    expect(
+      getByRole('button', { name: 'Manage Access Controls' })
+    ).toBeEnabled();
   });
 });

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx

@@ -1,9 +1,8 @@
-import { Database } from '@linode/api-v4/lib/databases/types';
 import * as React from 'react';
 
 import { Divider } from 'src/components/Divider';
-import { Typography } from 'src/components/Typography';
 import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile/profile';
 
 import AccessControls from '../AccessControls';
@@ -12,6 +11,8 @@ import DatabaseSettingsMenuItem from './DatabaseSettingsMenuItem';
 import DatabaseSettingsResetPasswordDialog from './DatabaseSettingsResetPasswordDialog';
 import MaintenanceWindow from './MaintenanceWindow';
 
+import type { Database } from '@linode/api-v4/lib/databases/types';
+
 interface Props {
   database: Database;
   disabled?: boolean;

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx

@@ -2,8 +2,8 @@ import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import AddNewLink from 'src/components/AddNewLink';
 import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import OrderBy from 'src/components/OrderBy';
 import Paginate from 'src/components/Paginate';
@@ -97,11 +97,9 @@ const LinodeConfigs = () => {
           }}
           label={'Configuration Profiles'}
         />
-        <AddNewLink
-          disabled={isReadOnly}
-          label="Add Configuration"
-          onClick={onCreate}
-        />
+        <Button buttonType="primary" disabled={isReadOnly} onClick={onCreate}>
+          Add Configuration
+        </Button>
       </Box>
       <OrderBy data={configs ?? []} order={'asc'} orderBy={'label'}>
         {({ data: orderedData, handleOrderChange, order, orderBy }) => (

packages/manager/src/features/Managed/Contacts/Contacts.tsx

@@ -1,8 +1,7 @@
-import { ManagedContact } from '@linode/api-v4/lib/managed';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
 import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { Hidden } from 'src/components/Hidden';
@@ -23,14 +22,16 @@ import {
 } from 'src/queries/managed/managed';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-import ContactDrawer from './ContactsDrawer';
-import ContactTableContact from './ContactsTableContent';
-import { ManagedContactGroup, Mode } from './common';
 import {
-  StyledWrapperGrid,
-  StyledTypography,
   StyledHeaderGrid,
+  StyledTypography,
+  StyledWrapperGrid,
 } from './Contacts.styles';
+import ContactDrawer from './ContactsDrawer';
+import ContactTableContact from './ContactsTableContent';
+
+import type { ManagedContactGroup, Mode } from './common';
+import type { ManagedContact } from '@linode/api-v4/lib/managed';
 
 const Contacts = () => {
   const { enqueueSnackbar } = useSnackbar();
@@ -99,13 +100,15 @@ const Contacts = () => {
         spacing={2}
       >
         <StyledWrapperGrid>
-          <AddNewLink
+          <Button
             onClick={() => {
               setContactDrawerMode('create');
               contactDrawer.open();
             }}
-            label="Add Contact"
-          />
+            buttonType="primary"
+          >
+            Add Contact
+          </Button>
         </StyledWrapperGrid>
       </StyledHeaderGrid>
       <OrderBy data={contacts} order="asc" orderBy="name">