Merge pull request #27811 from overleaf/dp-file-view-typescript

Convert file-view components and test files to typescript

GitOrigin-RevId: 277aa8fd4f3d06a322dc9d0b372eebefb26fd285

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

@@ -5,39 +5,9 @@ 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'
+import { projectOutputFile, textFile, urlFile } from '../util/files'
 
 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()
   })
@@ -52,7 +22,7 @@ describe('<FileViewHeader/>', function () {
     })
 
     it('Renders the correct text for a file with the project_file provider', function () {
-      renderWithEditorContext(<FileViewHeader file={projectFile} />)
+      renderWithEditorContext(<FileViewHeader file={textFile} />)
       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', {
@@ -61,12 +31,7 @@ describe('<FileViewHeader/>', function () {
     })
 
     it('Renders the correct text for a file with the project_output_file provider', function () {
-      renderWithEditorContext(
-        <FileViewHeader
-          file={projectOutputFile}
-          storeReferencesKeys={() => {}}
-        />
-      )
+      renderWithEditorContext(<FileViewHeader file={projectOutputFile} />)
       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', {
@@ -85,6 +50,8 @@ describe('<FileViewHeader/>', function () {
 
   it('should use importedAt as timestamp when present in the linked file data', function () {
     const fileFromServer = {
+      _id: 'some-id',
+      hash: 'some-hash',
       name: 'example.tex',
       linkedFileData: {
         v1_source_doc_id: 'v1-source-id',

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

@@ -2,21 +2,12 @@ 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'
+import { imageFile } from '../util/files'
 
 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={() => {}} />
+      <FileViewImage file={imageFile} onError={() => {}} onLoad={() => {}} />
     )
     screen.getByRole('img')
   })

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

@@ -7,21 +7,9 @@ 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'
+import { textFile } from '../util/files'
 
 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()
   })
@@ -36,10 +24,7 @@ describe('<FileViewRefreshButton />', function () {
     )
 
     renderWithEditorContext(
-      <FileViewRefreshButton
-        file={projectFile}
-        setRefreshError={sinon.stub()}
-      />
+      <FileViewRefreshButton file={textFile} setRefreshError={sinon.stub()} />
     )
 
     fireEvent.click(screen.getByRole('button', { name: 'Refresh' }))

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

@@ -1,29 +1,11 @@
 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'
+import { imageFile } from '../util/files'
 
 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"
-      />
+      <FileViewRefreshError file={imageFile} refreshError="An error message" />
     )
 
     screen.getByText('Access Denied: An error message')

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

@@ -3,21 +3,9 @@ import fetchMock from 'fetch-mock'
 
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
 import FileViewText from '../../../../../frontend/js/features/file-view/components/file-view-text'
+import { textFile } from '../util/files'
 
 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()
     window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
@@ -34,7 +22,7 @@ describe('<FileViewText/>', function () {
     )
 
     renderWithEditorContext(
-      <FileViewText file={file} onError={() => {}} onLoad={() => {}} />
+      <FileViewText file={textFile} onError={() => {}} onLoad={() => {}} />
     )
 
     await screen.findByText('Text file content', { exact: false })

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

@@ -7,30 +7,9 @@ import fetchMock from 'fetch-mock'
 
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
 import FileView from '../../../../../frontend/js/features/file-view/components/file-view'
+import { imageFile, textFile } from '../util/files'
 
 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()
     window.metaAttributesCache.set('ol-preventCompileOnLoad', true)

services/web/test/frontend/features/file-view/util/files.ts

@@ -0,0 +1,62 @@
+import { BinaryFile } from '@/features/file-view/types/binary-file'
+
+export const textFile: BinaryFile<'project_file'> = {
+  _id: 'text-file',
+  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(),
+  type: 'file',
+  selected: true,
+}
+
+export const imageFile: BinaryFile<'project_file'> = {
+  _id: '60097ca20454610027c442a8',
+  id: '60097ca20454610027c442a8',
+  name: 'file.jpg',
+  linkedFileData: {
+    source_project_id: 'source-project-id',
+    source_entity_path: '/source-entity-path',
+    provider: 'project_file',
+  },
+  hash: '012345678901234567890123',
+  created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  type: 'file',
+  selected: true,
+}
+
+export const urlFile: BinaryFile<'url'> = {
+  _id: 'url-file',
+  id: 'url-file',
+  name: 'example.tex',
+  linkedFileData: {
+    url: 'https://overleaf.com',
+    provider: 'url',
+  },
+  created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  hash: 'some-hash',
+  type: 'file',
+  selected: true,
+}
+
+export const projectOutputFile: BinaryFile<'project_output_file'> = {
+  _id: 'project-output-file',
+  id: 'project-output-file',
+  name: 'example.pdf',
+  linkedFileData: {
+    v1_source_doc_id: 'v1-source-id',
+    source_output_file_path: '/source-entity-path.ext',
+    provider: 'project_output_file',
+    source_project_id: 'source-project-id',
+  },
+  created: new Date(2021, 1, 17, 3, 24).toISOString(),
+  hash: 'some-hash',
+  type: 'file',
+  selected: true,
+}