From ddb6127519e8d13f15444b913531e199bf9db237 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Tue, 9 Feb 2021 20:13:19 -0800
Subject: [PATCH] test(web): add ActivityIndicator test

---
 .../__tests__/ActivityIndicator.test.jsx      | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 web/src/components/__tests__/ActivityIndicator.test.jsx

diff --git a/web/src/components/__tests__/ActivityIndicator.test.jsx b/web/src/components/__tests__/ActivityIndicator.test.jsx
new file mode 100644
index 000000000..582be24af
--- /dev/null
+++ b/web/src/components/__tests__/ActivityIndicator.test.jsx
@@ -0,0 +1,47 @@
+import { h } from 'preact';
+import ActivityIndicator from '../ActivityIndicator';
+import { render, screen } from '@testing-library/preact';
+
+describe('ActivityIndicator', () => {
+  test('renders an ActivityIndicator with default size md', async () => {
+    render(<ActivityIndicator />);
+    expect(screen.getByLabelText('Loading…')).toMatchInlineSnapshot(`
+      <div
+        aria-label="Loading…"
+        class="w-full flex items-center justify-center"
+      >
+        <div
+          class="activityindicator ease-in rounded-full border-gray-200 text-blue-500 h-8 w-8 border-4 border-t-4"
+        />
+      </div>
+    `);
+  });
+
+  test('renders an ActivityIndicator with size sm', async () => {
+    render(<ActivityIndicator size="sm" />);
+    expect(screen.getByLabelText('Loading…')).toMatchInlineSnapshot(`
+      <div
+        aria-label="Loading…"
+        class="w-full flex items-center justify-center"
+      >
+        <div
+          class="activityindicator ease-in rounded-full border-gray-200 text-blue-500 h-4 w-4 border-2 border-t-2"
+        />
+      </div>
+    `);
+  });
+
+  test('renders an ActivityIndicator with size lg', async () => {
+    render(<ActivityIndicator size="lg" />);
+    expect(screen.getByLabelText('Loading…')).toMatchInlineSnapshot(`
+      <div
+        aria-label="Loading…"
+        class="w-full flex items-center justify-center"
+      >
+        <div
+          class="activityindicator ease-in rounded-full border-gray-200 text-blue-500 h-16 w-16 border-8 border-t-8"
+        />
+      </div>
+    `);
+  });
+});