diff --git a/app/javascript/Search/__tests__/Search.test.jsx b/app/javascript/Search/__tests__/Search.test.jsx index 8e0a032ed..545e30184 100644 --- a/app/javascript/Search/__tests__/Search.test.jsx +++ b/app/javascript/Search/__tests__/Search.test.jsx @@ -26,7 +26,10 @@ describe('', () => { it('should have a search textbox', () => { const { getByLabelText } = render(); - getByLabelText(/search/i); + const searchInput = getByLabelText(/search/i); + + expect(searchInput.getAttribute('placeholder')).toEqual('Search...'); + expect(searchInput.getAttribute('autocomplete')).toEqual('off'); }); it('should contain text the user entered in the search textbox', async () => { diff --git a/app/javascript/article-form/components/Preview.jsx b/app/javascript/article-form/components/Preview.jsx index 58ec826d5..38a7dc1c2 100644 --- a/app/javascript/article-form/components/Preview.jsx +++ b/app/javascript/article-form/components/Preview.jsx @@ -35,13 +35,16 @@ function titleArea(previewResponse, articleState, errors) { return (
{coverImage.length > 0 && ( -
+
)} diff --git a/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx b/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx index da2428103..48c9fe4bb 100644 --- a/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx +++ b/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx @@ -105,6 +105,11 @@ describe('', () => { />, ); const inputEl = getByLabelText('Change'); + + // Check the input validation settings + expect(inputEl.getAttribute('accept')).toEqual('image/*'); + expect(Number(inputEl.dataset.maxFileSizeMb)).toEqual(25); + const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png', }); diff --git a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx index ab666d5bd..5efe814af 100644 --- a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx +++ b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx @@ -9,13 +9,11 @@ global.fetch = fetch; describe('', () => { const fakeLinksResponse = JSON.stringify({ - "links": [ - "/i/fake-link.jpg" - ] + links: ['/i/fake-link.jpg'], }); const fakeErrorMessage = { - message: "Some Fake Error" + message: 'Some Fake Error', }; it('should have no a11y violations', async () => { @@ -25,46 +23,53 @@ describe('', () => { }); it('displays an upload input', () => { - const { getByTestId, getByLabelText } = render(); + const { getByLabelText } = render(); const uploadInput = getByLabelText(/Upload an image/i); + expect(uploadInput.getAttribute('type')).toEqual('file'); }); it('displays text to copy after upload', async () => { - const { getByTitle, getByTestId, getByDisplayValue, getByLabelText } = render() - const inputEl = getByLabelText(/Upload an image/i); - - const file = new File(['(⌐□_□)'], 'chucknorris.png', { - type: 'image/png', - }) - - fetch.mockResponse(fakeLinksResponse); - fireEvent.change(inputEl, {target: {files: [file]}}); - expect(inputEl.files[0]).toEqual(file); - expect(inputEl.files).toHaveLength(1); - - await waitForElement(() => - getByTitle(/copy markdown for image/i), + const { getByTitle, getByDisplayValue, getByLabelText } = render( + , ); - getByDisplayValue(/fake-link.jpg/i); - }); - - // TODO: 'Copied!' is always in the DOM, and so we cannot test that the visual implications of the copy when clicking on the copy icon - - it('displays an error when one occurs', async () => { - const error = 'Some error message'; - const { getByTitle, getByTestId, getByDisplayValue, getByText, getByLabelText } = render() const inputEl = getByLabelText(/Upload an image/i); const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png', }); - fetch.mockReject(fakeErrorMessage); - fireEvent.change(inputEl, {target: {files: [file]}}); + fetch.mockResponse(fakeLinksResponse); + fireEvent.change(inputEl, { target: { files: [file] } }); - await waitForElement(() => - getByText(/some fake error/i) - ); + expect(inputEl.files[0]).toEqual(file); + expect(inputEl.files).toHaveLength(1); + + await waitForElement(() => getByTitle(/copy markdown for image/i)); + getByDisplayValue(/fake-link.jpg/i); + }); + + // TODO: 'Copied!' is always in the DOM, and so we cannot test that the visual implications of the copy when clicking on the copy icon + + it('displays an error when one occurs', async () => { + const { getByText, getByLabelText } = render(); + const inputEl = getByLabelText(/Upload an image/i); + + // Check the input validation settings + expect(inputEl.getAttribute('accept')).toEqual('image/*'); + expect(Number(inputEl.dataset.maxFileSizeMb)).toEqual(25); + + const file = new File(['(⌐□_□)'], 'chucknorris.png', { + type: 'image/png', + }); + + fetch.mockReject(fakeErrorMessage); + fireEvent.change(inputEl, { + target: { + files: [file], + }, + }); + + await waitForElement(() => getByText(/some fake error/i)); }); }); diff --git a/app/javascript/article-form/components/__tests__/Options.test.jsx b/app/javascript/article-form/components/__tests__/Options.test.jsx index c04e5cfee..82e19b6db 100644 --- a/app/javascript/article-form/components/__tests__/Options.test.jsx +++ b/app/javascript/article-form/components/__tests__/Options.test.jsx @@ -60,7 +60,7 @@ describe('', () => { const passedData = getPassedData(); passedData.published = true; - const { getByTestId, getByText } = render( + const { queryByTestId, getByText } = render( ', () => { />, ); - getByTestId('options__danger-zone'); - getByText(/danger zone/i); - getByText(/unpublish post/i); + expect(queryByTestId('options__danger-zone')).toBeDefined(); + expect(getByText(/danger zone/i)).toBeDefined(); + expect(getByText(/unpublish post/i)).toBeDefined(); + expect(getByText(/done/i)).toBeDefined(); }); it('unpublishes an article when the unpublish post button is clicked', () => { diff --git a/app/javascript/article-form/components/__tests__/Preview.test.jsx b/app/javascript/article-form/components/__tests__/Preview.test.jsx index 5b153f308..ab86f580b 100644 --- a/app/javascript/article-form/components/__tests__/Preview.test.jsx +++ b/app/javascript/article-form/components/__tests__/Preview.test.jsx @@ -7,67 +7,70 @@ import { Preview } from '../Preview'; const doc = new JSDOM(''); global.document = doc; global.window = doc.defaultView; -global.window.currentUser = { +global.window.currentUser = Object.freeze({ id: 1, name: 'Guy Fieri', username: 'guyfieri', profile_image_90: '/uploads/user/profile_image/41/0841dbe2-208c-4daa-b498-b2f01f3d37b2.png', -}; +}); -let previewResponse; -let articleState; let errors; +function getPreviewResponse() { + return { + processed_html: + '

My Awesome Post! Not very long, but still very awesome.

↵↵', + title: 'My Awesome Post', + tags: null, + cover_image: 'http://lorempixel.com/400/200/', + }; +} + +function getArticleState() { + return { + id: null, + title: 'My Awesome Post', + tagList: 'javascript, career, ', + description: 'Some description', + canonicalUrl: '', + series: '', + allSeries: ['Learn Something new a day'], + bodyMarkdown: + '---↵title: My Awesome Post↵published: false↵description: ↵tags: ↵---↵↵My Awesome Post Not very long, but still very awesome! ↵', + submitting: false, + editing: false, + mainImage: '/i/9ca8kb1cu34mobypm5yx.png', + organizations: [ + { + id: 4, + bg_color_hex: '', + name: 'DEV', + text_color_hex: '', + profile_image_90: + '/uploads/organization/profile_image/4/1689e7ae-6306-43cd-acba-8bde7ed80a17.JPG', + }, + ], + organizationId: null, + errors: null, + edited: true, + updatedAt: null, + version: 'v2', + helpFor: null, + helpPosition: null, + }; +} + describe('', () => { beforeEach(() => { - previewResponse = { - processed_html: - '

My Awesome Post! Not very long, but still very awesome.

↵↵', - title: 'My Awesome Post', - tags: null, - cover_image: 'http://lorempixel.com/400/200/', - }; - - articleState = { - id: null, - title: 'My Awesome Post', - tagList: 'javascript, career, ', - description: 'Some description', - canonicalUrl: '', - series: '', - allSeries: ['Learn Something new a day'], - bodyMarkdown: - '---↵title: My Awesome Post↵published: false↵description: ↵tags: ↵---↵↵My Awesome Post Not very long, but still very awesome! ↵', - submitting: false, - editing: false, - mainImage: '/i/9ca8kb1cu34mobypm5yx.png', - organizations: [ - { - id: 4, - bg_color_hex: '', - name: 'DEV', - text_color_hex: '', - profile_image_90: - '/uploads/organization/profile_image/4/1689e7ae-6306-43cd-acba-8bde7ed80a17.JPG', - }, - ], - organizationId: null, - errors: null, - edited: true, - updatedAt: null, - version: 'v2', - helpFor: null, - helpPosition: null, - }; errors = null; }); it('should have no a11y violations', async () => { const { container } = render( , ); @@ -77,46 +80,50 @@ describe('', () => { }); it('shows the correct title', () => { - const { getByText } = render( + const previewResponse = getPreviewResponse(); + const { queryByText } = render( , ); - getByText(previewResponse.title); + expect(queryByText(previewResponse.title)).toBeDefined(); }); it('shows the correct tags', () => { - const { getByText } = render( + const { queryByText } = render( , ); - getByText(`javascript`); - getByText(`career`); + expect(queryByText(`javascript`)).toBeDefined(); + expect(queryByText(`career`)).toBeDefined(); }); it('shows a cover image in the preview if one exists', () => { - const { getByTestId } = render( + const articleState = { ...getArticleState(), previewShowing: true }; + const { getByTestId, getByAltText } = render( , ); + const coverImage = getByAltText(/post preview cover/i); getByTestId('article-form__cover'); + + expect(coverImage.src).toEqual('http://lorempixel.com/400/200/'); }); it('does not show a cover image in the preview if one does not exist', () => { - previewResponse.cover_image = null; - articleState.mainImage = null; - + const articleState = { ...getArticleState(), mainImage: null }; + const previewResponse = { ...getPreviewResponse(), cover_image: null }; const { queryByTestId } = render( ', () => { }); it('renders two buttons', () => { - const { getByText } = render( + const { queryByText } = render( , ); - getByText(/preview/i, { selector: 'button' }); - getByText(/edit/i, { selector: 'button' }); + + expect(queryByText(/preview/i, { selector: 'button' })).toBeDefined(); + expect(queryByText(/edit/i, { selector: 'button' })).toBeDefined(); }); describe('highlights the current tab', () => { @@ -31,15 +32,15 @@ describe('', () => { getByText(/preview/i, { selector: 'button' }).classList.contains( `crayons-tabs__item--current`, ), - ).toBe(true); + ).toEqual(true); expect( getByText(/edit/i, { selector: 'button' }).classList.contains( `crayons-tabs__item--current`, ), - ).toBe(false); + ).toEqual(false); }); - it('when edit is selected', () => { + it('should make the edit button the current button when not in preview mode', () => { const { getByText } = render( , ); @@ -48,12 +49,29 @@ describe('', () => { getByText(/edit/i, { selector: 'button' }).classList.contains( `crayons-tabs__item--current`, ), - ).toBe(true); + ).toEqual(true); expect( getByText(/preview/i, { selector: 'button' }).classList.contains( `crayons-tabs__item--current`, ), - ).toBe(false); + ).toEqual(false); + }); + + it('should make the preview button the current button when in preview mode', () => { + const { getByText } = render( + , + ); + + expect( + getByText(/edit/i, { selector: 'button' }).classList.contains( + `crayons-tabs__item--current`, + ), + ).toEqual(false); + expect( + getByText(/preview/i, { selector: 'button' }).classList.contains( + `crayons-tabs__item--current`, + ), + ).toEqual(true); }); }); }); diff --git a/app/javascript/article-form/components/__tests__/Title.test.jsx b/app/javascript/article-form/components/__tests__/Title.test.jsx index 4f3b1a16e..59f1807a4 100644 --- a/app/javascript/article-form/components/__tests__/Title.test.jsx +++ b/app/javascript/article-form/components/__tests__/Title.test.jsx @@ -18,13 +18,16 @@ describe('', () => { }); it('renders the textarea', () => { - const { getByPlaceholderText } = render( + const { queryByPlaceholderText } = render( <Title defaultValue="Test title" onChange={null} switchHelpContext={null} />, ); - getByPlaceholderText(/post title/i, { selector: 'textarea' }); + + expect( + queryByPlaceholderText(/post title/i, { selector: 'textarea' }), + ).toBeDefined(); }); }); diff --git a/app/javascript/articles/__tests__/Article.test.jsx b/app/javascript/articles/__tests__/Article.test.jsx index 4427f8bf5..0babb2ee3 100644 --- a/app/javascript/articles/__tests__/Article.test.jsx +++ b/app/javascript/articles/__tests__/Article.test.jsx @@ -54,7 +54,7 @@ describe('<Article /> component', () => { }); it('should render a standard article', () => { - const { getByTestId, getByAltText } = render( + const { queryByTestId, queryByAltText } = render( <Article {...commonProps} isBookmarked={false} @@ -63,12 +63,12 @@ describe('<Article /> component', () => { />, ); - getByTestId('article-62407'); - getByAltText('Emil99 profile'); + expect(queryByTestId('article-62407')).toBeDefined(); + expect(queryByAltText('Emil99 profile')).toBeDefined(); }); it('should render a featured article', () => { - const { getByTestId, getByAltText } = render( + const { queryByTestId, queryByAltText } = render( <Article {...commonProps} isBookmarked={false} @@ -78,8 +78,8 @@ describe('<Article /> component', () => { />, ); - getByTestId('featured-article'); - getByAltText('Emil99 profile'); + expect(queryByTestId('featured-article')).toBeDefined(); + expect(queryByAltText('Emil99 profile')).toBeDefined(); }); it('should render a rich feed', () => { @@ -97,7 +97,7 @@ describe('<Article /> component', () => { }); it('should render a featured article for an organization', () => { - const { getByTestId, getByAltText } = render( + const { queryByTestId, queryByAltText } = render( <Article {...commonProps} isBookmarked={false} @@ -107,13 +107,13 @@ describe('<Article /> component', () => { />, ); - getByTestId('featured-article'); - getByAltText('Web info-mediaries logo'); - getByAltText('Emil99 profile'); + expect(queryByTestId('featured-article')).toBeDefined(); + expect(queryByAltText('Web info-mediaries logo')).toBeDefined(); + expect(queryByAltText('Emil99 profile')).toBeDefined(); }); it('should render a featured article for a video post', () => { - const { getByTitle } = render( + const { queryByTitle } = render( <Article {...commonProps} isBookmarked={false} @@ -123,7 +123,7 @@ describe('<Article /> component', () => { />, ); - getByTitle(/video duration/i); + expect(queryByTitle(/video duration/i)).toBeDefined(); }); it('should render with an organization', () => { @@ -191,31 +191,31 @@ describe('<Article /> component', () => { }); it('should render with an add comment button when there are no comments', () => { - const { getByTestId } = render( + const { queryByTestId } = render( <Article {...commonProps} isBookmarked={false} article={article} />, ); - getByTestId('add-a-comment'); + expect(queryByTestId('add-a-comment')).toBeDefined(); }); it('should render as saved on reading list', () => { - const { getByText } = render( + const { queryByText } = render( <Article {...commonProps} isBookmarked article={articleWithComments} />, ); - getByText('Saved', { selector: 'button' }); + expect(queryByText('Saved', { selector: 'button' })).toBeDefined(); }); it('should render as not saved on reading list', () => { - const { getByText } = render( + const { queryByText } = render( <Article {...commonProps} isBookmarked={false} article={article} />, ); - getByText('Save', { selector: 'button' }); + expect(queryByText('Save', { selector: 'button' })).toBeDefined(); }); it('should render a video article', () => { - const { getByTitle } = render( + const { queryByTitle } = render( <Article {...commonProps} isBookmarked={false} @@ -224,11 +224,11 @@ describe('<Article /> component', () => { />, ); - getByTitle(/video duration/i); + expect(queryByTitle(/video duration/i)).toBeDefined(); }); it('should render a podcast article', () => { - const { getByAltText, getByText } = render( + const { queryByAltText, queryByText } = render( <Article {...commonProps} isBookmarked={false} @@ -236,21 +236,21 @@ describe('<Article /> component', () => { />, ); - getByAltText('Rubber local'); - getByText('podcast', { selector: 'span' }); + expect(queryByAltText('Rubber local')).toBeDefined(); + expect(queryByText('podcast', { selector: 'span' })).toBeDefined(); }); it('should render a podcast episode', () => { - const { getByText } = render( + const { queryByText } = render( <Article isBookmarked={false} article={podcastEpisodeArticle} />, ); - getByText('podcast', { selector: 'span' }); + expect(queryByText('podcast', { selector: 'span' })).toBeDefined(); }); it('should render a user article', () => { - const { getByText } = render(<Article article={userArticle} />); + const { queryByText } = render(<Article article={userArticle} />); - getByText('person', { selector: 'span' }); + expect(queryByText('person', { selector: 'span' })).toBeDefined(); }); }); diff --git a/app/javascript/articles/__tests__/ArticleLoading.test.jsx b/app/javascript/articles/__tests__/ArticleLoading.test.jsx index e32f59ebf..5cfeab954 100644 --- a/app/javascript/articles/__tests__/ArticleLoading.test.jsx +++ b/app/javascript/articles/__tests__/ArticleLoading.test.jsx @@ -12,8 +12,8 @@ describe('<LoadingArticle />', () => { }); it('should render', () => { - const { getByTitle } = render(<LoadingArticle />); + const { queryByTitle } = render(<LoadingArticle />); - getByTitle('Loading posts...'); + expect(queryByTitle('Loading posts...')).toBeDefined(); }); }); diff --git a/app/javascript/articles/components/__tests__/CommentsList.test.jsx b/app/javascript/articles/components/__tests__/CommentsList.test.jsx index 9c75d58c1..ccafb7c2d 100644 --- a/app/javascript/articles/components/__tests__/CommentsList.test.jsx +++ b/app/javascript/articles/components/__tests__/CommentsList.test.jsx @@ -68,7 +68,7 @@ describe('<CommentsList />', () => { }); it('should render "See all comments" button when there are two top comments and more than two total', () => { - const { getByTestId } = render( + const { queryByTestId } = render( <CommentsList comments={[singleComment, singleComment]} articlePath="" @@ -76,6 +76,6 @@ describe('<CommentsList />', () => { />, ); - getByTestId('see-all-comments'); + expect(queryByTestId('see-all-comments')).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/activeMembershipsSection.test.jsx b/app/javascript/chat/__tests__/activeMembershipsSection.test.jsx index 663383a4a..52dd9cad7 100644 --- a/app/javascript/chat/__tests__/activeMembershipsSection.test.jsx +++ b/app/javascript/chat/__tests__/activeMembershipsSection.test.jsx @@ -63,14 +63,14 @@ describe('<ActiveMembershipsSection />', () => { activeMemberships, currentMembershipRole, } = getEmptyMembershipData(); - const { getByText } = render( + const { queryByText } = render( <ActiveMembershipsSection activeMemberships={activeMemberships} currentMembershipRole={currentMembershipRole} />, ); - getByText('Members'); + expect(queryByText).toBeDefined(); }); it('should not render the membership list', () => { diff --git a/app/javascript/chat/__tests__/alert.test.jsx b/app/javascript/chat/__tests__/alert.test.jsx index 12d7f6079..4f42fa216 100644 --- a/app/javascript/chat/__tests__/alert.test.jsx +++ b/app/javascript/chat/__tests__/alert.test.jsx @@ -12,9 +12,9 @@ describe('<Alert />', () => { }); it('should render an alert', () => { - const { getByRole } = render(<Alert showAlert />); + const { queryByRole } = render(<Alert showAlert />); - getByRole('alert'); + expect(queryByRole('alert')).toBeDefined(); }); it('should not render an alert', () => { diff --git a/app/javascript/chat/__tests__/article.test.jsx b/app/javascript/chat/__tests__/article.test.jsx index e7d02a088..55d5cdd70 100644 --- a/app/javascript/chat/__tests__/article.test.jsx +++ b/app/javascript/chat/__tests__/article.test.jsx @@ -23,8 +23,8 @@ describe('<Article />', () => { }); it('should render', async () => { - const { getByTitle } = render(<Article resource={getArticle()} />); + const { queryByTitle } = render(<Article resource={getArticle()} />); - getByTitle('Your approval means nothing to me'); + expect(queryByTitle('Your approval means nothing to me')).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/channelRequest.test.jsx b/app/javascript/chat/__tests__/channelRequest.test.jsx index df16a3424..58e3e4d4d 100644 --- a/app/javascript/chat/__tests__/channelRequest.test.jsx +++ b/app/javascript/chat/__tests__/channelRequest.test.jsx @@ -24,16 +24,18 @@ describe('<ChannelRequest />', () => { }); it('should render', () => { - const { getByText, getByAltText } = render( + const { queryByText, queryByAltText } = render( <ChannelRequest resource={getResource()} />, ); - getByText('Hey Sarthak !'); - getByText( - 'You are not a member of this group yet. Send a request to join.', - ); - getByAltText('sarthak9 profile'); - getByAltText('IronMan profile'); - getByText('Join IronMan', { selector: 'button' }); + expect(queryByText('Hey Sarthak !')).toBeDefined(); + expect( + queryByText( + 'You are not a member of this group yet. Send a request to join.', + ), + ).toBeDefined(); + expect(queryByAltText('sarthak9 profile')).toBeDefined(); + expect(queryByAltText('IronMan profile')).toBeDefined(); + expect(queryByText('Join IronMan', { selector: 'button' })).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/channels.test.jsx b/app/javascript/chat/__tests__/channels.test.jsx index c1c1ea60d..7c9bc1436 100644 --- a/app/javascript/chat/__tests__/channels.test.jsx +++ b/app/javascript/chat/__tests__/channels.test.jsx @@ -139,11 +139,11 @@ describe('<Channels />', () => { }); it('should have the proper elements, attributes, and content', () => { - const { getByTestId } = render(getChannels(false, fakeChannels)); + const { queryByTestId } = render(getChannels(false, fakeChannels)); // should have group names but no user names // TODO: I don't understand the comment above. To revisit. - getByTestId('chat-channels-list'); + expect(queryByTestId('chat-channels-list')).toBeDefined(); }); }); diff --git a/app/javascript/chat/__tests__/chatChannelDescription.test.jsx b/app/javascript/chat/__tests__/chatChannelDescription.test.jsx index c3e1cb8fc..f0b99df66 100644 --- a/app/javascript/chat/__tests__/chatChannelDescription.test.jsx +++ b/app/javascript/chat/__tests__/chatChannelDescription.test.jsx @@ -18,7 +18,7 @@ describe('<ChannelDescriptionSection />', () => { }); it('should render', () => { - const { getByText } = render( + const { queryByText } = render( <ChannelDescriptionSection channelName="some name" channelDescription="some description" @@ -26,8 +26,8 @@ describe('<ChannelDescriptionSection />', () => { />, ); - getByText('some name'); - getByText('some description'); - getByText('You are a channel member'); + expect(queryByText('some name')).toBeDefined(); + expect(queryByText('some description')).toBeDefined(); + expect(queryByText('You are a channel member')).toBeDefined(); }); }); diff --git a/app/javascript/podcasts/__tests__/TodaysPodcasts.test.jsx b/app/javascript/podcasts/__tests__/TodaysPodcasts.test.jsx index 2d6ddf432..77c1c2842 100644 --- a/app/javascript/podcasts/__tests__/TodaysPodcasts.test.jsx +++ b/app/javascript/podcasts/__tests__/TodaysPodcasts.test.jsx @@ -6,6 +6,10 @@ import { podcastArticle } from '../../articles/__tests__/utilities/articleUtilit import { TodaysPodcasts } from '../TodaysPodcasts'; describe('<TodaysPodcasts /> component', () => { + beforeEach(() => { + global.filterXSS = jest.fn(); + }); + it('should have no a11y violations', async () => { const { container } = render( <TodaysPodcasts>