Skip to content

Commit

Permalink
ENH LinkField Jest tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Sabina Talipova committed Feb 13, 2024
1 parent 9340c28 commit 6afb506
Show file tree
Hide file tree
Showing 5 changed files with 320 additions and 129 deletions.
123 changes: 93 additions & 30 deletions client/src/components/LinkField/tests/LinkField-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,67 @@ function makeProps(obj = {}) {
};
}

describe('Render existing links', () => {
test('LinkField returns list of links if they exist', async () => {
const { container } = render(<LinkField {...makeProps({
isMulti: true,
value: [1, 2],
types: {
sitetree: { key: 'sitetree', title: 'Page', icon: 'font-icon-page', allowed: true },
email: { key: 'email', title: 'Email', icon: 'font-icon-email', allowed: true },
},
})}
/>);

await doResolve({ json: () => ({
1: {
Title: 'Page title',
typeKey: 'sitetree',
},
2: {
Title: 'Email title',
typeKey: 'email',
},
}) });

await screen.findByText('Page title');

expect(container.querySelectorAll('.link-picker__button')).toHaveLength(2);
expect(container.querySelectorAll('.link-picker__button.font-icon-page')[0]).toHaveTextContent('Page title');
expect(container.querySelectorAll('.link-picker__button.font-icon-email')[0]).toHaveTextContent('Email title');
});
});

describe('LinkField has disabled or readonly state', () => {
test('LinkField will render disabled state if disabled is true', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 1,
disabled: true
})}
/>);
doResolve();
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 100));
});
expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
expect(container.querySelectorAll('.link-picker')[0]).toHaveTextContent('Cannot create link');
});

test('LinkField will render readonly state if readonly is true', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 1,
readonly: true
})}
/>);
doResolve();
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 100));
});
expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
expect(container.querySelectorAll('.link-picker')[0]).toHaveTextContent('Cannot create link');
});
});

test('LinkField tab order', async () => {
const user = userEvent.setup();
const { container } = render(<LinkField {...makeProps({
Expand Down Expand Up @@ -109,37 +170,39 @@ test('LinkField tab order', async () => {
// e.g. el.getBoundingClientRect() will always return 0,0,0,0
});

test('LinkField will render save-record-first div if ownerID is 0', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 0
})}
/>);
expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(1);
expect(container.querySelectorAll('.link-field__loading')).toHaveLength(0);
expect(container.querySelectorAll('.link-picker')).toHaveLength(0);
});
describe('LinkField loading state', () => {
test('LinkField will render save-record-first div if ownerID is 0', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 0
})}
/>);
expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(1);
expect(container.querySelectorAll('.link-field__loading')).toHaveLength(0);
expect(container.querySelectorAll('.link-picker')).toHaveLength(0);
});

test('LinkField will render loading indicator if ownerID is not 0', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 1
})}
/>);
expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(0);
expect(container.querySelectorAll('.link-field__loading')).toHaveLength(1);
expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
});
test('LinkField will render loading indicator if ownerID is not 0', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 1
})}
/>);
expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(0);
expect(container.querySelectorAll('.link-field__loading')).toHaveLength(1);
expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
});

test('LinkField will render link-picker if ownerID is not 0 and has finished loading', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 1
})}
/>);
doResolve();
// Short wait - we can't use screen.find* because we're waiting for something to be removed, not added to the DOM
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 100));
test('LinkField will render link-picker if ownerID is not 0 and has finished loading', async () => {
const { container } = render(<LinkField {...makeProps({
ownerID: 1
})}
/>);
doResolve();
// Short wait - we can't use screen.find* because we're waiting for something to be removed, not added to the DOM
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 100));
});
expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(0);
expect(container.querySelectorAll('.link-field__loading')).toHaveLength(0);
expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
});
expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(0);
expect(container.querySelectorAll('.link-field__loading')).toHaveLength(0);
expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
});
3 changes: 3 additions & 0 deletions client/src/components/LinkPicker/tests/LinkPicker-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* global jest, test */
import React from 'react';
import { render, fireEvent, act } from '@testing-library/react';
import '@testing-library/jest-dom';
import { LinkFieldContext } from 'components/LinkField/LinkField';
import LinkPicker from '../LinkPicker';

Expand All @@ -22,6 +23,7 @@ test('LinkPickerMenu render() should display toggle if can create', () => {
<LinkPicker {...makeProps({ canCreate: true })} />
</LinkFieldContext.Provider>);
expect(container.querySelectorAll('.link-picker__menu-toggle')).toHaveLength(1);
expect(container.querySelector('.link-picker__menu-toggle')).toHaveTextContent('Add Link');
expect(container.querySelectorAll('.link-picker__cannot-create')).toHaveLength(0);
});

