vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(challenge20): setup test for challenge

Browse Source
This commit is contained in:
thomas
2023-04-25 14:46:38 +02:00
parent f378ea01fb
commit 8ce516adc2
3 changed files with 32 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/testing-modal/README.md
View File

@@ -4,19 +4,19 @@
### Statement:
NOT IMPLEMENTED YET
The goal of this challenge is to test dialogs inside your application.
Within this program, you will get an error modal if the user doesn't input a name, while a confirmation modal will appear in all other cases.
In the confirmation modal, if you click the "confirm" button, a message confirming the submission of the form will appear. Otherwise, if the user clicks on "Cancel", an error message will be displayed.
<!-- We have a small application that send a title to a fake backend that you type inside a input.
If the title is correctly typed, you can send the request otherwise you get a nice error and the request is not sent.
You can play with it by running : `npx nx serve testing-modal`.
The goal is to test this behavior with Testing library and Cypress
The file named `child.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-modal`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
The file named `app.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-modal`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
For testing cypress, you will execute your test inside the `child.component.cy.ts` and run `npx nx component-test testing-modal` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
For testing cypress, you will execute your test inside the `app.component.cy.ts` and run `npx nx component-test testing-modal` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
I created some `it` blocks but feel free to add more test if you like to. -->
I created some `it` blocks but feel free to add more test if you like to.
### Submitting your work

19
apps/testing-modal/src/app/app.component.cy.ts Normal file
View File

@@ -0,0 +1,19 @@
import { AppComponent } from './app.component';
describe(AppComponent.name, () => {
const setup = () => {
cy.mount(AppComponent);
};
test('error modal is displayed if you click on "Confirm" without inputing a name', () => {
setup();
});
test('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', () => {
setup();
});
test('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', () => {
setup();
});
});

30
apps/testing-modal/src/app/app.component.spec.ts
View File

@@ -1,32 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { render } from '@testing-library/angular';
import { AppComponent } from './app.component';
import { NxWelcomeComponent } from './nx-welcome.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent, NxWelcomeComponent],
}).compileComponents();
test('error modal is displayed if you click on "Confirm" without inputing a name', async () => {
await render(AppComponent);
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
test('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', async () => {
await render(AppComponent);
});
it(`should have as title 'testing-modal'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('testing-modal');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain(
'Welcome testing-modal'
);
test('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', async () => {
await render(AppComponent);
});
});