From 68e5764dc93a740b2efffbb79a9e0ba6f8193fba Mon Sep 17 00:00:00 2001 From: Paul Sarando Date: Fri, 16 Jun 2023 17:20:51 -0700 Subject: [PATCH] Improve some stories for better Chromatic snapshots Increased the chromatic delay for some stories so they finish loading before Chromatic takes the snapshot. Added static dates to the Timestamp Form Field and admin Instant Launch List stories. Added `disableSnapshot` to the VICE Loading story, since the animation usually changes each snapshot. --- stories/AppBar.stories.js | 4 +++- stories/UserPortalProfile.stories.js | 4 +++- .../analyses/AnalysisSubmissionLanding.stories.js | 5 ++++- stories/base/FormFields.stories.js | 3 ++- stories/data/viewers/CsvViewer.stories.js | 3 ++- stories/instantlaunches/admin/SavedLaunchListData.js | 12 ++++++------ stories/vice/loading/ViceLoading.stories.js | 2 ++ 7 files changed, 22 insertions(+), 11 deletions(-) diff --git a/stories/AppBar.stories.js b/stories/AppBar.stories.js index c0ea2db8e..2222d0cc6 100644 --- a/stories/AppBar.stories.js +++ b/stories/AppBar.stories.js @@ -1,7 +1,7 @@ import React from "react"; import { UserProfileProvider } from "../src/contexts/userProfile"; import DEAppBar from "../src/components/layout/AppBar"; -import { mockAxios } from "./axiosMock"; +import { AXIOS_DELAY, mockAxios } from "./axiosMock"; import { NotificationsProvider } from "../src/contexts/pushNotifications"; import notificationsData from "./notifications/notificationsData"; import testConfig from "./configMock"; @@ -174,6 +174,7 @@ NormalView.args = { mockInstantLaunches: instantLaunchNavDrawerMock, mockUsageSummary: usageSummaryResponse, }; +NormalView.parameters = { chromatic: { delay: AXIOS_DELAY * 2 } }; export const ComputeLimitExceeded = appBarTestTemplate.bind({}); ComputeLimitExceeded.args = { @@ -185,6 +186,7 @@ ComputeLimitExceeded.args = { mockInstantLaunches: instantLaunchNavDrawerMock, mockUsageSummary: usageSummaryComputeLimitExceededResponse, }; +ComputeLimitExceeded.parameters = { chromatic: { delay: AXIOS_DELAY * 2 } }; export default { title: "AppBar", diff --git a/stories/UserPortalProfile.stories.js b/stories/UserPortalProfile.stories.js index af8153dbb..ff679e2d6 100644 --- a/stories/UserPortalProfile.stories.js +++ b/stories/UserPortalProfile.stories.js @@ -1,5 +1,5 @@ import React from "react"; -import { mockAxios } from "./axiosMock"; +import { AXIOS_DELAY, mockAxios } from "./axiosMock"; import { portalUserStatus, STATUS } from "./UserPortalMocks"; import DEAppBar from "../src/components/layout/AppBar"; import { UserProfileProvider } from "../src/contexts/userProfile"; @@ -30,6 +30,7 @@ export function GracePeriod() { ); } +GracePeriod.parameters = { chromatic: { delay: AXIOS_DELAY * 2 } }; export function Expired() { mockAxios.onGet("/api/profile").reply(200, mockUser); @@ -42,3 +43,4 @@ export function Expired() { ); } +Expired.parameters = { chromatic: { delay: AXIOS_DELAY * 2 } }; diff --git a/stories/analyses/AnalysisSubmissionLanding.stories.js b/stories/analyses/AnalysisSubmissionLanding.stories.js index 6ad9b4591..bab473934 100644 --- a/stories/analyses/AnalysisSubmissionLanding.stories.js +++ b/stories/analyses/AnalysisSubmissionLanding.stories.js @@ -1,5 +1,5 @@ import React from "react"; -import { mockAxios } from "../axiosMock"; +import { AXIOS_DELAY, mockAxios } from "../axiosMock"; import { deWordCountAnalysis, params, info } from "./AnalysesMocks"; import AnalysisSubmissionLanding from "components/analyses/landing/AnalysisSubmissionLanding"; @@ -28,3 +28,6 @@ export const AnalysisSubmissionLandingTest = () => { /> ); }; +AnalysisSubmissionLandingTest.parameters = { + chromatic: { delay: AXIOS_DELAY * 2 }, +}; diff --git a/stories/base/FormFields.stories.js b/stories/base/FormFields.stories.js index ad021703e..a552628fc 100644 --- a/stories/base/FormFields.stories.js +++ b/stories/base/FormFields.stories.js @@ -286,7 +286,8 @@ export const Timestamp = ({ label, helperText, readOnly }) => { return ( diff --git a/stories/data/viewers/CsvViewer.stories.js b/stories/data/viewers/CsvViewer.stories.js index b4b3b5ce7..db67d7aed 100644 --- a/stories/data/viewers/CsvViewer.stories.js +++ b/stories/data/viewers/CsvViewer.stories.js @@ -1,7 +1,7 @@ import React from "react"; import FileViewer from "components/data/viewers/FileViewer"; -import { mockAxios } from "../../axiosMock"; +import { AXIOS_DELAY, mockAxios } from "../../axiosMock"; import { fileTypesResp, csvMainfestResp, csvChunkResp } from "../DataMocks"; export default { title: "Data / Viewers / CSV", @@ -33,3 +33,4 @@ export const CSVFileViewerTest = () => { return ; }; +CSVFileViewerTest.parameters = { chromatic: { delay: AXIOS_DELAY * 2 } }; diff --git a/stories/instantlaunches/admin/SavedLaunchListData.js b/stories/instantlaunches/admin/SavedLaunchListData.js index bc77230d0..630c8657c 100644 --- a/stories/instantlaunches/admin/SavedLaunchListData.js +++ b/stories/instantlaunches/admin/SavedLaunchListData.js @@ -129,7 +129,7 @@ export const testInstantLaunches = { id: "6ae67c2a-8153-4575-8425-2cc7526daac5", quick_launch_id: "3f8cd42a-ee04-42de-872d-1bd637a77ddc", added_by: "aramsey@iplantcollaborative.org", - added_on: Date(), + added_on: new Date(2021, 3, 27, 9, 22, 55), }, ], }; @@ -144,7 +144,7 @@ export const testFullInstantLaunchList = { quick_launch_description: "", quick_launch_creator: "ipcdev@iplantcollaborative.org", added_by: "ipcdev@siplantcollaborative.org", - added_on: Date(), + added_on: new Date(2021, 3, 27, 9, 22, 55), app_id: "34f2c392-9a8a-11e8-9c8e-008cfa5ae621", app_version_id: "34f2c392-9a8a-11e8-9c8e-008cfa5ae621", app_version: "v0.0.3", @@ -175,7 +175,7 @@ export const testFullInstantLaunchList = { quick_launch_description: "", quick_launch_creator: "aramsey@iplantcollaborative.org", added_by: "aramsey@iplantcollaborative.org", - added_on: Date(), + added_on: new Date(2021, 3, 27, 9, 22, 55), app_id: "e54bfc1a-f811-11e8-8a14-008cfa5ae621", app_version_id: "e54bfc1a-f811-11e8-8a14-008cfa5ae621", app_version: "latest", @@ -202,7 +202,7 @@ export const testFullInstantLaunchList = { quick_launch_description: "", quick_launch_creator: "wregglej@iplantcollaborative.org", added_by: "wregglej@iplantcollaborative.org", - added_on: Date(), + added_on: new Date(2021, 3, 27, 9, 22, 55), app_id: "d61d9a26-e921-11e9-8fe0-008cfa5ae621", app_version_id: "d61d9a26-e921-11e9-8fe0-008cfa5ae621", app_version: "Unversioned", @@ -229,7 +229,7 @@ export const testFullInstantLaunchList = { quick_launch_description: "", quick_launch_creator: "wregglej@iplantcollaborative.org", added_by: "wregglej@iplantcollaborative.org", - added_on: Date(), + added_on: new Date(2021, 3, 27, 9, 22, 55), app_id: "d61d9a26-e921-11e9-8fe0-008cfa5ae621", app_version_id: "d61d9a26-e921-11e9-8fe0-008cfa5ae621", app_version: "Unversioned", @@ -256,7 +256,7 @@ export const testFullInstantLaunchList = { quick_launch_description: "", quick_launch_creator: "wregglej@iplantcollaborative.org", added_by: "wregglej@iplantcollaborative.org", - added_on: Date(), + added_on: new Date(2021, 3, 27, 9, 22, 55), app_id: "d61d9a26-e921-11e9-8fe0-008cfa5ae621", app_version_id: "d61d9a26-e921-11e9-8fe0-008cfa5ae621", app_version: "Unversioned", diff --git a/stories/vice/loading/ViceLoading.stories.js b/stories/vice/loading/ViceLoading.stories.js index 2bf6804e6..ed66935b2 100644 --- a/stories/vice/loading/ViceLoading.stories.js +++ b/stories/vice/loading/ViceLoading.stories.js @@ -65,6 +65,8 @@ export const ViceLoadingTest = ({ return ; }; +ViceLoadingTest.parameters = { chromatic: { disableSnapshot: true } }; + ViceLoadingTest.argTypes = { statusEndpointError: { defaultValue: false,