@@ -30,19 +33,20 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
`,
})
export class FormsComponent {
+ private formBuilder = inject(FormBuilder);
+
colors = [
{ id: 'R', value: 'Red' },
{ id: 'B', value: 'Blue' },
{ id: 'G', value: 'Green' },
];
+
form = this.formBuilder.group({
- name: ['', Validators.required],
+ name: ['', [Validators.required]],
score: [0, { validators: [Validators.min(1), Validators.max(10)], updateOn: 'blur' }],
- color: ['', Validators.required],
+ color: [null as string | null, Validators.required],
});
- constructor(private formBuilder: UntypedFormBuilder) {}
-
get formErrors() {
return Object.keys(this.form.controls)
.map((formKey) => {
diff --git a/apps/example-app/src/app/examples/04-forms-with-material.spec.ts b/apps/example-app/src/app/examples/04-forms-with-material.spec.ts
index 6d7e1e18..638d76ff 100644
--- a/apps/example-app/src/app/examples/04-forms-with-material.spec.ts
+++ b/apps/example-app/src/app/examples/04-forms-with-material.spec.ts
@@ -1,76 +1,101 @@
import { render, screen } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';
-import { MaterialModule } from '../material.module';
import { MaterialFormsComponent } from './04-forms-with-material';
test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
- const { fixture } = await render(MaterialFormsComponent, {
- imports: [MaterialModule],
- });
+ const user = userEvent.setup();
+
+ const { fixture } = await render(MaterialFormsComponent);
const nameControl = screen.getByLabelText(/name/i);
const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
- const colorControl = screen.getByRole('combobox', { name: /color/i });
+ const colorControl = screen.getByPlaceholderText(/color/i);
+ const dateControl = screen.getByRole('textbox', { name: /Choose a date/i });
+ const checkboxControl = screen.getByRole('checkbox', { name: /agree/i });
+
const errors = screen.getByRole('alert');
expect(errors).toContainElement(screen.queryByText('name is required'));
expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
expect(errors).toContainElement(screen.queryByText('color is required'));
+ expect(errors).toContainElement(screen.queryByText('agree is required'));
- userEvent.type(nameControl, 'Tim');
- userEvent.clear(scoreControl);
- userEvent.type(scoreControl, '12');
- userEvent.click(colorControl);
- userEvent.click(screen.getByText(/green/i));
+ await user.type(nameControl, 'Tim');
+ await user.clear(scoreControl);
+ await user.type(scoreControl, '12');
+ await user.click(colorControl);
+ await user.click(screen.getByText(/green/i));
+
+ expect(checkboxControl).not.toBeChecked();
+ await user.click(checkboxControl);
+ expect(checkboxControl).toBeChecked();
+ expect(checkboxControl).toBeValid();
expect(screen.queryByText('name is required')).not.toBeInTheDocument();
expect(screen.getByText('score must be lesser than 10')).toBeInTheDocument();
expect(screen.queryByText('color is required')).not.toBeInTheDocument();
+ expect(screen.queryByText('agree is required')).not.toBeInTheDocument();
expect(scoreControl).toBeInvalid();
- userEvent.clear(scoreControl);
- userEvent.type(scoreControl, '7');
+ await user.clear(scoreControl);
+ await user.type(scoreControl, '7');
expect(scoreControl).toBeValid();
+ await user.type(dateControl, '08/11/2022');
+
expect(errors).not.toBeInTheDocument();
expect(nameControl).toHaveValue('Tim');
expect(scoreControl).toHaveValue(7);
expect(colorControl).toHaveTextContent('Green');
+ expect(checkboxControl).toBeChecked();
const form = screen.getByRole('form');
expect(form).toHaveFormValues({
name: 'Tim',
score: 7,
});
+
+ // material doesn't add these to the form
+ expect((fixture.componentInstance as MaterialFormsComponent).form?.get('agree')?.value).toBe(true);
expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('G');
+ expect((fixture.componentInstance as MaterialFormsComponent).form?.get('date')?.value).toEqual(new Date(2022, 7, 11));
});
test('set and show pre-set form values', async () => {
- const { fixture, detectChanges } = await render(MaterialFormsComponent, {
- imports: [MaterialModule],
- });
+ const user = userEvent.setup();
+
+ const { fixture, detectChanges } = await render(MaterialFormsComponent);
fixture.componentInstance.form.setValue({
name: 'Max',
score: 4,
color: 'B',
+ date: new Date(2022, 7, 11),
+ agree: true,
});
detectChanges();
const nameControl = screen.getByLabelText(/name/i);
const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
- const colorControl = screen.getByRole('combobox', { name: /color/i });
+ const colorControl = screen.getByPlaceholderText(/color/i);
+ const checkboxControl = screen.getByRole('checkbox', { name: /agree/i });
expect(nameControl).toHaveValue('Max');
expect(scoreControl).toHaveValue(4);
expect(colorControl).toHaveTextContent('Blue');
+ expect(checkboxControl).toBeChecked();
+ await user.click(checkboxControl);
const form = screen.getByRole('form');
expect(form).toHaveFormValues({
name: 'Max',
score: 4,
});
+
+ // material doesn't add these to the form
+ expect((fixture.componentInstance as MaterialFormsComponent).form?.get('agree')?.value).toBe(false);
expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('B');
+ expect((fixture.componentInstance as MaterialFormsComponent).form?.get('date')?.value).toEqual(new Date(2022, 7, 11));
});
diff --git a/apps/example-app/src/app/examples/04-forms-with-material.ts b/apps/example-app/src/app/examples/04-forms-with-material.ts
index ed33dd3f..2376c725 100644
--- a/apps/example-app/src/app/examples/04-forms-with-material.ts
+++ b/apps/example-app/src/app/examples/04-forms-with-material.ts
@@ -1,15 +1,35 @@
-import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
-
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
@Component({
- selector: 'app-fixture',
+ standalone: true,
+ imports: [
+ MatInputModule,
+ MatSelectModule,
+ MatDatepickerModule,
+ MatNativeDateModule,
+ MatCheckboxModule,
+ ReactiveFormsModule,
+ NgForOf,
+ NgIf,
+ ],
+ selector: 'atl-fixture',
template: `
-
+
