Skip to content

Commit 3027db8

Browse files
KocalKocal
committed
minor #3080 [Translator] Add E2E tests (Kocal)
This PR was merged into the 2.x branch. Discussion ---------- [Translator] Add E2E tests | Q | A | ------------- | --- | Bug fix? | no | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Docs? | no <!-- required for new features --> | Issues | Fix #3026 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Update/add documentation as required (we can help!) - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> Commits ------- f514127 [Translator] Add E2E tests
2 parents 02d3274 + f514127 commit 3027db8

17 files changed

+538
-15
lines changed

‎apps/e2e/config/packages/translation.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
framework:
22
default_locale: en
3+
enabled_locales: ['en', 'fr']
34
translator:
45
default_path: '%kernel.project_dir%/translations'
56
providers:

‎apps/e2e/config/packages/ux_translator.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
ux_translator:
22
# The directory where the JavaScript translations are dumped
33
dump_directory: '%kernel.project_dir%/var/translations'
4+
5+
# The translation domains to include in the dump
6+
domains:
7+
- messages

‎apps/e2e/src/Controller/TranslatorController.php‎

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,51 @@
99
#[Route('/ux-translator')]
1010
final class TranslatorController extends AbstractController
1111
{
12-
#[Route('/')]
13-
public function index(): Response
12+
#[Route('/basic')]
13+
public function basic(): Response
1414
{
15-
return $this->render('ux_translator/index.html.twig', [
16-
'controller_name' => 'TranslatorController',
17-
]);
15+
return $this->render('ux_translator/basic.html.twig');
16+
}
17+
18+
#[Route('/with-parameter')]
19+
public function withParameter(): Response
20+
{
21+
return $this->render('ux_translator/with_parameter.html.twig');
22+
}
23+
24+
#[Route('/icu-select')]
25+
public function icuSelect(): Response
26+
{
27+
return $this->render('ux_translator/icu_select.html.twig');
28+
}
29+
30+
#[Route('/icu-plural')]
31+
public function icuPlural(): Response
32+
{
33+
return $this->render('ux_translator/icu_plural.html.twig');
34+
}
35+
36+
#[Route('/icu-selectordinal')]
37+
public function icuSelectOrdinal(): Response
38+
{
39+
return $this->render('ux_translator/icu_selectordinal.html.twig');
40+
}
41+
42+
#[Route('/icu-date-time')]
43+
public function icuDateTime(): Response
44+
{
45+
return $this->render('ux_translator/icu_date_time.html.twig');
46+
}
47+
48+
#[Route('/icu-number-percent')]
49+
public function icuNumberPercent(): Response
50+
{
51+
return $this->render('ux_translator/icu_number_percent.html.twig');
52+
}
53+
54+
#[Route('/icu-number-currency')]
55+
public function icuNumberCurrency(): Response
56+
{
57+
return $this->render('ux_translator/icu_number_currency.html.twig');
1858
}
1959
}

