test: Add storybook config fixture (#786)

fixtures/storybook-config/.eslintignore

@@ -0,0 +1,7 @@
+# managed by sku
+*.less.d.ts
+coverage/
+dist-storybook/
+dist/
+report/
+# end managed by sku

fixtures/storybook-config/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+npm-debug.log
+
+# managed by sku
+.eslintrc
+.prettierrc
+coverage/
+dist-storybook/
+dist/
+report/
+tsconfig.json
+# end managed by sku

fixtures/storybook-config/.prettierignore

@@ -0,0 +1,7 @@
+# managed by sku
+*.less.d.ts
+coverage/
+dist-storybook/
+dist/
+report/
+# end managed by sku

fixtures/storybook-config/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@sku-fixtures/storybook-config",
+  "private": true,
+  "dependencies": {
+    "braid-design-system": "^31.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "sku": "workspace:*"
+  }
+}

fixtures/storybook-config/sku.config.ts

@@ -0,0 +1,11 @@
+import type { SkuConfig } from 'sku';
+
+const skuConfig: SkuConfig = {
+  clientEntry: 'src/client.tsx',
+  renderEntry: 'src/render.tsx',
+  environments: ['development', 'production'],
+  storybookPort: 8089,
+  orderImports: true,
+};
+
+export default skuConfig;

fixtures/storybook-config/src/StorybookDecorator.tsx

@@ -0,0 +1,10 @@
+import 'braid-design-system/reset';
+import { BraidProvider } from 'braid-design-system';
+import apac from 'braid-design-system/themes/apac';
+import React from 'react';
+
+export const StorybookDecorator = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <BraidProvider theme={apac}>{children}</BraidProvider>;

fixtures/storybook-config/src/TestComponent.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { Meta, StoryObj } from 'sku/@storybook/react';
+
+import { StorybookDecorator } from './StorybookDecorator';
+import { TestComponent } from './TestComponent';
+
+export default {
+  title: 'TestComponent',
+  component: TestComponent,
+  decorators: [
+    (Story) => (
+      <StorybookDecorator>
+        <Story />
+      </StorybookDecorator>
+    ),
+  ],
+} satisfies Meta;
+
+type Story = StoryObj<typeof TestComponent>;
+
+export const Default: Story = {
+  render: () => <TestComponent tone="caution">Hello world</TestComponent>,
+};

fixtures/storybook-config/src/TestComponent.tsx

@@ -0,0 +1,15 @@
+import { Card, Text } from 'braid-design-system';
+import React from 'react';
+
+type TestComponentProps = {
+  tone: React.ComponentProps<typeof Text>['tone'];
+  children: React.ReactNode;
+};
+
+export const TestComponent = ({ children, tone }: TestComponentProps) => (
+  <Card>
+    <Text tone={tone} data={{ 'automation-text': true }}>
+      {children}
+    </Text>
+  </Card>
+);

tests/package.json

@@ -24,6 +24,7 @@
     "@sku-fixtures/seek-style-guide": "workspace:*",
     "@sku-fixtures/sku-with-https": "workspace:*",
     "@sku-fixtures/ssr-hello-world": "workspace:*",
+    "@sku-fixtures/storybook-config": "workspace:*",
     "@sku-fixtures/translations": "workspace:*",
     "@sku-fixtures/typescript-css-modules": "workspace:*",
     "@sku-fixtures/source-maps": "workspace:*",

tests/react-css-modules.test.js

@@ -66,13 +66,13 @@ describe('react-css-modules', () => {
 
   describe('build-storybook', () => {
     let closeStorybookServer;
-    const asserServerPort = 4297;
-    const assetServerUrl = `http://localhost:${asserServerPort}`;
+    const assetServerPort = 4297;
+    const assetServerUrl = `http://localhost:${assetServerPort}`;
 
     beforeAll(async () => {
       await runSkuScriptInDir('build-storybook', appDir);
       closeStorybookServer = await startAssetServer(
-        asserServerPort,
+        assetServerPort,
         storybookDistDir,
       );
       await waitForUrls(assetServerUrl);

tests/storybook-config.test.js

@@ -0,0 +1,66 @@
+const path = require('path');
+const {
+  runSkuScriptInDir,
+  waitForUrls,
+  startAssetServer,
+  getStorybookContent,
+} = require('@sku-private/test-utils');
+
+const appDir = path.dirname(
+  require.resolve('@sku-fixtures/storybook-config/sku.config.ts'),
+);
+const storybookDistDir = path.resolve(appDir, 'dist-storybook');
+
+describe('storybook-config', () => {
+  describe('storybook', () => {
+    const storybookUrl = 'http://localhost:8089';
+    let server;
+
+    beforeAll(async () => {
+      server = await runSkuScriptInDir('storybook', appDir, ['--ci']);
+      await waitForUrls(storybookUrl);
+    }, 200000);
+
+    afterAll(async () => {
+      await server.kill();
+    });
+
+    it('should start a storybook server', async () => {
+      const { text, fontSize } = await getStorybookContent(
+        storybookUrl,
+        '[data-automation-text]',
+      );
+      expect(text).toEqual('Hello world');
+      expect(fontSize).toEqual('16px');
+    });
+  });
+
+  describe('build-storybook', () => {
+    let closeStorybookServer;
+    const assetServerPort = 4232;
+    const assetServerUrl = `http://localhost:${assetServerPort}`;
+
+    beforeAll(async () => {
+      await runSkuScriptInDir('build-storybook', appDir);
+      closeStorybookServer = await startAssetServer(
+        assetServerPort,
+        storybookDistDir,
+      );
+      await waitForUrls(assetServerUrl);
+    }, 200000);
+
+    afterAll(() => {
+      closeStorybookServer();
+    });
+
+    it('should create valid storybook', async () => {
+      const { text, fontSize } = await getStorybookContent(
+        assetServerUrl,
+        '[data-automation-text]',
+      );
+
+      expect(text).toEqual('Hello world');
+      expect(fontSize).toEqual('16px');
+    });
+  });
+});