@micha.bigler/ui-core-micha 3.7.0 → 3.9.0

package/tests/createAppThemePageContrast.test.js

@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest';
+
+import { assertThemeComplete, createAppTheme } from '../src/theme';
+import { BASELINE_PALETTE } from '../src/theme/tokens';
+
+const primary = { main: '#0F62FE' };
+const pageBackgrounds = [
+  '#FAFAFA',
+  '#D8E4E1',
+  '#eceae2',
+  '#E8EAF6',
+  '#E6EAF0',
+  '#E398C7',
+];
+
+function pageContrastFindings(theme) {
+  return assertThemeComplete(theme).findings.filter(({ surface }) => (
+    /^contrast\.(success|warning|error|info)\.main-on-(white|page)$/.test(surface)
+      || surface.startsWith('contrast.controlBorder.')
+  ));
+}
+
+describe('createAppTheme page-sensitive baseline contrast', () => {
+  it.each(pageBackgrounds)('derives baseline colours for page %s', (background) => {
+    const theme = createAppTheme({ palette: { primary, background: { default: background } } });
+
+    expect(pageContrastFindings(theme)).toEqual([]);
+  });
+
+  it('keeps all baseline values byte-identical when they already pass', () => {
+    const theme = createAppTheme({ palette: { primary } });
+
+    for (const status of ['success', 'warning', 'error', 'info']) {
+      expect(theme.palette[status]).toMatchObject({
+        main: BASELINE_PALETTE[status].main,
+        light: BASELINE_PALETTE[status].light,
+        dark: BASELINE_PALETTE[status].dark,
+        contrastText: BASELINE_PALETTE[status].contrastText,
+      });
+    }
+    for (const state of ['main', 'hover', 'error']) {
+      expect(theme.palette.controlBorder[state]).toBe(BASELINE_PALETTE.controlBorder[state]);
+    }
+  });
+
+  it('leaves app-supplied failing status and control-border values untouched', () => {
+    const appConfig = {
+      palette: {
+        primary,
+        background: { default: '#E398C7' },
+        success: { main: '#A5D6A7' },
+        warning: { main: '#FFE082' },
+        controlBorder: { main: '#FFFFFF', hover: '#FAFAFA', error: '#FFCDD2' },
+      },
+    };
+    const theme = createAppTheme(appConfig);
+    const findings = assertThemeComplete(theme).findings.map(({ surface }) => surface);
+
+    expect(theme.palette.success.main).toBe(appConfig.palette.success.main);
+    expect(theme.palette.warning.main).toBe(appConfig.palette.warning.main);
+    expect(theme.palette.controlBorder.main).toBe(appConfig.palette.controlBorder.main);
+    expect(theme.palette.controlBorder.hover).toBe(appConfig.palette.controlBorder.hover);
+    expect(theme.palette.controlBorder.error).toBe(appConfig.palette.controlBorder.error);
+    for (const surface of [
+      'contrast.success.main-on-white',
+      'contrast.success.main-on-page',
+      'contrast.warning.main-on-white',
+      'contrast.warning.main-on-page',
+      'contrast.controlBorder.main-on-white',
+      'contrast.controlBorder.main-on-page',
+      'contrast.controlBorder.hover-on-white',
+      'contrast.controlBorder.hover-on-page',
+      'contrast.controlBorder.error-on-white',
+      'contrast.controlBorder.error-on-page',
+    ]) {
+      expect(findings).toContain(surface);
+    }
+
+    // The two untouched status keys (error/info) -- both fail on ygbs's pink
+    // per the Envelope's measured table -- must still derive normally, proving
+    // rule 3 is checked per status key, not per whole-status-object: this
+    // config only overrides success/warning, so error/info stay baseline-owned
+    // and should move off their baseline hex and stop failing.
+    expect(theme.palette.error.main).not.toBe(BASELINE_PALETTE.error.main);
+    expect(theme.palette.info.main).not.toBe(BASELINE_PALETTE.info.main);
+    expect(findings).not.toContain('contrast.error.main-on-page');
+    expect(findings).not.toContain('contrast.info.main-on-page');
+  });
+
+  it('terminates and leaves findings when the darkening cap cannot pass', () => {
+    const create = () => createAppTheme({
+      palette: { primary, background: { default: '#666666' } },
+    });
+
+    expect(create).not.toThrow();
+    const theme = create();
+    expect(theme.palette.success.main).toBeDefined();
+    expect(theme.palette.warning.main).toBeDefined();
+    expect(theme.palette.error.main).toBeDefined();
+    expect(theme.palette.info.main).toBeDefined();
+    expect(theme.palette.controlBorder.main).toBeDefined();
+    expect(theme.palette.controlBorder.hover).toBeDefined();
+    expect(theme.palette.controlBorder.error).toBeDefined();
+    expect(assertThemeComplete(theme).findings.map(({ surface }) => surface)).toContain(
+      'contrast.success.main-on-page',
+    );
+  });
+});

