first commit

services/web/test/frontend/features/file-view/components/file-view-header.test.jsx

@@ -0,0 +1,108 @@
+import { screen } from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import FileViewHeader from '../../../../../frontend/js/features/file-view/components/file-view-header'
+import { USER_ID } from '../../../helpers/editor-providers'
+import { fileViewFile } from '@/features/ide-react/util/file-view'
+
+describe('<FileViewHeader/>', 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',
+      importer_id: USER_ID,
+    },
+    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(),
+  }
+
+  beforeEach(function () {
+    fetchMock.removeRoutes().clearHistory()
+  })
+
+  describe('header text', function () {
+    it('Renders the correct text for a file with the url provider', function () {
+      renderWithEditorContext(<FileViewHeader file={urlFile} />)
+      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 () {
+      renderWithEditorContext(<FileViewHeader file={projectFile} />)
+      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 () {
+      renderWithEditorContext(
+        <FileViewHeader
+          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 download button', function () {
+    it('exists', function () {
+      renderWithEditorContext(<FileViewHeader file={urlFile} />)
+
+      screen.getByText('Download')
+    })
+  })
+
+  it('should use importedAt as timestamp when present in the linked file data', function () {
+    const fileFromServer = {
+      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',
+        importer_id: USER_ID,
+        importedAt: new Date(2024, 8, 16, 1, 30).getTime(),
+      },
+      created: new Date(2021, 1, 17, 3, 24).toISOString(),
+    }
+    // FIXME: This should be tested through the <EditorAndPdf /> component instead
+    const fileShown = fileViewFile(fileFromServer)
+    renderWithEditorContext(<FileViewHeader file={fileShown} />)
+    screen.getByText('Imported from', { exact: false })
+    screen.getByText('Another project', { exact: false })
+    screen.getByText('/source-entity-path.ext, at 1:30 am Mon, 16th Sep 24', {
+      exact: false,
+    })
+  })
+})

services/web/test/frontend/features/file-view/components/file-view-image.test.jsx

@@ -0,0 +1,23 @@
+import { screen } from '@testing-library/react'
+
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import FileViewImage from '../../../../../frontend/js/features/file-view/components/file-view-image'
+
+describe('<FileViewImage />', function () {
+  const file = {
+    id: '60097ca20454610027c442a8',
+    name: 'file.jpg',
+    hash: 'hash',
+    linkedFileData: {
+      source_entity_path: '/source-entity-path',
+      provider: 'project_file',
+    },
+  }
+
+  it('renders an image', function () {
+    renderWithEditorContext(
+      <FileViewImage file={file} onError={() => {}} onLoad={() => {}} />
+    )
+    screen.getByRole('img')
+  })
+})

services/web/test/frontend/features/file-view/components/file-view-refresh-button.test.jsx

@@ -0,0 +1,53 @@
+import {
+  screen,
+  fireEvent,
+  waitForElementToBeRemoved,
+} from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+import sinon from 'sinon'
+import FileViewRefreshButton from '@/features/file-view/components/file-view-refresh-button'
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import { USER_ID } from '../../../helpers/editor-providers'
+
+describe('<FileViewRefreshButton />', function () {
+  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',
+      importer_id: USER_ID,
+    },
+    created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  }
+
+  beforeEach(function () {
+    fetchMock.removeRoutes().clearHistory()
+  })
+
+  // eslint-disable-next-line mocha/no-skipped-tests
+  it.skip('Changes text when the file is refreshing', async function () {
+    fetchMock.post(
+      'express:/project/:project_id/linked_file/:file_id/refresh',
+      {
+        new_file_id: '5ff7418157b4e144321df5c4',
+      }
+    )
+
+    renderWithEditorContext(
+      <FileViewRefreshButton
+        file={projectFile}
+        setRefreshError={sinon.stub()}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Refresh' }))
+
+    await waitForElementToBeRemoved(() =>
+      screen.getByText('Refreshing', { exact: false })
+    )
+
+    await screen.findByRole('button', { name: 'Refresh' })
+  })
+})

services/web/test/frontend/features/file-view/components/file-view-refresh-error.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import FileViewRefreshError from '@/features/file-view/components/file-view-refresh-error'
+import type { BinaryFile } from '@/features/file-view/types/binary-file'
+
+describe('<FileViewRefreshError />', function () {
+  it('shows correct error message', function () {
+    const anotherProjectFile: BinaryFile<'project_file'> = {
+      id: '123abc',
+      _id: '123abc',
+      linkedFileData: {
+        provider: 'project_file',
+        source_project_id: 'some-id',
+        source_entity_path: '/path/',
+      },
+      created: new Date(2023, 1, 17, 3, 24),
+      name: 'frog.jpg',
+      type: 'file',
+      selected: true,
+      hash: '42',
+    }
+
+    render(
+      <FileViewRefreshError
+        file={anotherProjectFile}
+        refreshError="An error message"
+      />
+    )
+
+    screen.getByText('Access Denied: An error message')
+  })
+})

services/web/test/frontend/features/file-view/components/file-view-text.test.jsx

@@ -0,0 +1,41 @@
+import { screen } from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import FileViewText from '../../../../../frontend/js/features/file-view/components/file-view-text'
+
+describe('<FileViewText/>', function () {
+  const file = {
+    id: '123',
+    hash: '1234',
+    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.removeRoutes().clearHistory()
+  })
+
+  it('renders a text view', async function () {
+    fetchMock.head('express:/project/:project_id/blob/:hash', {
+      status: 201,
+      headers: { 'Content-Length': 10000 },
+    })
+    fetchMock.get(
+      'express:/project/:project_id/blob/:hash',
+      'Text file content'
+    )
+
+    renderWithEditorContext(
+      <FileViewText file={file} onError={() => {}} onLoad={() => {}} />
+    )
+
+    await screen.findByText('Text file content', { exact: false })
+  })
+})

