Skip to content

Commit

Permalink
Merge pull request #1001 from chromaui/reuben/fix-sb-6-errors
Browse files Browse the repository at this point in the history 
Add fallback type for Storybook 6 builder syntax
  • Loading branch information
@ghengeveld
ghengeveld authored Jun 3, 2024
2 parents 17a6680 + 9483a03 commit 8c814b2
Show file tree
Hide file tree
Showing 8 changed files with 398 additions and 102 deletions.
2 changes: 1 addition & 1 deletion bin-src/__mocks__/normalProjectJson/project.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"packageManager": { "type": "yarn", "version": "1.22.19" },
"typescriptOptions": { "reactDocgen": "react-docgen-typescript" },
"preview": { "usesGlobals": false },
"framework": { "name": "@storybook/react-webpack5", "options": {} },
"framework": { "name": "@storybook/react-webpack5", "options": {}, "version": "8.1.5" },
"builder": "@storybook/builder-webpack5",
"renderer": "@storybook/react",
"storybookVersion": "8.1.5",
Expand Down
66 changes: 66 additions & 0 deletions bin-src/__mocks__/sb6ProjectJson/project.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
{
"generatedAt": 1717341501873,
"builder": {
"name": "webpack4"
},
"hasCustomBabel": false,
"hasCustomWebpack": true,
"hasStaticDirs": true,
"hasStorybookEslint": false,
"refCount": 0,
"monorepo": "Turborepo",
"packageManager": {
"type": "yarn",
"version": "1.22.19"
},
"features": {
"postcss": false,
"interactionsDebugger": true,
"warnOnLegacyHierarchySeparator": false
},
"storybookVersion": "6.5.16",
"language": "javascript",
"storybookPackages": {
"@storybook/addon-actions": {
"version": "6.5.16"
},
"@storybook/addons": {
"version": "6.5.16"
},
"@storybook/builder-webpack4": {
"version": "6.5.16"
},
"@storybook/manager-webpack4": {
"version": "6.5.16"
},
"@storybook/react": {
"version": "6.5.16"
},
"@storybook/testing-library": {
"version": "0.0.13"
},
"@storybook/theming": {
"version": "6.5.16"
},
"msw-storybook-addon": {
"version": "1.7.0"
},
"storybook-mock-date-decorator": {
"version": "1.0.0"
}
},
"framework": {
"name": "react"
},
"addons": {
"@storybook/addon-links": {
"version": "6.5.16"
},
"@storybook/addon-essentials": {
"version": "6.5.16"
},
"@storybook/addon-interactions": {
"version": "6.5.16"
}
}
}
63 changes: 63 additions & 0 deletions bin-src/__mocks__/sb6ProjectJsonMissingBuilder/project.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{
"generatedAt": 1717341501873,
"hasCustomBabel": false,
"hasCustomWebpack": true,
"hasStaticDirs": true,
"hasStorybookEslint": false,
"refCount": 0,
"monorepo": "Turborepo",
"packageManager": {
"type": "yarn",
"version": "1.22.19"
},
"features": {
"postcss": false,
"interactionsDebugger": true,
"warnOnLegacyHierarchySeparator": false
},
"storybookVersion": "6.5.16",
"language": "javascript",
"storybookPackages": {
"@storybook/addon-actions": {
"version": "6.5.16"
},
"@storybook/addons": {
"version": "6.5.16"
},
"@storybook/builder-webpack4": {
"version": "6.5.16"
},
"@storybook/manager-webpack4": {
"version": "6.5.16"
},
"@storybook/react": {
"version": "6.5.16"
},
"@storybook/testing-library": {
"version": "0.0.13"
},
"@storybook/theming": {
"version": "6.5.16"
},
"msw-storybook-addon": {
"version": "1.7.0"
},
"storybook-mock-date-decorator": {
"version": "1.0.0"
}
},
"framework": {
"name": "react"
},
"addons": {
"@storybook/addon-links": {
"version": "6.5.16"
},
"@storybook/addon-essentials": {
"version": "6.5.16"
},
"@storybook/addon-interactions": {
"version": "6.5.16"
}
}
}
210 changes: 121 additions & 89 deletions bin-src/init.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,134 @@
import { execaCommand } from "execa"
import { writeFile } from "jsonfile";
import { afterEach, describe, expect, it, vi } from "vitest";
import { execaCommand } from 'execa';
import { writeFile } from 'jsonfile';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';

import { addChromaticScriptToPackageJson, createChromaticConfigFile, installArchiveDependencies } from "./init";
import { beforeEach } from "node:test";
import {
addChromaticScriptToPackageJson,
createChromaticConfigFile,
installArchiveDependencies,
} from './init';

