From 63b4d9fdc067b5ac2ce869f46629363318a1138e Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 25 Jun 2020 18:04:01 -0400 Subject: [PATCH] More frontend test cleanup (#8919) --- .../__tests__/ArticleCoverImage.test.jsx | 6 +- .../__tests__/ImageUploader.test.jsx | 2 +- .../articles/__tests__/Article.test.jsx | 20 +++-- app/javascript/chat/__tests__/chat.test.jsx | 30 ++++--- .../chat/__tests__/content.test.jsx | 24 ++--- .../chat/__tests__/inviteForm.test.jsx | 6 +- .../__tests__/leaveMembershipSection.test.jsx | 7 +- .../chat/__tests__/membership.test.jsx | 18 ++-- .../chat/__tests__/modFaqSection.test.jsx | 8 +- .../chat/__tests__/modSection.test.jsx | 8 +- .../chat/__tests__/personalSetting.test.jsx | 12 +-- .../chat/__tests__/requestManager.test.jsx | 35 +++++--- .../requestedMembershipSection.test.jsx | 8 +- .../chat/__tests__/settingsForm.test.jsx | 10 +-- .../__tests__/githubRepos.test.jsx | 9 +- .../__tests__/TagsFollowed.test.jsx | 8 +- .../__tests__/ContactViaConnect.test.jsx | 8 +- .../__tests__/ListingFilterTags.test.jsx | 25 +++--- .../ListingFiltersCategories.test.jsx | 13 ++- .../listings/__tests__/MessageModal.test.jsx | 52 ++++++++--- .../listings/__tests__/Modal.test.jsx | 5 +- .../__tests__/ModalBackground.test.jsx | 5 +- .../__tests__/NextPageButton.test.jsx | 7 +- .../listings/__tests__/SelectedTags.test.jsx | 18 ++-- .../listings/__tests__/SingleListing.test.jsx | 52 ++++++----- .../singleArticle/singleArticle.test.jsx | 32 ++++--- .../onboarding/__tests__/Onboarding.test.jsx | 86 ++++++++---------- .../_tests/EmailPreferencesForm.test.jsx | 30 ++++--- .../components/_tests/FollowTags.test.jsx | 65 +++++++------- .../components/_tests/FollowUsers.test.jsx | 32 ++++--- .../components/_tests/ProfileForm.test.jsx | 17 ++-- .../__tests__/OrganizationPicker.test.jsx | 4 +- .../__tests__/readingList.test.jsx | 12 +-- .../__tests__/ItemListItem.test.jsx | 78 ++++++++++------ .../ItemListItemArchiveButton.test.jsx | 7 +- .../__tests__/ItemListLoadMoreButton.test.jsx | 5 +- .../__tests__/ItemListTags.test.jsx | 6 +- .../__tests__/sidebarUser.test.jsx | 90 +++++++++++++------ jest.config.js | 4 +- 39 files changed, 523 insertions(+), 341 deletions(-) diff --git a/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx b/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx index 48c9fe4bb..ca9442723 100644 --- a/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx +++ b/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx @@ -46,14 +46,14 @@ describe('', () => { }); it('shows the change and remove buttons', () => { - const { getByText } = render( + const { queryByText } = render( , ); - getByText('Change'); - getByText('Remove'); + expect(queryByText('Change')).toBeDefined(); + expect(queryByText('Remove')).toBeDefined(); }); it('allows trigger the correct function for removal', async () => { diff --git a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx index 5efe814af..dde983f59 100644 --- a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx +++ b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx @@ -1,8 +1,8 @@ import { h } from 'preact'; import { render, fireEvent, waitForElement } from '@testing-library/preact'; import { axe } from 'jest-axe'; -import { ImageUploader } from '../ImageUploader'; import fetch from 'jest-fetch-mock'; +import { ImageUploader } from '../ImageUploader'; import '@testing-library/jest-dom'; global.fetch = fetch; diff --git a/app/javascript/articles/__tests__/Article.test.jsx b/app/javascript/articles/__tests__/Article.test.jsx index 0babb2ee3..cec989dca 100644 --- a/app/javascript/articles/__tests__/Article.test.jsx +++ b/app/javascript/articles/__tests__/Article.test.jsx @@ -127,7 +127,7 @@ describe('
component', () => { }); it('should render with an organization', () => { - const { getByAltText } = render( + const { queryByAltText } = render(
component', () => { />, ); - getByAltText('Web info-mediaries logo'); - getByAltText('Emil99 profile'); + expect(queryByAltText('Web info-mediaries logo')).toBeDefined(); + expect(queryByAltText('Emil99 profile')).toBeDefined(); }); it('should render with a flare tag', () => { - const { getByText } = render( + const { queryByText } = render(
, ); - getByText('#javascript', { selector: 'span' }); + expect(queryByText('#javascript', { selector: 'span' })).toBeDefined(); }); it('should render with a snippet result', () => { - const { getByText } = render( + const { queryByText } = render(
component', () => { />, ); - getByText( - '…copying Rest withdrawal Handcrafted multi-state Pre-emptive e-markets feed...overriding RSS Fantastic Plastic Gloves invoice productize systemic Monaco…', - ); + expect( + queryByText( + '…copying Rest withdrawal Handcrafted multi-state Pre-emptive e-markets feed...overriding RSS Fantastic Plastic Gloves invoice productize systemic Monaco…', + ), + ).toBeDefined(); }); it('should render with reactions', () => { diff --git a/app/javascript/chat/__tests__/chat.test.jsx b/app/javascript/chat/__tests__/chat.test.jsx index 6c9589192..3ddc02d23 100644 --- a/app/javascript/chat/__tests__/chat.test.jsx +++ b/app/javascript/chat/__tests__/chat.test.jsx @@ -214,7 +214,7 @@ describe('', () => { it('should collapse and expand chat channels properly', async () => { fetch.mockResponse(getMockResponse()); - const { getByText, getByLabelText, getByTitle } = render( + const { queryByText, queryByLabelText, getByTitle, queryByTitle } = render( , ); @@ -229,16 +229,22 @@ describe('', () => { fireEvent.click(openToggleButton); // // chat channels - getByTitle('Collapse channels'); - getByLabelText('Toggle channel search'); - getByText('all', { - selector: 'button', - }); - getByText('direct', { - selector: 'button', - }); - getByText('group', { - selector: 'button', - }); + expect(queryByTitle('Collapse channels')).toBeDefined(); + expect(queryByLabelText('Toggle channel search')).toBeDefined(); + expect( + queryByText('all', { + selector: 'button', + }), + ).toBeDefined(); + expect( + queryByText('direct', { + selector: 'button', + }), + ).toBeDefined(); + expect( + queryByText('group', { + selector: 'button', + }), + ).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/content.test.jsx b/app/javascript/chat/__tests__/content.test.jsx index c0b3fde99..0780a28b1 100644 --- a/app/javascript/chat/__tests__/content.test.jsx +++ b/app/javascript/chat/__tests__/content.test.jsx @@ -46,19 +46,21 @@ describe('', () => { it('should render', () => { const channelRequestResource = getChannelRequestData(); - const { getByText, getByTitle } = render( + const { queryByText, queryByTitle } = render( , ); // Ensure the two buttons render - getByTitle('exit'); - getByTitle('fullscreen'); + expect(queryByTitle('exit')).toBeDefined(); + expect(queryByTitle('fullscreen')).toBeDefined(); // Simple check if the component to request joining a channel appears. // The component itself is tested it in it's own test suite. - getByText( - 'You are not a member of this group yet. Send a request to join.', - ); + expect( + queryByText( + 'You are not a member of this group yet. Send a request to join.', + ), + ).toBeDefined(); }); }); @@ -73,12 +75,14 @@ describe('', () => { it('should render', () => { const loadinUserResource = getLoadingUserData(); - const { getByTitle } = render(); + const { queryByTitle } = render( + , + ); // Ensure the two buttons render - getByTitle('exit'); - getByTitle('fullscreen'); - getByTitle('Loading user'); + expect(queryByTitle('exit')).toBeDefined(); + expect(queryByTitle('fullscreen')).toBeDefined(); + expect(queryByTitle('Loading user')).toBeDefined(); }); }); /* diff --git a/app/javascript/chat/__tests__/inviteForm.test.jsx b/app/javascript/chat/__tests__/inviteForm.test.jsx index a95e9c268..4a6dc7f6e 100644 --- a/app/javascript/chat/__tests__/inviteForm.test.jsx +++ b/app/javascript/chat/__tests__/inviteForm.test.jsx @@ -12,12 +12,12 @@ describe('', () => { }); it('should render with no usernames', () => { - const { getByLabelText, getByText } = render( + const { queryByLabelText, queryByText } = render( , ); - getByLabelText('Usernames to invite'); - getByText('Submit'); + expect(queryByLabelText('Usernames to invite')).toBeDefined(); + expect(queryByText('Submit')).toBeDefined(); }); it('should render with usernames to invite', () => { diff --git a/app/javascript/chat/__tests__/leaveMembershipSection.test.jsx b/app/javascript/chat/__tests__/leaveMembershipSection.test.jsx index d8cd84ee9..6e9f7156c 100644 --- a/app/javascript/chat/__tests__/leaveMembershipSection.test.jsx +++ b/app/javascript/chat/__tests__/leaveMembershipSection.test.jsx @@ -12,9 +12,10 @@ describe('', () => { }); it('should render', () => { - const { getByText } = render(); - getByText('Danger Zone'); - getByText('Leave Channel'); + const { queryByText } = render(); + + expect(queryByText('Danger Zone')).toBeDefined(); + expect(queryByText('Leave Channel')).toBeDefined(); }); it('should have user leave channel when leave button is clicked', () => { diff --git a/app/javascript/chat/__tests__/membership.test.jsx b/app/javascript/chat/__tests__/membership.test.jsx index 6f18be230..3c0376081 100644 --- a/app/javascript/chat/__tests__/membership.test.jsx +++ b/app/javascript/chat/__tests__/membership.test.jsx @@ -146,18 +146,22 @@ describe('', () => { membershipType, currentMembershipRole, } = getMemberUser(); - const { getByText } = render( + const { queryByText } = render( , ); - getByText('+', { - selector: 'button', - }); - getByText('x', { - selector: 'button', - }); + expect( + queryByText('+', { + selector: 'button', + }), + ).toBeDefined(); + expect( + queryByText('x', { + selector: 'button', + }), + ).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/modFaqSection.test.jsx b/app/javascript/chat/__tests__/modFaqSection.test.jsx index 2ba710d0c..40eff7e1d 100644 --- a/app/javascript/chat/__tests__/modFaqSection.test.jsx +++ b/app/javascript/chat/__tests__/modFaqSection.test.jsx @@ -12,9 +12,11 @@ describe('', () => { }); it('should render', () => { - const { getByText } = render(); + const { queryByText } = render(); - getByText(/^Questions about Connect Channel moderation\? Contact/); - getByText('jane@doe.com'); + expect( + queryByText(/^Questions about Connect Channel moderation\? Contact/), + ).toBeDefined(); + expect(queryByText('jane@doe.com')).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/modSection.test.jsx b/app/javascript/chat/__tests__/modSection.test.jsx index 259a7aee2..b4036c208 100644 --- a/app/javascript/chat/__tests__/modSection.test.jsx +++ b/app/javascript/chat/__tests__/modSection.test.jsx @@ -12,10 +12,12 @@ describe('', () => { }); it('should render if the membership role is a moderator', () => { - const { getByTestId } = render(); + const { queryByTestId } = render( + , + ); // the and have their own tests. - getByTestId('invite-form'); - getByTestId('settings-form'); + expect(queryByTestId('invite-form')).toBeDefined(); + expect(queryByTestId('settings-form')).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/personalSetting.test.jsx b/app/javascript/chat/__tests__/personalSetting.test.jsx index 3678e6dd3..53760b5e0 100644 --- a/app/javascript/chat/__tests__/personalSetting.test.jsx +++ b/app/javascript/chat/__tests__/personalSetting.test.jsx @@ -14,18 +14,20 @@ describe('', () => { }); it('should render the the component', () => { - const { getByText, getByLabelText } = render( + const { queryByText, queryByLabelText } = render( , ); // get the section header - getByText('Personal Settings'); + expect(queryByText('Personal Settings')).toBeDefined(); // get the subsection header - getByText('Notifications'); + expect(queryByText('Notifications')).toBeDefined(); // form fields - getByLabelText('Receive Notifications for New Messages'); - getByText('Submit', { selector: 'button' }); + expect( + queryByLabelText('Receive Notifications for New Messages'), + ).toBeDefined(); + expect(queryByText('Submit', { selector: 'button' })).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/requestManager.test.jsx b/app/javascript/chat/__tests__/requestManager.test.jsx index 9c53ea436..80db3e5a7 100644 --- a/app/javascript/chat/__tests__/requestManager.test.jsx +++ b/app/javascript/chat/__tests__/requestManager.test.jsx @@ -1,7 +1,7 @@ import { h } from 'preact'; import { render, waitForElement } from '@testing-library/preact'; import { axe } from 'jest-axe'; -import RequestManager from '../requestManager'; +import RequestManager from '../requestManager'; const data = [ { @@ -13,16 +13,23 @@ const data = [ describe('', () => { it('should have no a11y violations', async () => { const { container } = render( - + , ); const results = await axe(container); expect(results).toHaveNoViolations(); }); - it('should have the proper elements', () => { - const { getByTestId, debug, getByText } = render( - + const { getByTestId, getByText } = render( + , ); getByText(/Joining Request/i); @@ -32,20 +39,28 @@ describe('', () => { expect(request.textContent).toContain('Accept'); }); - xit('should call the relavant handlers when the buttons are clicked', async ()=> { + it.skip('should call the relavant handlers when the buttons are clicked', async () => { const handleRequestRejection = jest.fn(); const handleRequestApproval = jest.fn(); const { getByText } = render( - + , ); const rejectButton = getByText(/Reject/i); const acceptButton = getByText(/Accept/i); rejectButton.click(); - await waitForElement(() => expect(handleRequestRejection).toHaveBeenCalledTimes(1)) + await waitForElement(() => + expect(handleRequestRejection).toHaveBeenCalledTimes(1), + ); acceptButton.click(); - await waitForElement(() => expect(handleRequestApproval).toHaveBeenCalledTimes(1)) - }) + await waitForElement(() => + expect(handleRequestApproval).toHaveBeenCalledTimes(1), + ); + }); }); diff --git a/app/javascript/chat/__tests__/requestedMembershipSection.test.jsx b/app/javascript/chat/__tests__/requestedMembershipSection.test.jsx index 3de5d2a07..c2310c713 100644 --- a/app/javascript/chat/__tests__/requestedMembershipSection.test.jsx +++ b/app/javascript/chat/__tests__/requestedMembershipSection.test.jsx @@ -79,14 +79,16 @@ describe('', () => { it('should render the membership list', () => { const { requestedMemberships, currentMembershipRole } = getMembershipData(); - const { getByText } = render( + const { queryByText } = render( , ); - getByText('Joining Request'); - getByText('+', { selector: 'button[data-membership-id]' }); + expect(queryByText('Joining Request')).toBeDefined(); + expect( + queryByText('+', { selector: 'button[data-membership-id]' }), + ).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/settingsForm.test.jsx b/app/javascript/chat/__tests__/settingsForm.test.jsx index 62ae49e8f..a4f06f38b 100644 --- a/app/javascript/chat/__tests__/settingsForm.test.jsx +++ b/app/javascript/chat/__tests__/settingsForm.test.jsx @@ -25,18 +25,18 @@ describe('', () => { }); it('should render the the component', () => { - const { getByText, getByLabelText } = render(getSettingsForm(data)); + const { queryByText, queryByLabelText } = render(getSettingsForm(data)); // title - getByText('Channel Settings'); + expect(queryByText('Channel Settings')).toBeDefined(); // description of channel - getByLabelText('Description'); + expect(queryByLabelText('Description')).toBeDefined(); // whether or not the channel is discoverable - getByLabelText('Channel Discoverable'); + expect(queryByLabelText('Channel Discoverable')).toBeDefined(); // submit buttton - getByText('Submit'); + expect(queryByText('Submit')).toBeDefined(); }); }); diff --git a/app/javascript/githubRepos/__tests__/githubRepos.test.jsx b/app/javascript/githubRepos/__tests__/githubRepos.test.jsx index 4d34fc447..514aa363b 100644 --- a/app/javascript/githubRepos/__tests__/githubRepos.test.jsx +++ b/app/javascript/githubRepos/__tests__/githubRepos.test.jsx @@ -223,17 +223,20 @@ describe('', () => { getByTitle('Loading GitHub repositories'); - await waitForElement(() => getByTestId('github-repos-list')); + const repoList = await waitForElement(() => + getByTestId('github-repos-list'), + ); // No need to test it's contents as this is the component // which has it's own tests. + expect(repoList).toBeDefined(); }); it('should render with no repositories', () => { fetch.mockResponse('[]'); - const { getByTitle } = render(); + const { queryByTitle } = render(); - getByTitle('Loading GitHub repositories'); + expect(queryByTitle('Loading GitHub repositories')).toBeDefined(); }); it('should render error message when repositories cannot be loaded', async () => { diff --git a/app/javascript/leftSidebar/__tests__/TagsFollowed.test.jsx b/app/javascript/leftSidebar/__tests__/TagsFollowed.test.jsx index 9c8a3e3e0..dc968ec41 100644 --- a/app/javascript/leftSidebar/__tests__/TagsFollowed.test.jsx +++ b/app/javascript/leftSidebar/__tests__/TagsFollowed.test.jsx @@ -46,10 +46,10 @@ describe('', () => { }); it('should render the tags followed when tags are passed in', () => { - const { getByTitle } = render(); + const { queryByTitle } = render(); - getByTitle('javascript tag'); - getByTitle('webdev tag'); - getByTitle('react tag'); + expect(queryByTitle('javascript tag')).toBeDefined(); + expect(queryByTitle('webdev tag')).toBeDefined(); + expect(queryByTitle('react tag')).toBeDefined(); }); }); diff --git a/app/javascript/listings/__tests__/ContactViaConnect.test.jsx b/app/javascript/listings/__tests__/ContactViaConnect.test.jsx index cec701780..2e1b3c618 100644 --- a/app/javascript/listings/__tests__/ContactViaConnect.test.jsx +++ b/app/javascript/listings/__tests__/ContactViaConnect.test.jsx @@ -16,11 +16,15 @@ describe('', () => { it('should render a checked check box opting in to open DMs', () => { const onChange = jest.fn(); - const { getByLabelText } = render( + const { queryByLabelText } = render( , ); - getByLabelText('Allow Users to Message Me Via In-App Chat (DEV Connect)'); + expect( + queryByLabelText( + 'Allow Users to Message Me Via In-App Chat (DEV Connect)', + ), + ).toBeDefined(); }); it('should fire a change event when clicking the checkbox', () => { diff --git a/app/javascript/listings/__tests__/ListingFilterTags.test.jsx b/app/javascript/listings/__tests__/ListingFilterTags.test.jsx index 44c166708..6f56f99eb 100644 --- a/app/javascript/listings/__tests__/ListingFilterTags.test.jsx +++ b/app/javascript/listings/__tests__/ListingFilterTags.test.jsx @@ -27,42 +27,45 @@ describe('', () => { describe('should render a search field', () => { it('should have "search" as placeholder', () => { - const { getByPlaceholderText } = renderListingFilterTags(); - getByPlaceholderText(/search/i); + const { queryByPlaceholderText } = renderListingFilterTags(); + + expect(queryByPlaceholderText(/search/i)).toBeDefined(); }); it(`should have "${getProps().message}" as default value`, () => { - const { getByDisplayValue } = renderListingFilterTags(); - getByDisplayValue(getProps().message); + const { queryByDisplayValue } = renderListingFilterTags(); + + expect(queryByDisplayValue(getProps().message)).toBeDefined(); }); it('should have auto-complete as off', () => { const { getByPlaceholderText } = renderListingFilterTags(); const input = getByPlaceholderText(/search/i); + expect(input.getAttribute('autoComplete')).toBe('off'); }); }); describe('', () => { it('should render the clear query button', () => { - const { getByTestId } = renderListingFilterTags(); - getByTestId('clear-query-button'); + const { queryByTestId } = renderListingFilterTags(); + + expect(queryByTestId('clear-query-button')).toBeDefined(); }); it('should not render the clear query button', () => { const propsWithoutQuery = { ...getProps(), query: '' }; - const { queryByTestId } = renderListingFilterTags( - propsWithoutQuery, - ); + const { queryByTestId } = renderListingFilterTags(propsWithoutQuery); expect(queryByTestId('clear-query-button')).toBeNull(); }); }); describe('', () => { it('should render the selected Tags', () => { - const { getByText } = renderListingFilterTags(); + const { queryByText } = renderListingFilterTags(); + getTags().forEach((tag) => { - getByText(`${tag}`); + expect(queryByText(`${tag}`)).toBeDefined(); }); }); }); diff --git a/app/javascript/listings/__tests__/ListingFiltersCategories.test.jsx b/app/javascript/listings/__tests__/ListingFiltersCategories.test.jsx index af24e8808..5accce6da 100644 --- a/app/javascript/listings/__tests__/ListingFiltersCategories.test.jsx +++ b/app/javascript/listings/__tests__/ListingFiltersCategories.test.jsx @@ -46,10 +46,11 @@ describe('', () => { it('should be "selected" when there is no category selected', () => { const propsWithoutCategory = { ...getProps(), category: '' }; - const { getByTestId } = renderListingFilterCategories( + const { queryByTestId } = renderListingFilterCategories( propsWithoutCategory, ); - getByTestId('selected'); + + expect(queryByTestId('selected')).toBeDefined(); }); it('should render a create listing link', () => { @@ -61,7 +62,9 @@ describe('', () => { it('should render a manage listings link', () => { const { getByText } = renderListingFilterCategories(); const manageListing = getByText(/manage listings/i); - expect(manageListing.getAttribute('href')).toContain('/listings/dashboard'); + expect(manageListing.getAttribute('href')).toContain( + '/listings/dashboard', + ); }); }); @@ -70,7 +73,9 @@ describe('', () => { const { getByText } = renderListingFilterCategories(); categories.forEach((category) => { const categoryLink = getByText(`${category.name}`); - expect(categoryLink.getAttribute('href')).toEqual(`/listings/${category.slug}`); + expect(categoryLink.getAttribute('href')).toEqual( + `/listings/${category.slug}`, + ); expect(categoryLink.textContent).toEqual(category.name); }); }); diff --git a/app/javascript/listings/__tests__/MessageModal.test.jsx b/app/javascript/listings/__tests__/MessageModal.test.jsx index e5fa54828..dee47a417 100644 --- a/app/javascript/listings/__tests__/MessageModal.test.jsx +++ b/app/javascript/listings/__tests__/MessageModal.test.jsx @@ -25,17 +25,24 @@ const getProps = () => ({ currentUserId: 1, message: 'Something', onChangeDraftingMessage: jest.fn(), - onSubmit: jest.fn() + onSubmit: jest.fn(), }); -const renderMessageModal = (listing) => render( - -); +const renderMessageModal = (listing) => + render(); describe('', () => { + it('should have no a11y violations', async () => { + const { container } = render(renderMessageModal(getDefaultListing())); + const results = await axe(container); + + expect(results).toHaveNoViolations(); + }); + it('should render a text-area', () => { - const { getByTestId } = renderMessageModal(getDefaultListing()); - getByTestId('listing-new-message'); + const { queryByTestId } = renderMessageModal(getDefaultListing()); + + expect(queryByTestId('listing-new-message')).toBeDefined(); }); describe('When the current user is the author', () => { @@ -45,13 +52,20 @@ describe('', () => { }; it('should show the information about contact with the current user', () => { - const { getByText } = renderMessageModal(listingWithCurrentUserId); - getByText('This is your active listing. Any member can contact you via this form.') + const { queryByText } = renderMessageModal(listingWithCurrentUserId); + + expect( + queryByText( + 'This is your active listing. Any member can contact you via this form.', + ), + ).toBeDefined(); }); it('should show the personalized message about the interactions', () => { const { getByTestId } = renderMessageModal(listingWithCurrentUserId); - expect(getByTestId('personal-message-about-interactions').textContent).toEqual('All private interactions must abide by the code of conduct') + expect( + getByTestId('personal-message-about-interactions').textContent, + ).toEqual('All private interactions must abide by the code of conduct'); }); }); @@ -62,15 +76,25 @@ describe('', () => { }; it('should show the message to contact the author', () => { - const { getByText } = renderMessageModal(listingWithDifferentCurrentUserId); + const { queryByText } = renderMessageModal( + listingWithDifferentCurrentUserId, + ); - getByText(`Contact ${listingWithDifferentCurrentUserId.author.name} via DEV Connect`); + expect( + queryByText( + `Contact ${listingWithDifferentCurrentUserId.author.name} via DEV Connect`, + ), + ).toBeDefined(); }); it('should show a generic message about the interactions', () => { - const { getByTestId } = renderMessageModal(listingWithDifferentCurrentUserId); - expect(getByTestId('generic-message-about-interactions').textContent).toEqual( - 'Message must be relevant and on-topic with the listing. All private interactions must abide by the code of conduct' + const { getByTestId } = renderMessageModal( + listingWithDifferentCurrentUserId, + ); + expect( + getByTestId('generic-message-about-interactions').textContent, + ).toEqual( + 'Message must be relevant and on-topic with the listing. All private interactions must abide by the code of conduct', ); }); }); diff --git a/app/javascript/listings/__tests__/Modal.test.jsx b/app/javascript/listings/__tests__/Modal.test.jsx index 75f438cf2..37e1a50fd 100644 --- a/app/javascript/listings/__tests__/Modal.test.jsx +++ b/app/javascript/listings/__tests__/Modal.test.jsx @@ -59,8 +59,9 @@ describe('', () => { ...getDefaultListing(), contact_via_connect: true, }; - const { getByTestId } = renderModal(listingWithContactViaConnectTrue); - getByTestId('listings-message-modal'); + const { queryByTestId } = renderModal(listingWithContactViaConnectTrue); + + expect(queryByTestId('listings-message-modal')).toBeDefined(); }); it('should not render the MessageModal when the listing.contact_via_connect is false', () => { diff --git a/app/javascript/listings/__tests__/ModalBackground.test.jsx b/app/javascript/listings/__tests__/ModalBackground.test.jsx index a21bdeaa0..d4c47b7de 100644 --- a/app/javascript/listings/__tests__/ModalBackground.test.jsx +++ b/app/javascript/listings/__tests__/ModalBackground.test.jsx @@ -17,8 +17,9 @@ describe('', () => { }); it('should render', () => { - const { getByTestId } = render(); - getByTestId('listings-modal-background'); + const { queryByTestId } = render(); + + expect(queryByTestId('listings-modal-background')).toBeDefined(); }); it('should call the onClick handler', () => { diff --git a/app/javascript/listings/__tests__/NextPageButton.test.jsx b/app/javascript/listings/__tests__/NextPageButton.test.jsx index 5558cdd4c..2aa2f277c 100644 --- a/app/javascript/listings/__tests__/NextPageButton.test.jsx +++ b/app/javascript/listings/__tests__/NextPageButton.test.jsx @@ -18,13 +18,14 @@ describe('', () => { }); it('should show a button', () => { - const {getByText} = render(); - getByText(/load more listings/i); + const { queryByText } = render(); + + expect(queryByText(/load more listings/i)).toBeDefined(); }); it('should call the onclick handler', () => { const onClick = jest.fn(); - const {getByText} = render(); + const { getByText } = render(); const button = getByText(/load more listings/i); button.click(); diff --git a/app/javascript/listings/__tests__/SelectedTags.test.jsx b/app/javascript/listings/__tests__/SelectedTags.test.jsx index af282374d..b02d2fd58 100644 --- a/app/javascript/listings/__tests__/SelectedTags.test.jsx +++ b/app/javascript/listings/__tests__/SelectedTags.test.jsx @@ -20,15 +20,16 @@ describe('', () => { }); it('should render all the selected tags', () => { - const { getByText } = renderSelectedTags(); - tags.forEach(tag => { - getByText(tag); + const { queryByText } = renderSelectedTags(); + + tags.forEach((tag) => { + expect(queryByText(tag)).toBeDefined(); }); }); it('should show the relevant links for each tag', () => { const { getByText } = renderSelectedTags(); - tags.forEach(tag => { + tags.forEach((tag) => { expect(getByText(tag).closest('a').href).toContain(`/listings?t=${tag}`); }); }); @@ -36,10 +37,17 @@ describe('', () => { it('should remove a tag', async () => { const onRemoveTag = jest.fn(); const onKeyPress = jest.fn(); - const { getAllByText, queryByText, debug } = render(); + const { getAllByText } = render( + , + ); const firstTagX = getAllByText('×')[0]; firstTagX.click(); + expect(onRemoveTag).toHaveBeenCalledTimes(1); }); }); diff --git a/app/javascript/listings/__tests__/SingleListing.test.jsx b/app/javascript/listings/__tests__/SingleListing.test.jsx index 617cc1d2a..c89dcae37 100644 --- a/app/javascript/listings/__tests__/SingleListing.test.jsx +++ b/app/javascript/listings/__tests__/SingleListing.test.jsx @@ -24,22 +24,23 @@ const listing = { }; describe('', () => { - const renderSingleListing = () => render( - { - return 'onAddTag'; - }} - onChangeCategory={() => { - return 'onChangeCategory'; - }} - listing={listing} - currentUserId={1} - onOpenModal={() => { - return 'onOpenModal'; - }} - isOpen={false} - /> - ); + const renderSingleListing = () => + render( + { + return 'onAddTag'; + }} + onChangeCategory={() => { + return 'onChangeCategory'; + }} + listing={listing} + currentUserId={1} + onOpenModal={() => { + return 'onOpenModal'; + }} + isOpen={false} + />, + ); it('should have no a11y violations', async () => { const { container } = renderSingleListing(); @@ -48,14 +49,15 @@ describe('', () => { }); it('shows a listing title', () => { - const { getByText } = renderSingleListing(); - getByText('Illo iure quos perspiciatis.'); + const { queryByText } = renderSingleListing(); + expect(queryByText('Illo iure quos perspiciatis.')).toBeDefined(); }); it('shows a dropdown', () => { - const { getByLabelText, getByText } = renderSingleListing(); - const dropdownButton = getByLabelText(/toggle dropdown menu/i); - getByText(/report abuse/i); + const { queryByLabelText, queryByText } = renderSingleListing(); + + expect(queryByLabelText(/toggle dropdown menu/i)).toBeDefined(); + expect(queryByText(/report abuse/i)).toBeDefined(); }); it('shows a listing tags', () => { @@ -73,11 +75,15 @@ describe('', () => { it('shows a listing author', () => { const { getByText } = renderSingleListing(); - expect(getByText('Mrs. Yoko Christiansen').href).toContain(`/mrschristiansenyoko`); + expect(getByText('Mrs. Yoko Christiansen').href).toContain( + `/mrschristiansenyoko`, + ); }); it('shows a listing location', () => { const { getByTestId } = renderSingleListing(); - expect(getByTestId('single-listing-location').href).toContain(`/listings/?q=West%20Refugio`); + expect(getByTestId('single-listing-location').href).toContain( + `/listings/?q=West%20Refugio`, + ); }); }); diff --git a/app/javascript/modCenter/singleArticle/singleArticle.test.jsx b/app/javascript/modCenter/singleArticle/singleArticle.test.jsx index 40d2f93b9..50125a62f 100644 --- a/app/javascript/modCenter/singleArticle/singleArticle.test.jsx +++ b/app/javascript/modCenter/singleArticle/singleArticle.test.jsx @@ -36,38 +36,48 @@ describe('', () => { }); it('renders the article title', () => { - const { getByText } = renderSingleArticle(); - getByText(testArticle.title); + const { queryByText } = renderSingleArticle(); + + expect(queryByText(testArticle.title)).toBeDefined(); }); it('renders the tags', () => { - const { getByText } = renderSingleArticle(); - getByText('discuss'); - getByText('javascript'); - getByText('beginners'); + const { queryByText } = renderSingleArticle(); + + expect(queryByText('discuss')).toBeDefined(); + expect(queryByText('javascript')).toBeDefined(); + expect(queryByText('beginners')).toBeDefined(); }); + it('renders the author name', () => { const { container } = renderSingleArticle(); const text = getNodeText(container.querySelector('.article-author')); expect(text).toContain(testArticle.user.name); }); + it('renders the hand wave emoji if the author has less than 3 articles ', () => { const { container } = renderSingleArticle(); const text = getNodeText(container.querySelector('.article-author')); expect(text).toContain('👋'); }); + it('renders the correct formatted published date', () => { - const { getByText } = renderSingleArticle(); - getByText('Jun 22'); + const { queryByText } = renderSingleArticle(); + + expect(queryByText('Jun 22')).toBeDefined(); }); + it('renders the correct formatted published date as a time if the date is the same day', () => { const today = new Date(); today.setSeconds('00'); testArticle.publishedAt = today.toISOString(); - const { getByText } = renderSingleArticle(testArticle); + + const { queryByText } = renderSingleArticle(testArticle); const readableTime = today.toLocaleTimeString().replace(':00 ', ' '); // looks like 8:05 PM - getByText(readableTime); + + expect(queryByText(readableTime)).toBeDefined(); }); + it('renders the iframes on click', () => { const { container } = renderSingleArticle(); container.querySelector('button.moderation-single-article').click(); @@ -80,6 +90,7 @@ describe('', () => { `${testArticle.path}/actions_panel`, ); }); + it('adds the opened class when opening an article', () => { const toggleArticle = jest.fn(); const { container } = render( @@ -96,6 +107,7 @@ describe('', () => { fireEvent.click( container.querySelector('button.moderation-single-article'), ); + expect( container.querySelector('.article-iframes-container').classList, ).toContain('opened'); diff --git a/app/javascript/onboarding/__tests__/Onboarding.test.jsx b/app/javascript/onboarding/__tests__/Onboarding.test.jsx index 124c1457c..4bbbc7058 100644 --- a/app/javascript/onboarding/__tests__/Onboarding.test.jsx +++ b/app/javascript/onboarding/__tests__/Onboarding.test.jsx @@ -10,17 +10,17 @@ global.fetch = fetch; // NOTE: the navigation and behaviour per component is tested in each components unit test. This file simply tests the ability to move forward and backward in a modal, and can probably be replaced by an end to end test at some point. describe('', () => { - - const renderOnboarding = () => render( - , - ) + const renderOnboarding = () => + render( + , + ); const getUserData = () => JSON.stringify({ followed_tag_names: ['javascript'], @@ -29,10 +29,10 @@ describe('', () => { username: 'username', }); const fakeEmptyResponse = JSON.stringify([]); - const { location } = window; beforeAll(() => { - document.head.innerHTML = ''; + document.head.innerHTML = + ''; document.body.setAttribute('data-user', getUserData()); }); @@ -43,13 +43,15 @@ describe('', () => { }); it('should render the IntroSlide first', () => { - const { getByTestId } = renderOnboarding(); - getByTestId('onboarding-intro-slide'); + const { queryByTestId } = renderOnboarding(); + + expect(queryByTestId('onboarding-intro-slide')).toBeDefined(); }); it('should allow the modal to move forward and backward a step where relevant', async () => { // combined back and forward into one test to avoid a long test running time const { getByTestId, getByText } = renderOnboarding(); + getByTestId('onboarding-intro-slide'); fetch.mockResponseOnce({}); @@ -59,26 +61,24 @@ describe('', () => { termsCheckbox.click(); // click to next step - const nextButton = await waitForElement(() => - getByText(/continue/i), - ); + const nextButton = await waitForElement(() => getByText(/continue/i)); fetch.mockResponse(fakeEmptyResponse); nextButton.click(); // we should be on the Follow tags step - await waitForElement(() => - getByTestId('onboarding-follow-tags'), - ); + await waitForElement(() => getByTestId('onboarding-follow-tags')); // click a step back - const backButton = getByTestId('back-button') + const backButton = getByTestId('back-button'); backButton.click(); // we should be on the Intro Slide step - await waitForElement(() => + const introSlide = await waitForElement(() => getByTestId('onboarding-intro-slide'), ); + + expect(introSlide).toBeDefined(); }); it("should skip the step when 'Skip for now' is clicked", async () => { @@ -92,30 +92,32 @@ describe('', () => { termsCheckbox.click(); // click to next step - const nextButton = await waitForElement(() => - getByText(/continue/i), - ); + const nextButton = await waitForElement(() => getByText(/continue/i)); fetch.mockResponse(fakeEmptyResponse); nextButton.click(); // we should be on the Follow tags step - await waitForElement(() => + const followTagsStep = await waitForElement(() => getByTestId('onboarding-follow-tags'), ); + expect(followTagsStep).toBeDefined(); + // click on skip for now const skipButton = getByText(/Skip for now/i); skipButton.click(); // we should be on the Profile Form step - await waitForElement(() => + const profileStep = await waitForElement(() => getByTestId('onboarding-profile-form'), ); - }) - it("should redirect the users to the correct steps every time", async () => { - const { getByTestId, getByText, debug } = renderOnboarding(); + expect(profileStep).toBeDefined(); + }); + + it('should redirect the users to the correct steps every time', async () => { + const { getByTestId, getByText } = renderOnboarding(); getByTestId('onboarding-intro-slide'); fetch.mockResponseOnce({}); @@ -125,26 +127,20 @@ describe('', () => { termsCheckbox.click(); // click to next step - const nextButton = await waitForElement(() => - getByText(/continue/i), - ); + const nextButton = await waitForElement(() => getByText(/continue/i)); fetch.mockResponse(fakeEmptyResponse); nextButton.click(); // we should be on the Follow tags step - await waitForElement(() => - getByTestId('onboarding-follow-tags'), - ); + await waitForElement(() => getByTestId('onboarding-follow-tags')); // click on skip for now let skipButton = getByText(/Skip for now/i); skipButton.click(); // we should be on the Profile Form step - await waitForElement(() => - getByTestId('onboarding-profile-form'), - ); + await waitForElement(() => getByTestId('onboarding-profile-form')); // click on skip for now skipButton = getByText(/Skip for now/i); @@ -152,9 +148,7 @@ describe('', () => { skipButton.click(); // we should be on the Follow Users step - await waitForElement(() => - getByTestId('onboarding-follow-users'), - ); + await waitForElement(() => getByTestId('onboarding-follow-users')); // click on skip for now skipButton = getByText(/Skip for now/i); @@ -177,10 +171,8 @@ describe('', () => { const finishButton = getByText(/Finish/i); finishButton.click(); - const href = window.location.href - expect(href).toEqual(url); + const { href } = window.location; - // TODO: we should be redirected to '/' - // await waitForElement(() => expect(href).toEqual('/')); + expect(href).toEqual(url); }); }); diff --git a/app/javascript/onboarding/components/_tests/EmailPreferencesForm.test.jsx b/app/javascript/onboarding/components/_tests/EmailPreferencesForm.test.jsx index 4ce3f671c..a0efd28fc 100644 --- a/app/javascript/onboarding/components/_tests/EmailPreferencesForm.test.jsx +++ b/app/javascript/onboarding/components/_tests/EmailPreferencesForm.test.jsx @@ -47,31 +47,37 @@ describe('EmailPreferencesForm', () => { }); it('should load the appropriate text', () => { - const { getByText } = renderEmailPreferencesForm(); + const { queryByText } = renderEmailPreferencesForm(); - getByText(/almost there!/i); - getByText(/review your email preferences before we continue./i); - getByText('Email preferences'); + expect(queryByText(/almost there!/i)).toBeDefined(); + expect( + queryByText(/review your email preferences before we continue./i), + ).toBeDefined(); + expect(queryByText('Email preferences')).toBeDefined(); }); it('should show the two checkboxes', () => { - const { getByLabelText } = renderEmailPreferencesForm(); - getByLabelText(/receive weekly newsletter/i); - getByLabelText(/receive a periodic digest/i); + const { queryByLabelText } = renderEmailPreferencesForm(); + + expect(queryByLabelText(/receive weekly newsletter/i)).toBeDefined(); + expect(queryByLabelText(/receive a periodic digest/i)).toBeDefined(); }); it('should render a stepper', () => { const { queryByTestId } = renderEmailPreferencesForm(); - queryByTestId('stepper'); + + expect(queryByTestId('stepper')).toBeDefined(); }); it('should render a back button', () => { - const { getByTestId } = renderEmailPreferencesForm(); - getByTestId('back-button'); + const { queryByTestId } = renderEmailPreferencesForm(); + + expect(queryByTestId('back-button')).toBeDefined(); }); it('should render a button that says Finish', () => { - const { getByText } = renderEmailPreferencesForm(); - getByText('Finish'); + const { queryByText } = renderEmailPreferencesForm(); + + expect(queryByText('Finish')).toBeDefined(); }); }); diff --git a/app/javascript/onboarding/components/_tests/FollowTags.test.jsx b/app/javascript/onboarding/components/_tests/FollowTags.test.jsx index f78f79047..57c17d5fc 100644 --- a/app/javascript/onboarding/components/_tests/FollowTags.test.jsx +++ b/app/javascript/onboarding/components/_tests/FollowTags.test.jsx @@ -8,21 +8,22 @@ import FollowTags from '../FollowTags'; global.fetch = fetch; describe('FollowTags', () => { - const renderFollowTags = () => render( - - ); + const renderFollowTags = () => + render( + , + ); const getUserData = () => JSON.stringify({ @@ -54,7 +55,8 @@ describe('FollowTags', () => { ]); beforeAll(() => { - document.head.innerHTML = ''; + document.head.innerHTML = + ''; document.body.setAttribute('data-user', getUserData()); }); @@ -72,17 +74,17 @@ describe('FollowTags', () => { it('should render the correct navigation button on first load', () => { fetch.mockResponseOnce(fakeTagsResponse); - const { getByText } = renderFollowTags(); - getByText(/skip for now/i); + const { queryByText } = renderFollowTags(); + + expect(queryByText(/skip for now/i)).toBeDefined(); }); it('should update the navigation button text, follow status and count when you follow a tag', async () => { fetch.mockResponse(fakeTagsResponse); - const { getByText, findByText, findAllByText, getByTestId } = renderFollowTags(); - const followButtons = await waitForElement(() => - findAllByText('Follow'), - ); + const { queryByText, findByText, findAllByText } = renderFollowTags(); + const followButtons = await waitForElement(() => findAllByText('Follow')); + findByText(/skip for now/); // click on the first follow button @@ -90,20 +92,21 @@ describe('FollowTags', () => { button.click(); // it should change to Following and update the count - await waitForElement(() => - findByText(/Following/i), - ); - getByText(/1 tag selected/i); - getByText(/continue/i); + await waitForElement(() => findByText(/Following/i)); + + expect(queryByText(/1 tag selected/i)).toBeDefined(); + expect(queryByText(/continue/i)).toBeDefined(); }); it('should render a stepper', () => { - const { getByTestId } = renderFollowTags(); - getByTestId('stepper'); + const { queryByTestId } = renderFollowTags(); + + expect(queryByTestId('stepper')).toBeDefined(); }); it('should render a back button', () => { - const { getByTestId } = renderFollowTags(); - getByTestId('back-button'); + const { queryByTestId } = renderFollowTags(); + + expect(queryByTestId('back-button')).toBeDefined(); }); }); diff --git a/app/javascript/onboarding/components/_tests/FollowUsers.test.jsx b/app/javascript/onboarding/components/_tests/FollowUsers.test.jsx index 9aed9c278..7ee37e5ee 100644 --- a/app/javascript/onboarding/components/_tests/FollowUsers.test.jsx +++ b/app/javascript/onboarding/components/_tests/FollowUsers.test.jsx @@ -3,8 +3,8 @@ import { render, waitForElement } from '@testing-library/preact'; import fetch from 'jest-fetch-mock'; import '@testing-library/jest-dom'; -import FollowUsers from '../FollowUsers'; import { axe } from 'jest-axe'; +import FollowUsers from '../FollowUsers'; global.fetch = fetch; @@ -81,20 +81,22 @@ describe('FollowUsers', () => { }); it('should render the correct navigation button on first load', () => { - const { getByText } = renderFollowUsers(); - getByText(/skip for now/i); + const { queryByText } = renderFollowUsers(); + + expect(queryByText(/skip for now/i)).toBeDefined(); }); it('should update the navigation button text and follow status when you follow users', async () => { fetch.mockResponse(fakeUsersResponse); - const { getByText, findByText, findAllByTestId } = renderFollowUsers(); + + const { queryByText, findByText, findAllByTestId } = renderFollowUsers(); const userButtons = await waitForElement(() => findAllByTestId('onboarding-user-button'), ); - getByText(/skip for now/i); - getByText("You're not following anyone"); + expect(queryByText(/skip for now/i)).toBeDefined(); + expect(queryByText("You're not following anyone")).toBeDefined(); // follow the first user const firstUser = userButtons[0]; @@ -102,8 +104,8 @@ describe('FollowUsers', () => { await waitForElement(() => findByText('Following')); - getByText("You're following 1 person"); - getByText(/continue/i); + expect(queryByText("You're following 1 person")).toBeDefined(); + expect(queryByText(/continue/i)).toBeDefined(); // follow the second user const secondUser = userButtons[1]; @@ -111,8 +113,8 @@ describe('FollowUsers', () => { await waitForElement(() => findByText('Following')); - getByText("You're following 2 people"); - getByText(/continue/i); + expect(queryByText("You're following 2 people")).toBeDefined(); + expect(queryByText(/continue/i)).toBeDefined(); }); it('should have a functioning de/select all toggle', async () => { @@ -144,12 +146,14 @@ describe('FollowUsers', () => { }); it('should render a stepper', () => { - const { getByTestId } = renderFollowUsers(); - getByTestId('stepper'); + const { queryByTestId } = renderFollowUsers(); + + expect(queryByTestId('stepper')).toBeDefined(); }); it('should render a back button', () => { - const { getByTestId } = renderFollowUsers(); - getByTestId('back-button'); + const { queryByTestId } = renderFollowUsers(); + + expect(queryByTestId('back-button')).toBeDefined(); }); }); diff --git a/app/javascript/onboarding/components/_tests/ProfileForm.test.jsx b/app/javascript/onboarding/components/_tests/ProfileForm.test.jsx index 77e7a0357..f8e700dd1 100644 --- a/app/javascript/onboarding/components/_tests/ProfileForm.test.jsx +++ b/app/javascript/onboarding/components/_tests/ProfileForm.test.jsx @@ -57,9 +57,10 @@ describe('ProfileForm', () => { }); it('should show the correct name and username', () => { - const { getByText } = renderProfileForm(); - getByText('username'); - getByText('firstname lastname'); + const { queryByText } = renderProfileForm(); + + expect(queryByText('username')).toBeDefined(); + expect(queryByText('firstname lastname')).toBeDefined(); }); it('should show the correct profile picture', () => { @@ -100,13 +101,15 @@ describe('ProfileForm', () => { }); it('should render a stepper', () => { - const { getByTestId } = renderProfileForm(); - getByTestId('stepper'); + const { queryByTestId } = renderProfileForm(); + + expect(queryByTestId('stepper')).toBeDefined(); }); it('should show the back button', () => { - const { getByTestId } = renderProfileForm(); - getByTestId('back-button'); + const { queryByTestId } = renderProfileForm(); + + expect(queryByTestId('back-button')).toBeDefined(); }); it('should update the text on the forward button', async () => { diff --git a/app/javascript/organization/__tests__/OrganizationPicker.test.jsx b/app/javascript/organization/__tests__/OrganizationPicker.test.jsx index 5df6c027a..bc29ec7ca 100644 --- a/app/javascript/organization/__tests__/OrganizationPicker.test.jsx +++ b/app/javascript/organization/__tests__/OrganizationPicker.test.jsx @@ -58,7 +58,7 @@ describe('', () => { }); it('renders an organization list with only "None" as an option when no organizations are passed in.', () => { - const { getByText } = render( + const { queryByText } = render( ', () => { />, ); - getByText('None'); + expect(queryByText('None')).toBeDefined(); }); }); diff --git a/app/javascript/readingList/__tests__/readingList.test.jsx b/app/javascript/readingList/__tests__/readingList.test.jsx index 11f874e90..359181d7f 100644 --- a/app/javascript/readingList/__tests__/readingList.test.jsx +++ b/app/javascript/readingList/__tests__/readingList.test.jsx @@ -67,14 +67,14 @@ describe('', () => { }); it('renders all the elements', () => { - const { getByPlaceholderText, getByText } = render( + const { queryByPlaceholderText, queryByText } = render( , ); - getByPlaceholderText('search your list'); - getByText('#discuss'); - getByText('View Archive'); - getByText('Your Archive List is Lonely'); - getByText('Reading List (empty)'); + expect(queryByPlaceholderText('search your list')).toBeDefined(); + expect(queryByText('#discuss')).toBeDefined(); + expect(queryByText('View Archive')).toBeDefined(); + expect(queryByText('Your Archive List is Lonely')).toBeDefined(); + expect(queryByText('Reading List (empty)')).toBeDefined(); }); }); diff --git a/app/javascript/readingList/components/__tests__/ItemListItem.test.jsx b/app/javascript/readingList/components/__tests__/ItemListItem.test.jsx index 4a77617a1..9aeef7d13 100644 --- a/app/javascript/readingList/components/__tests__/ItemListItem.test.jsx +++ b/app/javascript/readingList/components/__tests__/ItemListItem.test.jsx @@ -4,89 +4,113 @@ import { axe } from 'jest-axe'; import { ItemListItem } from '../ItemListItem'; import '../../../../assets/javascripts/lib/xss'; -const item = { - reactable: { - path: '/article', - title: 'Title', - published_date_string: 'Jun 29', - reading_time: 1, - user: { - username: 'bob', - profile_image_90: 'https://dummyimage.com/90x90', - name: 'Bob', +function getItem() { + return { + reactable: { + path: '/article', + title: 'Title', + published_date_string: 'Jun 29', + reading_time: 1, + user: { + username: 'bob', + profile_image_90: 'https://dummyimage.com/90x90', + name: 'Bob', + }, + tags: [{ name: 'discuss' }], }, - tags: [{ name: 'discuss' }], - }, -}; + }; +} describe('', () => { it('should have no a11y violations', async () => { - const { container } = render(); + const { container } = render(); const results = await axe(container); expect(results).toHaveNoViolations(); }); it('renders the title', () => { - const { getByText } = render(); - getByText(/Title/i); + const { queryByText } = render(); + + expect(queryByText(/Title/i)).toBeDefined(); }); it('renders the path', () => { - const { getByText } = render(); + const { getByText } = render(); + expect(getByText(/Title/i).closest('a').getAttribute('href')).toBe( '/article', ); }); it('renders a published date', () => { - const { getByText } = render(); - getByText(/Jun 29/i); + const { queryByText } = render(); + + expect(queryByText(/Jun 29/i)).toBeDefined(); }); it('renders a profile_image', () => { - const { getByAltText } = render(); + const { getByAltText } = render(); + expect(getByAltText(/Profile Pic/i).getAttribute('src')).toBe( 'https://dummyimage.com/90x90', ); }); it('renders with readingtime of 1 min if reading time is less than 1 min.', () => { + const item = getItem(); item.reactable.reading_time = 0.5; - const { getByText } = render(); - getByText(/1 min read/i); + + const { queryByText } = render(); + + expect(queryByText(/1 min read/i)).toBeDefined(); }); it('renders with readingtime of 1 min if reading time is null.', () => { + const item = getItem(); item.reactable.reading_time = null; - const { getByText } = render(); - getByText(/1 min read/i); + + const { queryByText } = render(); + + expect(queryByText(/1 min read/i)).toBeDefined(); }); it('renders correct readingtime.', () => { + const item = getItem(); item.reactable.reading_time = 10; - const { getByText } = render(); - getByText(/10 min read/i); + + const { queryByText } = render(); + + expect(queryByText(/10 min read/i)).toBeDefined(); }); it('renders without any tags if the tags array is empty.', () => { + const item = getItem(); item.reactable.tags = []; + const { queryByTestId } = render(); + expect(queryByTestId('item-tags')).toBeNull(); }); it('renders tags with links if present.', () => { + const item = getItem(); item.reactable.tags = [{ name: 'discuss' }]; + const { getByText } = render(); + getByText('#discuss'); + expect(getByText('#discuss').closest('a').getAttribute('href')).toBe( '/t/discuss', ); }); it('renders user information', () => { - const { getByText } = render(); + const { getByText } = render(); + getByText(/Bob/i); + expect(getByText(/Bob/i).closest('a').getAttribute('href')).toBe('/bob'); }); }); diff --git a/app/javascript/readingList/components/__tests__/ItemListItemArchiveButton.test.jsx b/app/javascript/readingList/components/__tests__/ItemListItemArchiveButton.test.jsx index 4b4684be4..63162bbac 100644 --- a/app/javascript/readingList/components/__tests__/ItemListItemArchiveButton.test.jsx +++ b/app/javascript/readingList/components/__tests__/ItemListItemArchiveButton.test.jsx @@ -12,8 +12,11 @@ describe('', () => { }); it('renders the Archive button', () => { - const { getByText } = render(); - getByText(/archive/i); + const { queryByText } = render( + , + ); + + expect(queryByText(/archive/i)).toBeDefined(); }); it('triggers the onClick if the Enter key is pressed', () => { diff --git a/app/javascript/readingList/components/__tests__/ItemListLoadMoreButton.test.jsx b/app/javascript/readingList/components/__tests__/ItemListLoadMoreButton.test.jsx index 5fe7a06d5..c38a0262a 100644 --- a/app/javascript/readingList/components/__tests__/ItemListLoadMoreButton.test.jsx +++ b/app/javascript/readingList/components/__tests__/ItemListLoadMoreButton.test.jsx @@ -24,7 +24,8 @@ describe('', () => { }); it('renders a button when required', () => { - const { getByText } = render(); - getByText(/load more/i); + const { queryByText } = render(); + + expect(queryByText(/load more/i)).toBeDefined(); }); }); diff --git a/app/javascript/readingList/components/__tests__/ItemListTags.test.jsx b/app/javascript/readingList/components/__tests__/ItemListTags.test.jsx index 526ab23a0..3a0f3e5ce 100644 --- a/app/javascript/readingList/components/__tests__/ItemListTags.test.jsx +++ b/app/javascript/readingList/components/__tests__/ItemListTags.test.jsx @@ -41,15 +41,15 @@ describe('', () => { }); it('renders properly with some shared tags', () => { - const { getByText } = render( + const { queryByText } = render( , ); - getByText('#discuss'); - getByText('#javascript'); + expect(queryByText('#discuss')).toBeDefined(); + expect(queryByText('#javascript')).toBeDefined(); }); it('triggers the onClick', () => { diff --git a/app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx b/app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx index ddb074b65..2c41e6b0b 100644 --- a/app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx +++ b/app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx @@ -3,36 +3,42 @@ import { render } from '@testing-library/preact'; import { axe } from 'jest-axe'; import SidebarUser from '../sidebarUser'; -const user = { - id: 1234, - username: 'john_doe', - name: 'Jon Doe', - profile_image_url: 'www.profile.com', -}; - -const followUser = jest.fn(); - -const renderedSideBar = (props) => - render( - , - ); +function getUser() { + return { + id: 1234, + username: 'john_doe', + name: 'Jon Doe', + profile_image_url: 'www.profile.com', + }; +} describe('', () => { it('should have no a11y violations', async () => { - const { container } = render(renderedSideBar()); + const user = getUser(); + + const { container } = render( + , + ); const results = await axe(container); expect(results).toHaveNoViolations(); }); it('renders properly', () => { - const { getByTestId, getByText, getByAltText } = renderedSideBar(); + const user = getUser(); + const { getByTestId, getByText, getByAltText } = render( + , + ); expect(getByTestId('widget-avatar').getAttribute('href')).toEqual( '/john_doe', @@ -47,7 +53,17 @@ describe('', () => { }); it('triggers the onClick', () => { - const { getByTestId } = renderedSideBar(); + const user = getUser(); + const followUser = jest.fn(); + const { getByTestId } = render( + , + ); + getByTestId('widget-follow-button').click(); expect(followUser).toHaveBeenCalled(); @@ -55,13 +71,35 @@ describe('', () => { describe('following', () => { it('shows if the user is followed', () => { - const { getByText } = renderedSideBar({ user: { following: true } }); - getByText(/Following/i); + const user = getUser(); + user.following = true; + + const { queryByText } = render( + , + ); + + expect(queryByText(/Following/i)).toBeDefined(); }); it('shows if the user can be followed', () => { - const { getByText } = renderedSideBar({ user: { following: false } }); - getByText(/follow/i); + const user = getUser(); + user.following = false; + + const { queryByText } = render( + , + ); + + expect(queryByText(/follow/i)).toBeDefined(); }); }); }); diff --git a/jest.config.js b/jest.config.js index c0696ff25..06e7e3268 100644 --- a/jest.config.js +++ b/jest.config.js @@ -18,10 +18,10 @@ module.exports = { ], coverageThreshold: { global: { - statements: 40, + statements: 41, branches: 35, functions: 39, - lines: 41, + lines: 42, }, }, moduleNameMapper: {