diff --git a/test/mocks/WindowMock.ts b/test/__mocks__/Window.mock.ts similarity index 100% rename from test/mocks/WindowMock.ts rename to test/__mocks__/Window.mock.ts diff --git a/test/common/services/ImageDownloader.test.ts b/test/common/services/ImageDownloader.test.ts index 9a640bcd..20a381cf 100644 --- a/test/common/services/ImageDownloader.test.ts +++ b/test/common/services/ImageDownloader.test.ts @@ -1,7 +1,7 @@ import { Mock } from 'ts-mockery'; import { AxiosInstance } from 'axios'; import { ImageDownloader } from '../../../src/common/services/ImageDownloader'; -import { windowMock } from '../../mocks/WindowMock'; +import { windowMock } from '../../__mocks__/Window.mock'; describe('ImageDownloader', () => { const get = jest.fn(); diff --git a/test/common/services/ReportExporter.test.ts b/test/common/services/ReportExporter.test.ts index 5fd5f941..02097005 100644 --- a/test/common/services/ReportExporter.test.ts +++ b/test/common/services/ReportExporter.test.ts @@ -1,6 +1,6 @@ import { ReportExporter } from '../../../src/common/services/ReportExporter'; import { NormalizedVisit } from '../../../src/visits/types'; -import { windowMock } from '../../mocks/WindowMock'; +import { windowMock } from '../../__mocks__/Window.mock'; import { ExportableShortUrl } from '../../../src/short-urls/data'; describe('ReportExporter', () => { diff --git a/test/servers/services/ServersExporter.test.ts b/test/servers/services/ServersExporter.test.ts index 54e93fcf..0aa73ec1 100644 --- a/test/servers/services/ServersExporter.test.ts +++ b/test/servers/services/ServersExporter.test.ts @@ -1,7 +1,7 @@ import { Mock } from 'ts-mockery'; import ServersExporter from '../../../src/servers/services/ServersExporter'; import { LocalStorage } from '../../../src/utils/services/LocalStorage'; -import { appendChild, removeChild, windowMock } from '../../mocks/WindowMock'; +import { appendChild, removeChild, windowMock } from '../../__mocks__/Window.mock'; describe('ServersExporter', () => { const storageMock = Mock.of({ diff --git a/test/short-urls/helpers/ShortUrlsRow.test.tsx b/test/short-urls/helpers/ShortUrlsRow.test.tsx index 8812f962..98b4cfdd 100644 --- a/test/short-urls/helpers/ShortUrlsRow.test.tsx +++ b/test/short-urls/helpers/ShortUrlsRow.test.tsx @@ -1,35 +1,25 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { assoc, toString } from 'ramda'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { ExternalLink } from 'react-external-link'; import { formatISO } from 'date-fns'; import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow'; -import { Tag } from '../../../src/tags/helpers/Tag'; -import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; import { TimeoutToggle } from '../../../src/utils/helpers/hooks'; import { ShortUrl } from '../../../src/short-urls/data'; import { ReachableServer } from '../../../src/servers/data'; -import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon'; -import { Time } from '../../../src/utils/Time'; import { parseDate } from '../../../src/utils/helpers/date'; +import { renderWithEvents } from '../../__helpers__/setUpTest'; +import { OptionalString } from '../../../src/utils/utils'; +import { colorGeneratorMock } from '../../utils/services/__mocks__/ColorGenerator.mock'; describe('', () => { - let wrapper: ShallowWrapper; - const mockFunction = () => null; - const ShortUrlsRowMenu = mockFunction; const timeoutToggle = jest.fn(() => true); const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle; - const colorGenerator = Mock.of({ - getColorForKey: jest.fn(), - setColorForKey: jest.fn(), - }); const server = Mock.of({ url: 'https://doma.in' }); const shortUrl: ShortUrl = { shortCode: 'abc123', - shortUrl: 'http://doma.in/abc123', - longUrl: 'http://foo.com/bar', + shortUrl: 'https://doma.in/abc123', + longUrl: 'https://foo.com/bar', dateCreated: formatISO(parseDate('2018-05-23 18:30:41', 'yyyy-MM-dd HH:mm:ss')), - tags: ['nodejs', 'reactjs'], + tags: [], visitsCount: 45, domain: null, meta: { @@ -38,99 +28,73 @@ describe('', () => { maxVisits: null, }, }; - const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useTimeoutToggle); - const createWrapper = (title?: string | null) => { - wrapper = shallow( - , - ); - - return wrapper; - }; - - beforeEach(() => createWrapper()); - afterEach(() => wrapper.unmount()); + const ShortUrlsRow = createShortUrlsRow(() => ShortUrlsRowMenu, colorGeneratorMock, useTimeoutToggle); + const setUp = (title?: OptionalString, tags: string[] = []) => renderWithEvents( + + + null} /> + +
, + ); it.each([ [null, 6], [undefined, 6], ['The title', 7], ])('renders expected amount of columns', (title, expectedAmount) => { - const wrapper = createWrapper(title); - const cols = wrapper.find('td'); - - expect(cols).toHaveLength(expectedAmount); + setUp(title); + expect(screen.getAllByRole('cell')).toHaveLength(expectedAmount); }); it('renders date in first column', () => { - const col = wrapper.find('td').first(); - const date = col.find(Time); - - expect(date.html()).toContain('>2018-05-23 18:30'); + setUp(); + expect(screen.getAllByRole('cell')[0]).toHaveTextContent('2018-05-23 18:30'); }); - it('renders short URL in second row', () => { - const col = wrapper.find('td').at(1); - const link = col.find(ExternalLink); + it.each([ + [1, shortUrl.shortUrl], + [2, shortUrl.longUrl], + ])('renders expected links on corresponding columns', (colIndex, expectedLink) => { + setUp(); - expect(link.prop('href')).toEqual(shortUrl.shortUrl); + const col = screen.getAllByRole('cell')[colIndex]; + const link = col.querySelector('a'); + + expect(link).toHaveAttribute('href', expectedLink); }); - it('renders long URL in third row', () => { - const col = wrapper.find('td').at(2); - const link = col.find(ExternalLink); + it.each([ + ['My super cool title', 'My super cool title'], + [undefined, shortUrl.longUrl], + ])('renders title when short URL has it', (title, expectedContent) => { + setUp(title); - expect(link.prop('href')).toEqual(shortUrl.longUrl); + const titleSharedCol = screen.getAllByRole('cell')[2]; + + expect(titleSharedCol.querySelector('a')).toHaveAttribute('href', shortUrl.longUrl); + expect(titleSharedCol).toHaveTextContent(expectedContent); }); - it('renders title when short URL has it', () => { - const wrapper = createWrapper('My super cool title'); - const cols = wrapper.find('td'); - const titleSharedCol = cols.at(2).find(ExternalLink); - const dedicatedShortUrlCol = cols.at(3).find(ExternalLink); + it.each([ + [[], ['No tags']], + [['nodejs', 'reactjs'], ['nodejs', 'reactjs']], + ])('renders list of tags in fourth row', (tags, expectedContents) => { + setUp(undefined, tags); + const cell = screen.getAllByRole('cell')[3]; - expect(titleSharedCol).toHaveLength(1); - expect(dedicatedShortUrlCol).toHaveLength(1); - expect(titleSharedCol.prop('href')).toEqual(shortUrl.longUrl); - expect(dedicatedShortUrlCol.prop('href')).toEqual(shortUrl.longUrl); - expect(titleSharedCol.html()).toContain('My super cool title'); - expect(dedicatedShortUrlCol.prop('children')).not.toBeDefined(); - }); - - describe('renders list of tags in fourth row', () => { - it('with tags', () => { - const col = wrapper.find('td').at(3); - const tags = col.find(Tag); - - expect(tags).toHaveLength(shortUrl.tags.length); - shortUrl.tags.forEach((tagValue, index) => { - const tag = tags.at(index); - - expect(tag.prop('text')).toEqual(tagValue); - }); - }); - - it('without tags', () => { - wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) }); - - const col = wrapper.find('td').at(3); - - expect(col.text()).toContain('No tags'); - }); + expectedContents.forEach((content) => expect(cell).toHaveTextContent(content)); }); it('renders visits count in fifth row', () => { - const col = wrapper.find('td').at(4); - - expect(col.html()).toContain(toString(shortUrl.visitsCount)); + setUp(); + expect(screen.getAllByRole('cell')[4]).toHaveTextContent(`${shortUrl.visitsCount}`); }); - it('updates state when copied to clipboard', () => { - const col = wrapper.find('td').at(1); - const menu = col.find(CopyToClipboardIcon); + it('updates state when copied to clipboard', async () => { + const { user } = setUp(); - expect(menu).toHaveLength(1); expect(timeoutToggle).not.toHaveBeenCalled(); - menu.simulate('copy'); + await user.click(screen.getByRole('img', { hidden: true })); expect(timeoutToggle).toHaveBeenCalledTimes(1); }); }); diff --git a/test/tags/TagsTable.test.tsx b/test/tags/TagsTable.test.tsx index 130bf71f..aae618ec 100644 --- a/test/tags/TagsTable.test.tsx +++ b/test/tags/TagsTable.test.tsx @@ -1,24 +1,21 @@ +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { shallow, ShallowWrapper } from 'enzyme'; import { useLocation } from 'react-router-dom'; import { TagsTable as createTagsTable } from '../../src/tags/TagsTable'; import { SelectedServer } from '../../src/servers/data'; import { rangeOf } from '../../src/utils/utils'; -import { SimplePaginator } from '../../src/common/SimplePaginator'; import { NormalizedTag } from '../../src/tags/data'; +import { renderWithEvents } from '../__helpers__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn() })); describe('', () => { - const TagsTableRow = () => null; const orderByColumn = jest.fn(); - const TagsTable = createTagsTable(TagsTableRow); + const TagsTable = createTagsTable(({ tag }) => TagsTableRow [{tag.tag}]); const tags = (amount: number) => rangeOf(amount, (i) => `tag_${i}`); - let wrapper: ShallowWrapper; - const createWrapper = (sortedTags: string[] = [], search = '') => { + const setUp = (sortedTags: string[] = [], search = '') => { (useLocation as any).mockReturnValue({ search }); - - wrapper = shallow( + return renderWithEvents( Mock.of({ tag }))} selectedServer={Mock.all()} @@ -26,20 +23,15 @@ describe('', () => { orderByColumn={() => orderByColumn} />, ); - - return wrapper; }; afterEach(jest.clearAllMocks); - afterEach(() => wrapper?.unmount()); it('renders empty result if there are no tags', () => { - const wrapper = createWrapper(); - const regularRows = wrapper.find('tbody').find('tr'); - const tagRows = wrapper.find(TagsTableRow); + setUp(); - expect(regularRows).toHaveLength(1); - expect(tagRows).toHaveLength(0); + expect(screen.queryByText(/^TagsTableRow/)).not.toBeInTheDocument(); + expect(screen.getByText('No results found')).toBeInTheDocument(); }); it.each([ @@ -50,10 +42,10 @@ describe('', () => { [tags(30), 20], [tags(100), 20], ])('renders as many rows as there are in current page', (filteredTags, expectedRows) => { - const wrapper = createWrapper(filteredTags); - const tagRows = wrapper.find(TagsTableRow); + setUp(filteredTags); - expect(tagRows).toHaveLength(expectedRows); + expect(screen.getAllByText(/^TagsTableRow/)).toHaveLength(expectedRows); + expect(screen.queryByText('No results found')).not.toBeInTheDocument(); }); it.each([ @@ -64,10 +56,8 @@ describe('', () => { [tags(30), 1], [tags(100), 1], ])('renders paginator if there are more than one page', (filteredTags, expectedPaginators) => { - const wrapper = createWrapper(filteredTags); - const paginator = wrapper.find(SimplePaginator); - - expect(paginator).toHaveLength(expectedPaginators); + const { container } = setUp(filteredTags); + expect(container.querySelectorAll('.sticky-card-paginator')).toHaveLength(expectedPaginators); }); it.each([ @@ -78,30 +68,30 @@ describe('', () => { [5, 7, 80], [6, 0, 0], ])('renders page from query if present', (page, expectedRows, offset) => { - const wrapper = createWrapper(tags(87), `page=${page}`); - const tagRows = wrapper.find(TagsTableRow); + setUp(tags(87), `page=${page}`); + + const tagRows = screen.queryAllByText(/^TagsTableRow/); expect(tagRows).toHaveLength(expectedRows); - tagRows.forEach((row, index) => { - expect(row.prop('tag')).toEqual(expect.objectContaining({ tag: `tag_${index + offset + 1}` })); - }); + tagRows.forEach((row, index) => expect(row).toHaveTextContent(`[tag_${index + offset + 1}]`)); }); - it('allows changing current page in paginator', () => { - const wrapper = createWrapper(tags(100)); + it('allows changing current page in paginator', async () => { + const { user, container } = setUp(tags(100)); - expect(wrapper.find(SimplePaginator).prop('currentPage')).toEqual(1); - (wrapper.find(SimplePaginator).prop('setCurrentPage') as Function)(5); - expect(wrapper.find(SimplePaginator).prop('currentPage')).toEqual(5); + expect(container.querySelector('.active')).toHaveTextContent('1'); + await user.click(screen.getByText('5')); + expect(container.querySelector('.active')).toHaveTextContent('5'); }); - it('orders tags when column is clicked', () => { - const wrapper = createWrapper(tags(100)); + it('orders tags when column is clicked', async () => { + const { user } = setUp(tags(100)); + const headers = screen.getAllByRole('columnheader'); expect(orderByColumn).not.toHaveBeenCalled(); - wrapper.find('thead').find('th').first().simulate('click'); - wrapper.find('thead').find('th').at(2).simulate('click'); - wrapper.find('thead').find('th').at(1).simulate('click'); + await user.click(headers[0]); + await user.click(headers[2]); + await user.click(headers[1]); expect(orderByColumn).toHaveBeenCalledTimes(3); }); }); diff --git a/test/tags/TagsTableRow.test.tsx b/test/tags/TagsTableRow.test.tsx index ffced252..4974f621 100644 --- a/test/tags/TagsTableRow.test.tsx +++ b/test/tags/TagsTableRow.test.tsx @@ -1,75 +1,72 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { Link } from 'react-router-dom'; -import { DropdownItem } from 'reactstrap'; +import { MemoryRouter } from 'react-router-dom'; import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow'; import { ReachableServer } from '../../src/servers/data'; -import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; -import { DropdownBtnMenu } from '../../src/utils/DropdownBtnMenu'; +import { renderWithEvents } from '../__helpers__/setUpTest'; +import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock'; describe('', () => { - const DeleteTagConfirmModal = () => null; - const EditTagModal = () => null; - const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal, Mock.all()); - let wrapper: ShallowWrapper; - const createWrapper = (tagStats?: { visits?: number; shortUrls?: number }) => { - wrapper = shallow( - ({ id: 'abc123' })} - />, - ); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const TagsTableRow = createTagsTableRow( + ({ isOpen }) => DeleteTagConfirmModal {isOpen ? 'OPEN' : 'CLOSED'}, + ({ isOpen }) => EditTagModal {isOpen ? 'OPEN' : 'CLOSED'}, + colorGeneratorMock, + ); + const setUp = (tagStats?: { visits?: number; shortUrls?: number }) => renderWithEvents( + + + + ({ id: 'abc123' })} + /> + +
+ , + ); it.each([ [undefined, '0', '0'], [{ shortUrls: 10, visits: 3480 }, '10', '3,480'], ])('shows expected tag stats', (stats, expectedShortUrls, expectedVisits) => { - const wrapper = createWrapper(stats); - const links = wrapper.find(Link); - const shortUrlsLink = links.first(); - const visitsLink = links.last(); + setUp(stats); - expect(shortUrlsLink.prop('children')).toEqual(expectedShortUrls); - expect(shortUrlsLink.prop('to')).toEqual(`/server/abc123/list-short-urls/1?tags=${encodeURIComponent('foo&bar')}`); - expect(visitsLink.prop('children')).toEqual(expectedVisits); - expect(visitsLink.prop('to')).toEqual('/server/abc123/tag/foo&bar/visits'); + const [shortUrlsLink, visitsLink] = screen.getAllByRole('link'); + + expect(shortUrlsLink).toHaveTextContent(expectedShortUrls); + expect(shortUrlsLink).toHaveAttribute( + 'href', + `/server/abc123/list-short-urls/1?tags=${encodeURIComponent('foo&bar')}`, + ); + expect(visitsLink).toHaveTextContent(expectedVisits); + expect(visitsLink).toHaveAttribute('href', '/server/abc123/tag/foo&bar/visits'); }); - it('allows toggling dropdown menu', () => { - const wrapper = createWrapper(); + it('allows toggling dropdown menu', async () => { + const { user } = setUp(); - expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(false); - (wrapper.find(DropdownBtnMenu).prop('toggle') as Function)(); - expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(true); + expect(screen.queryByRole('menu')).not.toBeInTheDocument(); + await user.click(screen.getByRole('button')); + expect(screen.queryByRole('menu')).toBeInTheDocument(); }); - it('allows toggling modals through dropdown items', () => { - const wrapper = createWrapper(); - const items = wrapper.find(DropdownItem); + it('allows toggling modals through dropdown items', async () => { + const { user } = setUp(); + const clickItemOnIndex = async (index: 0 | 1) => { + await user.click(screen.getByRole('button')); + await user.click(screen.getAllByRole('menuitem')[index]); + }; - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); - items.first().simulate('click'); - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); + expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('CLOSED'); + expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('OPEN'); + await clickItemOnIndex(0); + expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('OPEN'); + expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('CLOSED'); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); - items.last().simulate('click'); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); - }); - - it('allows toggling modals through the modals themselves', () => { - const wrapper = createWrapper(); - - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); - (wrapper.find(EditTagModal).prop('toggle') as Function)(); - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); - - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); - (wrapper.find(DeleteTagConfirmModal).prop('toggle') as Function)(); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); + expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('CLOSED'); + expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('OPEN'); + await clickItemOnIndex(1); + expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('OPEN'); + expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('CLOSED'); }); }); diff --git a/test/utils/services/__mocks__/ColorGenerator.mock.ts b/test/utils/services/__mocks__/ColorGenerator.mock.ts new file mode 100644 index 00000000..c7fcf522 --- /dev/null +++ b/test/utils/services/__mocks__/ColorGenerator.mock.ts @@ -0,0 +1,8 @@ +import { Mock } from 'ts-mockery'; +import { ColorGenerator } from '../../../../src/utils/services/ColorGenerator'; + +export const colorGeneratorMock = Mock.of({ + getColorForKey: jest.fn(() => 'red'), + setColorForKey: jest.fn(), + isColorLightForKey: jest.fn(() => false), +});