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 {