From 792e184ed8e0634da5af9c593b5236c0271123b1 Mon Sep 17 00:00:00 2001 From: Jiayi Anna Date: Tue, 27 Apr 2021 19:36:38 +0200 Subject: [PATCH] Add unit tests (#68) --- .babelrc | 3 + .prettierignore | 1 + __tests__/editor.test.js | 54 + components/DownloadModal.js | 1 + components/EditorColumn.js | 3 +- components/Nav.js | 1 + components/RawPreview.js | 1 + components/SortableItem.js | 1 + components/__tests__/DownloadModal.test.js | 24 + components/__tests__/EditorColumn.test.js | 60 + components/__tests__/LanguageDropDown.test.js | 25 + components/__tests__/Nav.test.js | 42 + components/__tests__/PreviewColumn.test.js | 44 + components/__tests__/RawPreview.test.js | 29 + components/__tests__/SectionsColumn.test.js | 26 + components/__tests__/SortableItem.test.js | 40 + jest.config.js | 9 + jest.setup.js | 1 + package-lock.json | 12178 +++++++++------- package.json | 7 + 20 files changed, 7396 insertions(+), 5154 deletions(-) create mode 100644 .babelrc create mode 100644 __tests__/editor.test.js create mode 100644 components/__tests__/DownloadModal.test.js create mode 100644 components/__tests__/EditorColumn.test.js create mode 100644 components/__tests__/LanguageDropDown.test.js create mode 100644 components/__tests__/Nav.test.js create mode 100644 components/__tests__/PreviewColumn.test.js create mode 100644 components/__tests__/RawPreview.test.js create mode 100644 components/__tests__/SectionsColumn.test.js create mode 100644 components/__tests__/SortableItem.test.js create mode 100644 jest.config.js create mode 100644 jest.setup.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..1ff94f7 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["next/babel"] +} diff --git a/.prettierignore b/.prettierignore index db5ddae..2d352ec 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ .next +coverage node_modules \ No newline at end of file diff --git a/__tests__/editor.test.js b/__tests__/editor.test.js new file mode 100644 index 0000000..03b4ca3 --- /dev/null +++ b/__tests__/editor.test.js @@ -0,0 +1,54 @@ +import { render, screen, cleanup } from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +import Editor from '../pages/editor' +import { en_EN } from '../data/section-templates-en_EN' + +const mockTranslations = { + 'editor-desktop-optimized': 'This site is optimized for desktop', + 'editor-visit-desktop': 'Please visit readme.so on a desktop to create your readme!', +} + +jest.mock('next-i18next', () => ({ + useTranslation: () => ({ + t: jest.fn().mockImplementation((cb) => mockTranslations[cb]), + }), +})) + +describe('editor page', () => { + afterEach(cleanup) + + it('should render', () => { + const { container } = render() + expect(container).toBeInTheDocument() + }) + + it('should show DownloadModal component if showModal is true', () => { + global.URL.createObjectURL = jest.fn() + render() + + userEvent.click(screen.getByLabelText('Download Markdown')) + expect(screen.getByText('🎉')).toBeInTheDocument() + }) + + it('should add section', () => { + render() + + userEvent.click(screen.getByText(/FAQ/)) + // selected sections + expect(screen.getByText('FAQ', { selector: 'p' })).toBeInTheDocument() + // sections to be selected + expect(screen.queryByText('FAQ', { selector: 'span' })).toBeNull() + }) + + it('should show message for mobile users if theyre using mobile', async () => { + jest.spyOn(window.navigator, 'userAgent', 'get').mockReturnValue('Mobile') + + render() + + expect(screen.queryByText('This site is optimized for desktop')).not.toBeNull() + expect( + screen.queryByText('Please visit readme.so on a desktop to create your readme!') + ).not.toBeNull() + }) +}) diff --git a/components/DownloadModal.js b/components/DownloadModal.js index 09444ec..6ba5337 100644 --- a/components/DownloadModal.js +++ b/components/DownloadModal.js @@ -25,6 +25,7 @@ Leaving: "ease-in duration-200" */}