Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPDX-8413 - Appeal contact row actions click fix #1159

Merged
merged 1 commit into from
Oct 28, 2024
Merged

MPDX-8413 - Appeal contact row actions click fix #1159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 43 additions & 25 deletions src/components/Tool/Appeal/List/ContactRow/ContactRow.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SnackbarProvider } from 'notistack';
import TestRouter from '__tests__/util/TestRouter';
import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
Expand All @@ -24,9 +27,10 @@ const router = {
query: { accountListId },
isReady: true,
};
const contactUrl = `/accountLists/${accountListId}/tools/appeals/${appealId}/${defaultContact.id}`;

const getContactUrl = jest.fn().mockReturnValue({
contactUrl: `/contacts/${defaultContact.id}`,
contactUrl,
});
const contactDetailsOpen = true;
const toggleSelectionById = jest.fn();
Expand All @@ -43,29 +47,33 @@ const Components = ({
excludedContacts = [],
}: ComponentsProps) => (
<TestRouter router={router}>
<GqlMockedProvider>
<ThemeProvider theme={theme}>
<AppealsWrapper>
<AppealsContext.Provider
value={
{
appealId,
getContactUrl,
isRowChecked,
contactDetailsOpen,
toggleSelectionById,
} as unknown as AppealsType
}
>
<ContactRow
contact={contact}
appealStatus={appealStatus}
excludedContacts={excludedContacts}
/>
</AppealsContext.Provider>
</AppealsWrapper>
</ThemeProvider>
</GqlMockedProvider>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<SnackbarProvider>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need the <SnackbarProvider> or to mock the notistack import but not both.

<GqlMockedProvider>
<ThemeProvider theme={theme}>
<AppealsWrapper>
<AppealsContext.Provider
value={
{
appealId,
getContactUrl,
isRowChecked,
contactDetailsOpen,
toggleSelectionById,
} as unknown as AppealsType
}
>
<ContactRow
contact={contact}
appealStatus={appealStatus}
excludedContacts={excludedContacts}
/>
</AppealsContext.Provider>
</AppealsWrapper>
</ThemeProvider>
</GqlMockedProvider>
</SnackbarProvider>
</LocalizationProvider>
</TestRouter>
);

Expand All @@ -92,7 +100,17 @@ describe('ContactsRow', () => {

const contact = getByTestId('rowButton');
expect(contact).toBeInTheDocument();
expect(contact).toHaveAttribute('href', `/contacts/${defaultContact.id}`);
expect(contact).toHaveAttribute('href', contactUrl);
});

it('should open commitment modal', async () => {
const { getByTestId, findByRole } = render(<Components />);

const addCommitment = getByTestId('AddIcon');
userEvent.click(addCommitment);
expect(
await findByRole('heading', { name: 'Add Commitment' }),
).toBeInTheDocument();
});

describe('Contact Row by status type', () => {
Expand Down
49 changes: 29 additions & 20 deletions src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,14 @@
paddingRight: theme.spacing(2),
}));

export const handleClickWithCallback = (
event: React.MouseEvent<HTMLDivElement>,
callback: () => void,
) => {
event.preventDefault();
callback();
};

interface Props {
contact: AppealContactInfoFragment;
appealStatus: AppealStatusEnum;
Expand Down Expand Up @@ -249,21 +257,22 @@
<IconButton
size={'small'}
component="div"
onClick={(event) => {
event.stopPropagation();
handleCreatePledge();
}}
onClick={(event) =>
handleClickWithCallback(event, handleCreatePledge)
}
onMouseOver={preloadPledgeModal}
>
<AddIcon />
</IconButton>
<IconButton
size={'small'}
component="div"
onClick={(event) => {
event.stopPropagation();
handleRemoveContactFromAppeal();
}}
onClick={(event) =>
handleClickWithCallback(

Check warning on line 271 in src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx#L271 

Added line #L271 was not covered by tests
event,
handleRemoveContactFromAppeal,
)
}
onMouseOver={preloadDeleteAppealContactModal}
>
<DeleteIcon color="error" />
Expand All @@ -277,21 +286,19 @@
<IconButton
size={'small'}
component="div"
onClick={(event) => {
event.stopPropagation();
handleEditContact();
}}
onClick={(event) =>
handleClickWithCallback(event, handleEditContact)

Check warning on line 290 in src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx#L290 

Added line #L290 was not covered by tests
}
onMouseOver={preloadPledgeModal}
>
<EditIcon />
</IconButton>
<IconButton
size={'small'}
component="div"
onClick={(event) => {
event.stopPropagation();
handleRemovePledge();
}}
onClick={(event) =>
handleClickWithCallback(event, handleRemovePledge)

Check warning on line 300 in src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx#L300 

Added line #L300 was not covered by tests
}
onMouseOver={preloadDeletePledgeModal}
>
<DeleteIcon color="error" />
Expand All @@ -302,10 +309,12 @@
<IconButton
size={'small'}
component="div"
onClick={(event) => {
event.stopPropagation();
handleAddExcludedContactToAppeal();
}}
onClick={(event) =>
handleClickWithCallback(

Check warning on line 313 in src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx#L313 

Added line #L313 was not covered by tests
event,
handleAddExcludedContactToAppeal,
)
}
onMouseOver={preloadAddExcludedContactModal}
>
<AddIcon />
Expand Down
Loading