From 4fe24dcb77fbc376dbe47f65bebadcfeec25db7f Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Fri, 23 Feb 2024 16:03:38 -0500
Subject: [PATCH 01/29] use faker seed in chromatic run

---
 .github/workflows/chromatic.yml |  3 +++
 .storybook/preview.tsx          | 22 +++++++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 88eb8f68f..cc28c5d9f 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -26,6 +26,9 @@ jobs:
         run: npm run build
       - name: Publish to Chromatic
         uses: chromaui/action@v1
+        env:
+          STORYBOOK_USE_FAKER_SEED: "true"
+
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index a7db0d900..49366ede7 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,10 @@
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { MemoryRouter } from 'react-router-dom'
+import { faker } from '@faker-js/faker'
+
+
+
 
 const preview: Preview = {
   parameters: {
@@ -13,13 +17,17 @@ const preview: Preview = {
     }
   },
   decorators: [
-    (Story) => (
-      <ThemeProvider>
-        <MemoryRouter>
-          <Story />
-        </MemoryRouter>
-      </ThemeProvider>
-    )
+    (Story) => {
+      if (import.meta.env.STORYBOOK_USE_FAKER_SEED === 'true' ) {
+        faker.seed(123) // Use a specific seed during Chromatic runs
+      }return (
+        <ThemeProvider>
+          <MemoryRouter>
+            <Story />
+          </MemoryRouter>
+        </ThemeProvider>
+      )
+    }
   ]
 }
 

From bd04d1dd131d26392db043b5153462125176a225 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Fri, 23 Feb 2024 16:25:05 -0500
Subject: [PATCH 02/29] set snapshot delay for Home and File pages

---
 src/stories/file/File.stories.tsx | 6 +++++-
 src/stories/home/Home.stories.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

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<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
diff --git a/src/stories/home/Home.stories.tsx b/src/stories/home/Home.stories.tsx
index 800bb977e..d708bc8ac 100644
--- a/src/stories/home/Home.stories.tsx
+++ b/src/stories/home/Home.stories.tsx
@@ -9,7 +9,11 @@ import { NoDatasetsMockRepository } from '../dataset/NoDatasetsMockRepository'
 const meta: Meta<typeof Home> = {
   title: 'Pages/Home',
   component: Home,
-  decorators: [WithI18next, WithLayout]
+  decorators: [WithI18next, WithLayout],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
 }
 
 export default meta

From a6cb61abe5afb0b64260d1daaa659e28b6f19919 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Fri, 23 Feb 2024 21:10:51 -0500
Subject: [PATCH 03/29] add helper method for static images

---
 .github/workflows/chromatic.yml                        |  2 +-
 .../dataset-citation/DatasetCitation.stories.tsx       |  3 ++-
 tests/component/shared/ImageHelper.ts                  | 10 ++++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 tests/component/shared/ImageHelper.ts

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index cc28c5d9f..32b53b1a7 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -27,7 +27,7 @@ jobs:
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         env:
-          STORYBOOK_USE_FAKER_SEED: "true"
+          STORYBOOK_CHROMATIC_BUILD: "true"
 
         # Chromatic GitHub Action options
         with:
diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
index e578f6d1e..45f60db99 100644
--- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
+++ b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
@@ -6,6 +6,7 @@ import {
   DatasetMother,
   DatasetVersionMother
 } from '../../../../tests/component/dataset/domain/models/DatasetMother'
