Merge pull request #325 from IQSS/305-update-chromatic-configurations

305 update chromatic configurations

.github/workflows/chromatic.yml

@@ -26,6 +26,9 @@ jobs:
         run: npm run build
       - name: Publish to Chromatic
         uses: chromaui/action@v1
+        env:
+          STORYBOOK_CHROMATIC_BUILD: 'true'
+
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { MemoryRouter } from 'react-router-dom'
+import { FakerHelper } from '../tests/component/shared/FakerHelper'
 
 const preview: Preview = {
   parameters: {
@@ -13,13 +14,16 @@ const preview: Preview = {
     }
   },
   decorators: [
-    (Story) => (
-      <ThemeProvider>
-        <MemoryRouter>
-          <Story />
-        </MemoryRouter>
-      </ThemeProvider>
-    )
+    (Story) => {
+      FakerHelper.setFakerSeed()
+      return (
+        <ThemeProvider>
+          <MemoryRouter>
+            <Story />
+          </MemoryRouter>
+        </ThemeProvider>
+      )
+    }
   ]
 }
 

README.md

@@ -110,7 +110,8 @@ There are 2 Storybook instances, one for the Design System and one for the Datav
 Open [http://localhost:6006](http://localhost:6006) to view the Dataverse Frontend Storybook in your browser.  
 Open [http://localhost:6007](http://localhost:6007) to view the Design System Storybook in your browser.
 
-Note that both Storybook instances are also published to Chromatic:
+Note that both Storybook instances are also published to Chromatic (the Chromatic build contains
+less dynamic content than the local Storybook):
 
 - [Dataverse Frontend](https://www.chromatic.com/builds?appId=646f68aa9beb01b35c599acd)
 - [Dataverse Design System](https://www.chromatic.com/builds?appId=646fbe232a8d3b501a1943f3)

src/stories/collection/Collection.stories.tsx

@@ -10,7 +10,11 @@ import { WithLoggedInUser } from '../WithLoggedInUser'
 const meta: Meta<typeof Collection> = {
   title: 'Pages/Collection',
   component: Collection,
-  decorators: [WithI18next, WithLayout]
+  decorators: [WithI18next, WithLayout],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
 }
 
 export default meta

src/stories/collection/datasets-list/DatasetsList.stories.tsx

@@ -8,7 +8,11 @@ import { NoDatasetsMockRepository } from '../../dataset/NoDatasetsMockRepository
 const meta: Meta<typeof DatasetsList> = {
   title: 'Sections/Collection/DatasetsList',
   component: DatasetsList,
-  decorators: [WithI18next]
+  decorators: [WithI18next],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
 }
 
 export default meta

src/stories/dataset/DatasetMockRepository.ts

@@ -6,21 +6,22 @@ import { DatasetPaginationInfo } from '../../dataset/domain/models/DatasetPagina
 import { DatasetPreview } from '../../dataset/domain/models/DatasetPreview'
 import { DatasetPreviewMother } from '../../../tests/component/dataset/domain/models/DatasetPreviewMother'
 import { DatasetFormFields } from '../../dataset/domain/models/DatasetFormFields'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 export class DatasetMockRepository implements DatasetRepository {
   // eslint-disable-next-line unused-imports/no-unused-vars
   getAll(collectionId: string, paginationInfo: DatasetPaginationInfo): Promise<DatasetPreview[]> {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(DatasetPreviewMother.createManyRealistic(paginationInfo.pageSize))
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
   getTotalDatasetsCount(collectionId: string): Promise<TotalDatasetsCount> {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(200)
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 
@@ -33,7 +34,7 @@ export class DatasetMockRepository implements DatasetRepository {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(DatasetMother.createRealistic())
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
   getByPrivateUrlToken(
@@ -43,7 +44,7 @@ export class DatasetMockRepository implements DatasetRepository {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(DatasetMother.createRealistic())
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 
@@ -52,7 +53,7 @@ export class DatasetMockRepository implements DatasetRepository {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(returnMsg)
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 }

src/stories/dataset/WithDatasetAllPermissionsGranted.tsx

@@ -6,6 +6,7 @@ import {
   DatasetMother,
   DatasetPermissionsMother
 } from '../../../tests/component/dataset/domain/models/DatasetMother'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export const WithDatasetAllPermissionsGranted = (Story: StoryFn) => {
   const datasetRepository = {} as DatasetRepository
@@ -23,7 +24,7 @@ export const WithDatasetAllPermissionsGranted = (Story: StoryFn) => {
             hasValidTermsOfAccess: true
           })
         )
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
   return (

src/stories/dataset/WithDatasetDraftAsOwner.tsx

@@ -7,6 +7,7 @@ import {
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { Dataset } from '../../dataset/domain/models/Dataset'
 import { DatasetProvider } from '../../sections/dataset/DatasetProvider'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export const WithDatasetDraftAsOwner = (Story: StoryFn) => {
   const datasetRepository = {} as DatasetRepository
@@ -24,7 +25,7 @@ export const WithDatasetDraftAsOwner = (Story: StoryFn) => {
             version: DatasetVersionMother.createDraftAsLatestVersion()
           })
         )
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
   return (

src/stories/dataset/WithDatasetLockedFromEdits.tsx

@@ -7,6 +7,7 @@ import {
   DatasetPermissionsMother
 } from '../../../tests/component/dataset/domain/models/DatasetMother'
 import { DatasetProvider } from '../../sections/dataset/DatasetProvider'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export const WithDatasetLockedFromEdits = (Story: StoryFn) => {
   const datasetRepository = {} as DatasetRepository
@@ -24,7 +25,7 @@ export const WithDatasetLockedFromEdits = (Story: StoryFn) => {
             locks: [DatasetLockMother.createLockedInEditInProgress()]
           })
         )
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
   return (

src/stories/dataset/WithDatasetPrivateUrl.tsx

@@ -3,6 +3,7 @@ import { DatasetProvider } from '../../sections/dataset/DatasetProvider'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { Dataset } from '../../dataset/domain/models/Dataset'
 import { DatasetMother } from '../../../tests/component/dataset/domain/models/DatasetMother'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export const WithDatasetPrivateUrl = (Story: StoryFn) => {
   const datasetRepository = {} as DatasetRepository
@@ -20,7 +21,7 @@ export const WithDatasetPrivateUrl = (Story: StoryFn) => {
             }
           })
         )
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
   return (

src/stories/dataset/WithDeaccessionedDataset.tsx

@@ -6,6 +6,7 @@ import {
   DatasetMother,
   DatasetVersionMother
 } from '../../../tests/component/dataset/domain/models/DatasetMother'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export const WithDeaccessionedDataset = (Story: StoryFn) => {
   const datasetRepository = {} as DatasetRepository
@@ -22,7 +23,7 @@ export const WithDeaccessionedDataset = (Story: StoryFn) => {
             version: DatasetVersionMother.createDeaccessioned()
           })
         )
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
   return (

src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../WithI18next'
 import { DatasetCitation } from '../../../sections/dataset/dataset-citation/DatasetCitation'
-import { faker } from '@faker-js/faker'
 import {
   DatasetMother,
   DatasetVersionMother
 } from '../../../../tests/component/dataset/domain/models/DatasetMother'
+import { FakerHelper } from '../../../../tests/component/shared/FakerHelper'
 
 const meta: Meta<typeof DatasetCitation> = {
   title: 'Sections/Dataset Page/DatasetCitation',
@@ -31,7 +31,7 @@ export const Default: Story = {
 
 export const WithThumbnailImage: Story = {
   render: () => {
-    const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() })
+    const dataset = DatasetMother.createRealistic({ thumbnail: FakerHelper.getImageUrl() })
     return (
       <div>
         <br></br>

src/stories/dataset/dataset-files/files-table/file-actions/file-info-messages/FileInfoMessages.stories.tsx

@@ -9,7 +9,11 @@ const meta: Meta<typeof FileInfoMessages> = {
   title:
     'Sections/Dataset Page/DatasetFiles/FilesTable/FileActionsCell/FileInfoMessages/FileInfoMessages',
   component: FileInfoMessages,
-  decorators: [WithI18next, WithSettings, WithDatasetAllPermissionsGranted]
+  decorators: [WithI18next, WithSettings, WithDatasetAllPermissionsGranted],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
 }
 
 export default meta

src/stories/file/File.stories.tsx

@@ -10,7 +10,11 @@ import { FileMother } from '../../../tests/component/files/domain/models/FileMot
 const meta: Meta<typeof File> = {
   title: 'Pages/File',
   component: File,
-  decorators: [WithI18next, WithLayout]
+  decorators: [WithI18next, WithLayout],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
 }
 
 export default meta

src/stories/file/FileMockLoadingRepository.ts

@@ -5,6 +5,7 @@ import { DatasetVersion, DatasetVersionNumber } from '../../dataset/domain/model
 import { FileCriteria } from '../../files/domain/models/FileCriteria'
 import { FileMockRepository } from './FileMockRepository'
 import { File } from '../../files/domain/models/File'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export class FileMockLoadingRepository extends FileMockRepository implements FileRepository {
   getAllByDatasetPersistentId(
@@ -31,7 +32,7 @@ export class FileMockLoadingRepository extends FileMockRepository implements Fil
     return new Promise(() => {
       setTimeout(() => {
         // Do nothing
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 
@@ -40,7 +41,7 @@ export class FileMockLoadingRepository extends FileMockRepository implements Fil
     return new Promise(() => {
       setTimeout(() => {
         // Do nothing
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 }

src/stories/file/FileMockNoFiltersRepository.ts

@@ -6,6 +6,7 @@ import { FilesMockData } from './FileMockData'
 import { DatasetVersion, DatasetVersionNumber } from '../../dataset/domain/models/Dataset'
 import { FileCriteria } from '../../files/domain/models/FileCriteria'
 import { FileMockRepository } from './FileMockRepository'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export class FileMockNoFiltersRepository extends FileMockRepository implements FileRepository {
   getAllByDatasetPersistentId(
@@ -17,7 +18,7 @@ export class FileMockNoFiltersRepository extends FileMockRepository implements F
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(FilesMockData())
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 
@@ -32,7 +33,7 @@ export class FileMockNoFiltersRepository extends FileMockRepository implements F
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(FilesCountInfoMother.createOnlyTotal())
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 }

src/stories/file/FileMockRepository.ts

@@ -10,6 +10,7 @@ import { FilePaginationInfo } from '../../files/domain/models/FilePaginationInfo
 import { FileMother } from '../../../tests/component/files/domain/models/FileMother'
 import { File } from '../../files/domain/models/File'
 import { FilePreview } from '../../files/domain/models/FilePreview'
+import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 
 export class FileMockRepository implements FileRepository {
   constructor(public readonly fileMock?: File) {}
@@ -23,7 +24,7 @@ export class FileMockRepository implements FileRepository {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(FilesMockData(paginationInfo))
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 
@@ -36,7 +37,7 @@ export class FileMockRepository implements FileRepository {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(FilesCountInfoMother.create({ total: 200 }))
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 
@@ -51,7 +52,7 @@ export class FileMockRepository implements FileRepository {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(19900)
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 
@@ -62,7 +63,7 @@ export class FileMockRepository implements FileRepository {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(this.fileMock ?? FileMother.createRealistic())
-      }, 1000)
+      }, FakerHelper.loadingTimout())
     })
   }
 

tests/component/dataset/domain/models/DatasetPreviewMother.ts

@@ -1,6 +1,7 @@
 import { faker } from '@faker-js/faker'
 import { DatasetPreview } from '../../../../../src/dataset/domain/models/DatasetPreview'
 import { DatasetVersionMother } from './DatasetMother'
+import { FakerHelper } from '../../../shared/FakerHelper'
 
 export class DatasetPreviewMother {
   static createMany(count: number): DatasetPreview[] {
@@ -15,9 +16,9 @@ export class DatasetPreviewMother {
     const datasetPreview = {
       persistentId: faker.datatype.uuid(),
       version: DatasetVersionMother.create(),
-      releaseOrCreateDate: faker.date.past(),
+      releaseOrCreateDate: FakerHelper.pastDate(),
       description: faker.lorem.paragraph(),
-      thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined,
+      thumbnail: faker.datatype.boolean() ? FakerHelper.getImageUrl() : undefined,
       ...props
     }
 
@@ -41,7 +42,7 @@ export class DatasetPreviewMother {
   }
 
   static createWithThumbnail(): DatasetPreview {
-    return this.create({ thumbnail: faker.image.imageUrl() })
+    return this.create({ thumbnail: FakerHelper.getImageUrl() })
   }
 
   static createWithNoThumbnail(): DatasetPreview {