diff --git a/apps/example-app-karma/src/app/issues/issue-373.spec.ts b/apps/example-app-karma/src/app/issues/issue-373.spec.ts new file mode 100644 index 0000000..cdbd0cc --- /dev/null +++ b/apps/example-app-karma/src/app/issues/issue-373.spec.ts @@ -0,0 +1,69 @@ +import { Component } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/angular'; + +@Component({ + selector: 'app-login', + template: `

Login

+ +
+ +
+
Email is required
+
+ +
+
Password is required
+
+ +
`, +}) +class LoginComponent { + form: FormGroup = this.fb.group({ + email: ['', [Validators.required]], + password: ['', [Validators.required]], + }); + + constructor(private fb: FormBuilder) {} + + get email(): FormControl { + return this.form.get('email') as FormControl; + } + + get password(): FormControl { + return this.form.get('password') as FormControl; + } + + onSubmit(_fg: FormGroup): void { + // do nothing + } +} + +describe('LoginComponent', () => { + const setup = async () => { + return render(LoginComponent, { + imports: [ReactiveFormsModule], + }); + }; + + it('should create a component with inputs and a button to submit', async () => { + await setup(); + + expect(screen.getByRole('textbox', { name: 'email' })).toBeInTheDocument(); + expect(screen.getByLabelText('password')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'submit' })).toBeInTheDocument(); + }); + + it('should show a message required to password and login and a button must be disabled', async () => { + await setup(); + + await userEvent.click(screen.getByRole('textbox', { name: 'email' })); + await userEvent.click(screen.getByLabelText('password')); + await userEvent.tab(); + await userEvent.click(screen.getByRole('button', { name: 'submit' })); + + expect(screen.getAllByText(/required/i).length).toBe(2); + expect(screen.getByRole('button', { name: 'submit' })).toBeDisabled(); + }); +});