diff --git a/README.md b/README.md index 91c93ec..54ba8fd 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol router outlet Testing nested component Testing +input output Testing ## Contributors ✨ @@ -68,7 +69,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol - +
Thomas Laforge
Thomas Laforge
18 🧩		Thomas Laforge
Thomas Laforge
19 🧩
diff --git a/apps/testing-input-output/README.md b/apps/testing-input-output/README.md index b940985..5f16bf5 100644 --- a/apps/testing-input-output/README.md +++ b/apps/testing-input-output/README.md @@ -2,13 +2,18 @@ > Author: Thomas Laforge -### Information - -... - ### Statement: -.... +We have a small counter application that increment or decrement a number. +You can play with it by running : `npx nx serve testing-input-output`. + +The goal is to test `CounterComponent` with Testing library and Cypress + +The file named `counter.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-nested`. 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 `counter.component.cy.ts` and run `npx nx component-test testing-nested` 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. ### Submitting your work @@ -23,7 +28,8 @@ 9. Submit a PR with a title beginning with **Answer:19** that I will review and other dev can review. input output testing -input output testing solution author + + diff --git a/apps/testing-input-output/jest.config.ts b/apps/testing-input-output/jest.config.ts index 2f4cf66..8690df0 100644 --- a/apps/testing-input-output/jest.config.ts +++ b/apps/testing-input-output/jest.config.ts @@ -3,7 +3,6 @@ export default { displayName: 'testing-input-output', preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../coverage/apps/testing-input-output', transform: { '^.+\\.(ts|mjs|js|html)$': [ 'jest-preset-angular', diff --git a/apps/testing-input-output/src/app/app.component.cy.ts b/apps/testing-input-output/src/app/app.component.cy.ts deleted file mode 100644 index c198e00..0000000 --- a/apps/testing-input-output/src/app/app.component.cy.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe(AppComponent.name, () => { - beforeEach(() => { - TestBed.overrideComponent(AppComponent, { - add: { - imports: [], - providers: [], - }, - }); - }); - - it('renders', () => { - cy.mount(AppComponent); - }); -}); diff --git a/apps/testing-input-output/src/app/app.component.spec.ts b/apps/testing-input-output/src/app/app.component.spec.ts deleted file mode 100644 index d988c0e..0000000 --- a/apps/testing-input-output/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -import { NxWelcomeComponent } from './nx-welcome.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent, NxWelcomeComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'testing-input-output'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('testing-input-output'); - }); - - 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-input-output' - ); - }); -}); diff --git a/apps/testing-input-output/src/app/app.component.ts b/apps/testing-input-output/src/app/app.component.ts index d2b017d..6a6392a 100644 --- a/apps/testing-input-output/src/app/app.component.ts +++ b/apps/testing-input-output/src/app/app.component.ts @@ -1,13 +1,16 @@ -import { NxWelcomeComponent } from './nx-welcome.component'; import { Component } from '@angular/core'; +import { CounterComponent } from './counter.component'; @Component({ standalone: true, - imports: [NxWelcomeComponent], + imports: [CounterComponent], selector: 'app-root', - template: ` `, - styles: [], + template: ` + + `, }) export class AppComponent { - title = 'testing-input-output'; + log(counter: number) { + console.log('output log', counter); + } } diff --git a/apps/testing-input-output/src/app/counter.component.cy.ts b/apps/testing-input-output/src/app/counter.component.cy.ts new file mode 100644 index 0000000..8435c98 --- /dev/null +++ b/apps/testing-input-output/src/app/counter.component.cy.ts @@ -0,0 +1,11 @@ +import { CounterComponent } from './counter.component'; + +describe(CounterComponent.name, () => { + it('using createOutputSpy', () => { + cy.mount(CounterComponent); + }); + + it('using autoSpyOutputs', () => { + cy.mount(CounterComponent); + }); +}); diff --git a/apps/testing-input-output/src/app/counter.component.spec.ts b/apps/testing-input-output/src/app/counter.component.spec.ts new file mode 100644 index 0000000..3cac547 --- /dev/null +++ b/apps/testing-input-output/src/app/counter.component.spec.ts @@ -0,0 +1,8 @@ +import { render } from '@testing-library/angular'; +import { CounterComponent } from './counter.component'; + +describe('CounterComponent', () => { + test('set input and listen to output', async () => { + await render(CounterComponent); + }); +}); diff --git a/apps/testing-input-output/src/app/counter.component.ts b/apps/testing-input-output/src/app/counter.component.ts new file mode 100644 index 0000000..3dd9b68 --- /dev/null +++ b/apps/testing-input-output/src/app/counter.component.ts @@ -0,0 +1,45 @@ +import { AsyncPipe } from '@angular/common'; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + Output, +} from '@angular/core'; +import { LetModule } from '@ngrx/component'; +import { ComponentStore } from '@ngrx/component-store'; + +@Component({ + selector: 'app-counter', + standalone: true, + imports: [AsyncPipe, LetModule], + template: ` + +

Counter: {{ counter }}

+ + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CounterComponent extends ComponentStore<{ counter: number }> { + @Input() set initialValue(initialValue: number) { + this.patchState({ counter: initialValue }); + } + + @Output() send = new EventEmitter(); + + readonly counter$ = this.select((state) => state.counter); + + readonly increment = this.updater((state) => ({ + counter: state.counter + 1, + })); + readonly decrement = this.updater((state) => ({ + counter: state.counter - 1, + })); + + constructor() { + super({ counter: 0 }); + } +} diff --git a/apps/testing-input-output/src/app/nx-welcome.component.cy.ts b/apps/testing-input-output/src/app/nx-welcome.component.cy.ts deleted file mode 100644 index 7d267af..0000000 --- a/apps/testing-input-output/src/app/nx-welcome.component.cy.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { NxWelcomeComponent } from './nx-welcome.component'; - -describe(NxWelcomeComponent.name, () => { - beforeEach(() => { - TestBed.overrideComponent(NxWelcomeComponent, { - add: { - imports: [], - providers: [], - }, - }); - }); - - it('renders', () => { - cy.mount(NxWelcomeComponent); - }); -}); diff --git a/apps/testing-input-output/src/app/nx-welcome.component.ts b/apps/testing-input-output/src/app/nx-welcome.component.ts deleted file mode 100644 index b6d92e4..0000000 --- a/apps/testing-input-output/src/app/nx-welcome.component.ts +++ /dev/null @@ -1,801 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -/* eslint-disable */ - -@Component({ - selector: 'app-nx-welcome', - standalone: true, - imports: [CommonModule], - template: ` - - -
-
- -
-

- Hello there, - Welcome testing-input-output 👋 -

-
- - -
-
-

- - - - You're up and running -

- What's next? -
-
- - - -
-
- - -
- - -
- - -
-

Next steps

-

Here are some things you can do with Nx:

-
- - - - - Add UI library - - 
# Generate UI lib
-nx g @nrwl/angular:lib ui
-
-# Add a component
-nx g @nrwl/angular:component button --project ui
-
-
- - - - - View interactive project graph - - 
nx graph
-
-
- - - - - Run affected commands - - 
# see what's been affected by changes
-nx affected:graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-
-
- -

- Carefully crafted with - - - -

-
-
- `, - styles: [], - encapsulation: ViewEncapsulation.None, -}) -export class NxWelcomeComponent {}