[Translator] Add E2E tests

apps/e2e/config/packages/translation.yaml

@@ -1,5 +1,6 @@
 framework:
     default_locale: en
+    enabled_locales: ['en', 'fr']
     translator:
         default_path: '%kernel.project_dir%/translations'
         providers:

apps/e2e/config/packages/ux_translator.yaml

@@ -1,3 +1,7 @@
 ux_translator:
     # The directory where the JavaScript translations are dumped
     dump_directory: '%kernel.project_dir%/var/translations'
+
+    # The translation domains to include in the dump
+    domains:
+        - messages

apps/e2e/src/Controller/TranslatorController.php

@@ -9,11 +9,51 @@
 #[Route('/ux-translator')]
 final class TranslatorController extends AbstractController
 {
-    #[Route('/')]
-    public function index(): Response
+    #[Route('/basic')]
+    public function basic(): Response
     {
-        return $this->render('ux_translator/index.html.twig', [
-            'controller_name' => 'TranslatorController',
-        ]);
+        return $this->render('ux_translator/basic.html.twig');
+    }
+
+    #[Route('/with-parameter')]
+    public function withParameter(): Response
+    {
+        return $this->render('ux_translator/with_parameter.html.twig');
+    }
+
+    #[Route('/icu-select')]
+    public function icuSelect(): Response
+    {
+        return $this->render('ux_translator/icu_select.html.twig');
+    }
+
+    #[Route('/icu-plural')]
+    public function icuPlural(): Response
+    {
+        return $this->render('ux_translator/icu_plural.html.twig');
+    }
+
+    #[Route('/icu-selectordinal')]
+    public function icuSelectOrdinal(): Response
+    {
+        return $this->render('ux_translator/icu_selectordinal.html.twig');
+    }
+
+    #[Route('/icu-date-time')]
+    public function icuDateTime(): Response
+    {
+        return $this->render('ux_translator/icu_date_time.html.twig');
+    }
+
+    #[Route('/icu-number-percent')]
+    public function icuNumberPercent(): Response
+    {
+        return $this->render('ux_translator/icu_number_percent.html.twig');
+    }
+
+    #[Route('/icu-number-currency')]
+    public function icuNumberCurrency(): Response
+    {
+        return $this->render('ux_translator/icu_number_currency.html.twig');
     }
 }

apps/e2e/src/Repository/ExampleRepository.php

@@ -43,6 +43,14 @@ public function __construct() {
             new Example(UxPackage::Map, 'With rectangles (Google)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', '/ux-map/with-rectangles?renderer=google'),
             new Example(UxPackage::React, 'Basic React Component', 'A basic React component that displays a welcoming message', '/ux-react/'),
             new Example(UxPackage::Svelte, 'Basic Svelte Component', 'A basic Svelte component that displays a welcoming message', '/ux-svelte/'),
+           new Example(UxPackage::Translator, 'Basic translation', 'A simple translation example using the Translator component', '/ux-translator/basic'),
+           new Example(UxPackage::Translator, 'Translation with parameter', 'Translation example with dynamic parameters', '/ux-translator/with-parameter'),
+           new Example(UxPackage::Translator, 'ICU Translation with `select` argument', 'ICU message format example using the `select` argument', '/ux-translator/icu-select'),
+           new Example(UxPackage::Translator, 'ICU Translation with `plural` argument', 'ICU message format example using the `plural` argument', '/ux-translator/icu-plural'),
+           new Example(UxPackage::Translator, 'ICU Translation with `selectordinal` argument', 'ICU message format example using the `selectordinal` argument', '/ux-translator/icu-selectordinal'),
+           new Example(UxPackage::Translator, 'ICU Translation with `date` and `time` arguments', 'ICU message format example using `date` and `time` arguments', '/ux-translator/icu-date-time'),
+           new Example(UxPackage::Translator, 'ICU Translation with `number` and `percent` arguments', 'ICU message format example using `number` and `percent` arguments', '/ux-translator/icu-number-percent'),
+           new Example(UxPackage::Translator, 'ICU Translation with `number` and `currency` arguments', 'ICU message format example using `number` and `currency` arguments', '/ux-translator/icu-number-currency'),
             new Example(UxPackage::Vue, 'Basic Vue Component', 'A basic Vue component that displays a welcoming message', '/ux-vue/'),
         ];
     }

