test updates

src/components/Badge/__stories__/BoBadge.stories.ts

@@ -110,7 +110,7 @@ export const Example: Story = {
 	},
 };
 
-export const Types: Story = {
+export const Filled: Story = {
 	args: {},
 	render: () => ({
 		components: { BoBadge },
@@ -127,6 +127,23 @@ export const Types: Story = {
 	}),
 };
 
+export const Outline: Story = {
+	args: {},
+	render: () => ({
+		components: { BoBadge },
+		template: `
+		<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
+			<BoBadge variant="default" size="sm" label="Label" type="outline"/>
+			<BoBadge variant="info" size="sm" label="Label" type="outline"/>
+			<BoBadge variant="tertiary" size="sm" label="Label" type="outline"/>
+			<BoBadge variant="success" size="sm" label="Label" type="outline"/>
+			<BoBadge variant="danger" size="sm" label="Label" type="outline"/>
+			<BoBadge variant="warning" size="sm" label="Label" type="outline"/>
+		</div>
+	`,
+	}),
+};
+
 export const Sizes: Story = {
 	args: {},
 	render: () => ({

src/components/Badge/__tests__/BoBadge.test.ts

@@ -0,0 +1,58 @@
+import {
+	BadgeSize,
+	BadgeType,
+	BadgeVariant,
+	BoBadge,
+} from '@/components/Badge';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+describe('BoIcon', () => {
+	it('renders properly', () => {
+		const wrapper = mount(BoBadge, {
+			props: {
+				label: 'test',
+			},
+		});
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it("renders with 'test' label", () => {
+		const wrapper = mount(BoBadge, {
+			props: {
+				label: 'test',
+			},
+		});
+		expect(wrapper.text()).toBe('test');
+	});
+
+	it('renders with correct size', () => {
+		const wrapper = mount(BoBadge, {
+			props: {
+				label: 'test',
+				size: BadgeSize.XS,
+			},
+		});
+		expect(wrapper.classes()).toContain('xs');
+	});
+
+	it('renders with correct variant', () => {
+		const wrapper = mount(BoBadge, {
+			props: {
+				label: 'test',
+				variant: BadgeVariant.Info,
+			},
+		});
+		expect(wrapper.classes()).toContain('info');
+	});
+
+	it('renders with correct type', () => {
+		const wrapper = mount(BoBadge, {
+			props: {
+				label: 'test',
+				type: BadgeType.Filled,
+			},
+		});
+		expect(wrapper.classes()).toContain('filled');
+	});
+});

src/components/Badge/__tests__/__snapshots__/BoBadge.test.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BoIcon > renders properly 1`] = `
+"<div data-v-13a6fd5b=\\"\\" class=\\"bo-badge default pill filled sm\\">
+  <!--v-if-->
+  <!--v-if--><span data-v-13a6fd5b=\\"\\" class=\\"label\\">test</span>
+  <!--v-if-->
+</div>"
+`;