= {
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 (
diff --git a/src/stories/dataset/dataset-files/files-table/file-actions/file-info-messages/FileInfoMessages.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-actions/file-info-messages/FileInfoMessages.stories.tsx
index 504306f2e..db943603c 100644
--- a/src/stories/dataset/dataset-files/files-table/file-actions/file-info-messages/FileInfoMessages.stories.tsx
+++ b/src/stories/dataset/dataset-files/files-table/file-actions/file-info-messages/FileInfoMessages.stories.tsx
@@ -9,7 +9,11 @@ const meta: Meta = {
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
diff --git a/src/stories/file/File.stories.tsx b/src/stories/file/File.stories.tsx
index 1f72a8c7d..2a445a2d6 100644
--- a/src/stories/file/File.stories.tsx
+++ b/src/stories/file/File.stories.tsx
@@ -10,7 +10,11 @@ import { FileMother } from '../../../tests/component/files/domain/models/FileMot
const meta: Meta = {
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
diff --git a/src/stories/file/FileMockLoadingRepository.ts b/src/stories/file/FileMockLoadingRepository.ts
index b57bd0305..fd823764f 100644
--- a/src/stories/file/FileMockLoadingRepository.ts
+++ b/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())
})
}
}
diff --git a/src/stories/file/FileMockNoFiltersRepository.ts b/src/stories/file/FileMockNoFiltersRepository.ts
index 845aa45d8..04ccd7574 100644
--- a/src/stories/file/FileMockNoFiltersRepository.ts
+++ b/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())
})
}
}
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index 27fcd24e2..688410c96 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/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())
})
}
diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts
index f46387170..e596c26bd 100644
--- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts
+++ b/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 {
diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 978e46ed5..72d5baf46 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -1,9 +1,7 @@
import { faker } from '@faker-js/faker'
import {
- FileDateType,
FileEmbargo,
FileSize,
- FileSizeUnit,
FileType,
FileChecksum,
FileLabel,
@@ -13,6 +11,7 @@ import {
FileDownloadUrls
} from '../../../../../src/files/domain/models/FileMetadata'
import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap'
+import { FakerHelper } from '../../../shared/FakerHelper'
const valueOrUndefined: (value: T) => T | undefined = (value) => {
const shouldShowValue = faker.datatype.boolean()
@@ -69,11 +68,7 @@ export class FileTabularDataMother {
export class FileLabelMother {
static create(props?: Partial): FileLabel {
- return {
- type: faker.helpers.arrayElement(Object.values(FileLabelType)),
- value: faker.lorem.word(),
- ...props
- }
+ return FakerHelper.fileLabel(props)
}
static createMany(count: number): FileLabel[] {
@@ -92,13 +87,13 @@ export class FileLabelMother {
export class FileEmbargoMother {
static create(props?: Partial): FileEmbargo {
return new FileEmbargo(
- props?.dateAvailable ?? faker.date.future(),
+ props?.dateAvailable ?? FakerHelper.futureDate(),
props?.reason ?? faker.lorem.sentence()
)
}
static createWithNoReason(props?: Partial): FileEmbargo {
- return new FileEmbargo(props?.dateAvailable ?? faker.date.future(), undefined)
+ return new FileEmbargo(props?.dateAvailable ?? FakerHelper.futureDate(), undefined)
}
}
@@ -122,13 +117,7 @@ export class FileChecksumMother {
export class FileSizeMother {
static create(props?: Partial): FileSize {
- const size = {
- value: faker.datatype.number({ max: 1024, precision: 2 }),
- unit: faker.helpers.arrayElement(Object.values(FileSizeUnit)),
- ...props
- }
-
- return new FileSize(size.value, size.unit)
+ return FakerHelper.fileSize(props)
}
}
@@ -153,10 +142,10 @@ export class FileMetadataMother {
type: tabularFile ? FileTypeMother.createTabular() : FileTypeMother.create(),
size: FileSizeMother.create(),
date: {
- type: faker.helpers.arrayElement(Object.values(FileDateType)),
- date: faker.date.recent()
+ type: FakerHelper.fileDateType(),
+ date: FakerHelper.recentDate()
},
- downloadCount: faker.datatype.number(40),
+ downloadCount: FakerHelper.smallNumber(40),
labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [],
checksum: FileChecksumMother.create(),
thumbnail: thumbnail,
@@ -166,8 +155,8 @@ export class FileMetadataMother {
description: valueOrUndefined(faker.lorem.paragraph()),
isDeleted: faker.datatype.boolean(),
downloadUrls: FileDownloadUrlsMother.create(),
- depositDate: faker.date.past(),
- publicationDate: faker.datatype.boolean() ? faker.date.past() : undefined,
+ depositDate: FakerHelper.pastDate(),
+ publicationDate: faker.datatype.boolean() ? FakerHelper.pastDate() : undefined,
persistentId: faker.datatype.uuid(),
...props
}
@@ -228,7 +217,7 @@ export class FileMetadataMother {
}
static createWithDirectory(): FileMetadata {
- return this.createDefault({ directory: faker.system.directoryPath() })
+ return this.createDefault({ directory: FakerHelper.directoryPath() })
}
static createWithNoDirectory(): FileMetadata {
@@ -272,7 +261,7 @@ export class FileMetadataMother {
static createWithDescription(): FileMetadata {
return this.createDefault({
- description: faker.lorem.paragraph()
+ description: FakerHelper.paragraph()
})
}
@@ -296,7 +285,7 @@ export class FileMetadataMother {
static createWithThumbnail(): FileMetadata {
return this.createDefault({
- thumbnail: faker.image.imageUrl(400),
+ thumbnail: FakerHelper.getImageUrl(400),
type: FileTypeMother.createImage()
})
}
@@ -322,7 +311,7 @@ export class FileMetadataMother {
static createWithPublicationDate(props?: Partial): FileMetadata {
return this.createDefault({
- publicationDate: faker.date.past(),
+ publicationDate: FakerHelper.pastDate(),
...props
})
}
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
new file mode 100644
index 000000000..1ade2bd31
--- /dev/null
+++ b/tests/component/shared/FakerHelper.ts
@@ -0,0 +1,121 @@
+import { faker } from '@faker-js/faker'
+import {
+ FileLabel,
+ FileLabelType,
+ FileSize,
+ FileSizeUnit,
+ FileDateType
+} from '../../../src/files/domain/models/FileMetadata'
+
+// Helps to generate reproducible fake data
+
+export class FakerHelper {
+ static setFakerSeed() {
+ if (this.chromaticBuild()) {
+ faker.seed(123) // Use a specific seed during Chromatic runs
+ }
+ }
+ static chromaticBuild() {
+ return import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true'
+ }
+ /*
+ The loadingTimout method is used to simulate a delay in the response of a promise.
+ We set it to zero when running in Chromatic, so that calls to Faker happen in a
+ predictable way, and the Faker data is reproducible.
+ */
+ static loadingTimout() {
+ if (this.chromaticBuild()) {
+ return 0
+ } else {
+ return 1000
+ }
+ }
+ static smallNumber(max: number) {
+ if (this.chromaticBuild()) {
+ return 12
+ } else {
+ return faker.datatype.number(max)
+ }
+ }
+ static fileLabel(props?: Partial) {
+ if (this.chromaticBuild()) {
+ return {
+ type: FileLabelType.TAG,
+ value: faker.lorem.word(),
+ ...props
+ }
+ } else {
+ return {
+ type: faker.helpers.arrayElement(Object.values(FileLabelType)),
+ value: faker.lorem.word(),
+ ...props
+ }
+ }
+ }
+ static fileDateType() {
+ if (this.chromaticBuild()) {
+ return FileDateType.PUBLISHED
+ } else {
+ return faker.helpers.arrayElement(Object.values(FileDateType))
+ }
+ }
+ static fileSize(props?: Partial) {
+ if (this.chromaticBuild()) {
+ const size = {
+ value: 450,
+ unit: FileSizeUnit.MEGABYTES,
+ ...props
+ }
+ return new FileSize(size.value, size.unit)
+ } else {
+ const size = {
+ value: faker.datatype.number({ max: 1024, precision: 2 }),
+ unit: faker.helpers.arrayElement(Object.values(FileSizeUnit)),
+ ...props
+ }
+ return new FileSize(size.value, size.unit)
+ }
+ }
+ static directoryPath() {
+ if (this.chromaticBuild()) {
+ return '/usr/X11R6'
+ } else {
+ return faker.system.directoryPath()
+ }
+ }
+ static paragraph() {
+ if (this.chromaticBuild()) {
+ return 'Voluptas amet consectetur dolore doloribus. Cumque et quo eum voluptatem eum dolores dignissimos. Vel inventore quaerat officiis. Nobis debitis quidem hic laudantium blanditiis. Error excepturi dicta aliquam enim ducimus.'
+ } else {
+ return faker.lorem.paragraph()
+ }
+ }
+ static pastDate() {
+ if (this.chromaticBuild()) {
+ return new Date('2020-01-01T10:00:00.000Z')
+ } else {
+ return faker.date.past()
+ }
+ }
+ static futureDate() {
+ if (this.chromaticBuild()) {
+ return new Date('2030-06-11T10:00:00.000Z')
+ } else {
+ return faker.date.future()
+ }
+ }
+ static recentDate() {
+ if (this.chromaticBuild()) {
+ return new Date('2024-02-01T10:00:00.000Z')
+ } else {
+ return faker.date.recent()
+ }
+ }
+ static getImageUrl(width?: number, height?: number) {
+ if (this.chromaticBuild()) {
+ return 'https://picsum.photos/id/237/200'
+ } else {
+ return faker.image.imageUrl(width, height)
+ }
+ }
+}