Skip to content

Commit 6cda3c7

Browse files
remadexremadex
committed
feat: add language selector
1 parent 6276f0b commit 6cda3c7

File tree

10 files changed

+269
-142
lines changed

10 files changed

+269
-142
lines changed

‎doc-app/app/templates/home.gts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import Component from '@glimmer/component';
22
import { tracked } from '@glimmer/tracking';
33
import { action } from '@ember/object';
4+
import { service } from '@ember/service';
5+
import type { Registry as Services } from '@ember/service';
46
import TpkDashBoard, {
57
type SidebarItem,
8+
type Language,
69
} from '@triptyk/ember-ui/components/prefabs/tpk-dashboard';
710
import type { TOC } from '@ember/component/template-only';
811
import ThemeSelector from 'doc-app/components/theme-selector';
912
import { hash } from '@ember/helper';
1013

1114
export default class DashboardTemplate extends Component {
15+
@service declare intl: Services['intl'];
1216
@tracked sidebarCollapsed = false;
1317

18+
languages: Language[] = [
19+
{ code: 'fr-fr', label: 'Français' },
20+
{ code: 'en-us', label: 'Anglais' },
21+
];
22+
1423
@action
1524
logout() {
1625
console.log('logout');
@@ -25,6 +34,11 @@ export default class DashboardTemplate extends Component {
2534
this.sidebarCollapsed = !this.sidebarCollapsed;
2635
}
2736

37+
@action
38+
handleLocaleChange(locale: string) {
39+
this.intl.setLocale([locale]);
40+
}
41+
2842
menuItems: SidebarItem[] = [
2943
{
3044
type: 'link',
@@ -125,6 +139,8 @@ export default class DashboardTemplate extends Component {
125139
@collapsed={{this.sidebarCollapsed}}
126140
@onCollapsedChange={{this.handleCollapsedChange}}
127141
@onSidebarToggle={{this.toggleSidebar}}
142+
@languages={{this.languages}}
143+
@onLocaleChange={{this.handleLocaleChange}}
128144
@currentUser={{hash fullName="John Doe"}}
129145
@onLogout={{this.logout}}
130146
@logoutLabel="Logout"

‎doc-app/tests/integration/components/ember-ui/prefabs/tpk-forgot-password-prefab-test.gts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,17 @@ module(
6161
);
6262
});
6363

64-
test('uses initial values when provided', async function (assert) {
65-
await renderComponent({
66-
initialValues: {
67-
email: 'test@example.com',
68-
},
64+
test('uses initial values when provided', async function (assert) {
65+
await renderComponent({
66+
initialValues: {
67+
email: 'test@example.com',
68+
},
69+
});
70+
assert.strictEqual(
71+
forgotPasswordPageObject.email.value,
72+
'test@example.com'
73+
);
6974
});
70-
assert.strictEqual(forgotPasswordPageObject.email.value, 'test@example.com');
71-
});
7275

7376
test('onSubmit is called with data and changeset when form is valid', async function (assert) {
7477
let receivedData: unknown;

‎doc-app/tests/integration/components/ember-ui/prefabs/tpk-login-prefab-test.gts‎

Lines changed: 103 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -7,116 +7,119 @@ import { object, email, string } from 'zod';
77
import TpkLogin from '@triptyk/ember-ui/components/prefabs/tpk-login';
88
import loginPageObject from 'doc-app/tests/pages/tpk-login';
99

10-
module('Integration | Component | Prefabs | Tpk-login-prefab', function (hooks) {
11-
setupRenderingTest(hooks);
12-
setupIntl(hooks, 'fr-fr');
13-
14-
const loginSchema = object({
15-
email: email(),
16-
password: string().min(1),
17-
});
18-
19-
async function renderComponent(params?: {
20-
onSubmit?: (data: unknown, changeset: ImmerChangeset) => void;
21-
initialValues?: { email: string; password: string };
22-
submitButtonText?: string;
23-
}) {
24-
const onSubmit = params?.onSubmit ?? (() => {});
25-
const initialValues = params?.initialValues;
26-
const submitButtonText = params?.submitButtonText;
27-
28-
await render(
29-
<template>
30-
<TpkLogin
31-
@onSubmit={{onSubmit}}
32-
@loginSchema={{loginSchema}}
33-
@initialValues={{initialValues}}
34-
@submitButtonText={{submitButtonText}}
35-
/>
36-
</template>
37-
);
38-
}
10+
module(
11+
'Integration | Component | Prefabs | Tpk-login-prefab',
12+
function (hooks) {
13+
setupRenderingTest(hooks);
14+
setupIntl(hooks, 'fr-fr');
15+
16+
const loginSchema = object({
17+
email: email(),
18+
password: string().min(1),
19+
});
3920

40-
test('renders login form with email and password fields', async function (assert) {
41-
await renderComponent();
42-
assert.dom(loginPageObject.scope).exists();
43-
assert.dom('[data-test-tpk-login-form-email]').exists();
44-
assert.dom('[data-test-tpk-login-form-password]').exists();
45-
assert.dom(loginPageObject.submitButton.scope).exists();
46-
});
47-
48-
test('displays default submit button text', async function (assert) {
49-
await renderComponent();
50-
assert.strictEqual(loginPageObject.submitButton.text, 'Sign in');
51-
});
52-
53-
test('displays custom submit button text', async function (assert) {
54-
await renderComponent({ submitButtonText: 'Connexion' });
55-
assert.strictEqual(loginPageObject.submitButton.text, 'Connexion');
56-
});
57-
58-
test('uses initial values when provided', async function (assert) {
59-
await renderComponent({
60-
initialValues: {
61-
email: 'test@example.com',
62-
password: 'initialPassword',
63-
},
21+
async function renderComponent(params?: {
22+
onSubmit?: (data: unknown, changeset: ImmerChangeset) => void;
23+
initialValues?: { email: string; password: string };
24+
submitButtonText?: string;
25+
}) {
26+
const onSubmit = params?.onSubmit ?? (() => {});
27+
const initialValues = params?.initialValues;
28+
const submitButtonText = params?.submitButtonText;
29+
30+
await render(
31+
<template>
32+
<TpkLogin
33+
@onSubmit={{onSubmit}}
34+
@loginSchema={{loginSchema}}
35+
@initialValues={{initialValues}}
36+
@submitButtonText={{submitButtonText}}
37+
/>
38+
</template>
39+
);
40+
}
41+
42+
test('renders login form with email and password fields', async function (assert) {
43+
await renderComponent();
44+
assert.dom(loginPageObject.scope).exists();
45+
assert.dom('[data-test-tpk-login-form-email]').exists();
46+
assert.dom('[data-test-tpk-login-form-password]').exists();
47+
assert.dom(loginPageObject.submitButton.scope).exists();
6448
});
65-
assert.strictEqual(loginPageObject.email.value, 'test@example.com');
66-
assert.strictEqual(loginPageObject.password.value, 'initialPassword');
67-
});
68-
69-
test('onSubmit is called with data and changeset when form is valid', async function (assert) {
70-
let receivedData: unknown;
71-
let receivedChangeset: ImmerChangeset | undefined;
72-
73-
await renderComponent({
74-
onSubmit: (data, changeset) => {
75-
receivedData = data;
76-
receivedChangeset = changeset;
77-
assert.step('onSubmit');
78-
},
49+
50+
test('displays default submit button text', async function (assert) {
51+
await renderComponent();
52+
assert.strictEqual(loginPageObject.submitButton.text, 'Sign in');
7953
});
8054

81-
await loginPageObject.email.fillIn('test@example.com');
82-
await loginPageObject.password.fillIn('password123');
83-
await loginPageObject.submitButton.click();
55+
test('displays custom submit button text', async function (assert) {
56+
await renderComponent({ submitButtonText: 'Connexion' });
57+
assert.strictEqual(loginPageObject.submitButton.text, 'Connexion');
58+
});
8459

85-
assert.verifySteps(['onSubmit']);
86-
assert.deepEqual(receivedData, {
87-
email: 'test@example.com',
88-
password: 'password123',
60+
test('uses initial values when provided', async function (assert) {
61+
await renderComponent({
62+
initialValues: {
63+
email: 'test@example.com',
64+
password: 'initialPassword',
65+
},
66+
});
67+
assert.strictEqual(loginPageObject.email.value, 'test@example.com');
68+
assert.strictEqual(loginPageObject.password.value, 'initialPassword');
8969
});
90-
assert.ok(receivedChangeset instanceof ImmerChangeset);
91-
assert.strictEqual(receivedChangeset?.get('email'), 'test@example.com');
92-
assert.strictEqual(receivedChangeset?.get('password'), 'password123');
93-
});
94-
95-
test('onSubmit is not called when form is invalid', async function (assert) {
96-
await renderComponent({
97-
onSubmit: () => {
98-
assert.step('onSubmit');
99-
},
70+
71+
test('onSubmit is called with data and changeset when form is valid', async function (assert) {
72+
let receivedData: unknown;
73+
let receivedChangeset: ImmerChangeset | undefined;
74+
75+
await renderComponent({
76+
onSubmit: (data, changeset) => {
77+
receivedData = data;
78+
receivedChangeset = changeset;
79+
assert.step('onSubmit');
80+
},
81+
});
82+
83+
await loginPageObject.email.fillIn('test@example.com');
84+
await loginPageObject.password.fillIn('password123');
85+
await loginPageObject.submitButton.click();
86+
87+
assert.verifySteps(['onSubmit']);
88+
assert.deepEqual(receivedData, {
89+
email: 'test@example.com',
90+
password: 'password123',
91+
});
92+
assert.ok(receivedChangeset instanceof ImmerChangeset);
93+
assert.strictEqual(receivedChangeset?.get('email'), 'test@example.com');
94+
assert.strictEqual(receivedChangeset?.get('password'), 'password123');
10095
});
10196

102-
await loginPageObject.email.fillIn('invalid-email');
103-
await loginPageObject.password.fillIn('password123');
104-
await loginPageObject.submitButton.click();
97+
test('onSubmit is not called when form is invalid', async function (assert) {
98+
await renderComponent({
99+
onSubmit: () => {
100+
assert.step('onSubmit');
101+
},
102+
});
105103

106-
assert.verifySteps([]);
107-
});
104+
await loginPageObject.email.fillIn('invalid-email');
105+
await loginPageObject.password.fillIn('password123');
106+
await loginPageObject.submitButton.click();
108107

109-
test('onSubmit is not called when password is empty', async function (assert) {
110-
await renderComponent({
111-
onSubmit: () => {
112-
assert.step('onSubmit');
113-
},
108+
assert.verifySteps([]);
114109
});
115110

116-
await loginPageObject.email.fillIn('test@example.com');
117-
await loginPageObject.password.fillIn('');
118-
await loginPageObject.submitButton.click();
111+
test('onSubmit is not called when password is empty', async function (assert) {
112+
await renderComponent({
113+
onSubmit: () => {
114+
assert.step('onSubmit');
115+
},
116+
});
119117

120-
assert.verifySteps([]);
121-
});
122-
});
118+
await loginPageObject.email.fillIn('test@example.com');
119+
await loginPageObject.password.fillIn('');
120+
await loginPageObject.submitButton.click();
121+
122+
assert.verifySteps([]);
123+
});
124+
}
125+
);

‎doc-app/tests/integration/components/ember-ui/prefabs/tpk-reset-password-prefab-test.gts‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -65,22 +65,22 @@ module(
6565
);
6666
});
6767

68-
test('uses initial values when provided', async function (assert) {
69-
await renderComponent({
70-
initialValues: {
71-
password: 'initialPassword',
72-
confirmPassword: 'initialConfirmPassword',
73-
},
68+
test('uses initial values when provided', async function (assert) {
69+
await renderComponent({
70+
initialValues: {
71+
password: 'initialPassword',
72+
confirmPassword: 'initialConfirmPassword',
73+
},
74+
});
75+
assert.strictEqual(
76+
resetPasswordPageObject.password.value,
77+
'initialPassword'
78+
);
79+
assert.strictEqual(
80+
resetPasswordPageObject.confirmPassword.value,
81+
'initialConfirmPassword'
82+
);
7483
});
75-
assert.strictEqual(
76-
resetPasswordPageObject.password.value,
77-
'initialPassword'
78-
);
79-
assert.strictEqual(
80-
resetPasswordPageObject.confirmPassword.value,
81-
'initialConfirmPassword'
82-
);
83-
});
8484

8585
test('onSubmit is called with data and changeset when form is valid', async function (assert) {
8686
let receivedData: unknown;
@@ -104,10 +104,7 @@ module(
104104
confirmPassword: 'password123',
105105
});
106106
assert.ok(receivedChangeset instanceof ImmerChangeset);
107-
assert.strictEqual(
108-
receivedChangeset?.get('password'),
109-
'password123'
110-
);
107+
assert.strictEqual(receivedChangeset?.get('password'), 'password123');
111108
assert.strictEqual(
112109
receivedChangeset?.get('confirmPassword'),
113110
'password123'

‎doc-app/tests/pages/tpk-forgot-password.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1-
import { clickable, create, fillable, text, value } from 'ember-cli-page-object';
1+
import {
2+
clickable,
3+
create,
4+
fillable,
5+
text,
6+
value,
7+
} from 'ember-cli-page-object';
28

39
export default create({
410
scope: '[data-test-tpk-forgot-password-form]',
511
email: create({
6-
fillIn: fillable('[data-test-tpk-forgot-password-form-email] [data-test-tpk-email-input]'),
7-
value: value('[data-test-tpk-forgot-password-form-email] [data-test-tpk-email-input]'),
12+
fillIn: fillable(
13+
'[data-test-tpk-forgot-password-form-email] [data-test-tpk-email-input]'
14+
),
15+
value: value(
16+
'[data-test-tpk-forgot-password-form-email] [data-test-tpk-email-input]'
17+
),
818
}),
919
submitButton: create({
1020
scope: '.tpk-forgot-password-form-button',

‎doc-app/tests/pages/tpk-login.ts‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
1-
import { clickable, create, fillable, text, value } from 'ember-cli-page-object';
1+
import {
2+
clickable,
3+
create,
4+
fillable,
5+
text,
6+
value,
7+
} from 'ember-cli-page-object';
28

39
export default create({
410
scope: '[data-test-tpk-login-form]',
511
email: create({
6-
fillIn: fillable('[data-test-tpk-login-form-email] [data-test-tpk-email-input]'),
7-
value: value('[data-test-tpk-login-form-email] [data-test-tpk-email-input]'),
12+
fillIn: fillable(
13+
'[data-test-tpk-login-form-email] [data-test-tpk-email-input]'
14+
),
15+
value: value(
16+
'[data-test-tpk-login-form-email] [data-test-tpk-email-input]'
17+
),
818
}),
919
password: create({
10-
fillIn: fillable('[data-test-tpk-login-form-password] [data-test-tpk-password-input]'),
11-
value: value('[data-test-tpk-login-form-password] [data-test-tpk-password-input]'),
20+
fillIn: fillable(
21+
'[data-test-tpk-login-form-password] [data-test-tpk-password-input]'
22+
),
23+
value: value(
24+
'[data-test-tpk-login-form-password] [data-test-tpk-password-input]'
25+
),
1226
}),
1327
submitButton: create({
1428
scope: '.tpk-login-form-button',

0 commit comments

Comments
 (0)