Add storybook for visual testing

BrunoQuaresma · BrunoQuaresma · commit 8508e69fd067 · 2024-02-06T11:00:27.000Z
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { TemplateFileTree } from "./TemplateFileTree";
+import { FileTree } from "utils/filetree";
+import { useTheme } from "@emotion/react";
+
+const fileTree: FileTree = {
+  "main.tf": "resource aws_instance my_instance {}",
+  "variables.tf": "variable my_var {}",
+  "outputs.tf": "output my_output {}",
+  folder: {
+    "nested.tf": "resource aws_instance my_instance {}",
+  },
+};
+
+const meta: Meta<typeof TemplateFileTree> = {
+  title: "modules/templates/TemplateFileTree",
+  parameters: { chromatic },
+  component: TemplateFileTree,
+  args: {
+    fileTree,
+    activePath: "main.tf",
+  },
+  decorators: [
+    (Story) => {
+      const theme = useTheme();
+      return (
+        <div
+          css={{
+            maxWidth: 260,
+            borderRadius: 8,
+            border: `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateFileTree>;
+
+export const Example: Story = {};
+
+export const NestedOpen: Story = {
+  args: {
+    activePath: "folder/nested.tf",
+  },
+};
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx
@@ -26,4 +26,14 @@ type Story = StoryObj<typeof TemplateFiles>;
 
 const Example: Story = {};
 
+export const WithDiff: Story = {
+  args: {
+    currentFiles: {
+      ...exampleFiles,
+      "main.tf": `${exampleFiles["main.tf"]} - with changes`,
+    },
+    baseFiles: exampleFiles,
+  },
+};
+
 export { Example as TemplateFiles };
