Add unit tests (#68)

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

.prettierignore

@@ -1,2 +1,3 @@
 .next
+coverage
 node_modules

__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(<Editor sectionTemplate={en_EN} />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should show DownloadModal component if showModal is true', () => {
+    global.URL.createObjectURL = jest.fn()
+    render(<Editor sectionTemplate={en_EN} />)
+
+    userEvent.click(screen.getByLabelText('Download Markdown'))
+    expect(screen.getByText('🎉')).toBeInTheDocument()
+  })
+
+  it('should add section', () => {
+    render(<Editor sectionTemplate={en_EN} />)
+
+    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(<Editor sectionTemplate={en_EN} />)
+
+    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()
+  })
+})

components/DownloadModal.js

@@ -25,6 +25,7 @@ Leaving: "ease-in duration-200"
     */}
           <div
             className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+            role="overlay"
             aria-hidden="true"
             onClick={() => setShowModal(false)}
           />

components/EditorColumn.js

@@ -43,7 +43,7 @@ export const EditorColumn = ({ focusedSectionSlug, templates, setTemplates }) =>
             aria-label="Color Mode"
             className="toggle-dark-mode focus:outline-none transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none"
           >
-            <img className="w-auto h-8 mr-2" src={toggleState.img} />
+            <img className="w-auto h-8 mr-2" alt={toggleState.theme} src={toggleState.img} />
           </button>
         ) : (
           <button />
@@ -63,6 +63,7 @@ export const EditorColumn = ({ focusedSectionSlug, templates, setTemplates }) =>
           value={markdown}
           onChange={onEdit}
           loading={'Loading...'}
+          aria-label="Markdown Editor"
           options={{
             minimap: {
               enabled: false,

components/Nav.js

@@ -28,6 +28,7 @@ export const Nav = ({ selectedSectionSlugs, setShowModal, getTemplate }) => {
       </Link>
       <button
         type="button"
+        aria-label="Download Markdown"
         className="relative inline-flex items-center px-4 py-2 text-sm font-bold tracking-wide text-white border border-transparent rounded-md shadow-sm bg-emerald-500 hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-emerald-500"
         onClick={downloadMarkdownFile}
       >

components/RawPreview.js

@@ -19,6 +19,7 @@ export default function RawPreview({ text }) {
       <button
         className="absolute top-0 right-7 focus:outline-none"
         type="button"
+        aria-label={!copySuccess ? 'To Copy' : 'Copied Success'}
         onClick={copyToClipBoard}
       >
         {!copySuccess ? (

components/SortableItem.js

@@ -47,6 +47,7 @@ export function SortableItem(props) {
         <button
           className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400 absolute right-2"
           type="button"
+          aria-label="Delete section"
           onClick={onClickTrash}
         >
           <img className="w-auto h-5" src="trash.svg" alt="" />

components/__tests__/DownloadModal.test.js

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { DownloadModal } from '../DownloadModal'
+
+jest.mock('next-i18next', () => ({
+  useTranslation: () => ({ t: jest.fn() }),
+}))
+
+describe('<DownloadModal />', () => {
+  it('should render', () => {
+    const { container } = render(<DownloadModal />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should setShowModal to false when clicking on overlay', () => {
+    const setShowModalStub = jest.fn()
+
+    render(<DownloadModal setShowModal={setShowModalStub} />)
+
+    userEvent.click(screen.getByRole('overlay', { hidden: true }))
+    expect(setShowModalStub).toHaveBeenCalledWith(false)
+  })
+})

components/__tests__/EditorColumn.test.js

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { EditorColumn } from '../EditorColumn'
+
+import { en_EN } from '../../data/section-templates-en_EN'
+
+jest.mock(
+  '@monaco-editor/react',
+  () =>
+    function Editor({ value, onChange }) {
+      return <input aria-label="Markdown Editor" value={value} onChange={() => onChange('test')} />
+    }
+)
+
+jest.mock('next-i18next', () => ({
+  useTranslation: () => ({ t: jest.fn() }),
+}))
+
+describe('<EditorColumn />', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  it('should render', () => {
+    const { container } = render(<EditorColumn templates={en_EN} />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should toggle dark/light mode', () => {
+    render(<EditorColumn templates={en_EN} />)
+    userEvent.click(screen.getByLabelText('Color Mode'))
+    expect(screen.getByAltText('light')).toBeInTheDocument()
+
+    userEvent.click(screen.getByLabelText('Color Mode'))
+    expect(screen.getByAltText('vs-dark')).toBeInTheDocument()
+  })
+
+  it('should show <Editor /> if focusedSectionSlug is truthy', () => {
+    render(<EditorColumn templates={en_EN} focusedSectionSlug={'title-and-description'} />)
+    expect(screen.getByLabelText('Markdown Editor').value).toEqual(
+      "# Project TitleA brief description of what this project does and who it's for"
+    )
+  })
+
+  it('should set markdown when editing', async () => {
+    const setTemplatesHandler = jest.fn()
+    render(
+      <EditorColumn
+        templates={en_EN}
+        focusedSectionSlug={'title-and-description'}
+        setTemplates={setTemplatesHandler}
+      />
+    )
+
+    userEvent.type(screen.getByLabelText('Markdown Editor'), 'test')
+
+    expect(setTemplatesHandler).toHaveBeenCalledTimes(4)
+    expect(screen.getByLabelText('Markdown Editor')).toHaveValue('test')
+  })
+})

components/__tests__/LanguageDropDown.test.js

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+
+import { LanguageDropDown } from '../LanguageDropDown'
+
+const mockTranslations = {
+  english: 'English',
+  french: 'French',
+  spanish: 'Spanish',
+}
+
+jest.mock('next-i18next', () => ({
+  useTranslation: () => ({ t: jest.fn().mockImplementation((cb) => mockTranslations[cb]) }),
+}))
+
+describe('<LanguageDropDown />', () => {
+  it('should render with provided languages', () => {
+    const { container } = render(<LanguageDropDown />)
+    expect(container).toBeInTheDocument()
+    expect(screen.queryByText('English')).not.toBeNull()
+    expect(screen.queryByText('French')).not.toBeNull()
+    expect(screen.queryByText('Spanish')).not.toBeNull()
+
+    expect(screen.queryByText('Chinese')).toBeNull()
+  })
+})

components/__tests__/Nav.test.js

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Nav } from '../Nav'
+import { en_EN } from '../../data/section-templates-en_EN'
+
+jest.mock('next-i18next', () => ({
+  useTranslation: () => ({ t: jest.fn() }),
+}))
+
+describe('<Nav />', () => {
+  it('should render', () => {
+    const { container } = render(
+      <Nav
+        selectedSectionSlugs={['title-and-description']}
+        getTemplate={(slug) => en_EN.find((t) => t.slug === slug)}
+      />
+    )
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should download markdown file when clicking on download button', () => {
+    const setShowModalStub = jest.fn()
+    global.URL.createObjectURL = jest.fn()
+    const blobSpy = jest.spyOn(global, 'Blob').mockImplementationOnce(() => ({
+      size: 80,
+    }))
+
+    render(
+      <Nav
+        setShowModal={setShowModalStub}
+        selectedSectionSlugs={['title-and-description']}
+        getTemplate={(slug) => en_EN.find((t) => t.slug === slug)}
+      />
+    )
+
+    userEvent.click(screen.getByLabelText('Download Markdown'))
+    expect(blobSpy).toHaveBeenCalled()
+    expect(global.URL.createObjectURL).toHaveBeenCalledWith({ size: 80 })
+    expect(setShowModalStub).toHaveBeenCalledWith(true)
+  })
+})

components/__tests__/PreviewColumn.test.js

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { PreviewColumn } from '../PreviewColumn'
+import { en_EN } from '../../data/section-templates-en_EN'
+
+const mockTranslations = {
+  'preview-column-preview': 'Preview',
+  'preview-column-raw': 'Raw',
+}
+
+jest.mock('next-i18next', () => ({
+  useTranslation: () => ({
+    t: jest.fn().mockImplementation((cb) => mockTranslations[cb]),
+  }),
+}))
+
+describe('<PreviewColumn />', () => {
+  it('should render', () => {
+    const { container } = render(
+      <PreviewColumn
+        selectedSectionSlugs={['title-and-description']}
+        getTemplate={(slug) => en_EN.find((t) => t.slug === slug)}
+      />
+    )
+
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should toggle preview/raw buttons', () => {
+    render(
+      <PreviewColumn
+        selectedSectionSlugs={['title-and-description']}
+        getTemplate={(slug) => en_EN.find((t) => t.slug === slug)}
+      />
+    )
+
+    userEvent.click(screen.getByText(/Preview/))
+    expect(screen.getByText(/Preview/)).toHaveClass('text-emerald-500')
+
+    userEvent.click(screen.getByText(/Raw/))
+    expect(screen.getByText(/Raw/)).toHaveClass('text-emerald-500')
+  })
+})

components/__tests__/RawPreview.test.js

@@ -0,0 +1,29 @@
+import { render, screen, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import RawPreview from '../RawPreview'
+
+describe('<RawPreview />', () => {
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+  it('should render', () => {
+    const { container } = render(<RawPreview text="test" />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should copy and setCopy when clicking on ', async () => {
+    document.execCommand = jest.fn()
+    render(<RawPreview text="test" />)
+
+    userEvent.click(screen.getByLabelText('To Copy'))
+
+    expect(document.execCommand).toHaveBeenCalledWith('copy')
+    expect(screen.getByLabelText('Copied Success')).toBeInTheDocument()
+
+    act(() => {
+      jest.advanceTimersByTime(3000)
+    })
+    expect(screen.findByLabelText('To Copy')).not.toBeNull()
+  })
+})

components/__tests__/SectionsColumn.test.js

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react'
+
+import { SectionsColumn } from '../SectionsColumn'
+
+import { en_EN } from '../../data/section-templates-en_EN'
+
+jest.mock('next-i18next', () => ({
+  useTranslation: () => ({ t: jest.fn() }),
+}))
+
+describe('<SectionsColumn />', () => {
+  const props = {
+    selectedSectionSlugs: ['title-and-description'],
+    setSelectedSectionSlugs: () => ['title-and-description', 'api'],
+    sectionSlugs: ['api', 'appendix'],
+    setSectionSlugs: () => ['api', 'appendix'].filter((s) => s !== 'api'),
+    focusedSectionSlug: 'title-and-description',
+    setFocusedSectionSlug: jest.fn(),
+    getTemplate: (slug) => en_EN.find((t) => t.slug === slug),
+  }
+
+  it('should render', () => {
+    const { container } = render(<SectionsColumn {...props} />)
+    expect(container).toBeInTheDocument()
+  })
+})