diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json index d4aef494bd..58a3bb7099 100644 --- a/apps/pie-storybook/package.json +++ b/apps/pie-storybook/package.json @@ -9,7 +9,8 @@ "build": "storybook build --output-dir dist && cp -R ./static ./dist", "build:testing": "BROWSER_TESTING=true storybook build --output-dir dist && cp -R ./static ./dist", "lint:scripts": "run -T eslint .", - "lint:scripts:fix": "run -T eslint . --fix" + "lint:scripts:fix": "run -T eslint . --fix", + "test": "run -T vitest run test" }, "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", diff --git a/apps/pie-storybook/test/utilities/index.test.ts b/apps/pie-storybook/test/utilities/index.test.ts new file mode 100644 index 0000000000..f926915be8 --- /dev/null +++ b/apps/pie-storybook/test/utilities/index.test.ts @@ -0,0 +1,85 @@ +import { describe, it, expect } from 'vitest'; +import { html, render } from 'lit'; +import { createStory, createVariantStory } from '../../utilities/index'; +import { type StoryOptions } from '../../types/StoryOptions'; + +type ComponentProps = { + size: string; + variant: string; +}; + +const template: (props: ComponentProps) => ReturnType = ({ size, variant }) => html` + +`; + +describe('createStory', () => { + it('should create a story with default args', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const story = createStory(template, defaultArgs); + + const result = story(); + expect(result.args).toEqual(defaultArgs); + expect(result.render(defaultArgs)).toHaveProperty('strings'); + }); + + it('should override default args with prop overrides', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const story = createStory(template, defaultArgs); + + const propOverrides = { variant: 'secondary' }; + const result = story(propOverrides); + expect(result.args).toEqual({ size: 'medium', variant: 'secondary' }); + }); + + it('should apply story options correctly', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const storyOpts: StoryOptions = { + bgColor: 'background-subtle', + }; + const story = createStory(template, defaultArgs); + + const result = story({}, storyOpts); + expect(result.parameters.backgrounds.default).toBe('background-subtle'); + }); +}); + +describe('createVariantStory', () => { + it('should generate all combinations of prop options', () => { + const propOptions = { + size: ['small', 'medium', 'large'], + variant: ['primary', 'secondary'], + }; + + const story = createVariantStory(template, propOptions); + const renderResult = story.render(); + + // Render the template to a DOM element + const container = document.createElement('div'); + render(renderResult, container); + + // Count the number of pie-component elements + const renderedCombinations = container.querySelectorAll('pie-component'); + const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length; + expect(renderedCombinations.length).toBe(expectedCombinationsCount); + }); + + it('should apply story options correctly', () => { + const propOptions = { + size: ['small'], + variant: ['primary'], + }; + + const storyOpts: StoryOptions = { + bgColor: 'background-subtle', + argTypes: { size: { control: 'text' } }, + }; + + const story = createVariantStory(template, propOptions, storyOpts); + + // Check if the parameters include the background color + expect(story.parameters.backgrounds.default).toBe('background-subtle'); + + // Check if argTypes are applied + expect(story.argTypes).toEqual(storyOpts.argTypes); + }); +}); \ No newline at end of file diff --git a/apps/pie-storybook/turbo.json b/apps/pie-storybook/turbo.json index 95d0a43d1f..9460488216 100644 --- a/apps/pie-storybook/turbo.json +++ b/apps/pie-storybook/turbo.json @@ -33,6 +33,10 @@ "^generate:component-statuses" ], "outputs": ["dist/**"] + }, + "test": { + "cache": true, + "dependsOn": [] } } } \ No newline at end of file