Five bugs that break every non-English user

import { test, expect } from '@playwright/test';

test.describe('RTL layout survives Arabic locale', () => {
  test.use({ locale: 'ar-SA' });

  test('navigation mirrors', async ({ page }) => {
    await page.goto('/');

    // HTML element must carry dir="rtl"
    const dir = await page.getAttribute('html', 'dir');
    expect(dir).toBe('rtl');

    // Back button chevron must point RIGHT in RTL (visually = back in reading order)
    const chevron = page.getByTestId('back-chevron');
    const transform = await chevron.evaluate(
      (el) => getComputedStyle(el).transform,
    );
    // Either a scaleX(-1) or a rotate — NOT identity matrix
    expect(transform).not.toBe('none');
  });

  test('logical properties used, not left/right', async ({ page }) => {
    await page.goto('/');
    const aside = page.getByRole('complementary');

    // Padding should be inline-start / inline-end, not left / right
    const paddingStart = await aside.evaluate(
      (el) => getComputedStyle(el).paddingInlineStart,
    );
    expect(paddingStart).not.toBe('0px');
  });
});

test.use({ locale: 'ja-JP' });

test('button text does not clip in Japanese', async ({ page }) => {
  await page.goto('/checkout');

  const submit = page.getByRole('button', { name: /送信|submit/i });
  const text = await submit.textContent();

  // clientWidth is rendered, scrollWidth is intrinsic — must match
  const { rendered, intrinsic } = await submit.evaluate((el) => ({
    rendered: el.clientWidth,
    intrinsic: el.scrollWidth,
  }));

  // If rendered < intrinsic, the text is being clipped
  expect(rendered, `"${text}" is clipped in button`)
    .toBeGreaterThanOrEqual(intrinsic);
});

test('long CJK text wraps correctly', async ({ page }) => {
  await page.goto('/products/42');

  // East Asian "word break: keep-all" vs "break-word" differ visually —
  // visual regression is the only reliable assertion here
  await expect(page.getByTestId('description'))
    .toHaveScreenshot('description-ja.png', { maxDiffPixelRatio: 0.01 });
});

// Use Intl.PluralRules — never hand-roll plural logic
const rules = new Intl.PluralRules('ru-RU');
console.log(rules.select(1));   // "one"
console.log(rules.select(2));   // "few"
console.log(rules.select(5));   // "many"
console.log(rules.select(21));  // "one"  (ends in 1, not 11)

// With i18n library (e.g. ICU MessageFormat in next-intl)
const t = useTranslations();
const message = t('inbox', { count: 5 });
// RU output: "5 новых сообщений"

// Tests — every locale × every boundary
test.describe.parallel('plural forms render correctly', () => {
  const cases = [
    { locale: 'en-US', count: 0,  expected: '0 messages' },
    { locale: 'en-US', count: 1,  expected: '1 message' },
    { locale: 'en-US', count: 5,  expected: '5 messages' },
    { locale: 'ru-RU', count: 1,  expected: '1 сообщение' },
    { locale: 'ru-RU', count: 2,  expected: '2 сообщения' },
    { locale: 'ru-RU', count: 5,  expected: '5 сообщений' },
    { locale: 'ru-RU', count: 21, expected: '21 сообщение' },  // ends in 1
  ];

  for (const { locale, count, expected } of cases) {
    test(`${locale} count=${count}`, async ({ browser }) => {
      const ctx = await browser.newContext({ locale });
      const page = await ctx.newPage();
      await page.goto(`/inbox?count=${count}`);
      await expect(page.getByTestId('count')).toHaveText(expected);
    });
  }
});

// Always use Intl.*
const price = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
}).format(1234.56);
// → "1.234,56 €"

const date = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'long',
}).format(new Date('2026-04-21'));
// → "2026年4月21日"

// Test every locale for every format
test('currency renders in locale-appropriate format', async ({ browser }) => {
  const cases = [
    { locale: 'en-US', amount: 1234.56, expect: '$1,234.56' },
    { locale: 'de-DE', amount: 1234.56, expect: '1.234,56\u00A0€' },  // NBSP!
    { locale: 'ja-JP', amount: 1234,    expect: '￥1,234' },
    { locale: 'en-IN', amount: 100000,  expect: '₹1,00,000' },  // lakh format
  ];

  for (const { locale, amount, expect: expected } of cases) {
    const ctx = await browser.newContext({ locale });
    const page = await ctx.newPage();
    await page.goto(`/price?amount=${amount}`);
    await expect(page.getByTestId('price')).toHaveText(expected);
  }
});

// NFC normalization — default for most web input; NFD is decomposed
const cafe1 = 'café';                         // one char
const cafe2 = 'cafe' + '\u0301';              // four chars, combining
console.log(cafe1 === cafe2);                  // false
console.log(cafe1 === cafe2.normalize('NFC')); // true

// Always normalize user input BEFORE storage + comparison
const email = form.email.value.normalize('NFC').toLowerCase();

// Emoji length trap
const flag = '🇯🇵';
console.log(flag.length);  // 4 (two surrogate pairs)
console.log([...flag].length);  // 2 (two Regional Indicator codepoints)

// Use Intl.Segmenter for correct character count
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
const graphemes = Array.from(segmenter.segment(flag));
console.log(graphemes.length);  // 1 (user-perceived character)

// Sorting: locale matters
['ä', 'z', 'a'].sort(new Intl.Collator('de').compare);
// → ['a', 'ä', 'z']   (German: ä after a)
['ä', 'z', 'a'].sort(new Intl.Collator('sv').compare);
// → ['a', 'z', 'ä']   (Swedish: ä after z)

// Test: signup form rejects duplicate "café" variants
test('user signup normalizes email', async ({ request }) => {
  const nfc = { email: 'café@test.dev', password: 'x' };
  const nfd = { email: 'cafe\u0301@test.dev', password: 'x' };

  await request.post('/api/signup', { data: nfc });
  const res = await request.post('/api/signup', { data: nfd });

  expect(res.status(), 'NFD variant must be seen as duplicate').toBe(409);
});