|
| 1 | +import {Component, NgModule} from '@angular/core'; |
| 2 | +import {render, screen} from '@testing-library/angular'; |
| 3 | +import {Router, RouterModule, Routes} from "@angular/router"; |
| 4 | +import {RouterTestingModule} from "@angular/router/testing"; |
| 5 | +import userEvent from "@testing-library/user-event"; |
| 6 | +import {Location} from "@angular/common"; |
| 7 | +import {TestBed} from "@angular/core/testing"; |
| 8 | + |
| 9 | +@Component({ |
| 10 | + template: `<div>Navigate</div> <router-outlet></router-outlet>`, |
| 11 | +}) |
| 12 | +class MainComponent {} |
| 13 | + |
| 14 | +@Component({ |
| 15 | + template: `<div>first page</div><a routerLink="/second">go to second</a>` |
| 16 | +}) |
| 17 | +class FirstComponent {} |
| 18 | + |
| 19 | +@Component({ |
| 20 | + template: `<div>second page</div><button (click)="goBack()">navigate back</button>` |
| 21 | +}) |
| 22 | +class SecondComponent { |
| 23 | + constructor(private location: Location) { } |
| 24 | + goBack() {this.location.back();} |
| 25 | +} |
| 26 | + |
| 27 | +const routes: Routes = [ |
| 28 | + {path: '', redirectTo: '/first', pathMatch: 'full'}, |
| 29 | + {path: 'first', component: FirstComponent}, |
| 30 | + {path: 'second', component: SecondComponent} |
| 31 | +]; |
| 32 | + |
| 33 | +@NgModule({ |
| 34 | + declarations: [FirstComponent, SecondComponent], |
| 35 | + imports: [RouterModule.forRoot(routes)], |
| 36 | + exports: [RouterModule] |
| 37 | +}) |
| 38 | +class AppRoutingModule {} |
| 39 | + |
| 40 | + |
| 41 | +// test('navigate to second page and back', async () => { |
| 42 | +// const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); |
| 43 | +// await subject.navigate('/'); |
| 44 | +// |
| 45 | +// expect(await screen.findByText('Navigate')).toBeInTheDocument(); |
| 46 | +// expect(await screen.findByText('first page')).toBeInTheDocument(); |
| 47 | +// |
| 48 | +// userEvent.click(await screen.findByText('go to second')); |
| 49 | +// |
| 50 | +// expect(await screen.findByText('second page')).toBeInTheDocument(); |
| 51 | +// expect(await screen.findByText('navigate back')).toBeInTheDocument(); |
| 52 | +// |
| 53 | +// userEvent.click(await screen.findByText('navigate back')); |
| 54 | +// |
| 55 | +// expect(await screen.findByText('first page')).toBeInTheDocument(); |
| 56 | +// }); |
| 57 | + |
| 58 | +test('navigate to second page and back', async () => { |
| 59 | + const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]}); |
| 60 | + |
| 61 | + TestBed.inject(Router).initialNavigation(); |
| 62 | + |
| 63 | + await subject.navigate('/'); |
| 64 | + |
| 65 | + expect(await screen.findByText('Navigate')).toBeInTheDocument(); |
| 66 | + expect(await screen.findByText('first page')).toBeInTheDocument(); |
| 67 | + |
| 68 | + userEvent.click(await screen.findByText('go to second')); |
| 69 | + |
| 70 | + expect(await screen.findByText('second page')).toBeInTheDocument(); |
| 71 | + expect(await screen.findByText('navigate back')).toBeInTheDocument(); |
| 72 | + |
| 73 | + userEvent.click(await screen.findByText('navigate back')); |
| 74 | + |
| 75 | + expect(await screen.findByText('first page')).toBeInTheDocument(); |
| 76 | +}); |
0 commit comments