From e749f05fb53a86ed5855aab644097e322541561b Mon Sep 17 00:00:00 2001 From: MeIr Date: Fri, 11 Feb 2022 09:04:59 -0500 Subject: [PATCH 1/5] WIP: Add: test case --- .../tests/issues/issue-280.spec.ts | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 projects/testing-library/tests/issues/issue-280.spec.ts diff --git a/projects/testing-library/tests/issues/issue-280.spec.ts b/projects/testing-library/tests/issues/issue-280.spec.ts new file mode 100644 index 00000000..9ac00cdf --- /dev/null +++ b/projects/testing-library/tests/issues/issue-280.spec.ts @@ -0,0 +1,60 @@ +import {Component, NgModule} from '@angular/core'; +import { render, screen } from '../../src/public_api'; +import {Router, RouterModule, Routes} from "@angular/router"; +import {RouterTestingModule} from "@angular/router/testing"; +import {click} from "@testing-library/user-event/dist/click"; +import {Location} from "@angular/common"; +import {TestBed} from "@angular/core/testing"; + +@Component({ + template: `
Navigate
`, +}) +class MainComponent {} + +@Component({ + template: `
first page
go to second` +}) +class FirstComponent {} + +@Component({ + template: `
second page
` +}) +class SecondComponent { + constructor(private location: Location) { } + goBack() {this.location.back();} +} + +const routes: Routes = [ + {path: '', redirectTo: '/first', pathMatch: 'full'}, + {path: 'first', component: FirstComponent}, + {path: 'second', component: SecondComponent} +]; + +@NgModule({ + declarations: [], + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +class AppRoutingModule {} + + +test('navigate', async () => { + // await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); + const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); + await subject.navigate('/'); + + const router = TestBed.inject(Router); + router.initialNavigation(); + + await expect(screen.findByText('Navigate')).toBeTruthy(); + await expect(screen.findByText('first page')).toBeTruthy(); + + click(await screen.findByText('go to second')); + + await expect(screen.findByText('second page')).toBeTruthy(); + await expect(screen.findByText('navigate back')).toBeTruthy(); + + click(await screen.findByText('navigate back', {selector: 'button'})); + + // await expect(screen.findByText('first page')).toBeTruthy(); +}); From 005e9b1332ad494f2abcdbc8289bc11832bda706 Mon Sep 17 00:00:00 2001 From: MeIr Date: Sat, 12 Feb 2022 08:34:14 -0500 Subject: [PATCH 2/5] Add: test case --- .../tests/issues/issue-280.spec.ts | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/projects/testing-library/tests/issues/issue-280.spec.ts b/projects/testing-library/tests/issues/issue-280.spec.ts index 9ac00cdf..7cec39c8 100644 --- a/projects/testing-library/tests/issues/issue-280.spec.ts +++ b/projects/testing-library/tests/issues/issue-280.spec.ts @@ -1,10 +1,9 @@ import {Component, NgModule} from '@angular/core'; -import { render, screen } from '../../src/public_api'; -import {Router, RouterModule, Routes} from "@angular/router"; +import {render, screen} from '../../src/public_api'; +import {RouterModule, Routes} from "@angular/router"; import {RouterTestingModule} from "@angular/router/testing"; import {click} from "@testing-library/user-event/dist/click"; import {Location} from "@angular/common"; -import {TestBed} from "@angular/core/testing"; @Component({ template: `
Navigate
`, @@ -31,30 +30,26 @@ const routes: Routes = [ ]; @NgModule({ - declarations: [], + declarations: [FirstComponent, SecondComponent], imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) class AppRoutingModule {} -test('navigate', async () => { - // await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); +test('navigate to second page and back', async () => { const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); await subject.navigate('/'); - const router = TestBed.inject(Router); - router.initialNavigation(); - - await expect(screen.findByText('Navigate')).toBeTruthy(); - await expect(screen.findByText('first page')).toBeTruthy(); + expect(await screen.findByText('Navigate')).toBeTruthy(); + expect(await screen.findByText('first page')).toBeTruthy(); click(await screen.findByText('go to second')); - await expect(screen.findByText('second page')).toBeTruthy(); - await expect(screen.findByText('navigate back')).toBeTruthy(); + expect(await screen.findByText('second page')).toBeTruthy(); + expect(await screen.findByText('navigate back')).toBeTruthy(); - click(await screen.findByText('navigate back', {selector: 'button'})); + click(await screen.findByText('navigate back')); - // await expect(screen.findByText('first page')).toBeTruthy(); + expect(await screen.findByText('first page')).toBeTruthy(); }); From 409b2dd308be40da66050291c51134dc15fc92b4 Mon Sep 17 00:00:00 2001 From: MeIr Date: Mon, 14 Feb 2022 07:32:14 -0500 Subject: [PATCH 3/5] Cleanup: test case --- projects/testing-library/tests/issues/issue-280.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/testing-library/tests/issues/issue-280.spec.ts b/projects/testing-library/tests/issues/issue-280.spec.ts index 7cec39c8..cbc5e6a9 100644 --- a/projects/testing-library/tests/issues/issue-280.spec.ts +++ b/projects/testing-library/tests/issues/issue-280.spec.ts @@ -1,8 +1,8 @@ import {Component, NgModule} from '@angular/core'; -import {render, screen} from '../../src/public_api'; +import {render, screen} from '@testing-library/angular'; import {RouterModule, Routes} from "@angular/router"; import {RouterTestingModule} from "@angular/router/testing"; -import {click} from "@testing-library/user-event/dist/click"; +import userEvent from "@testing-library/user-event"; import {Location} from "@angular/common"; @Component({ @@ -44,12 +44,12 @@ test('navigate to second page and back', async () => { expect(await screen.findByText('Navigate')).toBeTruthy(); expect(await screen.findByText('first page')).toBeTruthy(); - click(await screen.findByText('go to second')); + userEvent.click(await screen.findByText('go to second')); expect(await screen.findByText('second page')).toBeTruthy(); expect(await screen.findByText('navigate back')).toBeTruthy(); - click(await screen.findByText('navigate back')); + userEvent.click(await screen.findByText('navigate back')); expect(await screen.findByText('first page')).toBeTruthy(); }); From f774f90e11404b84777d6c6d086345614c7e387a Mon Sep 17 00:00:00 2001 From: MeIr Date: Mon, 14 Feb 2022 15:24:14 -0500 Subject: [PATCH 4/5] Add: passing test to pass build --- .../tests/issues/issue-280.spec.ts | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/projects/testing-library/tests/issues/issue-280.spec.ts b/projects/testing-library/tests/issues/issue-280.spec.ts index cbc5e6a9..9f62c8ea 100644 --- a/projects/testing-library/tests/issues/issue-280.spec.ts +++ b/projects/testing-library/tests/issues/issue-280.spec.ts @@ -1,9 +1,10 @@ import {Component, NgModule} from '@angular/core'; import {render, screen} from '@testing-library/angular'; -import {RouterModule, Routes} from "@angular/router"; +import {Router, RouterModule, Routes} from "@angular/router"; import {RouterTestingModule} from "@angular/router/testing"; import userEvent from "@testing-library/user-event"; import {Location} from "@angular/common"; +import {TestBed} from "@angular/core/testing"; @Component({ template: `
Navigate
`, @@ -37,8 +38,28 @@ const routes: Routes = [ class AppRoutingModule {} +// test('navigate to second page and back', async () => { +// const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); +// await subject.navigate('/'); +// +// expect(await screen.findByText('Navigate')).toBeTruthy(); +// expect(await screen.findByText('first page')).toBeTruthy(); +// +// userEvent.click(await screen.findByText('go to second')); +// +// expect(await screen.findByText('second page')).toBeTruthy(); +// expect(await screen.findByText('navigate back')).toBeTruthy(); +// +// userEvent.click(await screen.findByText('navigate back')); +// +// expect(await screen.findByText('first page')).toBeTruthy(); +// }); + test('navigate to second page and back', async () => { const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); + + TestBed.inject(Router).initialNavigation(); + await subject.navigate('/'); expect(await screen.findByText('Navigate')).toBeTruthy(); From 9da5ee3334c8bb556170169bf036fd571f095596 Mon Sep 17 00:00:00 2001 From: MeIr Date: Mon, 14 Feb 2022 15:33:31 -0500 Subject: [PATCH 5/5] Refactor: test for better clarity --- .../tests/issues/issue-280.spec.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/projects/testing-library/tests/issues/issue-280.spec.ts b/projects/testing-library/tests/issues/issue-280.spec.ts index 9f62c8ea..4c490741 100644 --- a/projects/testing-library/tests/issues/issue-280.spec.ts +++ b/projects/testing-library/tests/issues/issue-280.spec.ts @@ -42,17 +42,17 @@ class AppRoutingModule {} // const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); // await subject.navigate('/'); // -// expect(await screen.findByText('Navigate')).toBeTruthy(); -// expect(await screen.findByText('first page')).toBeTruthy(); +// expect(await screen.findByText('Navigate')).toBeInTheDocument(); +// expect(await screen.findByText('first page')).toBeInTheDocument(); // // userEvent.click(await screen.findByText('go to second')); // -// expect(await screen.findByText('second page')).toBeTruthy(); -// expect(await screen.findByText('navigate back')).toBeTruthy(); +// expect(await screen.findByText('second page')).toBeInTheDocument(); +// expect(await screen.findByText('navigate back')).toBeInTheDocument(); // // userEvent.click(await screen.findByText('navigate back')); // -// expect(await screen.findByText('first page')).toBeTruthy(); +// expect(await screen.findByText('first page')).toBeInTheDocument(); // }); test('navigate to second page and back', async () => { @@ -62,15 +62,15 @@ test('navigate to second page and back', async () => { await subject.navigate('/'); - expect(await screen.findByText('Navigate')).toBeTruthy(); - expect(await screen.findByText('first page')).toBeTruthy(); + expect(await screen.findByText('Navigate')).toBeInTheDocument(); + expect(await screen.findByText('first page')).toBeInTheDocument(); userEvent.click(await screen.findByText('go to second')); - expect(await screen.findByText('second page')).toBeTruthy(); - expect(await screen.findByText('navigate back')).toBeTruthy(); + expect(await screen.findByText('second page')).toBeInTheDocument(); + expect(await screen.findByText('navigate back')).toBeInTheDocument(); userEvent.click(await screen.findByText('navigate back')); - expect(await screen.findByText('first page')).toBeTruthy(); + expect(await screen.findByText('first page')).toBeInTheDocument(); });