[Storybook] Fix postfixing of name when adding storybook variations (#…

…165)

Co-authored-by: Logan Graham <[email protected]>

visual-js/.changeset/forty-bobcats-raise.md

@@ -0,0 +1,5 @@
+---
+"@saucelabs/visual-storybook": patch
+---
+
+fix postfixing of storybook name when adding variations

visual-js/visual-storybook/package.json

@@ -38,7 +38,8 @@
   "scripts": {
     "build": "tsup",
     "watch": "tsc-watch --declaration -p .",
-    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\""
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\"",
+    "test": "jest --collect-coverage"
   },
   "dependencies": {
     "@saucelabs/visual": "^0.10.0",

visual-js/visual-storybook/src/api.spec.ts

@@ -0,0 +1,41 @@
+import { augmentStoryName } from './api';
+import { expect } from '@jest/globals';
+import { StoryContext } from './types';
+
+describe('augmentStoryName', () => {
+  const context: StoryContext = {
+    id: 'test-id',
+    name: 'Button',
+    title: 'Example/Button',
+  };
+
+  it('should prefix a value', () => {
+    const augmented = augmentStoryName(context, {
+      prefix: 'prefix ',
+    });
+    expect(augmented).toEqual({
+      ...context,
+      name: 'prefix Button',
+    });
+  });
+
+  it('should postfix a value', () => {
+    const augmented = augmentStoryName(context, {
+      postfix: ' postfix',
+    });
+    expect(augmented).toEqual({
+      ...context,
+      name: 'Button postfix',
+    });
+  });
+
+  it('should allow supplying a custom name', () => {
+    const augmented = augmentStoryName(context, {
+      name: 'custom name',
+    });
+    expect(augmented).toEqual({
+      ...context,
+      name: 'custom name',
+    });
+  });
+});

visual-js/visual-storybook/src/api.ts

@@ -66,7 +66,7 @@ export const augmentStoryName = (
   }
 
   if (variation.postfix) {
-    name = `${variation.postfix}${name}`;
+    name = `${name}${variation.postfix}`;
   }
 
   return {

visual-js/visual-storybook/tsconfig.json

@@ -11,11 +11,12 @@
       }
     ],
     "types": [
-      "jest-playwright-preset",
-  ],
+      "jest",
+      "jest-playwright-preset"
+    ],
   },
   "include": [
     "src/**/*",
     "../../@types",
   ]
-}
+}