@micha.bigler/ui-core-micha 2.4.5 → 2.6.1

package/src/onboarding/steps/CookieConsentStep.jsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import CookieIcon from '@mui/icons-material/Cookie';
+import { updateUserProfile } from '../../auth/authApi';
+
+export function CookieConsentStep({ onComplete }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const accept = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      await updateUserProfile({ accepted_convenience_cookies: true });
+      onComplete();
+    } catch {
+      setError(t('Onboarding.COOKIE_CONSENT_ERROR'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><CookieIcon color="primary" /><Typography variant="h6">{t('Onboarding.COOKIE_CONSENT_TITLE')}</Typography></Box>
+      <Typography variant="body2" color="text.secondary">{t('Onboarding.COOKIE_CONSENT_BODY')}</Typography>
+      {error && <Alert severity="error" onClose={() => setError('')}>{error}</Alert>}
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}><Button variant="contained" onClick={accept} disabled={loading} startIcon={loading ? <CircularProgress size={16} /> : undefined}>{t('Onboarding.COOKIE_CONSENT_ACCEPT')}</Button></Box>
+    </Box>
+  );
+}
+
+export default CookieConsentStep;

package/tests/NotificationSettings.test.jsx

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const notificationsApi = vi.hoisted(() => ({
+  getNotificationPreferences: vi.fn(),
+  getVapidPublicKey: vi.fn(),
+  patchNotificationPreferences: vi.fn(),
+  removePushSubscription: vi.fn(),
+  savePushSubscription: vi.fn(),
+  urlBase64ToUint8Array: vi.fn(() => new Uint8Array([1, 2, 3])),
+}));
+
+vi.mock('../src/notifications/api', () => notificationsApi);
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+
+import { NotificationSettings } from '../src/notifications/NotificationSettings';
+
+function installPushEnvironment(subscription) {
+  const registration = {
+    pushManager: {
+      getSubscription: vi.fn().mockResolvedValue(subscription),
+      subscribe: vi.fn(),
+    },
+  };
+  vi.stubGlobal('navigator', {
+    serviceWorker: { ready: Promise.resolve(registration) },
+    userAgent: 'Unit Test Browser',
+  });
+  Object.defineProperty(window, 'PushManager', { value: class PushManager {}, configurable: true });
+  return registration;
+}
+
+describe('NotificationSettings push toggle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    notificationsApi.getNotificationPreferences.mockResolvedValue({ email_opt_in: false, push_opt_in: false });
+    notificationsApi.patchNotificationPreferences.mockResolvedValue({ email_opt_in: false, push_opt_in: true });
+    notificationsApi.getVapidPublicKey.mockResolvedValue('AQID');
+  });
+
+  it('enables push on this device and opts in after saving the subscription', async () => {
+    const registration = installPushEnvironment(null);
+    const subscription = {
+      toJSON: vi.fn(() => ({ endpoint: 'https://fcm.googleapis.com/fcm/send/example' })),
+    };
+    registration.pushManager.subscribe.mockResolvedValue(subscription);
+    vi.stubGlobal('Notification', { requestPermission: vi.fn().mockResolvedValue('granted') });
+
+    render(<NotificationSettings />);
+    fireEvent.click(await screen.findByRole('button', { name: 'NotificationSettings.PUSH_ENABLE' }));
+
+    await waitFor(() => expect(notificationsApi.patchNotificationPreferences).toHaveBeenCalledWith({ push_opt_in: true }));
+    expect(Notification.requestPermission).toHaveBeenCalledOnce();
+    expect(registration.pushManager.subscribe).toHaveBeenCalledWith({
+      userVisibleOnly: true,
+      applicationServerKey: new Uint8Array([1, 2, 3]),
+    });
+    expect(notificationsApi.savePushSubscription).toHaveBeenCalledWith(
+      { endpoint: 'https://fcm.googleapis.com/fcm/send/example' },
+      'Unit Test Browser',
+    );
+    expect(notificationsApi.savePushSubscription.mock.invocationCallOrder[0])
+      .toBeLessThan(notificationsApi.patchNotificationPreferences.mock.invocationCallOrder[0]);
+  });
+
+  it('unsubscribes and removes only this device without changing push_opt_in', async () => {
+    const subscription = {
+      endpoint: 'https://updates.push.services.mozilla.com/example',
+      unsubscribe: vi.fn().mockResolvedValue(true),
+    };
+    installPushEnvironment(subscription);
+
+    render(<NotificationSettings />);
+    fireEvent.click(await screen.findByRole('button', { name: 'NotificationSettings.PUSH_DISABLE' }));
+
+    await waitFor(() => expect(subscription.unsubscribe).toHaveBeenCalledOnce());
+    expect(notificationsApi.removePushSubscription).toHaveBeenCalledWith({ endpoint: subscription.endpoint });
+    expect(notificationsApi.patchNotificationPreferences).not.toHaveBeenCalled();
+  });
+});

