Skip to content

Commit

Permalink
add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@meetulr
meetulr committed Nov 1, 2024
1 parent b96e7e4 commit 12793a1
Show file tree
Hide file tree
Showing 18 changed files with 1,100 additions and 78 deletions.
3 changes: 1 addition & 2 deletions src/components/AddPeopleToTag/AddPeopleToTag.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@
}

.scrollContainer {
min-height: 100px;
max-height: 100px;
height: 100px;
overflow-y: auto;
margin-bottom: 1rem;
}
Expand Down
99 changes: 96 additions & 3 deletions src/components/AddPeopleToTag/AddPeopleToTag.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { store } from 'state/store';
import userEvent from '@testing-library/user-event';
import { StaticMockLink } from 'utils/StaticMockLink';
import { toast } from 'react-toastify';
import type { ApolloLink } from '@apollo/client';
import { InMemoryCache, type ApolloLink } from '@apollo/client';
import type { InterfaceAddPeopleToTagProps } from './AddPeopleToTag';
import AddPeopleToTag from './AddPeopleToTag';
import i18n from 'utils/i18nForTest';
Expand Down Expand Up @@ -63,12 +63,39 @@ const props: InterfaceAddPeopleToTagProps = {
>,
};

const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
getUserTag: {
merge(existing = {}, incoming) {
const merged = {
...existing,
...incoming,
usersToAssignTo: {
...existing.usersToAssignTo,
...incoming.usersToAssignTo,
edges: [
...(existing.usersToAssignTo?.edges || []),
...(incoming.usersToAssignTo?.edges || []),
],
},
};

return merged;
},
},
},
},
},
});

const renderAddPeopleToTagModal = (
props: InterfaceAddPeopleToTagProps,
link: ApolloLink,
): RenderResult => {
return render(
<MockedProvider addTypename={false} link={link}>
<MockedProvider cache={cache} addTypename={false} link={link}>
<MemoryRouter initialEntries={['/orgtags/123/manageTag/1']}>
<Provider store={store}>
<I18nextProvider i18n={i18n}>
Expand All @@ -91,7 +118,7 @@ describe('Organisation Tags Page', () => {
...jest.requireActual('react-router-dom'),
useParams: () => ({ orgId: 'orgId' }),
}));
// cache.reset();
cache.reset();
});

afterEach(() => {
Expand Down Expand Up @@ -147,6 +174,72 @@ describe('Organisation Tags Page', () => {
userEvent.click(screen.getAllByTestId('deselectMemberBtn')[0]);
});

test('searchs for tags where the firstName matches the provided firstName search input', async () => {
renderAddPeopleToTagModal(props, link);

await wait();

await waitFor(() => {
expect(
screen.getByPlaceholderText(translations.firstName),
).toBeInTheDocument();
});
const input = screen.getByPlaceholderText(translations.firstName);
fireEvent.change(input, { target: { value: 'usersToAssignTo' } });

// should render the two users from the mock data
// where firstName starts with "usersToAssignTo"
await waitFor(() => {
const members = screen.getAllByTestId('memberName');
expect(members.length).toEqual(2);
});

await waitFor(() => {
expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
'usersToAssignTo user1',
);
});

await waitFor(() => {
expect(screen.getAllByTestId('memberName')[1]).toHaveTextContent(
'usersToAssignTo user2',
);
});
});

test('searchs for tags where the lastName matches the provided lastName search input', async () => {
renderAddPeopleToTagModal(props, link);

await wait();

await waitFor(() => {
expect(
screen.getByPlaceholderText(translations.lastName),
).toBeInTheDocument();
});
const input = screen.getByPlaceholderText(translations.lastName);
fireEvent.change(input, { target: { value: 'userToAssignTo' } });

// should render the two users from the mock data
// where lastName starts with "usersToAssignTo"
await waitFor(() => {
const members = screen.getAllByTestId('memberName');
expect(members.length).toEqual(2);
});

await waitFor(() => {
expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
'first userToAssignTo',
);
});

await waitFor(() => {
expect(screen.getAllByTestId('memberName')[1]).toHaveTextContent(
'second userToAssignTo',
);
});
});