Expand All @@ -31,6 +33,7 @@ test('LinkPickerMenu render() should display cannot create message if cannot cre
</LinkFieldContext.Provider>);
expect(container.querySelectorAll('.link-picker__menu-toggle')).toHaveLength(0);
expect(container.querySelectorAll('.link-picker__cannot-create')).toHaveLength(1);
expect(container.querySelector('.link-picker__cannot-create')).toHaveTextContent('Cannot create link');
});

test('LinkPickerMenu render() should display cannot create message if types is empty', () => {
Expand Down
76 changes: 76 additions & 0 deletions client/src/components/LinkPicker/tests/LinkPickerMenu-test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/* global jest, test */

import React from 'react';
import { render, fireEvent, act } from '@testing-library/react';
import '@testing-library/jest-dom';
import { LinkFieldContext } from 'components/LinkField/LinkField';
import LinkPickerMenu from '../LinkPickerMenu';

function makeProps(obj = {}) {
return {
types: [
{ key: 'sitetree', title: 'Page', icon: 'font-icon-page', allowed: true },
{ key: 'external', title: 'External URL', icon: 'font-icon-link', allowed: true },
{ key: 'email', title: 'Email', icon: 'font-icon-email', allowed: true },
{ key: 'phone', title: 'Phone', icon: 'font-icon-phone', allowed: true },
],
onSelect: jest.fn(),
onKeyDownEdit: jest.fn(),
...obj
};
}
describe('Render LinkPickerMenu element', () => {
test('LinkPickerMenu render() should display link list', () => {
const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
<LinkPickerMenu {...makeProps()} />
</LinkFieldContext.Provider>);
expect(container.querySelectorAll('.dropdown-item')).toHaveLength(4);
expect(container.querySelectorAll('.dropdown-item')[0]).toHaveTextContent('Page');
expect(container.querySelectorAll('.dropdown-item')[1]).toHaveTextContent('External URL');
expect(container.querySelectorAll('.dropdown-item')[2]).toHaveTextContent('Email');
expect(container.querySelectorAll('.dropdown-item')[3]).toHaveTextContent('Phone');
});

test('LinkPickerMenu render() should display link list with allowed SiteTreeLink and EmailLink', () => {
const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
<LinkPickerMenu {...makeProps(
{ types: [
{ key: 'sitetree', title: 'Page', icon: 'font-icon-page', allowed: true },
{ key: 'email', title: 'Email', icon: 'font-icon-email', allowed: true },
{ key: 'phone', title: 'Phone', icon: 'font-icon-phone', allowed: false },
{ key: 'external', title: 'External URL', icon: 'font-icon-link', allowed: false },
] })}
/>
</LinkFieldContext.Provider>);
expect(container.querySelectorAll('.dropdown-item')).toHaveLength(2);
expect(container.querySelectorAll('.dropdown-item')[0]).toHaveTextContent('Page');
expect(container.querySelectorAll('.dropdown-item')[0].firstChild).toHaveClass('font-icon-page');
expect(container.querySelectorAll('.dropdown-item')[1]).toHaveTextContent('Email');
expect(container.querySelectorAll('.dropdown-item')[1].firstChild).toHaveClass('font-icon-email');
});
});

describe('Handle user event on LinkPickerMenu element', () => {
test('LinkPickerMenu onSelect() should call onSelect with selected type', async () => {
const onSelect = jest.fn();
const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
<LinkPickerMenu {...makeProps({ onSelect })} />
</LinkFieldContext.Provider>);
await act(async () => {
await fireEvent.click(container.querySelectorAll('.dropdown-item')[1]);
});
expect(onSelect).toHaveBeenCalledTimes(1);
expect(onSelect).toHaveBeenCalledWith('external');
});

test('LinkPickerMenu onKeyDownEdit() should call onKeyDownEdit with selected type', async () => {
const onKeyDownEdit = jest.fn();
const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
<LinkPickerMenu {...makeProps({ onKeyDownEdit })} />
</LinkFieldContext.Provider>);
await act(async () => {
await fireEvent.keyDown(container.querySelector('.dropdown-item'), { key: 'Enter', code: 'Enter', charCode: 13 });
});
expect(onKeyDownEdit).toHaveBeenCalledTimes(1);
});
});
Loading

0 comments on commit 6afb506

Please sign in to comment.