@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/stores/formSave.spec.js

@@ -0,0 +1,296 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { get } from 'svelte/store';
+
+// Mock toaster
+vi.mock('./toaster', () => ({
+  showToast: vi.fn(),
+}));
+
+import { createFormSave, createDirtyTracker } from './formSave';
+import { showToast } from './toaster';
+
+describe('formSave store', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  describe('createFormSave', () => {
+    it('creates a form save instance with default options', () => {
+      const formSave = createFormSave();
+      expect(formSave.isLoading).toBeDefined();
+      expect(formSave.isSuccess).toBeDefined();
+      expect(formSave.error).toBeDefined();
+      expect(formSave.save).toBeDefined();
+      expect(formSave.resetSuccess).toBeDefined();
+      expect(formSave.reset).toBeDefined();
+    });
+
+    it('has initial loading state as false', () => {
+      const formSave = createFormSave();
+      expect(get(formSave.isLoading)).toBe(false);
+    });
+
+    it('has initial success state as false', () => {
+      const formSave = createFormSave();
+      expect(get(formSave.isSuccess)).toBe(false);
+    });
+
+    it('has initial error state as null', () => {
+      const formSave = createFormSave();
+      expect(get(formSave.error)).toBe(null);
+    });
+
+    describe('save()', () => {
+      it('returns false when no endpoint is specified', async () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+        const formSave = createFormSave();
+        const result = await formSave.save({ data: 'test' });
+        expect(result).toBe(false);
+        consoleSpy.mockRestore();
+      });
+
+      it('sets loading state during save', async () => {
+        global.fetch.mockImplementation(() =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve({ ok: true, json: () => Promise.resolve({}) }), 100);
+          })
+        );
+
+        const formSave = createFormSave({ endpoint: '/api/test' });
+        const savePromise = formSave.save({ data: 'test' });
+
+        // Loading should be true while saving
+        expect(get(formSave.isLoading)).toBe(true);
+
+        await savePromise;
+        expect(get(formSave.isLoading)).toBe(false);
+      });
+
+      it('returns true on successful save', async () => {
+        global.fetch.mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve({ success: true }),
+        });
+
+        const formSave = createFormSave({ endpoint: '/api/test' });
+        const result = await formSave.save({ data: 'test' });
+
+        expect(result).toBe(true);
+        expect(get(formSave.isSuccess)).toBe(true);
+      });
+
+      it('shows success toast on successful save', async () => {
+        global.fetch.mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve({}),
+        });
+
+        const formSave = createFormSave({
+          endpoint: '/api/test',
+          successMessage: 'Saved!',
+        });
+        await formSave.save({ data: 'test' });
+
+        expect(showToast).toHaveBeenCalledWith('Saved!', 'success');
+      });
+
+      it('calls onSuccess callback on successful save', async () => {
+        const onSuccess = vi.fn();
+        global.fetch.mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve({}),
+        });
+
+        const formSave = createFormSave({
+          endpoint: '/api/test',
+          onSuccess,
+        });
+        await formSave.save({ data: 'test' });
+
+        expect(onSuccess).toHaveBeenCalled();
+      });
+
+      it('returns false on failed save', async () => {
+        global.fetch.mockResolvedValue({
+          ok: false,
+          json: () => Promise.resolve({ message: 'Error' }),
+        });
+
+        const formSave = createFormSave({ endpoint: '/api/test' });
+        const result = await formSave.save({ data: 'test' });
+
+        expect(result).toBe(false);
+      });
+
+      it('shows error toast on failed save', async () => {
+        global.fetch.mockResolvedValue({
+          ok: false,
+          json: () => Promise.resolve({ message: 'Custom error' }),
+        });
+
+        const formSave = createFormSave({ endpoint: '/api/test' });
+        await formSave.save({ data: 'test' });
+
+        expect(showToast).toHaveBeenCalledWith('Custom error', 'error');
+      });
+
+      it('calls onError callback on failed save', async () => {
+        const onError = vi.fn();
+        global.fetch.mockResolvedValue({
+          ok: false,
+          json: () => Promise.resolve({ message: 'Error' }),
+        });
+
+        const formSave = createFormSave({
+          endpoint: '/api/test',
+          onError,
+        });
+        await formSave.save({ data: 'test' });
+
+        expect(onError).toHaveBeenCalledWith('Error');
+      });
+
+      it('handles network errors', async () => {
+        global.fetch.mockRejectedValue(new Error('Network error'));
+
+        const formSave = createFormSave({ endpoint: '/api/test' });
+        const result = await formSave.save({ data: 'test' });
+
+        expect(result).toBe(false);
+        expect(get(formSave.error)).toBe('Network error');
+      });
+
+      it('uses custom endpoint when provided to save()', async () => {
+        global.fetch.mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve({}),
+        });
+
+        const formSave = createFormSave({ endpoint: '/api/default' });
+        await formSave.save({ data: 'test' }, '/api/custom');
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/custom', expect.any(Object));
+      });
+
+      it('uses default error message when response has no message', async () => {
+        global.fetch.mockResolvedValue({
+          ok: false,
+          json: () => Promise.reject(new Error('Parse error')),
+        });
+
+        const formSave = createFormSave({
+          endpoint: '/api/test',
+          errorMessage: 'Default error',
+        });
+        await formSave.save({ data: 'test' });
+
+        expect(showToast).toHaveBeenCalledWith('Default error', 'error');
+      });
+    });
+
+    describe('resetSuccess()', () => {
+      it('resets success state to false', async () => {
+        global.fetch.mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve({}),
+        });
+
+        const formSave = createFormSave({ endpoint: '/api/test' });
+        await formSave.save({ data: 'test' });
+        expect(get(formSave.isSuccess)).toBe(true);
+
+        formSave.resetSuccess();
+        expect(get(formSave.isSuccess)).toBe(false);
+      });
+    });
+
+    describe('reset()', () => {
+      it('resets all states', async () => {
+        global.fetch.mockRejectedValue(new Error('Error'));
+
+        const formSave = createFormSave({ endpoint: '/api/test' });
+        await formSave.save({ data: 'test' });
+
+        formSave.reset();
+
+        expect(get(formSave.isLoading)).toBe(false);
+        expect(get(formSave.isSuccess)).toBe(false);
+        expect(get(formSave.error)).toBe(null);
+      });
+    });
+
+    describe('convenience getters', () => {
+      it('loading getter returns current loading state', () => {
+        const formSave = createFormSave();
+        expect(formSave.loading).toBe(false);
+      });
+
+      it('success getter returns current success state', () => {
+        const formSave = createFormSave();
+        expect(formSave.success).toBe(false);
+      });
+    });
+  });
+
+  describe('createDirtyTracker', () => {
+    it('creates a dirty tracker with initial data', () => {
+      const tracker = createDirtyTracker({ name: 'test' });
+      expect(tracker.isDirty).toBeDefined();
+      expect(tracker.check).toBeDefined();
+      expect(tracker.reset).toBeDefined();
+    });
+
+    it('initially not dirty', () => {
+      const tracker = createDirtyTracker({ name: 'test' });
+      expect(get(tracker.isDirty)).toBe(false);
+    });
+
+    describe('check()', () => {
+      it('returns false when data has not changed', () => {
+        const tracker = createDirtyTracker({ name: 'test' });
+        const result = tracker.check({ name: 'test' });
+        expect(result).toBe(false);
+        expect(get(tracker.isDirty)).toBe(false);
+      });
+
+      it('returns true when data has changed', () => {
+        const tracker = createDirtyTracker({ name: 'test' });
+        const result = tracker.check({ name: 'changed' });
+        expect(result).toBe(true);
+        expect(get(tracker.isDirty)).toBe(true);
+      });
+
+      it('detects changes in nested objects', () => {
+        const tracker = createDirtyTracker({ user: { name: 'test' } });
+        const result = tracker.check({ user: { name: 'changed' } });
+        expect(result).toBe(true);
+      });
+
+      it('detects changes in arrays', () => {
+        const tracker = createDirtyTracker({ items: [1, 2, 3] });
+        const result = tracker.check({ items: [1, 2, 3, 4] });
+        expect(result).toBe(true);
+      });
+    });
+
+    describe('reset()', () => {
+      it('resets dirty state with new initial data', () => {
+        const tracker = createDirtyTracker({ name: 'test' });
+        tracker.check({ name: 'changed' });
+        expect(get(tracker.isDirty)).toBe(true);
+
+        tracker.reset({ name: 'new' });
+        expect(get(tracker.isDirty)).toBe(false);
+      });
+
+      it('uses new initial data for subsequent checks', () => {
+        const tracker = createDirtyTracker({ name: 'test' });
+        tracker.reset({ name: 'new' });
+
+        const result = tracker.check({ name: 'test' });
+        expect(result).toBe(true);
+      });
+    });
+  });
+});