test('Renders more members with infinite scroll', async () => {
const { getByText } = renderAddPeopleToTagModal(props, link);

Expand Down
10 changes: 4 additions & 6 deletions src/components/AddPeopleToTag/AddPeopleToTag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
};
},
) => {
if (!fetchMoreResult) return prevResult;
if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;

return {
getUsersToAssignTo: {
Expand Down Expand Up @@ -263,7 +263,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
className={`d-flex flex-wrap align-items-center border border-2 border-dark-subtle bg-light-subtle rounded-3 p-2 ${styles.scrollContainer}`}
>
{assignToMembers.length === 0 ? (
<div className="text-center text-body-tertiary mx-auto">
<div className="text-body-tertiary mx-auto">
{t('noOneSelected')}
</div>
) : (
Expand Down Expand Up @@ -294,9 +294,8 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
onChange={(e) =>
setMemberToAssignToSearchFirstName(e.target.value.trim())
}
data-testid="searchByName"
data-testid="searchByFirstName"
autoComplete="off"
required
/>
</div>
<div className="mx-2 position-relative">
Expand All @@ -309,9 +308,8 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
onChange={(e) =>
setMemberToAssignToSearchLastName(e.target.value.trim())
}
data-testid="searchByName"
data-testid="searchByLastName"
autoComplete="off"
required
/>
</div>
</div>
Expand Down
106 changes: 106 additions & 0 deletions src/components/AddPeopleToTag/AddPeopleToTagsMocks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ export const MOCKS = [
variables: {
id: '1',
first: TAGS_QUERY_DATA_CHUNK_SIZE,
where: {
firstName: { starts_with: '' },
lastName: { starts_with: '' },
},
},
},
result: {
Expand Down Expand Up @@ -117,6 +121,10 @@ export const MOCKS = [
id: '1',
first: TAGS_QUERY_DATA_CHUNK_SIZE,
after: '10',
where: {
firstName: { starts_with: '' },
lastName: { starts_with: '' },
},
},
},
result: {
Expand Down Expand Up @@ -154,6 +162,100 @@ export const MOCKS = [
},
},
},
{
request: {
query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
variables: {
id: '1',
first: TAGS_QUERY_DATA_CHUNK_SIZE,
where: {
firstName: { starts_with: 'usersToAssignTo' },
lastName: { starts_with: '' },
},
},
},
result: {
data: {
getUsersToAssignTo: {
name: 'tag1',
usersToAssignTo: {
edges: [
{
node: {
_id: '1',
firstName: 'usersToAssignTo',
lastName: 'user1',
},
cursor: '1',
},
{
node: {
_id: '2',
firstName: 'usersToAssignTo',
lastName: 'user2',
},
cursor: '2',
},
],
pageInfo: {
startCursor: '1',
endCursor: '2',
hasNextPage: false,
hasPreviousPage: false,
},
totalCount: 2,
},
},
},
},
},
{
request: {
query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
variables: {
id: '1',
first: TAGS_QUERY_DATA_CHUNK_SIZE,
where: {
firstName: { starts_with: '' },
lastName: { starts_with: 'userToAssignTo' },
},
},
},
result: {
data: {
getUsersToAssignTo: {
name: 'tag1',
usersToAssignTo: {
edges: [
{
node: {
_id: '1',
firstName: 'first',
lastName: 'userToAssignTo',
},
cursor: '1',
},
{
node: {
_id: '2',
firstName: 'second',
lastName: 'userToAssignTo',
},
cursor: '2',
},
],
pageInfo: {
startCursor: '1',
endCursor: '2',
hasNextPage: false,
hasPreviousPage: false,
},
totalCount: 2,
},
},
},
},
},
{
request: {
query: ADD_PEOPLE_TO_TAG,
Expand All @@ -179,6 +281,10 @@ export const MOCKS_ERROR = [
variables: {
id: '1',
first: TAGS_QUERY_DATA_CHUNK_SIZE,
where: {
firstName: { starts_with: '' },
lastName: { starts_with: '' },
},
},
},
error: new Error('Mock Graphql Error'),
Expand Down
10 changes: 8 additions & 2 deletions src/components/TagActions/TagActions.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,8 @@
}

.scrollContainer {
max-height: 100px;
height: 100px;
overflow-y: auto;
margin-bottom: 1rem;
}

.tagBadge {
Expand All @@ -34,3 +33,10 @@
.removeFilterIcon {
cursor: pointer;
}

.loadingDiv {
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
21 changes: 21 additions & 0 deletions src/components/TagActions/TagActions.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,27 @@ describe('Organisation Tags Page', () => {
});
});

test('searchs for tags where the name matches the provided search input', async () => {
renderTagActionsModal(props[0], link);

await wait();

await waitFor(() => {
expect(
screen.getByPlaceholderText(translations.searchByName),
).toBeInTheDocument();
});
const input = screen.getByPlaceholderText(translations.searchByName);
fireEvent.change(input, { target: { value: 'searchUserTag' } });

// should render the two searched tags from the mock data
// where name starts with "searchUserTag"
await waitFor(() => {
const tags = screen.getAllByTestId('orgUserTag');
expect(tags.length).toEqual(2);
});
});

test('Renders more members with infinite scroll', async () => {
const { getByText } = renderTagActionsModal(props[0], link);

Expand Down
Loading

0 comments on commit 12793a1

Please sign in to comment.