From 481408a80c0e9094e83aad9183f5eab458f784d9 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Sun, 28 Jan 2024 18:02:02 -0500 Subject: [PATCH] Tests --- .../PlacementGroupsCreateDrawer.test.tsx | 70 +++++++++++++++++++ .../PlacementGroupsCreateDrawer.tsx | 12 ++-- .../PlacementGroupsDrawerContent.test.tsx | 43 ++++++++++++ ...t.tsx => PlacementGroupsDrawerContent.tsx} | 2 +- .../PlacementGroupsRenameDrawer.test.tsx | 33 +++++++++ .../PlacementGroupsRenameDrawer.tsx | 18 ++--- .../src/features/PlacementGroups/types.ts | 9 ++- 7 files changed, 169 insertions(+), 18 deletions(-) create mode 100644 packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.test.tsx create mode 100644 packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.test.tsx rename packages/manager/src/features/PlacementGroups/{PlacementGroupDrawerContent.tsx => PlacementGroupsDrawerContent.tsx} (99%) create mode 100644 packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.test.tsx diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.test.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.test.tsx new file mode 100644 index 00000000000..6e009f794ee --- /dev/null +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.test.tsx @@ -0,0 +1,70 @@ +import { fireEvent } from '@testing-library/react'; +import * as React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { PlacementGroupsCreateDrawer } from './PlacementGroupsCreateDrawer'; + +describe('PlacementGroupsCreateDrawer', () => { + it('should render have its fields enabled', () => { + const { getByLabelText } = renderWithTheme( + + ); + + expect(getByLabelText('Label')).toBeEnabled(); + expect(getByLabelText('Region')).toBeEnabled(); + expect(getByLabelText('Affinity Type')).toBeEnabled(); + }); + + it('Affinity Type select should have the correct options', async () => { + const { getByPlaceholderText, getByText } = renderWithTheme( + + ); + + const inputElement = getByPlaceholderText('Select an Affinity Type'); + fireEvent.focus(inputElement); + + fireEvent.change(inputElement, { target: { value: 'Affinity' } }); + expect(getByText('Affinity')).toBeInTheDocument(); + + fireEvent.change(inputElement, { target: { value: 'Anti-affinity' } }); + expect(getByText('Anti-affinity')).toBeInTheDocument(); + }); + + it('should disable the submit button when the number of placement groups created is >= to the max', () => { + const { getByTestId } = renderWithTheme( + + ); + + expect(getByTestId('submit')).toHaveAttribute('aria-disabled', 'true'); + }); + + it('should populate the region select with the selected region prop', () => { + const { getByLabelText } = renderWithTheme( + + ); + + expect(getByLabelText('Region')).toHaveValue('Newark, NJ (us-east)'); + }); +}); diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx index 92b42665f79..ed4a9ed58ca 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx @@ -14,11 +14,13 @@ import { handleGeneralErrors, } from 'src/utilities/formikErrorUtils'; -import { PlacementGroupsDrawerContent } from './PlacementGroupDrawerContent'; +import { PlacementGroupsDrawerContent } from './PlacementGroupsDrawerContent'; import { MAX_NUMBER_OF_PLACEMENT_GROUPS } from './constants'; -import type { PlacementGroupsCreateDrawerProps } from './types'; -import type { CreatePlacementGroupPayload } from '@linode/api-v4'; +import type { + PlacementGroupDrawerFormikProps, + PlacementGroupsCreateDrawerProps, +} from './types'; export const PlacementGroupsCreateDrawer = ( props: PlacementGroupsCreateDrawerProps @@ -50,12 +52,12 @@ export const PlacementGroupsCreateDrawer = ( } = useFormik({ enableReinitialize: true, initialValues: { - affinity_type: '' as CreatePlacementGroupPayload['affinity_type'], + affinity_type: '' as PlacementGroupDrawerFormikProps['affinity_type'], label: '', region: selectedRegionId ?? '', }, onSubmit( - values: CreatePlacementGroupPayload, + values: PlacementGroupDrawerFormikProps, { setErrors, setStatus, setSubmitting } ) { setIsFormDirty(false); diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.test.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.test.tsx new file mode 100644 index 00000000000..16813470b98 --- /dev/null +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.test.tsx @@ -0,0 +1,43 @@ +import { FormikProps } from 'formik'; +import * as React from 'react'; + +import { placementGroupFactory } from 'src/factories'; +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { PlacementGroupsDrawerContent } from './PlacementGroupsDrawerContent'; + +import type { PlacementGroupDrawerFormikProps } from './types'; + +describe('PlacementGroupsDrawerContent', () => { + it('should render the right form elements', () => { + const { getByLabelText, getByRole } = renderWithTheme( + + } + mode="create" + onClose={vi.fn()} + open={true} + regions={[]} + selectedPlacementGroup={placementGroupFactory.build()} + setIsFormDirty={vi.fn()} + /> + ); + + expect(getByLabelText('Label')).toBeInTheDocument(); + expect(getByLabelText('Region')).toBeInTheDocument(); + expect(getByLabelText('Affinity Type')).toBeInTheDocument(); + expect(getByRole('button', { name: 'Cancel' })).toBeInTheDocument(); + expect( + getByRole('button', { name: 'Create Placement Group' }) + ).toBeInTheDocument(); + }); +}); diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupDrawerContent.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.tsx similarity index 99% rename from packages/manager/src/features/PlacementGroups/PlacementGroupDrawerContent.tsx rename to packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.tsx index 966c4a28a24..6be0253b378 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupDrawerContent.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.tsx @@ -68,7 +68,7 @@ export const PlacementGroupsDrawerContent = (props: Props) => { if (isSubmitting) { setIsFormDirty(true); } - }, [isSubmitting]); + }, [isSubmitting, setIsFormDirty]); const generalError = status?.generalError; const isRenameDrawer = mode === 'rename'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.test.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.test.tsx new file mode 100644 index 00000000000..370fb906e02 --- /dev/null +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.test.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import { placementGroupFactory } from 'src/factories/placementGroups'; +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { PlacementGroupsRenameDrawer } from './PlacementGroupsRenameDrawer'; + +describe('PlacementGroupsCreateDrawer', () => { + it('should render have the proper fields populated with PG values, and disabled', () => { + const { getByLabelText } = renderWithTheme( + + ); + + expect(getByLabelText('Label')).toBeEnabled(); + expect(getByLabelText('Label')).toHaveValue('PG-1'); + + expect(getByLabelText('Region')).toBeDisabled(); + expect(getByLabelText('Region')).toHaveValue('Newark, NJ (us-east)'); + + expect(getByLabelText('Affinity Type')).toBeDisabled(); + expect(getByLabelText('Affinity Type')).toHaveValue('Anti-affinity'); + }); +}); diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.tsx index 28f421180b7..5a16b6d7fa5 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.tsx @@ -14,16 +14,12 @@ import { handleGeneralErrors, } from 'src/utilities/formikErrorUtils'; -import { PlacementGroupsDrawerContent } from './PlacementGroupDrawerContent'; +import { PlacementGroupsDrawerContent } from './PlacementGroupsDrawerContent'; -import type { PlacementGroupsRenameDrawerProps } from './types'; import type { - CreatePlacementGroupPayload, - RenamePlacementGroupPayload, -} from '@linode/api-v4'; - -type PlacementGroupDrawerFormikProps = RenamePlacementGroupPayload & - CreatePlacementGroupPayload; + PlacementGroupDrawerFormikProps, + PlacementGroupsRenameDrawerProps, +} from './types'; export const PlacementGroupsRenameDrawer = ( props: PlacementGroupsRenameDrawerProps @@ -56,7 +52,7 @@ export const PlacementGroupsRenameDrawer = ( } = useFormik({ enableReinitialize: true, initialValues: { - affinity_type: selectedPlacementGroup?.affinity_type as CreatePlacementGroupPayload['affinity_type'], + affinity_type: selectedPlacementGroup?.affinity_type as PlacementGroupDrawerFormikProps['affinity_type'], label: selectedPlacementGroup?.label ?? '', region: selectedPlacementGroup?.region ?? '', }, @@ -65,15 +61,15 @@ export const PlacementGroupsRenameDrawer = ( setStatus(undefined); setErrors({}); const payload = { ...values }; + // This is a bit of an outlier. We only need to pass the label since that' the only value the API accepts. + // Meanwhile formik is still keeping track of the other values since we're showing them in the UI. const { label } = payload; mutateAsync({ label }) .then((response) => { setSubmitting(false); - // Invalidate Placement Groups Queries queryClient.invalidateQueries([placementGroupQueryKey]); - // Show snackbar notification enqueueSnackbar( `Placement Group ${payload.label} successfully renamed`, { diff --git a/packages/manager/src/features/PlacementGroups/types.ts b/packages/manager/src/features/PlacementGroups/types.ts index 96445e1033e..eeeccfa9611 100644 --- a/packages/manager/src/features/PlacementGroups/types.ts +++ b/packages/manager/src/features/PlacementGroups/types.ts @@ -1,4 +1,8 @@ -import { PlacementGroup } from '@linode/api-v4'; +import { + CreatePlacementGroupPayload, + PlacementGroup, + RenamePlacementGroupPayload, +} from '@linode/api-v4'; export type PlacementGroupsDrawerPropsBase = { numberOfPlacementGroupsCreated: number; @@ -15,3 +19,6 @@ export type PlacementGroupsRenameDrawerProps = PlacementGroupsDrawerPropsBase & onPlacementGroupRenamed?: (placementGroup: PlacementGroup) => void; selectedPlacementGroup: PlacementGroup | undefined; }; + +export type PlacementGroupDrawerFormikProps = RenamePlacementGroupPayload & + CreatePlacementGroupPayload;