build: test storybook in CI

.github/workflows/test-storybook.yml

@@ -0,0 +1,18 @@
+# recipe from https://github.com/storybookjs/test-runner
+# https://github.com/storybookjs/test-runner?tab=readme-ov-file#2-running-against-locally-built-storybooks-in-ci
+# "Running against locally built Storybooks in CI"
+name: Storybook Tests
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+      - name: Install dependencies
+        run: yarn
+      - name: Run Storybook tests
+        run: yarn test-storybook:ci

.storybook/Welcome/__welcome-story.js

@@ -1,23 +1,14 @@
-import { storiesOf } from '@storybook/vue3';
 import SvWelcome from './sv-welcome.vue';
 
-const stories = storiesOf('Carbon', module);
-
-stories.add(
-  'Welcome',
-  () => {
-    // ----------------------------------------------------------------
-    const templateViewString = `<sv-welcome></sv-welcome>`;
-
-    return {
-      components: { SvWelcome },
-      template: templateViewString,
-    };
+export default {
+  title: 'Welcome',
+  component: SvWelcome,
+  options: {
+    isToolshown: false,
+    showPanel: false,
   },
-  {
-    options: {
-      isToolshown: false,
-      showPanel: false,
-    },
-  }
-);
+};
+
+export const Vue3Carbon10 = {
+  args: {},
+};

package.json

@@ -23,7 +23,9 @@
     "serve:storybook": "cd ./storybook && yarn run serve",
     "test:publish": "npm publish --registry http://0.0.0.0:4873",
     "test:unpublish": "rm -rf local-dev/npm-registry/storage/data/@carbon/vue",
-    "test": "vue-cli-service test:unit --no-coverage"
+    "test": "vue-cli-service test:unit --no-coverage",
+    "test-storybook": "test-storybook --config-dir ./.storybook",
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook\""
   },
   "workspaces": [
     "storybook"
@@ -43,6 +45,7 @@
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
     "@npmcli/package-json": "^5.1.0",
+    "@storybook/test-runner": "~0.9.4",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
@@ -58,11 +61,13 @@
     "babel-core": "^6.26.3",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.3.0",
+    "concurrently": "^9.0.1",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.2",
     "eslint": "^8.28.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^8.7.1",
+    "http-server": "^14.1.1",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
     "lerna": "^6.5.1",
@@ -80,6 +85,7 @@
     "vue": "^3.3.4",
     "vue-docgen-web-types": "^0.1.8",
     "vue-loader": "^17.0.1",
+    "wait-on": "^8.0.1",
     "webpack": "^5.75.0"
   },
   "eslintConfig": {

src/components/CvAspectRatio/CvAspectRatio.stories.js

@@ -1,15 +1,12 @@
 import { h } from 'vue';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvAspectRatio, CvAspectRatioConsts } from '.';
 
 import './CvAspectRatio.stories.scss';
 
 export default {
-  title: `${sbCompPrefix}/CvAspectRatio`,
+  title: 'Component/CvAspectRatio',
   component: CvAspectRatio,
   decorators: [
     story => h('div', { class: 'aspect-ratio-story' }, story().render()),

src/components/CvBreadcrumb/CvBreadcrumb.stories.js

@@ -5,13 +5,10 @@ import {
   CvBreadcrumbSkeletonItem,
 } from '.';
 
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 export default {
-  title: `${sbCompPrefix}/CvBreadcrumb`,
+  title: 'Component/CvBreadcrumb',
   component: CvBreadcrumb,
   argTypes: {
     ariaLabel: {

src/components/CvButton/CvButton.stories.js

@@ -2,12 +2,10 @@ import { action } from '@storybook/addon-actions';
 import { CvButton } from './';
 import { buttonKinds, buttonSizes } from './consts';
 import {
-  sbCompPrefix,
   splitSlotArgs,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
-import { sbBtnPrefix } from './sbBtnPrefix';
 import { props as commonCvButtonProps } from './CvButtonCommon';
 import {
   Bee20,
@@ -28,7 +26,7 @@ const icons = {
 };
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButton`,
+  title: 'Component/CvButton',
   component: CvButton,
   argTypes: {
     ...storybookControlsFromProps(commonCvButtonProps),

src/components/CvButton/CvButtonSet.stories.js

@@ -1,13 +1,9 @@
 import { CvButtonSet, CvButton } from './';
 
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { sbBtnPrefix } from './sbBtnPrefix';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButtonSet`,
+  title: 'Component/CvButtonSet',
   component: CvButtonSet,
 };
 

src/components/CvButton/CvButtonSkeleton.stories.js

@@ -1,16 +1,14 @@
 import { CvButtonSkeleton } from '.';
 import { buttonSizes } from './consts.js';
 import {
-  sbCompPrefix,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
-import { sbBtnPrefix } from './sbBtnPrefix';
 
 import { props as commonCvButtonProps } from './CvButtonCommon';
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButtonSkeleton`,
+  title: 'Component/CvButtonSkeleton',
   component: CvButtonSkeleton,
   argTypes: {
     ...storybookControlsFromProps({ size: commonCvButtonProps.size }),

src/components/CvButton/CvIconButton.stories.js

@@ -2,12 +2,10 @@ import { action } from '@storybook/addon-actions';
 import { CvIconButton } from './';
 import { buttonKinds, buttonSizes } from './consts.js';
 import {
-  sbCompPrefix,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
 import { TipAlignments } from '../CvTooltip/consts.js';
-import { sbBtnPrefix } from './sbBtnPrefix';
 
 import { props as commonCvButtonProps } from './CvButtonCommon';
 import {
@@ -29,7 +27,7 @@ const icons = {
 };
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvIconButton`,
+  title: 'Component/CvIconButton',
   component: CvIconButton,
   argTypes: {
     ...storybookControlsFromProps(commonCvButtonProps),

src/components/CvCheckbox/CvCheckbox.stories.js

@@ -1,5 +1,4 @@
 import {
-  sbCompPrefix,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
@@ -10,7 +9,7 @@ import { props as propsCvCheck } from '../../use/cvCheck';
 import { ref } from 'vue';
 
 export default {
-  title: `${sbCompPrefix}/CvCheckbox`,
+  title: 'Component/CvCheckbox',
   component: CvCheckbox,
   argTypes: {
     ...storybookControlsFromProps(propsCvCheck),

src/components/CvCodeSnippet/CvCodeSnippet.stories.js

@@ -1,6 +1,5 @@
 import { carbonPrefix } from '../../global/settings';
 import {
-  sbCompPrefix,
   splitSlotArgs,
   storyParametersObject,
 } from '../../global/storybook-utils';
@@ -12,7 +11,7 @@ import CvCodeSnippetConsts from './consts';
 import './CvCodeSnippet.stories.scss';
 
 export default {
-  title: `${sbCompPrefix}/CvCodeSnippet`,
+  title: 'Component/CvCodeSnippet',
   component: CvCodeSnippet,
   argTypes: {
     default: { control: { type: 'text' } },

src/components/CvComboBox/CvComboBox.stories.js

@@ -1,7 +1,4 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvComboBox } from '.';
 import { action } from '@storybook/addon-actions';
@@ -41,7 +38,7 @@ const initArgs = {
 };
 
 export default {
-  title: `${sbCompPrefix}/CvComboBox`,
+  title: 'Component/CvComboBox',
   component: CvComboBox,
   parameters: {
     a11y: {

src/components/CvCopyButton/CvCopyButton.stories.js

@@ -1,13 +1,10 @@
 import CvCopyButton from '.';
 
 import { action } from '@storybook/addon-actions';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 export default {
-  title: `${sbCompPrefix}/CvCopyButton`,
+  title: 'Component/CvCopyButton',
   component: CvCopyButton,
   argTypes: {},
 };