vi.mock('jsonfile', async (importOriginal) => {
return {
// @ts-expect-error TS does not think actual is an object, but it's fine.
...await importOriginal(),
writeFile: vi.fn(() => Promise.resolve()),
};
return {
// @ts-expect-error TS does not think actual is an object, but it's fine.
...(await importOriginal()),
writeFile: vi.fn(() => Promise.resolve()),
};
});

vi.mock('execa');

describe('addChromaticScriptToPackageJson', () => {
afterEach(() => {
vi.restoreAllMocks()
})
it('outputs updated package.json with only chromatic script if Framework is Storybook', async () => {
await addChromaticScriptToPackageJson({
packageJson: {},
packagePath: './package.json'
})
expect(writeFile).toHaveBeenCalledOnce()
expect(writeFile).toHaveBeenCalledWith('./package.json', {
scripts: {
chromatic: `chromatic`
}
}, { spaces: 2 })
})
afterEach(() => {
vi.restoreAllMocks();
});
it('outputs updated package.json with only chromatic script if Framework is Storybook', async () => {
await addChromaticScriptToPackageJson({
packageJson: {},
packagePath: './package.json',
});
expect(writeFile).toHaveBeenCalledOnce();
expect(writeFile).toHaveBeenCalledWith(
'./package.json',
{
scripts: {
chromatic: `chromatic`,
},
},
{ spaces: 2 }
);
});

it('outputs updated package.json with e2e script if Framework is not Storybook', async () => {
await addChromaticScriptToPackageJson({
packageJson: {},
packagePath: './package.json'
})
expect(writeFile).toHaveBeenCalledOnce()
expect(writeFile).toHaveBeenCalledWith('./package.json', {
scripts: {
chromatic: `chromatic`
}
}, { spaces: 2 })
})
})
it('outputs updated package.json with e2e script if Framework is not Storybook', async () => {
await addChromaticScriptToPackageJson({
packageJson: {},
packagePath: './package.json',
});
expect(writeFile).toHaveBeenCalledOnce();
expect(writeFile).toHaveBeenCalledWith(
'./package.json',
{
scripts: {
chromatic: `chromatic`,
},
},
{ spaces: 2 }
);
});
});

describe('createChromaticConfigFile', () => {
it('outputs file without buildScriptName when not passed one', async () => {
await createChromaticConfigFile({configFile: 'chromatic.config.json'})
expect(writeFile).toHaveBeenCalledOnce()
expect(writeFile).toHaveBeenCalledWith('chromatic.config.json', {})
})
})
it('outputs file without buildScriptName when not passed one', async () => {
await createChromaticConfigFile({ configFile: 'chromatic.config.json' });
expect(writeFile).toHaveBeenCalledOnce();
expect(writeFile).toHaveBeenCalledWith('chromatic.config.json', {});
});
});