package/dist/stores/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/dist/stores/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/stores/index.js"],"names":[],"mappings":""}

package/dist/stores/navigation.d.ts

@@ -0,0 +1,5 @@
+export const isSubPage: import("svelte/store").Writable<boolean>;
+export const hideHeaderBackButton: import("svelte/store").Writable<boolean>;
+export const selectedVenueData: import("svelte/store").Writable<null>;
+export const isAnimatedNavigation: import("svelte/store").Writable<boolean>;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/stores/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/lib/stores/navigation.js"],"names":[],"mappings":"AAEA,iEAAyC;AAGzC,4EAAoD;AAGpD,sEAAgD;AAGhD,4EAAoD"}

package/dist/stores/navigation.js

@@ -0,0 +1,12 @@
+import { writable } from "svelte/store";
+
+export const isSubPage = writable(false);
+
+// Pages can set this to true to hide the header back button (e.g., when they have their own)
+export const hideHeaderBackButton = writable(false);
+
+// Store venue data when navigating to calendar to avoid re-fetching
+export const selectedVenueData = writable(null);
+
+// Flag to indicate we're doing an animated navigation (not a refresh/direct load)
+export const isAnimatedNavigation = writable(false);

package/dist/stores/navigation.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=navigation.spec.d.ts.map

package/dist/stores/navigation.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.spec.d.ts","sourceRoot":"","sources":["../../src/lib/stores/navigation.spec.js"],"names":[],"mappings":""}

