Merge pull request #3960 from overleaf/cmg-binary-file

[BinaryFile] Reopening of Binary file React migration GitOrigin-RevId: 050e66e3321bd6579d44932b669fc0a31df06d18
2021-04-29 02:09:38 +00:00
parent 23c73b9bf1
commit 3dfcb95802
22 changed files with 1060 additions and 7 deletions
@@ -0,0 +1,168 @@
+import React from 'react'
+import {
+  render,
+  screen,
+  fireEvent,
+  waitForElementToBeRemoved,
+} from '@testing-library/react'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import sinon from 'sinon'
+
+import BinaryFileHeader from '../../../../../frontend/js/features/binary-file/components/binary-file-header.js'
+
+describe('<BinaryFileHeader/>', function () {
+  const urlFile = {
+    name: 'example.tex',
+    linkedFileData: {
+      url: 'https://overleaf.com',
+      provider: 'url',
+    },
+    created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  }
+
+  const projectFile = {
+    name: 'example.tex',
+    linkedFileData: {
+      v1_source_doc_id: 'v1-source-id',
+      source_project_id: 'source-project-id',
+      source_entity_path: '/source-entity-path.ext',
+      provider: 'project_file',
+    },
+    created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  }
+
+  const projectOutputFile = {
+    name: 'example.pdf',
+    linkedFileData: {
+      v1_source_doc_id: 'v1-source-id',
+      source_output_file_path: '/source-entity-path.ext',
+      provider: 'project_output_file',
+    },
+    created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  }
+
+  const thirdPartyReferenceFile = {
+    name: 'example.tex',
+    linkedFileData: {
+      provider: 'zotero',
+    },
+    created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  }
+
+  let storeReferencesKeys
+
+  beforeEach(function () {
+    fetchMock.reset()
+    storeReferencesKeys = sinon.stub()
+  })
+
+  describe('header text', function () {
+    it('Renders the correct text for a file with the url provider', function () {
+      render(<BinaryFileHeader file={urlFile} storeReferencesKeys={() => {}} />)
+      screen.getByText('Imported from', { exact: false })
+      screen.getByText('at 3:24 am Wed, 17th Feb 21', {
+        exact: false,
+      })
+    })
+
+    it('Renders the correct text for a file with the project_file provider', function () {
+      render(
+        <BinaryFileHeader file={projectFile} storeReferencesKeys={() => {}} />
+      )
+      screen.getByText('Imported from', { exact: false })
+      screen.getByText('Another project', { exact: false })
+      screen.getByText('/source-entity-path.ext, at 3:24 am Wed, 17th Feb 21', {
+        exact: false,
+      })
+    })
+
+    it('Renders the correct text for a file with the project_output_file provider', function () {
+      render(
+        <BinaryFileHeader
+          file={projectOutputFile}
+          storeReferencesKeys={() => {}}
+        />
+      )
+      screen.getByText('Imported from the output of', { exact: false })
+      screen.getByText('Another project', { exact: false })
+      screen.getByText('/source-entity-path.ext, at 3:24 am Wed, 17th Feb 21', {
+        exact: false,
+      })
+    })
+  })
+
+  describe('The refresh button', async function () {
+    let reindexResponse
+
+    beforeEach(function () {
+      window.project_id = '123abc'
+      reindexResponse = {
+        projectId: '123abc',
+        keys: ['reference1', 'reference2', 'reference3', 'reference4'],
+      }
+    })
+
+    afterEach(function () {
+      delete window.project_id
+    })
+
+    it('Changes text when the file is refreshing', async function () {
+      fetchMock.post(
+        'express:/project/:project_id/linked_file/:file_id/refresh',
+        {
+          new_file_id: '5ff7418157b4e144321df5c4',
+        }
+      )
+
+      render(
+        <BinaryFileHeader file={projectFile} storeReferencesKeys={() => {}} />
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Refresh' }))
+
+      await waitForElementToBeRemoved(() =>
+        screen.getByText('Refreshing', { exact: false })
+      )
+      await screen.findByText('Refresh')
+    })
+
+    it('Reindexes references after refreshing a file from a third-party provider', async function () {
+      fetchMock.post(
+        'express:/project/:project_id/linked_file/:file_id/refresh',
+        {
+          new_file_id: '5ff7418157b4e144321df5c4',
+        }
+      )
+
+      fetchMock.post(
+        'express:/project/:project_id/references/indexAll',
+        reindexResponse
+      )
+
+      render(
+        <BinaryFileHeader
+          file={thirdPartyReferenceFile}
+          storeReferencesKeys={storeReferencesKeys}
+        />
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Refresh' }))
+
+      await waitForElementToBeRemoved(() =>
+        screen.getByText('Refreshing', { exact: false })
+      )
+
+      expect(fetchMock.done()).to.be.true
+      expect(storeReferencesKeys).to.be.calledWith(reindexResponse.keys)
+    })
+  })
+
+  describe('The download button', function () {
+    it('exists', function () {
+      render(<BinaryFileHeader file={urlFile} storeReferencesKeys={() => {}} />)
+
+      screen.getByText('Download', { exact: false })
+    })
+  })
+})
@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import BinaryFileImage from '../../../../../frontend/js/features/binary-file/components/binary-file-image.js'
+
+describe('<BinaryFileImage />', function () {
+  const file = {
+    id: '60097ca20454610027c442a8',
+    name: 'file.jpg',
+    linkedFileData: {
+      source_entity_path: '/source-entity-path',
+      provider: 'project_file',
+    },
+  }
+
+  it('renders an image', function () {
+    render(
+      <BinaryFileImage
+        fileName={file.name}
+        fileId={file.id}
+        onError={() => {}}
+        onLoad={() => {}}
+      />
+    )
+    screen.getByRole('img')
+  })
+})
@@ -0,0 +1,42 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+
+import BinaryFileText from '../../../../../frontend/js/features/binary-file/components/binary-file-text.js'
+
+describe('<BinaryFileText/>', function () {
+  const file = {
+    name: 'example.tex',
+    linkedFileData: {
+      v1_source_doc_id: 'v1-source-id',
+      source_project_id: 'source-project-id',
+      source_entity_path: '/source-entity-path.ext',
+      provider: 'project_file',
+    },
+    created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  }
+
+  beforeEach(function () {
+    fetchMock.reset()
+    window.project_id = '123abc'
+  })
+
+  afterEach(function () {
+    delete window.project_id
+  })
+
+  it('renders a text view', async function () {
+    fetchMock.head('express:/project/:project_id/file/:file_id', {
+      status: 201,
+      headers: { 'Content-Length': 10000 },
+    })
+    fetchMock.get(
+      'express:/project/:project_id/file/:file_id',
+      'Text file content'
+    )
+
+    render(<BinaryFileText file={file} onError={() => {}} onLoad={() => {}} />)
+
+    await screen.findByText('Text file content', { exact: false })
+  })
+})
@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+  fireEvent,
+} from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+
+import BinaryFile from '../../../../../frontend/js/features/binary-file/components/binary-file.js'
+
+describe('<BinaryFile/>', function () {
+  const textFile = {
+    name: 'example.tex',
+    linkedFileData: {
+      v1_source_doc_id: 'v1-source-id',
+      source_project_id: 'source-project-id',
+      source_entity_path: '/source-entity-path.ext',
+      provider: 'project_file',
+    },
+    created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  }
+
+  const imageFile = {
+    id: '60097ca20454610027c442a8',
+    name: 'file.jpg',
+    linkedFileData: {
+      source_entity_path: '/source-entity-path',
+      provider: 'project_file',
+    },
+  }
+
+  beforeEach(function () {
+    fetchMock.reset()
+  })
+
+  describe('for a text file', function () {
+    it('it shows a loading indicator while the file is loading', async function () {
+      render(<BinaryFile file={textFile} storeReferencesKeys={() => {}} />)
+
+      await waitForElementToBeRemoved(() =>
+        screen.getByText('Loading', { exact: false })
+      )
+    })
+
+    it('it shows messaging if the text view could not be loaded', async function () {
+      render(<BinaryFile file={textFile} storeReferencesKeys={() => {}} />)
+
+      await screen.findByText('Sorry, no preview is available', {
+        exact: false,
+      })
+    })
+  })
+
+  describe('for an image file', function () {
+    it('it shows a loading indicator while the file is loading', async function () {
+      render(<BinaryFile file={imageFile} storeReferencesKeys={() => {}} />)
+
+      screen.getByText('Loading', { exact: false })
+    })
+
+    it('it shows messaging if the image could not be loaded', function () {
+      render(<BinaryFile file={imageFile} storeReferencesKeys={() => {}} />)
+
+      // Fake the image request failing as the request is handled by the browser
+      fireEvent.error(screen.getByRole('img'))
+
+      screen.findByText('Sorry, no preview is available', { exact: false })
+    })
+  })
+})