package/tests/notificationsApi.test.js

@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const client = vi.hoisted(() => ({
+  delete: vi.fn(),
+  get: vi.fn(),
+  patch: vi.fn(),
+  post: vi.fn(),
+}));
+
+vi.mock('../src/auth/apiClient', () => ({ default: client }));
+
+import { removePushSubscription, savePushSubscription } from '../src/notifications/api';
+
+describe('notifications API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('saves a push subscription with its user agent', async () => {
+    client.post.mockResolvedValue({ data: { id: 1 } });
+    const subscription = { endpoint: 'https://fcm.googleapis.com/fcm/send/example' };
+
+    await savePushSubscription(subscription, 'Example Browser');
+
+    expect(client.post).toHaveBeenCalledWith(
+      '/api/notifications/preferences/push-subscription/',
+      { subscription, ua: 'Example Browser' },
+    );
+  });
+
+  it('removes a push subscription by endpoint using an axios delete body', async () => {
+    client.delete.mockResolvedValue({ data: null });
+
+    await removePushSubscription({ endpoint: 'https://updates.push.services.mozilla.com/example' });
+
+    expect(client.delete).toHaveBeenCalledWith(
+      '/api/notifications/preferences/push-subscription/',
+      { data: { endpoint: 'https://updates.push.services.mozilla.com/example' } },
+    );
+  });
+});

package/tests/stepSelection.test.js

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { selectActiveSteps } from '../src/onboarding/stepSelection';
+
+const context = {
+  user: { first_name: 'Ada', last_name: 'Lovelace', accepted_convenience_cookies: true },
+  pushState: { supported: true, subscribed: false },
+};
+
+const step = (id, condition, options = {}) => ({
+  id,
+  condition,
+  persistDismissed: options.persistDismissed ?? false,
+});
+
+describe('selectActiveSteps', () => {
+  it('excludes a config-disabled universal step', () => {
+    const result = selectActiveSteps([step('cookie_consent', () => true)], { cookie_consent: false }, context);
+    expect(result).toEqual([]);
+  });
+
+  it('excludes a persistently dismissed browser push step', () => {
+    const result = selectActiveSteps(
+      [step('browser_push', () => true, { persistDismissed: true })],
+      { browser_push: true },
+      context,
+      new Set(['browser_push']),
+    );
+    expect(result).toEqual([]);
+  });
+
+  it('filters steps whose condition is not met', () => {
+    const result = selectActiveSteps(
+      [step('complete_name', (ctx) => !ctx.user.first_name)],
+      { complete_name: true },
+      context,
+    );
+    expect(result).toEqual([]);
+  });
+
+  it('preserves descriptor order for active universal steps', () => {
+    const steps = [
+      step('cookie_consent', () => true),
+      step('complete_name', () => true),
+      step('browser_push', () => true, { persistDismissed: true }),
+    ];
+    const result = selectActiveSteps(steps, {
+      cookie_consent: true,
+      complete_name: true,
+      browser_push: true,
+    }, context);
+    expect(result.map((item) => item.id)).toEqual(['cookie_consent', 'complete_name', 'browser_push']);
+  });
+});