package/dist/stores/navigation.spec.js

@@ -0,0 +1,136 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { get } from 'svelte/store';
+import {
+  isSubPage,
+  hideHeaderBackButton,
+  selectedVenueData,
+  isAnimatedNavigation,
+} from './navigation';
+
+describe('navigation store', () => {
+  beforeEach(() => {
+    // Reset all stores to default values
+    isSubPage.set(false);
+    hideHeaderBackButton.set(false);
+    selectedVenueData.set(null);
+    isAnimatedNavigation.set(false);
+  });
+
+  describe('isSubPage', () => {
+    it('defaults to false', () => {
+      expect(get(isSubPage)).toBe(false);
+    });
+
+    it('can be set to true', () => {
+      isSubPage.set(true);
+      expect(get(isSubPage)).toBe(true);
+    });
+
+    it('can toggle between values', () => {
+      isSubPage.set(true);
+      expect(get(isSubPage)).toBe(true);
+      isSubPage.set(false);
+      expect(get(isSubPage)).toBe(false);
+    });
+  });
+
+  describe('hideHeaderBackButton', () => {
+    it('defaults to false', () => {
+      expect(get(hideHeaderBackButton)).toBe(false);
+    });
+
+    it('can be set to true', () => {
+      hideHeaderBackButton.set(true);
+      expect(get(hideHeaderBackButton)).toBe(true);
+    });
+
+    it('allows pages to hide the back button', () => {
+      // Simulate a page setting this
+      hideHeaderBackButton.set(true);
+      expect(get(hideHeaderBackButton)).toBe(true);
+
+      // And resetting it when leaving
+      hideHeaderBackButton.set(false);
+      expect(get(hideHeaderBackButton)).toBe(false);
+    });
+  });
+
+  describe('selectedVenueData', () => {
+    it('defaults to null', () => {
+      expect(get(selectedVenueData)).toBe(null);
+    });
+
+    it('can store venue data', () => {
+      const venueData = {
+        id: 123,
+        name: 'Comedy Club',
+        address: '123 Main St',
+      };
+      selectedVenueData.set(venueData);
+      expect(get(selectedVenueData)).toEqual(venueData);
+    });
+
+    it('can be cleared', () => {
+      selectedVenueData.set({ id: 123 });
+      selectedVenueData.set(null);
+      expect(get(selectedVenueData)).toBe(null);
+    });
+
+    it('can update venue data', () => {
+      selectedVenueData.set({ id: 123, name: 'Club A' });
+      selectedVenueData.update((data) => ({ ...data, name: 'Club B' }));
+      expect(get(selectedVenueData).name).toBe('Club B');
+    });
+  });
+
+  describe('isAnimatedNavigation', () => {
+    it('defaults to false', () => {
+      expect(get(isAnimatedNavigation)).toBe(false);
+    });
+
+    it('can be set to true for animated transitions', () => {
+      isAnimatedNavigation.set(true);
+      expect(get(isAnimatedNavigation)).toBe(true);
+    });
+
+    it('distinguishes between refresh and navigation', () => {
+      // On direct load/refresh, this should be false
+      expect(get(isAnimatedNavigation)).toBe(false);
+
+      // When navigating via JS, set to true before navigation
+      isAnimatedNavigation.set(true);
+      expect(get(isAnimatedNavigation)).toBe(true);
+    });
+  });
+
+  describe('store subscriptions', () => {
+    it('notifies subscribers of isSubPage changes', () => {
+      const values = [];
+      const unsubscribe = isSubPage.subscribe((value) => values.push(value));
+
+      isSubPage.set(true);
+      isSubPage.set(false);
+
+      unsubscribe();
+
+      expect(values).toEqual([false, true, false]);
+    });
+
+    it('notifies subscribers of selectedVenueData changes', () => {
+      const values = [];
+      const unsubscribe = selectedVenueData.subscribe((value) => values.push(value));
+
+      selectedVenueData.set({ id: 1 });
+      selectedVenueData.set({ id: 2 });
+      selectedVenueData.set(null);
+
+      unsubscribe();
+
+      expect(values.length).toBe(4);
+      expect(values[0]).toBe(null);
+      expect(values[1]).toEqual({ id: 1 });
+      expect(values[2]).toEqual({ id: 2 });
+      expect(values[3]).toBe(null);
+    });
+  });
+});

