From ba275b06eb52bf237daa490f73f069e605a188a2 Mon Sep 17 00:00:00 2001
From: Miroslav Stastny <miroslav.stastny@microsoft.com>
Date: Wed, 9 Aug 2023 09:52:40 -0700
Subject: [PATCH] chore(badge): Add screenshot tests

---
 .../src/stories/badge/badge.stories.tsx       | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx

diff --git a/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx
new file mode 100644
index 0000000000000..5554a320a87c1
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import parse from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { BadgeDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator';
+
+BadgeDefinition.define(FluentDesignSystem.registry);
+
+export default {
+  title: 'Badge',
+  decorators: [
+    (story: () => React.ReactElement) => {
+      return (
+        <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+          <div className="testWrapper" style={{ width: '300px' }}>
+            {story()}
+          </div>
+        </StoryWright>
+      );
+    },
+  ],
+};
+
+export const Default = () =>
+  parse(`
+  <fluent-badge></fluent-badge>
+  `);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Appearance = () =>
+  parse(`
+  <fluent-badge appearance="filled">filled</fluent-badge>
+  <fluent-badge appearance="ghost">ghost</fluent-badge>
+  <fluent-badge appearance="outline">outline</fluent-badge>
+  <fluent-badge appearance="tint">tint</fluent-badge>
+`);
+
+export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+
+export const Color = () =>
+  parse(`
+  <fluent-badge color="brand">brand</fluent-badge>
+  <fluent-badge color="danger">danger</fluent-badge>
+  <fluent-badge color="important">important</fluent-badge>
+  <fluent-badge color="informative">informative</fluent-badge>
+  <fluent-badge color="severe">severe</fluent-badge>
+  <fluent-badge color="subtle">subtle</fluent-badge>
+  <fluent-badge color="success">success</fluent-badge>
+  <fluent-badge color="warning">warning</fluent-badge>
+`);
+
+export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);
+
+export const Shape = () =>
+  parse(`
+  <fluent-badge shape="circular"></fluent-badge>
+  <fluent-badge shape="rounded"></fluent-badge>
+  <fluent-badge shape="square"></fluent-badge>
+`);
+
+export const ShapeDarkMode = getStoryVariant(Shape, DARK_MODE);
+
+export const Size = () =>
+  parse(`
+  <fluent-badge size="tiny"></fluent-badge>
+  <fluent-badge size="extra-small"></fluent-badge>
+  <fluent-badge size="small"></fluent-badge>
+  <fluent-badge size="medium"></fluent-badge>
+  <fluent-badge size="large"></fluent-badge>
+  <fluent-badge size="extra-large"></fluent-badge>
+`);
+
+export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);