‎apps/e2e/src/Repository/ExampleRepository.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ public function __construct() {
4343
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'),
4444
new Example(UxPackage::React, 'Basic React Component', 'A basic React component that displays a welcoming message', '/ux-react/'),
4545
new Example(UxPackage::Svelte, 'Basic Svelte Component', 'A basic Svelte component that displays a welcoming message', '/ux-svelte/'),
46+
new Example(UxPackage::Translator, 'Basic translation', 'A simple translation example using the Translator component', '/ux-translator/basic'),
47+
new Example(UxPackage::Translator, 'Translation with parameter', 'Translation example with dynamic parameters', '/ux-translator/with-parameter'),
48+
new Example(UxPackage::Translator, 'ICU Translation with `select` argument', 'ICU message format example using the `select` argument', '/ux-translator/icu-select'),
49+
new Example(UxPackage::Translator, 'ICU Translation with `plural` argument', 'ICU message format example using the `plural` argument', '/ux-translator/icu-plural'),
50+
new Example(UxPackage::Translator, 'ICU Translation with `selectordinal` argument', 'ICU message format example using the `selectordinal` argument', '/ux-translator/icu-selectordinal'),
51+
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'),
52+
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'),
53+
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'),
4654
new Example(UxPackage::Vue, 'Basic Vue Component', 'A basic Vue component that displays a welcoming message', '/ux-vue/'),
4755
];
4856
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{% extends 'example.html.twig' %}
2+
3+
{% block example %}
4+
<div id="input" class="mb-3">
5+
<h2>Input</h2>
6+
<button id="doRender" class="btn btn-primary">Render</button>
7+
</div>
8+
<output data-testid="output" class="mb-3"></output>
9+
{% endblock %}
10+
11+
{% block javascripts %}
12+
{{ parent() }}
13+
<script type="module">
14+
import { trans } from '@symfony/ux-translator';
15+
import { HELLO } from '@app/translations';
16+
17+
function render() {
18+
document.querySelector('[data-testid="output"]').innerHTML = `
19+
<h2>Output</h2>
20+
<ul >
21+
<li>🇬🇧 ${trans(HELLO, {}, 'messages', 'en')}</li>
22+
<li>🇫🇷 ${trans(HELLO, {}, 'messages', 'fr')}</li>
23+
</ul>
24+
`
25+
}
26+
27+
document.querySelector('#doRender').addEventListener('click', render);
28+
</script>
29+
{% endblock %}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% extends 'example.html.twig' %}
2+
3+
{% block example %}
4+
<div id="input" class="mb-3">
5+
<h2>Input</h2>
6+
<div class="mb-3">
7+
<label for="date" class="form-label">Date</label>
8+
<input type="datetime-local" class="form-control" id="date" value="2023-04-27 08:12"/>
9+
</div>
10+
<button id="doRender" class="btn btn-primary">Render</button>
11+
</div>
12+
<output data-testid="output" class="mb-3"></output>
13+
{% endblock %}
14+
15+
{% block javascripts %}
16+
{{ parent() }}
17+
<script type="module">
18+
import { trans } from '@symfony/ux-translator';
19+
import { PUBLISHED_AT } from '@app/translations';
20+
21+
const inputDate = document.querySelector('#date');
22+
23+
function render() {
24+
document.querySelector('[data-testid="output"]').innerHTML = `
25+
<h2>Output</h2>
26+
<ul >
27+
<li>🇬🇧 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'en')}</li>
28+
<li>🇫🇷 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'fr')}</li>
29+
</ul>
30+
`
31+
}
32+
33+
document.querySelector('#doRender').addEventListener('click', render);
34+
</script>
35+
{% endblock %}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% extends 'example.html.twig' %}
2+
3+
{% block example %}
4+
<div id="input" class="mb-3">
5+
<h2>Input</h2>
6+
<div class="mb-3">
7+
<label for="price" class="form-label">Price</label>
8+
<input type="number" class="form-control" id="price" value="30" min="1"/>
9+
</div>
10+
<button id="doRender" class="btn btn-primary">Render</button>
11+
</div>
12+
<output data-testid="output" class="mb-3"></output>
13+
{% endblock %}
14+
15+
{% block javascripts %}
16+
{{ parent() }}
17+
<script type="module">
18+
import { trans } from '@symfony/ux-translator';
19+
import { VALUE_OF_OBJECT } from '@app/translations';
20+
21+
const inputPrice = document.querySelector('#price');
22+
23+
function render() {
24+
document.querySelector('[data-testid="output"]').innerHTML = `
25+
<h2>Output</h2>
26+
<ul >
27+
<li>🇬🇧 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'en')}</li>
28+
<li>🇫🇷 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'fr')}</li>
29+
</ul>
30+
`
31+
}
32+
33+
document.querySelector('#doRender').addEventListener('click', render);
34+
</script>
35+
{% endblock %}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% extends 'example.html.twig' %}
2+
3+
{% block example %}
4+
<div id="input" class="mb-3">
5+
<h2>Input</h2>
6+
<div class="mb-3">
7+
<label for="progress" class="form-label">Progress</label>
8+
<input type="range" class="form-range" id="progress" value="0.5" step="0.01" min="0" max="1"/>
9+
</div>
10+
<button id="doRender" class="btn btn-primary">Render</button>
11+
</div>
12+
<output data-testid="output" class="mb-3"></output>
13+
{% endblock %}
14+
15+
{% block javascripts %}
16+
{{ parent() }}
17+
<script type="module">
18+
import { trans } from '@symfony/ux-translator';
19+
import { PROGRESS } from '@app/translations';
20+
21+
const inputProgress = document.querySelector('#progress');
22+
23+
function render() {
24+
document.querySelector('[data-testid="output"]').innerHTML = `
25+
<h2>Output</h2>
26+
<ul >
27+
<li>🇬🇧 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'en')}</li>
28+
<li>🇫🇷 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'fr')}</li>
29+
</ul>
30+
`
31+
}
32+
33+
document.querySelector('#doRender').addEventListener('click', render);
34+
</script>
35+
{% endblock %}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% extends 'example.html.twig' %}
2+
3+
{% block example %}
4+
<div id="input" class="mb-3">
5+
<h2>Input</h2>
6+
<div class="mb-3">
7+
<label for="apples" class="form-label">Apples</label>
8+
<input type="number" class="form-control" id="apples" value="1" min="0"/>
9+
</div>
10+
<button id="doRender" class="btn btn-primary">Render</button>
11+
</div>
12+
<output data-testid="output" class="mb-3"></output>
13+
{% endblock %}
14+
15+
{% block javascripts %}
16+
{{ parent() }}
17+
<script type="module">
18+
import { trans } from '@symfony/ux-translator';
19+
import { NUM_OF_APPLES } from '@app/translations';
20+
21+
const inputApples = document.querySelector('#apples');
22+
23+
function render() {
24+
document.querySelector('[data-testid="output"]').innerHTML = `
25+
<h2>Output</h2>
26+
<ul >
27+
<li>🇬🇧 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'en')}</li>
28+
<li>🇫🇷 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'fr')}</li>
29+
</ul>
30+
`
31+
}
32+
33+
document.querySelector('#doRender').addEventListener('click', render);
34+
</script>
35+
{% endblock %}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{% extends 'example.html.twig' %}
2+
3+
{% block example %}
4+
<div id="input" class="mb-3">
5+
<h2>Input</h2>
6+
<div class="mb-3">
7+
<label for="gender" class="form-label">Gender</label>
8+
<select type="text" class="form-control" id="gender">
9+
<option value="female" selected>Female</option>
10+
<option value="male">Male</option>
11+
<option value="multiple">Multiple</option>
12+
<option value="trans">Trans</option>
13+
</select>
14+
</div>
15+
<button id="doRender" class="btn btn-primary">Render</button>
16+
</div>
17+
<output data-testid="output" class="mb-3"></output>
18+
{% endblock %}
19+
20+
{% block javascripts %}
21+
{{ parent() }}
22+
<script type="module">
23+
import { trans } from '@symfony/ux-translator';
24+
import { INVITATION_TITLE } from '@app/translations';
25+
26+
const selectGender = document.querySelector('#gender');
27+
28+
function render() {
29+
document.querySelector('[data-testid="output"]').innerHTML = `
30+
<h2>Output</h2>
31+
<ul >
32+
<li>🇬🇧 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'en')}</li>
33+
<li>🇫🇷 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'fr')}</li>
34+
</ul>
35+
`
36+
}
37+
38+
document.querySelector('#doRender').addEventListener('click', render);
39+
</script>
40+
{% endblock %}

0 commit comments

Comments
 (0)