From 6b59e0744dc8ff6435be6f9514c19a5a6b2a00f0 Mon Sep 17 00:00:00 2001 From: Martin Leimer Date: Fri, 31 Dec 2021 14:53:21 +0100 Subject: [PATCH 1/3] test: enhance example to verify pre-set form values on a Material select component --- .../examples/04-forms-with-material.spec.ts | 39 ++++++++++++++++++- .../app/examples/04-forms-with-material.ts | 10 ++++- 2 files changed, 47 insertions(+), 2 deletions(-) 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 ee4209b9..a1fdd861 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 @@ -3,6 +3,9 @@ import userEvent from '@testing-library/user-event'; import { MaterialModule } from '../material.module'; import { MaterialFormsComponent } from './04-forms-with-material'; +import { FormBuilder, Validators } from "@angular/forms"; +import { By } from "@angular/platform-browser"; + 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, { @@ -37,12 +40,46 @@ test('is possible to fill in a form and verify error messages (with the help of expect(nameControl).toHaveValue('Tim'); expect(scoreControl).toHaveValue(7); + expect(colorControl).toHaveTextContent('Green'); const form = screen.getByRole('form'); expect(form).toHaveFormValues({ name: 'Tim', score: 7, }); - expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('G'); }); + +test('is should show pre-set form values', async () => { + const formBuilder = new FormBuilder(); + + const { fixture, detectChanges } = await render(MaterialFormsComponent, { + imports: [MaterialModule], + componentProperties: { + form: formBuilder.group({ + name: ['Max', Validators.required], + score: [4, [Validators.min(1), Validators.max(10)]], + color: ['B', Validators.required], + }), + }, + }); + + const nameControl = screen.getByLabelText(/name/i); + const scoreControl = screen.getByRole('spinbutton', { name: /score/i }); + const colorControl = screen.getByRole('combobox', { name: /color/i }); + + expect(nameControl).toHaveValue('Max'); + expect(scoreControl).toHaveValue(4); + + fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click(); + detectChanges(); + expect(colorControl).toHaveTextContent('Blue'); + + const form = screen.getByRole('form'); + expect(form).toHaveFormValues({ + name: 'Max', + score: 4, + }); + + expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('B'); +}); 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 a672380c..f27f4f1e 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 @@ -24,6 +24,9 @@ import { FormBuilder, Validators } from '@angular/forms'; + + {{ colorControlDisplayValue }} + --- {{ color.value }} @@ -60,11 +63,16 @@ export class MaterialFormsComponent { form = this.formBuilder.group({ name: ['', Validators.required], score: [0, [Validators.min(1), Validators.max(10)]], - color: ['', Validators.required], + color: [null, Validators.required], }); constructor(private formBuilder: FormBuilder) {} + get colorControlDisplayValue(): string | undefined { + const selectedId = this.form.get('color')?.value; + return this.colors.filter(color => color.id === selectedId)[0]?.value; + } + get formErrors() { return Object.keys(this.form.controls) .map((formKey) => { From 2a9b2f46f57e0882386537dcebff65cfce61e06f Mon Sep 17 00:00:00 2001 From: Martin Leimer Date: Tue, 4 Jan 2022 19:03:03 +0100 Subject: [PATCH 2/3] refactor: prefer form updates through setValue instead of form recreation --- .../examples/04-forms-with-material.spec.ts | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) 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 a1fdd861..5a5982a4 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 @@ -3,8 +3,6 @@ import userEvent from '@testing-library/user-event'; import { MaterialModule } from '../material.module'; import { MaterialFormsComponent } from './04-forms-with-material'; -import { FormBuilder, Validators } from "@angular/forms"; -import { By } from "@angular/platform-browser"; 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 () => { @@ -51,28 +49,23 @@ test('is possible to fill in a form and verify error messages (with the help of }); test('is should show pre-set form values', async () => { - const formBuilder = new FormBuilder(); - const { fixture, detectChanges } = await render(MaterialFormsComponent, { imports: [MaterialModule], - componentProperties: { - form: formBuilder.group({ - name: ['Max', Validators.required], - score: [4, [Validators.min(1), Validators.max(10)]], - color: ['B', Validators.required], - }), - }, }); + fixture.componentInstance.form.setValue({ + name: 'Max', + score: 4, + color: 'B' + }) + detectChanges(); + const nameControl = screen.getByLabelText(/name/i); const scoreControl = screen.getByRole('spinbutton', { name: /score/i }); const colorControl = screen.getByRole('combobox', { name: /color/i }); expect(nameControl).toHaveValue('Max'); expect(scoreControl).toHaveValue(4); - - fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click(); - detectChanges(); expect(colorControl).toHaveTextContent('Blue'); const form = screen.getByRole('form'); @@ -80,6 +73,5 @@ test('is should show pre-set form values', async () => { name: 'Max', score: 4, }); - expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('B'); }); From c9a10c03643b51f496054bdd0c103015cec15b3f Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Wed, 5 Jan 2022 20:04:04 +0100 Subject: [PATCH 3/3] Update apps/example-app/src/app/examples/04-forms-with-material.spec.ts --- .../example-app/src/app/examples/04-forms-with-material.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5a5982a4..06f14ea8 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 @@ -48,7 +48,7 @@ test('is possible to fill in a form and verify error messages (with the help of expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('G'); }); -test('is should show pre-set form values', async () => { +test('set and show pre-set form values', async () => { const { fixture, detectChanges } = await render(MaterialFormsComponent, { imports: [MaterialModule], });