describe('installArchiveDependencies', () => {
beforeEach(() => {
vi.doMock('find-up', async () => {
return {
findUp: vi.fn(() => Promise.resolve(undefined)),
};
});
})
afterEach(() => {
vi.clearAllMocks()
vi.resetModules()
})
it('successfully installs list of dependencies for Playwright if SB package is not found and Essentials is not found', async () => {
await installArchiveDependencies({}, 'playwright')
expect(execaCommand).toHaveBeenCalledOnce()
expect(execaCommand).toHaveBeenCalledWith('yarn add -D chromatic @chromatic-com/playwright storybook@latest @storybook/addon-essentials@latest @storybook/server-webpack5@latest')
})
it('successfully installs list of dependencies for Cypress if SB package is not found and Essentials is not found', async () => {
await installArchiveDependencies({}, 'cypress')
expect(execaCommand).toHaveBeenCalledOnce()
expect(execaCommand).toHaveBeenCalledWith('yarn add -D chromatic @chromatic-com/cypress storybook@latest @storybook/addon-essentials@latest @storybook/server-webpack5@latest')
})
it('successfully installs list of dependencies if SB package is found and Essentials is not found', async () => {
await installArchiveDependencies({devDependencies: {'storybook': '7.6.5'}}, 'playwright')
expect(execaCommand).toHaveBeenCalledOnce()
expect(execaCommand).toHaveBeenCalledWith('yarn add -D chromatic @chromatic-com/playwright @storybook/addon-essentials@7.6.5 @storybook/server-webpack5@7.6.5')
})
it('successfully installs list of dependencies if SB package is found and Essentials is found in devDependencies', async () => {
await installArchiveDependencies({devDependencies: {storybook: '7.6.5', '@storybook/addon-essentials': '7.6.5'}}, 'playwright')
expect(execaCommand).toHaveBeenCalledOnce()
expect(execaCommand).toHaveBeenCalledWith('yarn add -D chromatic @chromatic-com/playwright @storybook/server-webpack5@7.6.5')
vi.clearAllMocks()
})
it('successfully installs list of dependencies if SB package is found and Essentials is found in dependencies', async () => {
await installArchiveDependencies({dependencies: {storybook: '7.6.5', '@storybook/addon-essentials': '7.6.5'}}, 'playwright')
expect(execaCommand).toHaveBeenCalledOnce()
expect(execaCommand).toHaveBeenCalledWith('yarn add -D chromatic @chromatic-com/playwright @storybook/server-webpack5@7.6.5')
vi.clearAllMocks()
})
it('successfully installs list of dependencies if SB package is not found and Essentials is found in dependencies', async () => {
await installArchiveDependencies({dependencies: {'@storybook/addon-essentials': '7.6.5'}}, 'playwright')
expect(execaCommand).toHaveBeenCalledOnce()
expect(execaCommand).toHaveBeenCalledWith('yarn add -D chromatic @chromatic-com/playwright storybook@7.6.5 @storybook/server-webpack5@7.6.5')
vi.clearAllMocks()
})
})
beforeEach(() => {
vi.doMock('find-up', async () => {
return {
findUp: vi.fn(() => Promise.resolve(undefined)),
};
});
});
afterEach(() => {
vi.clearAllMocks();
vi.resetModules();
});
it('successfully installs list of dependencies for Playwright if SB package is not found and Essentials is not found', async () => {
await installArchiveDependencies({}, 'playwright');
expect(execaCommand).toHaveBeenCalledOnce();
expect(execaCommand).toHaveBeenCalledWith(
'yarn add -D chromatic @chromatic-com/playwright storybook@latest @storybook/addon-essentials@latest @storybook/server-webpack5@latest'
);
});
it('successfully installs list of dependencies for Cypress if SB package is not found and Essentials is not found', async () => {
await installArchiveDependencies({}, 'cypress');
expect(execaCommand).toHaveBeenCalledOnce();
expect(execaCommand).toHaveBeenCalledWith(
'yarn add -D chromatic @chromatic-com/cypress storybook@latest @storybook/addon-essentials@latest @storybook/server-webpack5@latest'
);
});
it('successfully installs list of dependencies if SB package is found and Essentials is not found', async () => {
await installArchiveDependencies({ devDependencies: { storybook: '7.6.5' } }, 'playwright');
expect(execaCommand).toHaveBeenCalledOnce();
expect(execaCommand).toHaveBeenCalledWith(
'yarn add -D chromatic @chromatic-com/playwright @storybook/addon-essentials@7.6.5 @storybook/server-webpack5@7.6.5'
);
});
it('successfully installs list of dependencies if SB package is found and Essentials is found in devDependencies', async () => {
await installArchiveDependencies(
{ devDependencies: { storybook: '7.6.5', '@storybook/addon-essentials': '7.6.5' } },
'playwright'
);
expect(execaCommand).toHaveBeenCalledOnce();
expect(execaCommand).toHaveBeenCalledWith(
'yarn add -D chromatic @chromatic-com/playwright @storybook/server-webpack5@7.6.5'
);
vi.clearAllMocks();
});
it('successfully installs list of dependencies if SB package is found and Essentials is found in dependencies', async () => {
await installArchiveDependencies(
{ dependencies: { storybook: '7.6.5', '@storybook/addon-essentials': '7.6.5' } },
'playwright'
);
expect(execaCommand).toHaveBeenCalledOnce();
expect(execaCommand).toHaveBeenCalledWith(
'yarn add -D chromatic @chromatic-com/playwright @storybook/server-webpack5@7.6.5'
);
vi.clearAllMocks();
});
it('successfully installs list of dependencies if SB package is not found and Essentials is found in dependencies', async () => {
await installArchiveDependencies(
{ dependencies: { '@storybook/addon-essentials': '7.6.5' } },
'playwright'
);
expect(execaCommand).toHaveBeenCalledOnce();
expect(execaCommand).toHaveBeenCalledWith(
'yarn add -D chromatic @chromatic-com/playwright storybook@7.6.5 @storybook/server-webpack5@7.6.5'
);
vi.clearAllMocks();
});
});
Loading

0 comments on commit 8c814b2

Please sign in to comment.