package/dist/stores/toaster.d.ts

@@ -0,0 +1,4 @@
+export { toast };
+export function showToast(message: any, type?: string): void;
+import { toast } from "svelte-sonner";
+//# sourceMappingURL=toaster.d.ts.map

package/dist/stores/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["toaster.js"],"names":[],"mappings":";AAIO,6DAQN;sBAZqB,eAAe"}

package/dist/stores/toaster.js

@@ -0,0 +1,13 @@
+import { toast } from "svelte-sonner";
+
+export { toast };
+
+export const showToast = (message, type = "success") => {
+  if (type === "success") {
+    toast.success(message);
+  } else if (type === "error") {
+    toast.error(message);
+  } else {
+    toast.message(message);
+  }
+};

package/dist/stores/toaster.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toaster.spec.d.ts.map

package/dist/stores/toaster.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.spec.d.ts","sourceRoot":"","sources":["../../src/lib/stores/toaster.spec.js"],"names":[],"mappings":""}

package/dist/stores/toaster.spec.js

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock svelte-sonner before importing
+vi.mock('svelte-sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    message: vi.fn(),
+  },
+}));
+
+import { showToast, toast } from './toaster';
+
+describe('toaster store', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('showToast', () => {
+    it('calls toast.success for success type', () => {
+      showToast('Success message', 'success');
+      expect(toast.success).toHaveBeenCalledWith('Success message');
+    });
+
+    it('defaults to success type when no type provided', () => {
+      showToast('Default message');
+      expect(toast.success).toHaveBeenCalledWith('Default message');
+    });
+
+    it('calls toast.error for error type', () => {
+      showToast('Error message', 'error');
+      expect(toast.error).toHaveBeenCalledWith('Error message');
+    });
+
+    it('calls toast.message for other types', () => {
+      showToast('Info message', 'info');
+      expect(toast.message).toHaveBeenCalledWith('Info message');
+    });
+
+    it('calls toast.message for warning type', () => {
+      showToast('Warning message', 'warning');
+      expect(toast.message).toHaveBeenCalledWith('Warning message');
+    });
+
+    it('calls toast.message for unknown type', () => {
+      showToast('Unknown message', 'unknown');
+      expect(toast.message).toHaveBeenCalledWith('Unknown message');
+    });
+  });
+
+  describe('toast export', () => {
+    it('exports toast object', () => {
+      expect(toast).toBeDefined();
+      expect(toast.success).toBeDefined();
+      expect(toast.error).toBeDefined();
+      expect(toast.message).toBeDefined();
+    });
+  });
+});