From 02703114dd23d90ac6e0bb63338893d842d83987 Mon Sep 17 00:00:00 2001
From: Logan Graham <loganparkergraham@gmail.com>
Date: Tue, 19 Nov 2024 12:14:09 -0500
Subject: [PATCH] [Storybook] Fix postfixing of name when adding storybook
 variations (#165)

Co-authored-by: Logan Graham <logan.graham@saucelabs.com>
---
 visual-js/.changeset/forty-bobcats-raise.md |  5 +++
 visual-js/visual-storybook/package.json     |  3 +-
 visual-js/visual-storybook/src/api.spec.ts  | 41 +++++++++++++++++++++
 visual-js/visual-storybook/src/api.ts       |  2 +-
 visual-js/visual-storybook/tsconfig.json    |  7 ++--
 5 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 visual-js/.changeset/forty-bobcats-raise.md
 create mode 100644 visual-js/visual-storybook/src/api.spec.ts

diff --git a/visual-js/.changeset/forty-bobcats-raise.md b/visual-js/.changeset/forty-bobcats-raise.md
new file mode 100644
index 00000000..8689c66d
--- /dev/null
+++ b/visual-js/.changeset/forty-bobcats-raise.md
@@ -0,0 +1,5 @@
+---
+"@saucelabs/visual-storybook": patch
+---
+
+fix postfixing of storybook name when adding variations
diff --git a/visual-js/visual-storybook/package.json b/visual-js/visual-storybook/package.json
index dd4943db..4d2c337c 100644
--- a/visual-js/visual-storybook/package.json
+++ b/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",
diff --git a/visual-js/visual-storybook/src/api.spec.ts b/visual-js/visual-storybook/src/api.spec.ts
new file mode 100644
index 00000000..cff39566
--- /dev/null
+++ b/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',
+    });
+  });
+});
diff --git a/visual-js/visual-storybook/src/api.ts b/visual-js/visual-storybook/src/api.ts
index 2cff0e43..7ece920a 100644
--- a/visual-js/visual-storybook/src/api.ts
+++ b/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 {
diff --git a/visual-js/visual-storybook/tsconfig.json b/visual-js/visual-storybook/tsconfig.json
index 946ca397..70d697ed 100644
--- a/visual-js/visual-storybook/tsconfig.json
+++ b/visual-js/visual-storybook/tsconfig.json
@@ -11,11 +11,12 @@
       }
     ],
     "types": [
-      "jest-playwright-preset",
-  ],
+      "jest",
+      "jest-playwright-preset"
+    ],
   },
   "include": [
     "src/**/*",
     "../../@types",
   ]
-}
\ No newline at end of file
+}