Skip to content

Commit 6276f0b

Browse files
remadexremadex
committed
feat: add test for auth component
1 parent 5b668eb commit 6276f0b

File tree

9 files changed

+434
-0
lines changed

9 files changed

+434
-0
lines changed

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { setupIntl } from 'ember-intl/test-support';
4+
import { render } from '@ember/test-helpers';
5+
import { ImmerChangeset } from 'ember-immer-changeset';
6+
import { object, email } from 'zod';
7+
import TpkForgotPassword from '@triptyk/ember-ui/components/prefabs/tpk-forgot-password';
8+
import forgotPasswordPageObject from 'doc-app/tests/pages/tpk-forgot-password';
9+
10+
module(
11+
'Integration | Component | Prefabs | Tpk-forgot-password-prefab',
12+
function (hooks) {
13+
setupRenderingTest(hooks);
14+
setupIntl(hooks, 'fr-fr');
15+
16+
const forgotPasswordSchema = object({
17+
email: email(),
18+
});
19+
20+
async function renderComponent(params?: {
21+
onSubmit?: (data: unknown, changeset: ImmerChangeset) => void;
22+
initialValues?: { email: string };
23+
submitButtonText?: string;
24+
}) {
25+
const onSubmit = params?.onSubmit ?? (() => {});
26+
const initialValues = params?.initialValues;
27+
const submitButtonText = params?.submitButtonText;
28+
29+
await render(
30+
<template>
31+
<TpkForgotPassword
32+
@onSubmit={{onSubmit}}
33+
@forgotPasswordSchema={{forgotPasswordSchema}}
34+
@initialValues={{initialValues}}
35+
@submitButtonText={{submitButtonText}}
36+
/>
37+
</template>
38+
);
39+
}
40+
41+
test('renders forgot password form with email field', async function (assert) {
42+
await renderComponent();
43+
assert.dom(forgotPasswordPageObject.scope).exists();
44+
assert.dom('[data-test-tpk-forgot-password-form-email]').exists();
45+
assert.dom(forgotPasswordPageObject.submitButton.scope).exists();
46+
});
47+
48+
test('displays default submit button text', async function (assert) {
49+
await renderComponent();
50+
assert.strictEqual(
51+
forgotPasswordPageObject.submitButton.text,
52+
'Send Reset Link'
53+
);
54+
});
55+
56+
test('displays custom submit button text', async function (assert) {
57+
await renderComponent({ submitButtonText: 'Envoyer le lien' });
58+
assert.strictEqual(
59+
forgotPasswordPageObject.submitButton.text,
60+
'Envoyer le lien'
61+
);
62+
});
63+
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(forgotPasswordPageObject.email.value, 'test@example.com');
71+
});
72+
73+
test('onSubmit is called with data and changeset when form is valid', async function (assert) {
74+
let receivedData: unknown;
75+
let receivedChangeset: ImmerChangeset | undefined;
76+
77+
await renderComponent({
78+
onSubmit: (data, changeset) => {
79+
receivedData = data;
80+
receivedChangeset = changeset;
81+
assert.step('onSubmit');
82+
},
83+
});
84+
85+
await forgotPasswordPageObject.email.fillIn('test@example.com');
86+
await forgotPasswordPageObject.submitButton.click();
87+
88+
assert.verifySteps(['onSubmit']);
89+
assert.deepEqual(receivedData, {
90+
email: 'test@example.com',
91+
});
92+
assert.ok(receivedChangeset instanceof ImmerChangeset);
93+
assert.strictEqual(receivedChangeset?.get('email'), 'test@example.com');
94+
});
95+
96+
test('onSubmit is not called when form is invalid', async function (assert) {
97+
await renderComponent({
98+
onSubmit: () => {
99+
assert.step('onSubmit');
100+
},
101+
});
102+
103+
await forgotPasswordPageObject.email.fillIn('invalid-email');
104+
await forgotPasswordPageObject.submitButton.click();
105+
106+
assert.verifySteps([]);
107+
});
108+
}
109+
);

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { setupIntl } from 'ember-intl/test-support';
4+
import { render } from '@ember/test-helpers';
5+
import { ImmerChangeset } from 'ember-immer-changeset';
6+
import { object, email, string } from 'zod';
7+
import TpkLogin from '@triptyk/ember-ui/components/prefabs/tpk-login';
8+
import loginPageObject from 'doc-app/tests/pages/tpk-login';
9+
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+
}
39+
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+
},
64+
});
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+
},
79+
});
80+
81+
await loginPageObject.email.fillIn('test@example.com');
82+
await loginPageObject.password.fillIn('password123');
83+
await loginPageObject.submitButton.click();
84+
85+
assert.verifySteps(['onSubmit']);
86+
assert.deepEqual(receivedData, {
87+
email: 'test@example.com',
88+
password: 'password123',
89+
});
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+
},
100+
});
101+
102+
await loginPageObject.email.fillIn('invalid-email');
103+
await loginPageObject.password.fillIn('password123');
104+
await loginPageObject.submitButton.click();
105+
106+
assert.verifySteps([]);
107+
});
108+
109+
test('onSubmit is not called when password is empty', async function (assert) {
110+
await renderComponent({
111+
onSubmit: () => {
112+
assert.step('onSubmit');
113+
},
114+
});
115+
116+
await loginPageObject.email.fillIn('test@example.com');
117+
await loginPageObject.password.fillIn('');
118+
await loginPageObject.submitButton.click();
119+
120+
assert.verifySteps([]);
121+
});
122+
});

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

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { setupIntl } from 'ember-intl/test-support';
4+
import { render } from '@ember/test-helpers';
5+
import { ImmerChangeset } from 'ember-immer-changeset';
6+
import { object, string } from 'zod';
7+
import TpkResetPassword from '@triptyk/ember-ui/components/prefabs/tpk-reset-password';
8+
import resetPasswordPageObject from 'doc-app/tests/pages/tpk-reset-password';
9+
10+
module(
11+
'Integration | Component | Prefabs | Tpk-reset-password-prefab',
12+
function (hooks) {
13+
setupRenderingTest(hooks);
14+
setupIntl(hooks, 'fr-fr');
15+
16+
const resetPasswordSchema = object({
17+
password: string().min(8),
18+
confirmPassword: string().min(8),
19+
});
20+
21+
async function renderComponent(params?: {
22+
onSubmit?: (data: unknown, changeset: ImmerChangeset) => void;
23+
initialValues?: { password: string; confirmPassword: 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+
<TpkResetPassword
33+
@onSubmit={{onSubmit}}
34+
@resetPasswordSchema={{resetPasswordSchema}}
35+
@initialValues={{initialValues}}
36+
@submitButtonText={{submitButtonText}}
37+
/>
38+
</template>
39+
);
40+
}
41+
42+
test('renders reset password form with password and confirmPassword fields', async function (assert) {
43+
await renderComponent();
44+
assert.dom(resetPasswordPageObject.scope).exists();
45+
assert.dom('[data-test-tpk-reset-password-form-password]').exists();
46+
assert
47+
.dom('[data-test-tpk-reset-password-form-confirm-password]')
48+
.exists();
49+
assert.dom(resetPasswordPageObject.submitButton.scope).exists();
50+
});
51+
52+
test('displays default submit button text', async function (assert) {
53+
await renderComponent();
54+
assert.strictEqual(
55+
resetPasswordPageObject.submitButton.text,
56+
'Reset Password'
57+
);
58+
});
59+
60+
test('displays custom submit button text', async function (assert) {
61+
await renderComponent({ submitButtonText: 'Réinitialiser' });
62+
assert.strictEqual(
63+
resetPasswordPageObject.submitButton.text,
64+
'Réinitialiser'
65+
);
66+
});
67+
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+
);
83+
});
84+
85+
test('onSubmit is called with data and changeset when form is valid', async function (assert) {
86+
let receivedData: unknown;
87+
let receivedChangeset: ImmerChangeset | undefined;
88+
89+
await renderComponent({
90+
onSubmit: (data, changeset) => {
91+
receivedData = data;
92+
receivedChangeset = changeset;
93+
assert.step('onSubmit');
94+
},
95+
});
96+
97+
await resetPasswordPageObject.password.fillIn('password123');
98+
await resetPasswordPageObject.confirmPassword.fillIn('password123');
99+
await resetPasswordPageObject.submitButton.click();
100+
101+
assert.verifySteps(['onSubmit']);
102+
assert.deepEqual(receivedData, {
103+
password: 'password123',
104+
confirmPassword: 'password123',
105+
});
106+
assert.ok(receivedChangeset instanceof ImmerChangeset);
107+
assert.strictEqual(
108+
receivedChangeset?.get('password'),
109+
'password123'
110+
);
111+
assert.strictEqual(
112+
receivedChangeset?.get('confirmPassword'),
113+
'password123'
114+
);
115+
});
116+
117+
test('onSubmit is not called when form is invalid', async function (assert) {
118+
await renderComponent({
119+
onSubmit: () => {
120+
assert.step('onSubmit');
121+
},
122+
});
123+
124+
await resetPasswordPageObject.password.fillIn('short');
125+
await resetPasswordPageObject.confirmPassword.fillIn('short');
126+
await resetPasswordPageObject.submitButton.click();
127+
128+
assert.verifySteps([]);
129+
});
130+
131+
test('onSubmit is not called when password is empty', async function (assert) {
132+
await renderComponent({
133+
onSubmit: () => {
134+
assert.step('onSubmit');
135+
},
136+
});
137+
138+
await resetPasswordPageObject.password.fillIn('');
139+
await resetPasswordPageObject.confirmPassword.fillIn('password123');
140+
await resetPasswordPageObject.submitButton.click();
141+
142+
assert.verifySteps([]);
143+
});
144+
}
145+
);

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { clickable, create, fillable, text, value } from 'ember-cli-page-object';
2+
3+
export default create({
4+
scope: '[data-test-tpk-forgot-password-form]',
5+
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]'),
8+
}),
9+
submitButton: create({
10+
scope: '.tpk-forgot-password-form-button',
11+
click: clickable(),
12+
text: text(),
13+
}),
14+
});

0 commit comments

Comments
 (0)