feat(KAN-16): add English localization foundation

tests/Feature/LocalizationTest.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Support\Facades\Validator;
+use Inertia\Testing\AssertableInertia as Assert;
+use Symfony\Component\Process\Process;
+use Tests\TestCase;
+
+class LocalizationTest extends TestCase
+{
+    public function test_frontend_localization_behaviour(): void
+    {
+        $process = new Process(['node', 'tests/Fixtures/localization.mjs'], base_path());
+        $process->setTimeout(60);
+        $process->run();
+
+        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
+        $this->assertStringContainsString('Localization behavior checks passed.', $process->getOutput());
+    }
+
+    public function test_initial_page_shares_the_application_locale_and_time_zone(): void
+    {
+        config(['app.timezone' => 'Europe/Berlin']);
+
+        $this->withHeader('Accept-Language', 'de-DE')->get(route('home'))
+            ->assertOk()
+            ->assertSee('lang="en"', false)
+            ->assertInertia(fn (Assert $page) => $page
+                ->where('localization.locale', 'en')
+                ->where('localization.timeZone', 'Europe/Berlin'));
+    }
+
+    public function test_server_validation_remains_english(): void
+    {
+        $this->assertSame('en', config('app.locale'));
+        $this->assertSame('en', config('app.fallback_locale'));
+
+        $validator = Validator::make(['email' => 'invalid'], [
+            'title' => ['required'],
+            'email' => ['email'],
+        ]);
+
+        $this->assertSame('The title field is required.', $validator->errors()->first('title'));
+        $this->assertSame('The email field must be a valid email address.', $validator->errors()->first('email'));
+    }
+}

tests/Fixtures/localization.mjs

@@ -0,0 +1,169 @@
+import assert from 'node:assert/strict';
+import { fileURLToPath } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import { createServer } from 'vite';
+import { computed, createSSRApp, h } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+
+const server = await createServer({
+    configFile: false,
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
+        },
+    },
+    server: { middlewareMode: true, hmr: false, watch: null },
+    appType: 'custom',
+});
+
+try {
+    const { createLocalization, validateCatalog } = await server.ssrLoadModule(
+        '/resources/js/lib/localization.ts',
+    );
+    const { useLocalization } = await server.ssrLoadModule(
+        '/resources/js/composables/useLocalization.ts',
+    );
+    const { en } = await server.ssrLoadModule('/resources/js/locales/en.ts');
+    const { default: AlertError } = await server.ssrLoadModule(
+        '/resources/js/components/AlertError.vue',
+    );
+
+    const english = createLocalization();
+    assert.equal(english.t('common.save'), 'Save');
+    assert.equal(
+        english.t('pagination.page', { page: 0, total: 2000 }),
+        'Page 0 of 2,000',
+    );
+    for (const [count, expected] of [
+        [0, '0 tickets'],
+        [1, '1 ticket'],
+        [2, '2 tickets'],
+        [1.5, '1.5 tickets'],
+    ]) {
+        assert.equal(english.t('tickets.count', { count }), expected);
+    }
+    assert.equal(
+        english.number(1234.5, { minimumFractionDigits: 2 }),
+        '1,234.50',
+    );
+    assert.equal(
+        english.number(12, { style: 'currency', currency: 'USD' }),
+        '$12.00',
+    );
+    assert.equal(english.date(new Date('2026-09-09T23:30:00Z')), '9/9/2026');
+    assert.equal(
+        createLocalization({ timeZone: 'Europe/Berlin' }).date(
+            new Date('2026-09-09T23:30:00Z'),
+        ),
+        '9/10/2026',
+    );
+    assert.throws(() => english.t('missing.key'), /Missing translation/);
+    assert.throws(() => english.t('toString'), /Missing translation/);
+    assert.throws(
+        () => english.t('pagination.page', { page: 1 }),
+        /Missing translation parameter/,
+    );
+    for (const count of [undefined, '1', Infinity, NaN]) {
+        assert.throws(
+            () => english.t('tickets.count', { count }),
+            /finite count/,
+        );
+    }
+
+    const incomplete = { ...en };
+    delete incomplete['common.save'];
+    assert.throws(
+        () => validateCatalog(incomplete),
+        /Missing or invalid translation/,
+    );
+    assert.throws(
+        () =>
+            validateCatalog({
+                ...en,
+                'tickets.count': { one: '{count} ticket' },
+            }),
+        /plural fallback/,
+    );
+    assert.throws(
+        () => validateCatalog({ ...en, 'pagination.page': 'Page {unknown}' }),
+        /placeholders/,
+    );
+    assert.throws(
+        () => validateCatalog({ ...en, 'common.save': '' }),
+        /placeholders/,
+    );
+    assert.throws(
+        () => createLocalization({}, { de: incomplete }),
+        /Missing or invalid translation/,
+    );
+
+    for (const locale of ['de-DE', 'en_US', 'not a locale', '']) {
+        assert.equal(createLocalization({ locale }).locale.value, 'en');
+    }
+
+    const de = {
+        ...en,
+        'common.error': 'Etwas ist schiefgelaufen.',
+        'common.save': 'Speichern',
+    };
+    const translated = createLocalization({ locale: 'de_DE' }, { de });
+    assert.equal(translated.locale.value, 'de');
+    assert.equal(translated.number(1234.5), '1.234,5');
+    const label = computed(() => translated.t('common.save'));
+    assert.equal(label.value, 'Speichern');
+    translated.setLocale('en');
+    assert.equal(label.value, 'Save');
+    translated.setLocale('de');
+    assert.equal(label.value, 'Speichern');
+    assert.equal(english.locale.value, 'en');
+
+    const renderAlert = (localization, props = {}) =>
+        renderToString(
+            createSSRApp({
+                render: () =>
+                    h(AlertError, {
+                        errors: ['Invalid input', 'Invalid input'],
+                        ...props,
+                    }),
+            }).use(localization),
+        );
+    const [englishHtml, germanHtml] = await Promise.all([
+        renderAlert(english),
+        renderAlert(translated),
+    ]);
+    assert.match(englishHtml, /Something went wrong\./);
+    assert.match(germanHtml, /Etwas ist schiefgelaufen\./);
+    assert.equal((englishHtml.match(/Invalid input/g) ?? []).length, 1);
+    assert.match(
+        await renderAlert(translated, { title: 'Custom title' }),
+        /Custom title/,
+    );
+    assert.doesNotMatch(
+        await renderAlert(translated, { title: '' }),
+        /Etwas ist schiefgelaufen/,
+    );
+
+    const InterpolatedText = {
+        setup() {
+            const { t } = useLocalization();
+            return () =>
+                h(
+                    'p',
+                    t('pagination.page', {
+                        page: '<script>alert(1)</script>',
+                        total: 1,
+                    }),
+                );
+        },
+    };
+    const escaped = await renderToString(
+        createSSRApp(InterpolatedText).use(createLocalization()),
+    );
+    assert.match(escaped, /&lt;script&gt;/);
+    assert.doesNotMatch(escaped, /<script>/);
+
+    console.log('Localization behavior checks passed.');
+} finally {
+    await server.close();
+}