test(web): add ActivityIndicator test

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>
+ `);
+ });
+});