+import { getImageUrl } from '../../../../tests/component/shared/ImageHelper'
 
 const meta: Meta<typeof DatasetCitation> = {
   title: 'Sections/Dataset Page/DatasetCitation',
@@ -31,7 +32,7 @@ export const Default: Story = {
 
 export const WithThumbnailImage: Story = {
   render: () => {
-    const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() })
+    const dataset = DatasetMother.createRealistic({ thumbnail: getImageUrl() })
     return (
       <div>
         <br></br>
diff --git a/tests/component/shared/ImageHelper.ts b/tests/component/shared/ImageHelper.ts
new file mode 100644
index 000000000..c8db6b590
--- /dev/null
+++ b/tests/component/shared/ImageHelper.ts
@@ -0,0 +1,10 @@
+import { faker } from '@faker-js/faker'
+
+export function getImageUrl() {
+  // Always use a static image for chromatic builds
+  if (import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true') {
+    return 'https://loremflickr.com/320/240?lock=1'
+  } else {
+    faker.image.imageUrl()
+  }
+}

From fdc4eb5604f3c5dfb5cd70e1bc92631a8bd2360f Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Fri, 23 Feb 2024 21:24:48 -0500
Subject: [PATCH 04/29] add delay to DatasetsList.stories.tsx, fix preview.tsx
 env variable

---
 .storybook/preview.tsx                                  | 8 +++-----
 src/stories/home/datasets-list/DatasetsList.stories.tsx | 6 +++++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 49366ede7..1e42586b6 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -3,9 +3,6 @@ import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { MemoryRouter } from 'react-router-dom'
 import { faker } from '@faker-js/faker'
 
-
-
-
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -18,9 +15,10 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => {
-      if (import.meta.env.STORYBOOK_USE_FAKER_SEED === 'true' ) {
+      if (import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true') {
         faker.seed(123) // Use a specific seed during Chromatic runs
-      }return (
+      }
+      return (
         <ThemeProvider>
           <MemoryRouter>
             <Story />
diff --git a/src/stories/home/datasets-list/DatasetsList.stories.tsx b/src/stories/home/datasets-list/DatasetsList.stories.tsx
index 51287336f..dca1bf994 100644
--- a/src/stories/home/datasets-list/DatasetsList.stories.tsx
+++ b/src/stories/home/datasets-list/DatasetsList.stories.tsx
@@ -8,7 +8,11 @@ import { NoDatasetsMockRepository } from '../../dataset/NoDatasetsMockRepository
 const meta: Meta<typeof DatasetsList> = {
   title: 'Sections/Home/DatasetsList',
   component: DatasetsList,
-  decorators: [WithI18next]
+  decorators: [WithI18next],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
 }
 
 export default meta

From a78a7142758f1fb6086f414b02b819b9dd3addba Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Fri, 23 Feb 2024 22:02:18 -0500
Subject: [PATCH 05/29] use getImageUrl(), add chromatic delay

---
 .../file-info-messages/FileInfoMessages.stories.tsx         | 6 +++++-
 .../component/dataset/domain/models/DatasetPreviewMother.ts | 5 +++--
 tests/component/files/domain/models/FileMetadataMother.ts   | 3 ++-
 tests/component/shared/ImageHelper.ts                       | 4 ++--
 4 files changed, 12 insertions(+), 6 deletions(-)

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<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
diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts
index f46387170..21db92a0f 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 { getImageUrl } from '../../../shared/ImageHelper'
 
 export class DatasetPreviewMother {
   static createMany(count: number): DatasetPreview[] {
@@ -17,7 +18,7 @@ export class DatasetPreviewMother {
       version: DatasetVersionMother.create(),
       releaseOrCreateDate: faker.date.past(),
       description: faker.lorem.paragraph(),
-      thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined,
+      thumbnail: faker.datatype.boolean() ? getImageUrl() : undefined,
       ...props
     }
 
@@ -41,7 +42,7 @@ export class DatasetPreviewMother {
   }
 
   static createWithThumbnail(): DatasetPreview {
-    return this.create({ thumbnail: faker.image.imageUrl() })
+    return this.create({ thumbnail: getImageUrl() })
   }
 
   static createWithNoThumbnail(): DatasetPreview {
diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 978e46ed5..b86f833b8 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -13,6 +13,7 @@ import {
   FileDownloadUrls
 } from '../../../../../src/files/domain/models/FileMetadata'
 import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap'
+import { getImageUrl } from '../../../shared/ImageHelper'
 
 const valueOrUndefined: <T>(value: T) => T | undefined = (value) => {
   const shouldShowValue = faker.datatype.boolean()
@@ -296,7 +297,7 @@ export class FileMetadataMother {
 
   static createWithThumbnail(): FileMetadata {
     return this.createDefault({
-      thumbnail: faker.image.imageUrl(400),
+      thumbnail: getImageUrl(400),
       type: FileTypeMother.createImage()
     })
   }
diff --git a/tests/component/shared/ImageHelper.ts b/tests/component/shared/ImageHelper.ts
index c8db6b590..770ffc43f 100644
--- a/tests/component/shared/ImageHelper.ts
+++ b/tests/component/shared/ImageHelper.ts
@@ -1,10 +1,10 @@
 import { faker } from '@faker-js/faker'
 
-export function getImageUrl() {
+export function getImageUrl(width?: number, height?: number) {
   // Always use a static image for chromatic builds
   if (import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true') {
     return 'https://loremflickr.com/320/240?lock=1'
   } else {
-    faker.image.imageUrl()
+    faker.image.imageUrl(width, height)
   }
 }

From 578522ad14cbe31f56d178c224a43895b60550a6 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Fri, 23 Feb 2024 22:21:26 -0500
Subject: [PATCH 06/29] fix: use picsum image, which is static

---
 tests/component/shared/ImageHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/ImageHelper.ts b/tests/component/shared/ImageHelper.ts
index 770ffc43f..b3cb5bba9 100644
--- a/tests/component/shared/ImageHelper.ts
+++ b/tests/component/shared/ImageHelper.ts
@@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker'
 export function getImageUrl(width?: number, height?: number) {
   // Always use a static image for chromatic builds
   if (import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true') {
-    return 'https://loremflickr.com/320/240?lock=1'
+    return 'https://picsum.photos/id/237/200'
   } else {
     faker.image.imageUrl(width, height)
   }

From b4b46009e9c16fe4694bf895d6c1c5cebdc1bf94 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sat, 24 Feb 2024 09:53:45 -0500
Subject: [PATCH 07/29] refactoring, adding FakerHelper.fileSize()

---
 .../DatasetCitation.stories.tsx               |  5 +-
 .../domain/models/DatasetPreviewMother.ts     |  8 ++--
 .../files/domain/models/FileMetadataMother.ts | 21 +++------
 tests/component/shared/FakerHelper.ts         | 46 +++++++++++++++++++
 tests/component/shared/ImageHelper.ts         | 10 ----
 5 files changed, 59 insertions(+), 31 deletions(-)
 create mode 100644 tests/component/shared/FakerHelper.ts
 delete mode 100644 tests/component/shared/ImageHelper.ts

diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
index 45f60db99..63f1b7e22 100644
--- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
+++ b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
@@ -1,12 +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 { getImageUrl } from '../../../../tests/component/shared/ImageHelper'
+import { FakerHelper } from '../../../../tests/component/shared/FakerHelper'
 
 const meta: Meta<typeof DatasetCitation> = {
   title: 'Sections/Dataset Page/DatasetCitation',
@@ -32,7 +31,7 @@ export const Default: Story = {
 
 export const WithThumbnailImage: Story = {
   render: () => {
-    const dataset = DatasetMother.createRealistic({ thumbnail: getImageUrl() })
+    const dataset = DatasetMother.createRealistic({ thumbnail: FakerHelper.getImageUrl() })
     return (
       <div>
         <br></br>
diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts
index 21db92a0f..e596c26bd 100644
--- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts
+++ b/tests/component/dataset/domain/models/DatasetPreviewMother.ts
@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker'
 import { DatasetPreview } from '../../../../../src/dataset/domain/models/DatasetPreview'
 import { DatasetVersionMother } from './DatasetMother'
-import { getImageUrl } from '../../../shared/ImageHelper'
+import { FakerHelper } from '../../../shared/FakerHelper'
 
 export class DatasetPreviewMother {
   static createMany(count: number): DatasetPreview[] {
@@ -16,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() ? getImageUrl() : undefined,
+      thumbnail: faker.datatype.boolean() ? FakerHelper.getImageUrl() : undefined,
       ...props
     }
 
@@ -42,7 +42,7 @@ export class DatasetPreviewMother {
   }
 
   static createWithThumbnail(): DatasetPreview {
-    return this.create({ thumbnail: getImageUrl() })
+    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 b86f833b8..8405325aa 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -3,7 +3,6 @@ import {
   FileDateType,
   FileEmbargo,
   FileSize,
-  FileSizeUnit,
   FileType,
   FileChecksum,
   FileLabel,
@@ -13,7 +12,7 @@ import {
   FileDownloadUrls
 } from '../../../../../src/files/domain/models/FileMetadata'
 import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap'
-import { getImageUrl } from '../../../shared/ImageHelper'
+import { FakerHelper } from '../../../shared/FakerHelper'
 
 const valueOrUndefined: <T>(value: T) => T | undefined = (value) => {
   const shouldShowValue = faker.datatype.boolean()
@@ -123,13 +122,7 @@ export class FileChecksumMother {
 
 export class FileSizeMother {
   static create(props?: Partial<FileSize>): 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)
   }
 }
 
@@ -155,7 +148,7 @@ export class FileMetadataMother {
       size: FileSizeMother.create(),
       date: {
         type: faker.helpers.arrayElement(Object.values(FileDateType)),
-        date: faker.date.recent()
+        date: FakerHelper.recentDate()
       },
       downloadCount: faker.datatype.number(40),
       labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [],
@@ -167,8 +160,8 @@ export class FileMetadataMother {
       description: valueOrUndefined<string>(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
     }
@@ -297,7 +290,7 @@ export class FileMetadataMother {
 
   static createWithThumbnail(): FileMetadata {
     return this.createDefault({
-      thumbnail: getImageUrl(400),
+      thumbnail: FakerHelper.getImageUrl(400),
       type: FileTypeMother.createImage()
     })
   }
@@ -323,7 +316,7 @@ export class FileMetadataMother {
 
   static createWithPublicationDate(props?: Partial<FileMetadata>): 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..90be80e49
--- /dev/null
+++ b/tests/component/shared/FakerHelper.ts
@@ -0,0 +1,46 @@
+import { faker } from '@faker-js/faker'
+import { FileSize, FileSizeUnit } from '../../../src/files/domain/models/FileMetadata'
+
+export class FakerHelper {
+  static chromaticBuild() {
+    return import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true'
+  }
+  static fileSize(props?: Partial<FileSize>) {
+    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 pastDate() {
+    if (this.chromaticBuild()) {
+      return faker.date.past(10, '2020-01-01T10:00:00.000Z')
+    } else {
+      return faker.date.past()
+    }
+  }
+  static recentDate() {
+    if (this.chromaticBuild()) {
+      return faker.date.recent(1, '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)
+    }
+  }
+}
diff --git a/tests/component/shared/ImageHelper.ts b/tests/component/shared/ImageHelper.ts
deleted file mode 100644
index b3cb5bba9..000000000
--- a/tests/component/shared/ImageHelper.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-export function getImageUrl(width?: number, height?: number) {
-  // Always use a static image for chromatic builds
-  if (import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true') {
-    return 'https://picsum.photos/id/237/200'
-  } else {
-    faker.image.imageUrl(width, height)
-  }
-}

From a96a19265fd26bc712a6e461296dce7bcff3c174 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sat, 24 Feb 2024 10:14:51 -0500
Subject: [PATCH 08/29] add comment

---
 tests/component/shared/FakerHelper.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 90be80e49..0356a8db4 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -1,5 +1,6 @@
 import { faker } from '@faker-js/faker'
 import { FileSize, FileSizeUnit } from '../../../src/files/domain/models/FileMetadata'
+// Helps to generate reproducible fake data
 
 export class FakerHelper {
   static chromaticBuild() {

From 76d42110b9ffbba19369bdbe55ddaa725a087991 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sat, 24 Feb 2024 10:35:04 -0500
Subject: [PATCH 09/29] add FakerHelper.fileLabel()

---
 .../files/domain/models/FileMetadataMother.ts |  6 +----
 tests/component/shared/FakerHelper.ts         | 22 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 8405325aa..834a11570 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -69,11 +69,7 @@ export class FileTabularDataMother {
 
 export class FileLabelMother {
   static create(props?: Partial<FileLabel>): FileLabel {
-    return {
-      type: faker.helpers.arrayElement(Object.values(FileLabelType)),
-      value: faker.lorem.word(),
-      ...props
-    }
+    return FakerHelper.fileLabel(props)
   }
 
   static createMany(count: number): FileLabel[] {
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 0356a8db4..a9af45567 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -1,11 +1,31 @@
 import { faker } from '@faker-js/faker'
-import { FileSize, FileSizeUnit } from '../../../src/files/domain/models/FileMetadata'
+import {
+  FileLabel,
+  FileLabelType,
+  FileSize,
+  FileSizeUnit
+} from '../../../src/files/domain/models/FileMetadata'
 // Helps to generate reproducible fake data
 
 export class FakerHelper {
   static chromaticBuild() {
     return import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true'
   }
+  static fileLabel(props?: Partial<FileLabel>) {
+    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 fileSize(props?: Partial<FileSize>) {
     if (this.chromaticBuild()) {
       const size = {

From ccbad1eefb3ab5c831db06fd672f98e18f19fd3a Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sat, 24 Feb 2024 10:51:14 -0500
Subject: [PATCH 10/29] trigger a build

---
 tests/component/shared/FakerHelper.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index a9af45567..11421c5bf 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -5,6 +5,7 @@ import {
   FileSize,
   FileSizeUnit
 } from '../../../src/files/domain/models/FileMetadata'
+
 // Helps to generate reproducible fake data
 
 export class FakerHelper {

From 30907af997abfcb05ce7f773515f1ba53f2b9a45 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 10:57:50 -0500
Subject: [PATCH 11/29] set Faker seed in FakerHelper.ts

---
 .storybook/preview.tsx                | 5 ++---
 tests/component/shared/FakerHelper.ts | 5 +++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 1e42586b6..652ce3a87 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,6 +2,7 @@ import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { MemoryRouter } from 'react-router-dom'
 import { faker } from '@faker-js/faker'
+import { FakerHelper } from '../tests/component/shared/FakerHelper'
 
 const preview: Preview = {
   parameters: {
@@ -15,9 +16,7 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => {
-      if (import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true') {
-        faker.seed(123) // Use a specific seed during Chromatic runs
-      }
+      FakerHelper.setFakerSeed()
       return (
         <ThemeProvider>
           <MemoryRouter>
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 11421c5bf..9baf8b543 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -9,6 +9,11 @@ import {
 // 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'
   }

From 6ea19d5a36c28c6e4068f0d3a00e62e6eb87722b Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 11:19:12 -0500
Subject: [PATCH 12/29] add  FakerHelper.futureDate()

---
 .../file-info/file-info-cell/FileInfoCell.stories.tsx      | 3 ++-
 tests/component/shared/FakerHelper.ts                      | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx
index b992e8c0f..b0ba210c5 100644
--- a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx
+++ b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx
@@ -2,11 +2,12 @@ import { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../../../../WithI18next'
 import { FileInfoCell } from '../../../../../../sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell'
 import { FilePreviewMother } from '../../../../../../../tests/component/files/domain/models/FilePreviewMother'
+import { WithFakerSeed } from '../../../../../WithFakerSeed'
 
 const meta: Meta<typeof FileInfoCell> = {
   title: 'Sections/Dataset Page/DatasetFiles/FilesTable/FileInfoCell',
   component: FileInfoCell,
-  decorators: [WithI18next]
+  decorators: [WithI18next, WithFakerSeed]
 }
 
 export default meta
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 9baf8b543..7f394d967 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -56,6 +56,13 @@ export class FakerHelper {
       return faker.date.past()
     }
   }
+  static futureDate() {
+    if (this.chromaticBuild()) {
+      return faker.date.future(10, '2024-01-01T10:00:00.000Z')
+    } else {
+      return faker.date.future()
+    }
+  }
   static recentDate() {
     if (this.chromaticBuild()) {
       return faker.date.recent(1, '2024-02-01T10:00:00.000Z')

From a7c8aa7bf17e2c993f66ad282d40e6b21fe3edb3 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 11:25:39 -0500
Subject: [PATCH 13/29] fix: lint errors

---
 .storybook/preview.tsx                                    | 1 -
 tests/component/files/domain/models/FileMetadataMother.ts | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 652ce3a87..9df427eea 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,7 +1,6 @@
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { MemoryRouter } from 'react-router-dom'
-import { faker } from '@faker-js/faker'
 import { FakerHelper } from '../tests/component/shared/FakerHelper'
 
 const preview: Preview = {
diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 834a11570..01b865384 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -88,13 +88,13 @@ export class FileLabelMother {
 export class FileEmbargoMother {
   static create(props?: Partial<FileEmbargo>): FileEmbargo {
     return new FileEmbargo(
-      props?.dateAvailable ?? faker.date.future(),
+      props?.dateAvailable ?? FakerHelper.futureDate(),
       props?.reason ?? faker.lorem.sentence()
     )
   }
 
   static createWithNoReason(props?: Partial<FileEmbargo>): FileEmbargo {
-    return new FileEmbargo(props?.dateAvailable ?? faker.date.future(), undefined)
+    return new FileEmbargo(props?.dateAvailable ?? FakerHelper.futureDate(), undefined)
   }
 }
 

From b7bd8b0b2523c01acba00c9717fcce9d39188b30 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 11:35:46 -0500
Subject: [PATCH 14/29] fix: remove decorator

---
 .../file-info/file-info-cell/FileInfoCell.stories.tsx          | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx
index b0ba210c5..b992e8c0f 100644
--- a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx
+++ b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.stories.tsx
@@ -2,12 +2,11 @@ import { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../../../../WithI18next'
 import { FileInfoCell } from '../../../../../../sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell'
 import { FilePreviewMother } from '../../../../../../../tests/component/files/domain/models/FilePreviewMother'
-import { WithFakerSeed } from '../../../../../WithFakerSeed'
 
 const meta: Meta<typeof FileInfoCell> = {
   title: 'Sections/Dataset Page/DatasetFiles/FilesTable/FileInfoCell',
   component: FileInfoCell,
-  decorators: [WithI18next, WithFakerSeed]
+  decorators: [WithI18next]
 }
 
 export default meta

From 4549e059f0baf88a546006f79b75e7b7ed658967 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 11:49:08 -0500
Subject: [PATCH 15/29] add FakerHelper.fileDateType()

---
 .../files/domain/models/FileMetadataMother.ts          |  2 +-
 tests/component/shared/FakerHelper.ts                  | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 01b865384..218297fff 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -143,7 +143,7 @@ export class FileMetadataMother {
       type: tabularFile ? FileTypeMother.createTabular() : FileTypeMother.create(),
       size: FileSizeMother.create(),
       date: {
-        type: faker.helpers.arrayElement(Object.values(FileDateType)),
+        type: FakerHelper.fileDateType(),
         date: FakerHelper.recentDate()
       },
       downloadCount: faker.datatype.number(40),
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 7f394d967..f7f2c0b66 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -3,7 +3,8 @@ import {
   FileLabel,
   FileLabelType,
   FileSize,
-  FileSizeUnit
+  FileSizeUnit,
+  FileDateType
 } from '../../../src/files/domain/models/FileMetadata'
 
 // Helps to generate reproducible fake data
@@ -32,6 +33,13 @@ export class FakerHelper {
       }
     }
   }
+  static fileDateType() {
+    if (this.chromaticBuild()) {
+      return FileDateType.PUBLISHED
+    } else {
+      return faker.helpers.arrayElement(Object.values(FileDateType))
+    }
+  }
   static fileSize(props?: Partial<FileSize>) {
     if (this.chromaticBuild()) {
       const size = {

From d8b48a85525b90ca54c2b1a708084db62bcd4914 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 11:52:49 -0500
Subject: [PATCH 16/29] add FakerHelper.fileDateType()

---
 tests/component/files/domain/models/FileMetadataMother.ts | 2 +-
 tests/component/shared/FakerHelper.ts                     | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 218297fff..9aa9decd3 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -146,7 +146,7 @@ export class FileMetadataMother {
         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,
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index f7f2c0b66..9639c333f 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -18,6 +18,13 @@ export class FakerHelper {
   static chromaticBuild() {
     return import.meta.env.STORYBOOK_CHROMATIC_BUILD === 'true'
   }
+  static smallNumber(max: number) {
+    if (this.chromaticBuild()) {
+      return 12
+    } else {
+      return faker.datatype.number(max)
+    }
+  }
   static fileLabel(props?: Partial<FileLabel>) {
     if (this.chromaticBuild()) {
       return {

From 8976e6fbecdf7c415712ca8a700ac88d6060a426 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 12:01:20 -0500
Subject: [PATCH 17/29] trigger build

---
 tests/component/shared/FakerHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 9639c333f..55e032388 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -7,7 +7,7 @@ import {
   FileDateType
 } from '../../../src/files/domain/models/FileMetadata'
 
-// Helps to generate reproducible fake data
+// Helps to generate reproducible fake data for tests
 
 export class FakerHelper {
   static setFakerSeed() {

From 2e173a067b0b70883b5be5b7f65606125a45c33e Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 12:16:40 -0500
Subject: [PATCH 18/29] use hard-coded date for future in Chromatic

---
 tests/component/shared/FakerHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 55e032388..918885262 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -73,7 +73,7 @@ export class FakerHelper {
   }
   static futureDate() {
     if (this.chromaticBuild()) {
-      return faker.date.future(10, '2024-01-01T10:00:00.000Z')
+      return new Date('2030-06-11T10:00:00.000Z')
     } else {
       return faker.date.future()
     }

From 76babfbf54243db39af87c213bb407550f5121ba Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 12:23:36 -0500
Subject: [PATCH 19/29] trigger build

---
 tests/component/shared/FakerHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 918885262..97a6f9412 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -7,7 +7,7 @@ import {
   FileDateType
 } from '../../../src/files/domain/models/FileMetadata'
 
-// Helps to generate reproducible fake data for tests
+// Helps to generate reproducible fake data
 
 export class FakerHelper {
   static setFakerSeed() {

From 907f222677a2d7b05d2b52f002aca5fef0d6ef7c Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 12:32:01 -0500
Subject: [PATCH 20/29] use hard-coded past dates in Chromatic

---
 tests/component/shared/FakerHelper.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 97a6f9412..b35f73bd0 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -66,7 +66,7 @@ export class FakerHelper {
   }
   static pastDate() {
     if (this.chromaticBuild()) {
-      return faker.date.past(10, '2020-01-01T10:00:00.000Z')
+      return new Date('2020-01-01T10:00:00.000Z')
     } else {
       return faker.date.past()
     }
@@ -80,7 +80,7 @@ export class FakerHelper {
   }
   static recentDate() {
     if (this.chromaticBuild()) {
-      return faker.date.recent(1, '2024-02-01T10:00:00.000Z')
+      return new Date('2024-02-01T10:00:00.000Z')
     } else {
       return faker.date.recent()
     }

From 0470b91e33a3f549e54bde8de72c95bfaac123d2 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 12:38:37 -0500
Subject: [PATCH 21/29] trigger build

---
 tests/component/shared/FakerHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index b35f73bd0..2cb60f040 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -7,7 +7,7 @@ import {
   FileDateType
 } from '../../../src/files/domain/models/FileMetadata'
 
-// Helps to generate reproducible fake data
+// Helps to generate reproducible fake data for tests
 
 export class FakerHelper {
   static setFakerSeed() {

From f6d8fd34f5b90d431652ec7c2754e661c24b763e Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 12:51:18 -0500
Subject: [PATCH 22/29] trigger build

---
 tests/component/shared/FakerHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 2cb60f040..b35f73bd0 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -7,7 +7,7 @@ import {
   FileDateType
 } from '../../../src/files/domain/models/FileMetadata'
 
-// Helps to generate reproducible fake data for tests
+// Helps to generate reproducible fake data
 
 export class FakerHelper {
   static setFakerSeed() {

From a6ef52cce2f8201c7283515e125a25870cbc4166 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 12:58:55 -0500
Subject: [PATCH 23/29] fix lint error

---
 tests/component/files/domain/models/FileMetadataMother.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 9aa9decd3..93e12a0b0 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -1,6 +1,5 @@
 import { faker } from '@faker-js/faker'
 import {
-  FileDateType,
   FileEmbargo,
   FileSize,
   FileType,

From e9ec0971f366ed866d0cbffedc72c2e844af7238 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Sun, 25 Feb 2024 13:20:02 -0500
Subject: [PATCH 24/29] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 965da5efd..9a025ead7 100644
--- a/README.md
+++ b/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)

From e57680948211ba91807609e7f6e78c663bcfdb43 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 26 Feb 2024 07:09:06 -0500
Subject: [PATCH 25/29] fix lint error

---
 .github/workflows/chromatic.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 32b53b1a7..bd7250aec 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -27,7 +27,7 @@ jobs:
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         env:
-          STORYBOOK_CHROMATIC_BUILD: "true"
+          STORYBOOK_CHROMATIC_BUILD: 'true'
 
         # Chromatic GitHub Action options
         with:

From d413274116443b37154484a16a9b6f3aba757eb7 Mon Sep 17 00:00:00 2001
From: Matt Mangan <matt@mangan.io>
Date: Thu, 29 Feb 2024 15:16:15 -0500
Subject: [PATCH 26/29] trigger test for review completion and storybook state
 verification

---
 tests/component/shared/FakerHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index b35f73bd0..2cb60f040 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -7,7 +7,7 @@ import {
   FileDateType
 } from '../../../src/files/domain/models/FileMetadata'
 
-// Helps to generate reproducible fake data
+// Helps to generate reproducible fake data for tests
 
 export class FakerHelper {
   static setFakerSeed() {

From 035930a23dba01a44ea9211c9c74aabf300c052f Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 11 Mar 2024 17:12:13 -0400
Subject: [PATCH 27/29] remove loading delay for Chromatic runs

---
 src/stories/dataset/DatasetMockRepository.ts         | 11 ++++++-----
 .../dataset/WithDatasetAllPermissionsGranted.tsx     |  3 ++-
 src/stories/dataset/WithDatasetDraftAsOwner.tsx      |  3 ++-
 src/stories/dataset/WithDatasetLockedFromEdits.tsx   |  3 ++-
 src/stories/dataset/WithDatasetPrivateUrl.tsx        |  3 ++-
 src/stories/dataset/WithDeaccessionedDataset.tsx     |  3 ++-
 src/stories/file/FileMockLoadingRepository.ts        |  5 +++--
 src/stories/file/FileMockNoFiltersRepository.ts      |  5 +++--
 src/stories/file/FileMockRepository.ts               |  9 +++++----
 tests/component/shared/FakerHelper.ts                | 12 ++++++++++++
 10 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/stories/dataset/DatasetMockRepository.ts b/src/stories/dataset/DatasetMockRepository.ts
index 03facced8..71bde4bec 100644
--- a/src/stories/dataset/DatasetMockRepository.ts
+++ b/src/stories/dataset/DatasetMockRepository.ts
@@ -6,13 +6,14 @@ 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
@@ -20,7 +21,7 @@ export class DatasetMockRepository implements DatasetRepository {
     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())
     })
   }
 }
diff --git a/src/stories/dataset/WithDatasetAllPermissionsGranted.tsx b/src/stories/dataset/WithDatasetAllPermissionsGranted.tsx
index 04ae3b312..56eb8544d 100644
--- a/src/stories/dataset/WithDatasetAllPermissionsGranted.tsx
+++ b/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 (
diff --git a/src/stories/dataset/WithDatasetDraftAsOwner.tsx b/src/stories/dataset/WithDatasetDraftAsOwner.tsx
index fd00a11ff..1fedcddfd 100644
--- a/src/stories/dataset/WithDatasetDraftAsOwner.tsx
+++ b/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 (
diff --git a/src/stories/dataset/WithDatasetLockedFromEdits.tsx b/src/stories/dataset/WithDatasetLockedFromEdits.tsx
index 351da52e8..8c3e7ec24 100644
--- a/src/stories/dataset/WithDatasetLockedFromEdits.tsx
+++ b/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 (
diff --git a/src/stories/dataset/WithDatasetPrivateUrl.tsx b/src/stories/dataset/WithDatasetPrivateUrl.tsx
index 1cc892f75..357425b50 100644
--- a/src/stories/dataset/WithDatasetPrivateUrl.tsx
+++ b/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 (
diff --git a/src/stories/dataset/WithDeaccessionedDataset.tsx b/src/stories/dataset/WithDeaccessionedDataset.tsx
index 0f8235cd2..83283182f 100644
--- a/src/stories/dataset/WithDeaccessionedDataset.tsx
+++ b/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 (
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/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 2cb60f040..09c6ccfd0 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -18,6 +18,18 @@ export class FakerHelper {
   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

From 03abc562ebd350aa296742a2bcbc34d5fd64e2bc Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Tue, 12 Mar 2024 09:07:10 -0400
Subject: [PATCH 28/29] use hard-coded description and directory path in
 FileMetadataMother.ts for Chromatic build

---
 .../files/domain/models/FileMetadataMother.ts      |  4 ++--
 tests/component/shared/FakerHelper.ts              | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 93e12a0b0..72d5baf46 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -217,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 {
@@ -261,7 +261,7 @@ export class FileMetadataMother {
 
   static createWithDescription(): FileMetadata {
     return this.createDefault({
-      description: faker.lorem.paragraph()
+      description: FakerHelper.paragraph()
     })
   }
 
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 09c6ccfd0..908a754e2 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -76,6 +76,20 @@ export class FakerHelper {
       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')

From a9f9fda7215316fe2d9a3fd7d97017939827c7e9 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Tue, 12 Mar 2024 12:15:28 -0400
Subject: [PATCH 29/29] test to trigger a build

---
 tests/component/shared/FakerHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index 908a754e2..1ade2bd31 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -7,7 +7,7 @@ import {
   FileDateType
 } from '../../../src/files/domain/models/FileMetadata'
 
-// Helps to generate reproducible fake data for tests
+// Helps to generate reproducible fake data
 
 export class FakerHelper {
   static setFakerSeed() {