diff --git a/package.json b/package.json index c0b811db..3e8fcb98 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ ] }, "dependencies": { - "chromatic": "^10.8.0", + "chromatic": "^11.0.0", "filesize": "^10.0.12", "jsonfile": "^6.1.0", "react-confetti": "^6.1.0" diff --git a/src/buildSteps.ts b/src/buildSteps.ts index 3ed0fe62..d576e621 100644 --- a/src/buildSteps.ts +++ b/src/buildSteps.ts @@ -44,7 +44,7 @@ export const BUILD_STEP_CONFIG: Record< renderName: () => `Build Storybook`, renderProgress: () => `Building your Storybook...`, renderComplete: () => `Storybook built`, - estimateDuration: 30_000, + estimateDuration: 20_000, }, upload: { key: "upload", @@ -65,7 +65,7 @@ export const BUILD_STEP_CONFIG: Record< return `Uploading files (${progress}/${total} ${symbol})...`; }, renderComplete: () => `Publish complete`, - estimateDuration: 30_000, + estimateDuration: 20_000, }, verify: { key: "verify", @@ -73,7 +73,7 @@ export const BUILD_STEP_CONFIG: Record< renderName: () => `Verify your Storybook`, renderProgress: () => `Verifying contents...`, renderComplete: () => `Storybook verified`, - estimateDuration: 10_000, + estimateDuration: 20_000, }, snapshot: { key: "snapshot", @@ -86,7 +86,7 @@ export const BUILD_STEP_CONFIG: Record< : `Running visual tests...`; }, renderComplete: () => `Tested your stories`, - estimateDuration: 60_000, + estimateDuration: 90_000, }, // These are special steps that are not part of the build process diff --git a/src/index.ts b/src/index.ts index dd9d9abf..278fb3ff 100644 --- a/src/index.ts +++ b/src/index.ts @@ -152,16 +152,15 @@ async function serverChannel(channel: Channel, options: Options & { configFile?: const writtenConfigFile = configFile; try { - const { configFile: actualConfigFile, ...config } = await getConfiguration(writtenConfigFile); - await updateChromaticConfig(writtenConfigFile || "chromatic.config.json", { - ...config, - projectId, - }); + // No config file may be found (file is about to be created) + const { configFile: foundConfigFile, ...config } = await getConfiguration(writtenConfigFile); + const targetConfigFile = foundConfigFile || writtenConfigFile || "chromatic.config.json"; + await updateChromaticConfig(targetConfigFile, { ...config, projectId }); projectInfoState.value = { ...projectInfoState.value, written: true, - configFile: actualConfigFile, + configFile: targetConfigFile, }; } catch (err) { console.warn(`Failed to update your main configuration:\n\n ${err}`); diff --git a/src/runChromaticBuild.test.ts b/src/runChromaticBuild.test.ts index 0ebdd668..2420bed6 100644 --- a/src/runChromaticBuild.test.ts +++ b/src/runChromaticBuild.test.ts @@ -74,21 +74,21 @@ describe("onStartOrProgress", () => { onStartOrProgress(store)({ task: "upload" } as any); expect(store.value).toMatchObject({ - buildProgressPercentage: expect.closeTo(24, 0), + buildProgressPercentage: expect.closeTo(14, 0), currentStep: "upload", stepProgress: { upload: { startedAt: expect.any(Number) } }, }); onStartOrProgress(store)({ task: "verify" } as any); expect(store.value).toMatchObject({ - buildProgressPercentage: expect.closeTo(48, 0), + buildProgressPercentage: expect.closeTo(29, 0), currentStep: "verify", stepProgress: { verify: { startedAt: expect.any(Number) } }, }); onStartOrProgress(store)({ task: "snapshot" } as any); expect(store.value).toMatchObject({ - buildProgressPercentage: expect.closeTo(55, 0), + buildProgressPercentage: expect.closeTo(41, 0), currentStep: "snapshot", stepProgress: { snapshot: { startedAt: expect.any(Number) } }, }); @@ -96,33 +96,33 @@ describe("onStartOrProgress", () => { it("updates progress with each invocation", () => { onStartOrProgress(store)({ task: "verify" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(48, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(29, 0); onStartOrProgress(store)({ task: "verify" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(50, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(30, 0); onStartOrProgress(store)({ task: "verify" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(52, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(32, 0); }); it("can never exceed progress for a step beyond the next step", () => { for (let n = 10; n; n -= 1) onStartOrProgress(store)({ task: "verify" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0); for (let n = 10; n; n -= 1) onStartOrProgress(store)({ task: "verify" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0); onStartOrProgress(store)({ task: "snapshot" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0); }); it('updates build progress based on "progress" and "total" values', () => { onStartOrProgress(store)({ task: "snapshot" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0); onStartOrProgress(store)({ task: "snapshot" } as any, { progress: 1, total: 2 }); expect(store.value.stepProgress.snapshot).toMatchObject({ numerator: 1, denominator: 2 }); - expect(store.value.buildProgressPercentage).toBeCloseTo(77, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(70, 0); onStartOrProgress(store)({ task: "snapshot" } as any, { progress: 2, total: 2 }); expect(store.value.stepProgress.snapshot).toMatchObject({ numerator: 2, denominator: 2 }); @@ -149,12 +149,12 @@ describe("onCompleteOrError", () => { it("does not set build progress to 100% on error", () => { onStartOrProgress(store)({ task: "snapshot" } as any); - expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0); + expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0); const error = { formattedError: "Oops!", originalError: new Error("Oops!") }; onCompleteOrError(store)({ task: "snapshot" } as any, error); expect(store.value).toMatchObject({ - buildProgressPercentage: expect.closeTo(55, 0), + buildProgressPercentage: expect.closeTo(41, 0), currentStep: "error", stepProgress: { snapshot: { completedAt: expect.any(Number) } }, ...error, diff --git a/src/screens/Authentication/Verify.tsx b/src/screens/Authentication/Verify.tsx index 11556ee2..2c6f9c7f 100644 --- a/src/screens/Authentication/Verify.tsx +++ b/src/screens/Authentication/Verify.tsx @@ -149,7 +149,7 @@ export const Verify = ({
Verify your account - Enter this verification code on Chromatic to grant access to your published + Check this verification code on Chromatic to grant access to your published Storybooks. diff --git a/src/utils/updateChromaticConfig.ts b/src/utils/updateChromaticConfig.ts index 6a52cf85..4de3e78b 100644 --- a/src/utils/updateChromaticConfig.ts +++ b/src/utils/updateChromaticConfig.ts @@ -2,5 +2,5 @@ import type { Configuration } from "chromatic/node"; import { writeFile } from "jsonfile"; export async function updateChromaticConfig(configFile: string, configuration: Configuration) { - await writeFile(configFile, configuration); + await writeFile(configFile, configuration, { spaces: 2 }); } diff --git a/yarn.lock b/yarn.lock index 955508c4..a2edf46e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4975,10 +4975,10 @@ chownr@^2.0.0: resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz" integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== -chromatic@^10.8.0: - version "10.8.0" - resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-10.8.0.tgz#741b0af9ba0e9605408f8a452fca2066a4b28ad4" - integrity sha512-DdgUSJJ5u+Czf+KZI+1NRz4RP/PbpcytWSUtpgqEBolGDw65VYwjI489yis+jfwKMev1VWEhj1xMYGITbD6XIA== +chromatic@^11.0.0: + version "11.0.0" + resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.0.0.tgz#3fcd5129a01c9b6bbd5ed46a11795ad5ac0731d3" + integrity sha512-utzRVqdMrpzYwZNf7dHWU0z0/rx6SH/FUVNozQxYHDtQfYUdEj+Ro4OSch5+Wsk2FoUmznJyLkaC2J839z1N7A== citty@^0.1.5: version "0.1.5"