overleaf/services/web/test/frontend/features/clone-project-modal/components/clone-project-modal.test.js
Alf Eaton 1be43911b4 Merge pull request #3942 from overleaf/prettier-trailing-comma
Set Prettier's "trailingComma" setting to "es5"

GitOrigin-RevId: 9f14150511929a855b27467ad17be6ab262fe5d5
2021-04-28 02:10:01 +00:00

142 lines
3.9 KiB
JavaScript

import React from 'react'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { expect } from 'chai'
import CloneProjectModal from '../../../../../frontend/js/features/clone-project-modal/components/clone-project-modal'
import sinon from 'sinon'
import fetchMock from 'fetch-mock'
describe('<CloneProjectModal />', function () {
afterEach(function () {
fetchMock.reset()
})
const modalProps = {
handleHide: sinon.stub(),
projectId: 'project-1',
projectName: 'Test Project',
openProject: sinon.stub(),
show: true,
}
it('renders the translated modal title', async function () {
render(<CloneProjectModal {...modalProps} />)
await screen.findByText('Copy Project')
})
it('posts the generated project name', async function () {
fetchMock.post(
'express:/project/:projectId/clone',
{
status: 200,
body: { project_id: modalProps.projectId },
},
{ delay: 10 }
)
const openProject = sinon.stub()
render(<CloneProjectModal {...modalProps} openProject={openProject} />)
const cancelButton = await screen.findByRole('button', { name: 'Cancel' })
expect(cancelButton.disabled).to.be.false
const submitButton = await screen.findByRole('button', { name: 'Copy' })
expect(submitButton.disabled).to.be.false
const input = await screen.getByLabelText('New Name')
fireEvent.change(input, {
target: { value: '' },
})
expect(submitButton.disabled).to.be.true
fireEvent.change(input, {
target: { value: 'A Cloned Project' },
})
expect(submitButton.disabled).to.be.false
fireEvent.click(submitButton)
expect(submitButton.disabled).to.be.true
await fetchMock.flush(true)
expect(fetchMock.done()).to.be.true
const [url, options] = fetchMock.lastCall(
'express:/project/:projectId/clone'
)
expect(url).to.equal('/project/project-1/clone')
expect(JSON.parse(options.body)).to.deep.equal({
projectName: 'A Cloned Project',
})
expect(openProject).to.be.calledOnce
const errorMessage = screen.queryByText('Sorry, something went wrong')
expect(errorMessage).to.be.null
await waitFor(() => {
expect(submitButton.disabled).to.be.false
expect(cancelButton.disabled).to.be.false
})
})
it('handles a generic error response', async function () {
const matcher = 'express:/project/:projectId/clone'
fetchMock.postOnce(matcher, {
status: 500,
body: 'There was an error!',
})
const openProject = sinon.stub()
render(<CloneProjectModal {...modalProps} openProject={openProject} />)
const button = await screen.findByRole('button', { name: 'Copy' })
expect(button.disabled).to.be.false
const cancelButton = await screen.findByRole('button', { name: 'Cancel' })
expect(cancelButton.disabled).to.be.false
fireEvent.click(button)
expect(fetchMock.done(matcher)).to.be.true
expect(openProject).not.to.be.called
await screen.findByText('Sorry, something went wrong')
expect(button.disabled).to.be.false
expect(cancelButton.disabled).to.be.false
})
it('handles a specific error response', async function () {
const matcher = 'express:/project/:projectId/clone'
fetchMock.postOnce(matcher, {
status: 400,
body: 'There was an error!',
})
const openProject = sinon.stub()
render(<CloneProjectModal {...modalProps} openProject={openProject} />)
const button = await screen.findByRole('button', { name: 'Copy' })
expect(button.disabled).to.be.false
const cancelButton = await screen.findByRole('button', { name: 'Cancel' })
expect(cancelButton.disabled).to.be.false
fireEvent.click(button)
await fetchMock.flush(true)
expect(fetchMock.done(matcher)).to.be.true
expect(openProject).not.to.be.called
await screen.findByText('There was an error!')
expect(button.disabled).to.be.false
expect(cancelButton.disabled).to.be.false
})
})