apps/e2e/templates/ux_translator/basic.html.twig

@@ -0,0 +1,29 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { HELLO } from '@app/translations';
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(HELLO, {}, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(HELLO, {}, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}

apps/e2e/templates/ux_translator/icu_date_time.html.twig

@@ -0,0 +1,35 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <div class="mb-3">
+            <label for="date" class="form-label">Date</label>
+            <input type="datetime-local" class="form-control" id="date" value="2023-04-27 08:12"/>
+        </div>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { PUBLISHED_AT } from '@app/translations';
+
+        const inputDate = document.querySelector('#date');
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}

apps/e2e/templates/ux_translator/icu_number_currency.html.twig

@@ -0,0 +1,35 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <div class="mb-3">
+            <label for="price" class="form-label">Price</label>
+            <input type="number" class="form-control" id="price" value="30" min="1"/>
+        </div>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { VALUE_OF_OBJECT } from '@app/translations';
+
+        const inputPrice = document.querySelector('#price');
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}

apps/e2e/templates/ux_translator/icu_number_percent.html.twig

@@ -0,0 +1,35 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <div class="mb-3">
+            <label for="progress" class="form-label">Progress</label>
+            <input type="range" class="form-range" id="progress" value="0.5" step="0.01" min="0" max="1"/>
+        </div>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { PROGRESS } from '@app/translations';
+
+        const inputProgress = document.querySelector('#progress');
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}

apps/e2e/templates/ux_translator/icu_plural.html.twig

@@ -0,0 +1,35 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <div class="mb-3">
+            <label for="apples" class="form-label">Apples</label>
+            <input type="number" class="form-control" id="apples" value="1" min="0"/>
+        </div>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { NUM_OF_APPLES } from '@app/translations';
+
+        const inputApples = document.querySelector('#apples');
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}

apps/e2e/templates/ux_translator/icu_select.html.twig

@@ -0,0 +1,40 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <div class="mb-3">
+            <label for="gender" class="form-label">Gender</label>
+            <select type="text" class="form-control" id="gender">
+                <option value="female" selected>Female</option>
+                <option value="male">Male</option>
+                <option value="multiple">Multiple</option>
+                <option value="trans">Trans</option>
+            </select>
+        </div>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { INVITATION_TITLE } from '@app/translations';
+
+        const selectGender = document.querySelector('#gender');
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}

apps/e2e/templates/ux_translator/icu_selectordinal.html.twig

@@ -0,0 +1,35 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <div class="mb-3">
+            <label for="place" class="form-label">Place</label>
+            <input type="number" class="form-control" id="place" value="1" min="0"/>
+        </div>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { FINISH_PLACE } from '@app/translations';
+
+        const inputPlace = document.querySelector('#place');
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(FINISH_PLACE, { place: inputPlace.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(FINISH_PLACE, { place: inputPlace.value }, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}

apps/e2e/templates/ux_translator/with_parameter.html.twig

@@ -0,0 +1,35 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div id="input" class="mb-3">
+        <h2>Input</h2>
+        <div class="mb-3">
+            <label for="name" class="form-label">Name</label>
+            <input type="text" class="form-control" id="name" value="Fabien"/>
+        </div>
+        <button id="doRender" class="btn btn-primary">Render</button>
+    </div>
+    <output data-testid="output" class="mb-3"></output>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { trans } from '@symfony/ux-translator';
+        import { SAY_HELLO } from '@app/translations';
+
+        const inputName = document.querySelector('#name');
+
+        function render() {
+            document.querySelector('[data-testid="output"]').innerHTML = `
+                <h2>Output</h2>
+                <ul >
+                    <li>🇬🇧 ${trans(SAY_HELLO, { name: inputName.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans(SAY_HELLO, { name: inputName.value }, 'messages', 'fr')}</li>
+                </ul>
+            `
+        }
+
+        document.querySelector('#doRender').addEventListener('click', render);
+    </script>
+{% endblock %}