package/tests/errorCallSiteGuard.test.js

@@ -0,0 +1,32 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const SOURCE_DIRECTORY = path.resolve('src');
+const OLD_DISPLAY_PATTERN = /(setErrorKey|setError|setAgentErrorKey|alert)\(.*\.code|t\(\w+\??\.code/;
+
+function jsxFiles(directory) {
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const entryPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) return jsxFiles(entryPath);
+    return entry.isFile() && entry.name.endsWith('.jsx') ? [entryPath] : [];
+  });
+}
+
+describe('auth error display call-site guard', () => {
+  it('has no old raw-code display pattern in JSX source', () => {
+    const matches = [];
+    for (const file of jsxFiles(SOURCE_DIRECTORY)) {
+      const lines = fs.readFileSync(file, 'utf8').split(/\r?\n/);
+      lines.forEach((line, index) => {
+        if (OLD_DISPLAY_PATTERN.test(line)) matches.push(`${file}:${index + 1}: ${line}`);
+      });
+    }
+    expect(matches).toEqual([]);
+  });
+
+  it('would catch a restored old-style call site', () => {
+    expect(OLD_DISPLAY_PATTERN.test("setErrorKey(err.code || 'Auth.X');")).toBe(true);
+    expect(OLD_DISPLAY_PATTERN.test("alert(t(err?.code || 'Auth.X'));" )).toBe(true);
+  });
+});

