Replaced usages of test with it, and updated changelog

This commit is contained in:
Alejandro Celaya 2021-09-20 22:00:34 +02:00
parent 310913b222
commit 44930b8c5f
14 changed files with 42 additions and 41 deletions

View file

@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Changed ### Changed
* [#408](https://github.com/shlinkio/shlink-web-client/issues/408) Updated to Chart.js 3.5 * [#408](https://github.com/shlinkio/shlink-web-client/issues/408) Updated to Chart.js 3.5
* [#486](https://github.com/shlinkio/shlink-web-client/issues/486) Refactored components used to render visits charts, making them easier to maintain and understand. * [#486](https://github.com/shlinkio/shlink-web-client/issues/486) Refactored components used to render visits charts, making them easier to maintain and understand.
* [#409](https://github.com/shlinkio/shlink-web-client/issues/409) Increased required code coverage and added hard threshold check.
### Deprecated ### Deprecated
* *Nothing* * *Nothing*

View file

@ -17,13 +17,13 @@ describe('appUpdatesReducer', () => {
}); });
describe('appUpdateAvailable', () => { describe('appUpdateAvailable', () => {
test('creates expected action', () => { it('creates expected action', () => {
expect(appUpdateAvailable()).toEqual({ type: APP_UPDATE_AVAILABLE }); expect(appUpdateAvailable()).toEqual({ type: APP_UPDATE_AVAILABLE });
}); });
}); });
describe('resetAppUpdate', () => { describe('resetAppUpdate', () => {
test('creates expected action', () => { it('creates expected action', () => {
expect(resetAppUpdate()).toEqual({ type: RESET_APP_UPDATE }); expect(resetAppUpdate()).toEqual({ type: RESET_APP_UPDATE });
}); });
}); });

View file

@ -21,24 +21,24 @@ describe('<MainHeader />', () => {
afterEach(() => wrapper?.unmount()); afterEach(() => wrapper?.unmount());
test('ServersDropdown is rendered', () => { it('renders ServersDropdown', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
expect(wrapper.find(ServersDropdown)).toHaveLength(1); expect(wrapper.find(ServersDropdown)).toHaveLength(1);
}); });
test.each([ it.each([
[ '/foo', false ], [ '/foo', false ],
[ '/bar', false ], [ '/bar', false ],
[ '/settings', true ], [ '/settings', true ],
])('link to settings is only active when current path is settings', (currentPath, isActive) => { ])('sets link to settings as active only when current path is settings', (currentPath, isActive) => {
const wrapper = createWrapper(currentPath); const wrapper = createWrapper(currentPath);
const settingsLink = wrapper.find(NavLink); const settingsLink = wrapper.find(NavLink);
expect(settingsLink.prop('active')).toEqual(isActive); expect(settingsLink.prop('active')).toEqual(isActive);
}); });
test('expected class is rendered based on the nav bar state', () => { it('renders expected class based on the nav bar state', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon'); expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon');
@ -50,7 +50,7 @@ describe('<MainHeader />', () => {
expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon'); expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon');
}); });
test('opens Collapse when clicking toggle', () => { it('opens Collapse when clicking toggle', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
expect(wrapper.find(Collapse).prop('isOpen')).toEqual(false); expect(wrapper.find(Collapse).prop('isOpen')).toEqual(false);

View file

@ -14,7 +14,7 @@ describe('<ShlinkVersionsContainer />', () => {
afterEach(() => wrapper?.unmount()); afterEach(() => wrapper?.unmount());
test.each([ it.each([
[ null, 'text-center' ], [ null, 'text-center' ],
[ Mock.of<NotFoundServer>({ serverNotFound: true }), 'text-center' ], [ Mock.of<NotFoundServer>({ serverNotFound: true }), 'text-center' ],
[ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'text-center' ], [ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'text-center' ],

View file

@ -15,7 +15,7 @@ describe('ImageDownloader', () => {
imageDownloader = new ImageDownloader(axios, windowMock); imageDownloader = new ImageDownloader(axios, windowMock);
}); });
test('calls URL with response type blob', async () => { it('calls URL with response type blob', async () => {
get.mockResolvedValue({ data: {} }); get.mockResolvedValue({ data: {} });
await imageDownloader.saveImage('/foo/bar.png', 'my-image.png'); await imageDownloader.saveImage('/foo/bar.png', 'my-image.png');

View file

@ -26,7 +26,7 @@ describe('<RealTimeUpdates />', () => {
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount()); afterEach(() => wrapper?.unmount());
test('enabled real time updates are rendered as expected', () => { it('renders enabled real time updates as expected', () => {
const wrapper = createWrapper({ enabled: true }); const wrapper = createWrapper({ enabled: true });
const toggle = wrapper.find(ToggleSwitch); const toggle = wrapper.find(ToggleSwitch);
const label = wrapper.find('label'); const label = wrapper.find('label');
@ -41,7 +41,7 @@ describe('<RealTimeUpdates />', () => {
expect(small).toHaveLength(2); expect(small).toHaveLength(2);
}); });
test('disabled real time updates are rendered as expected', () => { it('renders disabled real time updates as expected', () => {
const wrapper = createWrapper({ enabled: false }); const wrapper = createWrapper({ enabled: false });
const toggle = wrapper.find(ToggleSwitch); const toggle = wrapper.find(ToggleSwitch);
const label = wrapper.find('label'); const label = wrapper.find('label');
@ -56,12 +56,12 @@ describe('<RealTimeUpdates />', () => {
expect(small).toHaveLength(1); expect(small).toHaveLength(1);
}); });
test.each([ it.each([
[ 1, 'minute' ], [ 1, 'minute' ],
[ 2, 'minutes' ], [ 2, 'minutes' ],
[ 10, 'minutes' ], [ 10, 'minutes' ],
[ 100, 'minutes' ], [ 100, 'minutes' ],
])('expected children are shown when interval is greater than 0', (interval, minutesWord) => { ])('shows expected children when interval is greater than 0', (interval, minutesWord) => {
const wrapper = createWrapper({ enabled: true, interval }); const wrapper = createWrapper({ enabled: true, interval });
const span = wrapper.find('span'); const span = wrapper.find('span');
const input = wrapper.find(Input); const input = wrapper.find(Input);
@ -73,7 +73,7 @@ describe('<RealTimeUpdates />', () => {
expect(input.prop('value')).toEqual(`${interval}`); expect(input.prop('value')).toEqual(`${interval}`);
}); });
test.each([[ undefined ], [ 0 ]])('expected children are shown when interval is 0 or undefined', (interval) => { it.each([[ undefined ], [ 0 ]])('shows expected children when interval is 0 or undefined', (interval) => {
const wrapper = createWrapper({ enabled: true, interval }); const wrapper = createWrapper({ enabled: true, interval });
const span = wrapper.find('span'); const span = wrapper.find('span');
const small = wrapper.find('small').at(1); const small = wrapper.find('small').at(1);
@ -84,7 +84,7 @@ describe('<RealTimeUpdates />', () => {
expect(input.prop('value')).toEqual(''); expect(input.prop('value')).toEqual('');
}); });
test('real time updates are updated on input change', () => { it('updates real time updates on input change', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const input = wrapper.find(Input); const input = wrapper.find(Input);
@ -93,7 +93,7 @@ describe('<RealTimeUpdates />', () => {
expect(setRealTimeUpdatesInterval).toHaveBeenCalledWith(10); expect(setRealTimeUpdatesInterval).toHaveBeenCalledWith(10);
}); });
test('real time updates are toggled on switch change', () => { it('toggles real time updates on switch change', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const toggle = wrapper.find(ToggleSwitch); const toggle = wrapper.find(ToggleSwitch);

View file

@ -6,7 +6,7 @@ describe('<Settings />', () => {
const Component = () => null; const Component = () => null;
const Settings = createSettings(Component, Component, Component, Component); const Settings = createSettings(Component, Component, Component, Component);
test('a no-menu layout is renders with the four settings sections', () => { it('renders a no-menu layout with the expected settings sections', () => {
const wrapper = shallow(<Settings />); const wrapper = shallow(<Settings />);
const layout = wrapper.find(NoMenuLayout); const layout = wrapper.find(NoMenuLayout);
const sections = wrapper.find('SettingsSections'); const sections = wrapper.find('SettingsSections');

View file

@ -4,7 +4,7 @@ import Checkbox from '../../../src/utils/Checkbox';
import { InfoTooltip } from '../../../src/utils/InfoTooltip'; import { InfoTooltip } from '../../../src/utils/InfoTooltip';
describe('<ShortUrlFormCheckboxGroup />', () => { describe('<ShortUrlFormCheckboxGroup />', () => {
test.each([ it.each([
[ undefined, '', 0 ], [ undefined, '', 0 ],
[ 'This is the tooltip', 'mr-2', 1 ], [ 'This is the tooltip', 'mr-2', 1 ],
])('renders tooltip only when provided', (infoTooltip, expectedClassName, expectedAmountOfTooltips) => { ])('renders tooltip only when provided', (infoTooltip, expectedClassName, expectedAmountOfTooltips) => {

View file

@ -28,7 +28,7 @@ describe('<EditTagModal />', () => {
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount()); afterEach(() => wrapper?.unmount());
test('modal can be toggled with different mechanisms', () => { it('allows modal to be toggled with different mechanisms', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const modal = wrapper.find(Modal); const modal = wrapper.find(Modal);
const modalHeader = wrapper.find(ModalHeader); const modalHeader = wrapper.find(ModalHeader);
@ -45,10 +45,10 @@ describe('<EditTagModal />', () => {
expect(tagEdited).not.toHaveBeenCalled(); expect(tagEdited).not.toHaveBeenCalled();
}); });
test.each([ it.each([
[ true, 'Saving...' ], [ true, 'Saving...' ],
[ false, 'Save' ], [ false, 'Save' ],
])('submit button is rendered in expected state', (editing, expectedText) => { ])('renders submit button in expected state', (editing, expectedText) => {
const wrapper = createWrapper({ editing }); const wrapper = createWrapper({ editing });
const submitBtn = wrapper.find(Button).findWhere((btn) => btn.prop('color') === 'primary'); const submitBtn = wrapper.find(Button).findWhere((btn) => btn.prop('color') === 'primary');
@ -56,10 +56,10 @@ describe('<EditTagModal />', () => {
expect(submitBtn.prop('disabled')).toEqual(editing); expect(submitBtn.prop('disabled')).toEqual(editing);
}); });
test.each([ it.each([
[ true, 1 ], [ true, 1 ],
[ false, 0 ], [ false, 0 ],
])('error result is displayed in case of error', (error, expectedResultCount) => { ])('displays error result in case of error', (error, expectedResultCount) => {
const wrapper = createWrapper({ error, errorData: Mock.all<ProblemDetailsError>() }); const wrapper = createWrapper({ error, errorData: Mock.all<ProblemDetailsError>() });
const result = wrapper.find(Result); const result = wrapper.find(Result);
const apiError = wrapper.find(ShlinkApiError); const apiError = wrapper.find(ShlinkApiError);
@ -68,7 +68,7 @@ describe('<EditTagModal />', () => {
expect(apiError).toHaveLength(expectedResultCount); expect(apiError).toHaveLength(expectedResultCount);
}); });
test('tag value is updated when text changes', () => { it('updates tag value when text changes', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
expect(wrapper.find(Input).prop('value')).toEqual('foo'); expect(wrapper.find(Input).prop('value')).toEqual('foo');
@ -76,7 +76,7 @@ describe('<EditTagModal />', () => {
expect(wrapper.find(Input).prop('value')).toEqual('bar'); expect(wrapper.find(Input).prop('value')).toEqual('bar');
}); });
test('all functions are invoked on form submit', async () => { it('invokes all functions on form submit', async () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const form = wrapper.find('form'); const form = wrapper.find('form');
@ -89,7 +89,7 @@ describe('<EditTagModal />', () => {
expect(tagEdited).toHaveBeenCalled(); expect(tagEdited).toHaveBeenCalled();
}); });
test('color is changed when changing on color picker', () => { it('changes color when changing on color picker', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
expect(wrapper.find(ChromePicker).prop('color')).toEqual('red'); expect(wrapper.find(ChromePicker).prop('color')).toEqual('red');
@ -97,7 +97,7 @@ describe('<EditTagModal />', () => {
expect(wrapper.find(ChromePicker).prop('color')).toEqual('blue'); expect(wrapper.find(ChromePicker).prop('color')).toEqual('blue');
}); });
test('popover can be toggled with different mechanisms', () => { it('allows toggling popover with different mechanisms', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
expect(wrapper.find(Popover).prop('isOpen')).toEqual(false); expect(wrapper.find(Popover).prop('isOpen')).toEqual(false);

View file

@ -13,19 +13,19 @@ describe('<PaginationDropdown />', () => {
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount()); afterEach(() => wrapper?.unmount());
test('expected amount of items is rendered', () => { it('renders expected amount of items', () => {
const items = wrapper.find(DropdownItem); const items = wrapper.find(DropdownItem);
expect(items).toHaveLength(6); expect(items).toHaveLength(6);
}); });
test.each([ it.each([
[ 0, 10 ], [ 0, 10 ],
[ 1, 50 ], [ 1, 50 ],
[ 2, 100 ], [ 2, 100 ],
[ 3, 200 ], [ 3, 200 ],
[ 5, Infinity ], [ 5, Infinity ],
])('expected value is set when an item is clicked', (index, expectedValue) => { ])('sets expected value when an item is clicked', (index, expectedValue) => {
const item = wrapper.find(DropdownItem).at(index); const item = wrapper.find(DropdownItem).at(index);
expect(setValue).not.toHaveBeenCalled(); expect(setValue).not.toHaveBeenCalled();

View file

@ -10,7 +10,7 @@ import { parseDate } from '../../../../src/utils/helpers/date';
describe('date-types', () => { describe('date-types', () => {
describe('dateRangeIsEmpty', () => { describe('dateRangeIsEmpty', () => {
test.each([ it.each([
[ undefined, true ], [ undefined, true ],
[{}, true ], [{}, true ],
[{ startDate: null }, true ], [{ startDate: null }, true ],
@ -24,24 +24,24 @@ describe('date-types', () => {
[{ startDate: new Date() }, false ], [{ startDate: new Date() }, false ],
[{ endDate: new Date() }, false ], [{ endDate: new Date() }, false ],
[{ startDate: new Date(), endDate: new Date() }, false ], [{ startDate: new Date(), endDate: new Date() }, false ],
])('proper result is returned', (dateRange, expectedResult) => { ])('returns proper result', (dateRange, expectedResult) => {
expect(dateRangeIsEmpty(dateRange)).toEqual(expectedResult); expect(dateRangeIsEmpty(dateRange)).toEqual(expectedResult);
}); });
}); });
describe('rangeIsInterval', () => { describe('rangeIsInterval', () => {
test.each([ it.each([
[ undefined, false ], [ undefined, false ],
[{}, false ], [{}, false ],
[ 'today' as DateInterval, true ], [ 'today' as DateInterval, true ],
[ 'yesterday' as DateInterval, true ], [ 'yesterday' as DateInterval, true ],
])('proper result is returned', (range, expectedResult) => { ])('returns proper result', (range, expectedResult) => {
expect(rangeIsInterval(range)).toEqual(expectedResult); expect(rangeIsInterval(range)).toEqual(expectedResult);
}); });
}); });
describe('rangeOrIntervalToString', () => { describe('rangeOrIntervalToString', () => {
test.each([ it.each([
[ undefined, undefined ], [ undefined, undefined ],
[ 'today' as DateInterval, 'Today' ], [ 'today' as DateInterval, 'Today' ],
[ 'yesterday' as DateInterval, 'Yesterday' ], [ 'yesterday' as DateInterval, 'Yesterday' ],
@ -65,7 +65,7 @@ describe('date-types', () => {
{ startDate: parseDate('2020-01-01', 'yyyy-MM-dd'), endDate: parseDate('2021-02-02', 'yyyy-MM-dd') }, { startDate: parseDate('2020-01-01', 'yyyy-MM-dd'), endDate: parseDate('2021-02-02', 'yyyy-MM-dd') },
'2020-01-01 - 2021-02-02', '2020-01-01 - 2021-02-02',
], ],
])('proper result is returned', (range, expectedValue) => { ])('returns proper result', (range, expectedValue) => {
expect(rangeOrIntervalToString(range)).toEqual(expectedValue); expect(rangeOrIntervalToString(range)).toEqual(expectedValue);
}); });
}); });
@ -75,7 +75,7 @@ describe('date-types', () => {
const daysBack = (days: number) => subDays(new Date(), days); const daysBack = (days: number) => subDays(new Date(), days);
const formatted = (date?: Date | null): string | undefined => !date ? undefined : format(date, 'yyyy-MM-dd'); const formatted = (date?: Date | null): string | undefined => !date ? undefined : format(date, 'yyyy-MM-dd');
test.each([ it.each([
[ undefined, undefined, undefined ], [ undefined, undefined, undefined ],
[ 'today' as DateInterval, now(), now() ], [ 'today' as DateInterval, now(), now() ],
[ 'yesterday' as DateInterval, daysBack(1), daysBack(1) ], [ 'yesterday' as DateInterval, daysBack(1), daysBack(1) ],
@ -84,7 +84,7 @@ describe('date-types', () => {
[ 'last90Days' as DateInterval, daysBack(90), now() ], [ 'last90Days' as DateInterval, daysBack(90), now() ],
[ 'last180days' as DateInterval, daysBack(180), now() ], [ 'last180days' as DateInterval, daysBack(180), now() ],
[ 'last365Days' as DateInterval, daysBack(365), now() ], [ 'last365Days' as DateInterval, daysBack(365), now() ],
])('proper result is returned', (interval, expectedStartDate, expectedEndDate) => { ])('returns proper result', (interval, expectedStartDate, expectedEndDate) => {
const { startDate, endDate } = intervalToDateRange(interval); const { startDate, endDate } = intervalToDateRange(interval);
expect(formatted(expectedStartDate)).toEqual(formatted(startDate)); expect(formatted(expectedStartDate)).toEqual(formatted(startDate));

View file

@ -2,7 +2,7 @@ import { buildQrCodeUrl, QrCodeFormat, QrErrorCorrection } from '../../../src/ut
describe('qrCodes', () => { describe('qrCodes', () => {
describe('buildQrCodeUrl', () => { describe('buildQrCodeUrl', () => {
test.each([ it.each([
[ [
'foo.com', 'foo.com',
{ size: 530, format: 'svg' as QrCodeFormat, margin: 0, errorCorrection: 'L' as QrErrorCorrection }, { size: 530, format: 'svg' as QrCodeFormat, margin: 0, errorCorrection: 'L' as QrErrorCorrection },

View file

@ -15,7 +15,7 @@ describe('<DoughnutChartLegend />', () => {
}, },
}); });
test('renders the expected amount of items with expected colors and labels', () => { it('renders the expected amount of items with expected colors and labels', () => {
const wrapper = shallow(<DoughnutChartLegend chart={chart} />); const wrapper = shallow(<DoughnutChartLegend chart={chart} />);
const items = wrapper.find('li'); const items = wrapper.find('li');

View file

@ -60,7 +60,7 @@ describe('visitsTypeHelpers', () => {
}); });
describe('toApiParams', () => { describe('toApiParams', () => {
test.each([ it.each([
[ { page: 5, itemsPerPage: 100 } as VisitsParams, { page: 5, itemsPerPage: 100 } as ShlinkVisitsParams ], [ { page: 5, itemsPerPage: 100 } as VisitsParams, { page: 5, itemsPerPage: 100 } as ShlinkVisitsParams ],
[ [
{ {