services/web/test/frontend/features/file-view/components/file-view.test.jsx

@@ -0,0 +1,88 @@
+import {
+  screen,
+  waitForElementToBeRemoved,
+  fireEvent,
+} from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import FileView from '../../../../../frontend/js/features/file-view/components/file-view'
+
+describe('<FileView/>', function () {
+  const textFile = {
+    id: 'text-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',
+    },
+    hash: '012345678901234567890123',
+    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.removeRoutes().clearHistory()
+  })
+
+  describe('for a text file', function () {
+    it('shows a loading indicator while the file is loading', async function () {
+      fetchMock.head('express:/project/:project_id/blob/:hash', {
+        status: 201,
+        headers: { 'Content-Length': 10000 },
+      })
+      fetchMock.get(
+        'express:/project/:project_id/blob/:hash',
+        'Text file content'
+      )
+
+      renderWithEditorContext(<FileView file={textFile} />)
+
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId('loading-panel-file-view')
+      )
+    })
+
+    it('shows messaging if the text view could not be loaded', async function () {
+      const unpreviewableTextFile = {
+        ...textFile,
+        name: 'example.not-tex',
+      }
+
+      renderWithEditorContext(<FileView file={unpreviewableTextFile} />)
+
+      await screen.findByText('Sorry, no preview is available', {
+        exact: false,
+      })
+    })
+  })
+
+  describe('for an image file', function () {
+    it('shows a loading indicator while the file is loading', async function () {
+      renderWithEditorContext(<FileView file={imageFile} />)
+
+      screen.getByTestId('loading-panel-file-view')
+    })
+
+    it('shows messaging if the image could not be loaded', async function () {
+      renderWithEditorContext(<FileView file={imageFile} />)
+
+      // Fake the image request failing as the request is handled by the browser
+      fireEvent.error(screen.getByRole('img'))
+
+      await screen.findByText('Sorry, no preview is available', {
+        exact: false,
+      })
+    })
+  })
+})