package/tests/loginPageErrorResolution.test.jsx

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18next from 'i18next';
+import { MemoryRouter } from 'react-router-dom';
+
+const authApi = vi.hoisted(() => ({
+  fetchRecoverySessionToken: vi.fn(),
+  loginWithPassword: vi.fn(),
+  loginWithRecoveryPassword: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('../src/utils/authService', () => ({
+  loginWithPasskey: vi.fn(),
+  startSocialLogin: vi.fn(),
+}));
+vi.mock('react-helmet', () => ({ Helmet: ({ children }) => <>{children}</> }));
+
+import { authTranslations } from '../src/i18n/authTranslations';
+import { AuthContext } from '../src/auth/AuthContext';
+import { LoginPage } from '../src/pages/LoginPage';
+
+const translations = Object.fromEntries(
+  Object.entries(authTranslations).map(([key, value]) => [key, value.en]),
+);
+const i18n = i18next.createInstance();
+
+beforeAll(async () => {
+  await i18n.init({
+    lng: 'en',
+    fallbackLng: 'en',
+    resources: { en: { translation: translations } },
+    keySeparator: false,
+    nsSeparator: false,
+    interpolation: { escapeValue: false },
+  });
+});
+
+beforeEach(() => {
+  authApi.loginWithPassword.mockRejectedValue({
+    response: {
+      data: {
+        errors: [{
+          message: 'Gib eine gültige E-Mail Adresse an.',
+          code: 'invalid',
+          param: 'email',
+        }],
+      },
+    },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+function renderLoginPage() {
+  return render(
+    <I18nextProvider i18n={i18n}>
+      <MemoryRouter initialEntries={['/login']}>
+        <AuthContext.Provider value={{
+          user: null,
+          loading: false,
+          login: vi.fn(),
+          authMethods: {
+            password_login: true,
+            password_reset: false,
+            signup: false,
+            signup_modes: [],
+            social_login: false,
+            passkey_login: false,
+          },
+        }}>
+          <LoginPage />
+        </AuthContext.Provider>
+      </MemoryRouter>
+    </I18nextProvider>,
+  );
+}
+
+describe('LoginPage error resolution', () => {
+  it('shows the email field translation for the exact allauth invalid-email response', async () => {
+    renderLoginPage();
+
+    fireEvent.change(screen.getByRole('textbox', { name: new RegExp(authTranslations['Auth.EMAIL_LABEL'].en) }), {
+      target: { value: 'not-an-email@example.com' },
+    });
+    fireEvent.change(screen.getByLabelText(new RegExp(authTranslations['Auth.LOGIN_PASSWORD_LABEL'].en)), {
+      target: { value: 'password' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: authTranslations['Auth.PAGE_LOGIN_TITLE'].en }));
+
+    await waitFor(() => {
+      expect(screen.getByText(authTranslations['Auth.field.email.invalid'].en)).toBeTruthy();
+    });
+    expect(screen.queryByText('invalid')).toBeNull();
+  });
+});

package/tests/resolveErrorText.test.js

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+import { resolveErrorText } from '../src/utils/resolveErrorText';
+
+function makeI18n(values) {
+  return {
+    exists: (key) => Object.hasOwn(values, key),
+    t: (key) => values[key] ?? `missing:${key}`,
+  };
+}
+
+describe('resolveErrorText', () => {
+  it('prefers an explicit backend i18nKey over every lower-priority source', () => {
+    const i18n = makeI18n({
+      'Auth.explicit': 'Explicit text',
+      'Auth.field.email.invalid': 'Field text',
+      invalid: 'Code text',
+      'Auth.DEFAULT': 'Default text',
+    });
+
+    expect(resolveErrorText(i18n, {
+      i18nKey: 'Auth.explicit',
+      field: 'email',
+      code: 'invalid',
+      backendMessage: 'Backend text',
+    }, 'Auth.DEFAULT')).toBe('Explicit text');
+  });
+
+  it('uses the allauth param as a field-specific key before the code', () => {
+    const i18n = makeI18n({
+      'Auth.field.email.invalid': 'Field text',
+      invalid: 'Code text',
+      'Auth.DEFAULT': 'Default text',
+    });
+
+    expect(resolveErrorText(i18n, {
+      field: 'email',
+      code: 'invalid',
+      backendMessage: 'Backend text',
+    }, 'Auth.DEFAULT')).toBe('Field text');
+  });
+
+  it('uses the code catalogue entry when no field entry exists', () => {
+    const i18n = makeI18n({
+      email_password_mismatch: 'Code text',
+      'Auth.DEFAULT': 'Default text',
+    });
+
+    expect(resolveErrorText(i18n, {
+      field: 'email',
+      code: 'email_password_mismatch',
+      backendMessage: 'Backend text',
+    }, 'Auth.DEFAULT')).toBe('Code text');
+  });
+
+  it('uses the backend message before the caller default', () => {
+    const i18n = makeI18n({ 'Auth.DEFAULT': 'Default text' });
+
+    expect(resolveErrorText(i18n, {
+      code: 'unknown_backend_code',
+      backendMessage: 'Backend text',
+    }, 'Auth.DEFAULT')).toBe('Backend text');
+  });
+
+  it('uses the caller default instead of ever returning an unknown raw code', () => {
+    const i18n = makeI18n({ 'Auth.DEFAULT': 'Default text' });
+
+    expect(resolveErrorText(i18n, {
+      code: 'unknown_backend_code',
+    }, 'Auth.DEFAULT')).toBe('Default text');
+    expect(resolveErrorText(i18n, null, 'Auth.DEFAULT')).toBe('Default text');
+  });
+});