Test with a pseudo-locale

How to do it

Generate the pseudo-locale from the default messages. Swap letters for accented ones, add about 40% extra length, and wrap each text in brackets. Run the browser tests at phone width in this locale. Text without brackets is not in the message file, and cut or overlapping text shows where the layout cannot grow.

Example

const ACCENTED = { a: 'á', e: 'é', i: 'í', o: 'ö', u: 'ü', A: 'Å', E: 'É', O: 'Ö' };
const EXTRA_LENGTH = 0.4;
const pseudo = text => {
  const accented = text.replace(/\{[^}]*\}|./g, c => (c.length > 1 ? c : ACCENTED[c] ?? c));
  return `[${accented}${'~'.repeat(Math.ceil(text.length * EXTRA_LENGTH))}]`;
};
pseudo('Book a call {name}'); // "[Böök á cáll {name}~~~~~~~~]"

import math
import re
ACCENTED = str.maketrans("aeiouAEO", "áéíöüÅÉÖ")
EXTRA_LENGTH = 0.4
def pseudo(text: str) -> str:
    parts = re.split(r"(\{[^}]*\})", text)
    accented = "".join(p if p.startswith("{") else p.translate(ACCENTED) for p in parts)
    return f"[{accented}{'~' * math.ceil(len(text) * EXTRA_LENGTH)}]"

How to check

The browser tests pass in the pseudo-locale. A test finds no visible text node without the brackets, and no element that scrolls sideways.