From 8ce516adc27a58c7410c4032a5486b99ca6ab299 Mon Sep 17 00:00:00 2001
From: thomas <thomas.ext@squadracer.com>
Date: Tue, 25 Apr 2023 14:46:38 +0200
Subject: [PATCH] feat(challenge20): setup test for challenge

---
 apps/testing-modal/README.md                  | 12 ++++----
 .../testing-modal/src/app/app.component.cy.ts | 19 ++++++++++++
 .../src/app/app.component.spec.ts             | 30 +++++--------------
 3 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 apps/testing-modal/src/app/app.component.cy.ts

diff --git a/apps/testing-modal/README.md b/apps/testing-modal/README.md
index 027d4d5..f02d9f4 100644
--- a/apps/testing-modal/README.md
+++ b/apps/testing-modal/README.md
@@ -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
 
diff --git a/apps/testing-modal/src/app/app.component.cy.ts b/apps/testing-modal/src/app/app.component.cy.ts
new file mode 100644
index 0000000..4da98fb
--- /dev/null
+++ b/apps/testing-modal/src/app/app.component.cy.ts
@@ -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();
+  });
+});
diff --git a/apps/testing-modal/src/app/app.component.spec.ts b/apps/testing-modal/src/app/app.component.spec.ts
index 579b471..d730b6e 100644
--- a/apps/testing-modal/src/app/app.component.spec.ts
+++ b/apps/testing-modal/src/app/app.component.spec.ts
@@ -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);
   });
 });