Skip to content

Commit 38a5b74

Browse files
tomalaforgetomalaforge
committed
feat(): add tests
1 parent b137820 commit 38a5b74

3 files changed

Lines changed: 123 additions & 8 deletions

File tree

‎apps/forms/65-signal-form-edition/src/app/app.component.spec.ts‎

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,96 @@
11
import { TestBed } from '@angular/core/testing';
2+
import { Router } from '@angular/router';
23
import { page } from 'vitest/browser';
34
import { AppComponent } from './app.component';
5+
import { appConfig } from './app.config';
46

57
describe('AppComponent', () => {
68
beforeEach(async () => {
9+
TestBed.configureTestingModule({
10+
providers: appConfig.providers,
11+
});
12+
const router = TestBed.inject(Router);
13+
router.initialNavigation();
714
TestBed.createComponent(AppComponent);
815
});
916

10-
test('...', async () => {
11-
const heading = page.getByRole('heading', {
12-
name: /registration form/i,
17+
describe('When component is rendered', () => {
18+
it('Then should display the portal title', async () => {
19+
const heading = page.getByRole('heading', {
20+
name: /user management portal/i,
21+
});
22+
await expect.element(heading).toBeInTheDocument();
23+
});
24+
25+
it('Then should display correct information in the user list', async () => {
26+
await expect
27+
.element(page.getByText('Max Mustermann'))
28+
.toBeInTheDocument();
29+
await expect.element(page.getByText('John Doe')).toBeInTheDocument();
30+
await expect.element(page.getByText('Jane Smith')).toBeInTheDocument();
31+
});
32+
});
33+
34+
describe('Given a user wants to add a new user', () => {
35+
it('Then should navigate to add form and create user', async () => {
36+
const addButton = page.getByRole('button', { name: /add user/i }).first();
37+
await addButton.click();
38+
39+
await expect
40+
.element(page.getByRole('heading', { name: /add new user/i }))
41+
.toBeInTheDocument();
42+
43+
await page.getByLabelText(/firstname/i).fill('Antigravity');
44+
await page.getByLabelText(/lastname/i).fill('AI');
45+
await page.getByLabelText(/age/i).fill('1');
46+
await page.getByLabelText(/grade/i).fill('10');
47+
48+
await page.getByRole('button', { name: /add/i }).click();
49+
50+
await expect
51+
.element(page.getByText('Antigravity AI'))
52+
.toBeInTheDocument();
53+
});
54+
});
55+
56+
describe('Given a user wants to edit an existing user', () => {
57+
it('Then should update the user successfully', async () => {
58+
await expect.element(page.getByText('Jane Smith')).toBeInTheDocument();
59+
60+
const editButtons = await page
61+
.getByRole('button', { name: /edit/i })
62+
.all();
63+
// Jane Smith is the 3rd user in list (id 3)
64+
await editButtons[2].click();
65+
66+
await expect
67+
.element(page.getByRole('heading', { name: /edit user/i }))
68+
.toBeInTheDocument();
69+
await expect
70+
.element(page.getByLabelText(/firstname/i))
71+
.toHaveValue('Jane');
72+
73+
await page.getByLabelText(/firstname/i).fill('Janet');
74+
await page.getByRole('button', { name: /update/i }).click();
75+
76+
await expect.element(page.getByText('Janet Smith')).toBeInTheDocument();
77+
await expect
78+
.element(page.getByText('Jane Smith'))
79+
.not.toBeInTheDocument();
80+
});
81+
});
82+
83+
describe('Given a user wants to delete a user', () => {
84+
it('Then should remove the user from the list', async () => {
85+
await expect.element(page.getByText('John Doe')).toBeInTheDocument();
86+
87+
const deleteButtons = await page
88+
.getByRole('button', { name: /delete/i })
89+
.all();
90+
// John Doe is the 2nd user in list
91+
await deleteButtons[1].click();
92+
93+
await expect.element(page.getByText('John Doe')).not.toBeInTheDocument();
1394
});
14-
await expect.element(heading).toBeInTheDocument();
1595
});
1696
});

‎apps/forms/65-signal-form-edition/src/app/user-form.component.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,13 @@ import { FakeBackendService } from './fake-backend.service';
3232
} @else {
3333
<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="space-y-4">
3434
<div>
35-
<label class="block text-sm font-medium text-gray-700">
35+
<label
36+
for="firstname"
37+
class="block text-sm font-medium text-gray-700">
3638
Firstname
3739
</label>
3840
<input
41+
id="firstname"
3942
type="text"
4043
formControlName="firstname"
4144
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />
@@ -47,10 +50,13 @@ import { FakeBackendService } from './fake-backend.service';
4750
}
4851
</div>
4952
<div>
50-
<label class="block text-sm font-medium text-gray-700">
53+
<label
54+
for="lastname"
55+
class="block text-sm font-medium text-gray-700">
5156
Lastname
5257
</label>
5358
<input
59+
id="lastname"
5460
type="text"
5561
formControlName="lastname"
5662
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />
@@ -62,8 +68,11 @@ import { FakeBackendService } from './fake-backend.service';
6268
}
6369
</div>
6470
<div>
65-
<label class="block text-sm font-medium text-gray-700">Age</label>
71+
<label for="age" class="block text-sm font-medium text-gray-700">
72+
Age
73+
</label>
6674
<input
75+
id="age"
6776
type="number"
6877
formControlName="age"
6978
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />
@@ -72,8 +81,11 @@ import { FakeBackendService } from './fake-backend.service';
7281
}
7382
</div>
7483
<div>
75-
<label class="block text-sm font-medium text-gray-700">Grade</label>
84+
<label for="grade" class="block text-sm font-medium text-gray-700">
85+
Grade
86+
</label>
7687
<input
88+
id="grade"
7789
type="number"
7890
formControlName="grade"
7991
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />

‎apps/forms/65-signal-form-edition/vitest.config.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { defineConfig } from 'vite';
2+
3+
import angular from '@analogjs/vite-plugin-angular';
4+
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
5+
import { playwright } from '@vitest/browser-playwright';
6+
7+
export default defineConfig(({ mode }) => ({
8+
plugins: [angular(), nxViteTsPaths()],
9+
test: {
10+
globals: true,
11+
setupFiles: ['src/test-setup.ts'],
12+
// environment: 'jsdom',
13+
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
14+
reporters: ['default'],
15+
// Vitest browser config
16+
browser: {
17+
enabled: true,
18+
headless: true, // set to true in CI
19+
provider: playwright(),
20+
instances: [{ browser: 'chromium' }],
21+
},
22+
},
23+
}));

0 commit comments

Comments
 (0)