Simple and complete Angular testing utilities that encourage good testing practices.
@@ -28,7 +26,7 @@ practices. [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[](#contributors) +[](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] [![Discord][discord-badge]][discord] @@ -47,23 +45,29 @@ practices.Defer block content
+ } @loading { +Loading...
+ } + `, +}) +class FixtureComponent {} + +@Component({ + template: ` + + @defer(on interaction(trigger)) { +{{ value() }}
', +}) +class DummyComponent { + // @ts-expect-error - testing purpose + private _http = inject(HttpClient); + value = input.requiredparamPresent$: {{ paramPresent$ | async }}
`, + imports: [NgIf, AsyncPipe], + }) + class QueryParamFixtureComponent { + private readonly route = inject(ActivatedRoute); + + paramPresent$ = this.route.queryParams.pipe(map((queryParams) => (queryParams?.param ? 'present' : 'missing'))); + } + + const initialRoute = 'initial-route?param=query'; + const routes = [{ path: 'initial-route', component: QueryParamFixtureComponent }]; + + await render(RouterFixtureComponent, { + initialRoute, + routes, + }); + + expect(screen.getByText(/present/i)).toBeVisible(); }); }); -test('waits for angular app initialization before rendering components', async () => { - const mock = jest.fn(); +describe('configureTestBed', () => { + it('invokes configureTestBed', async () => { + const configureTestBedFn = jest.fn(); + await render(FixtureComponent, { + configureTestBed: configureTestBedFn, + }); + + expect(configureTestBedFn).toHaveBeenCalledTimes(1); + }); +}); + +describe('inputs and signals', () => { + @Component({ + selector: 'atl-fixture', + template: `{{ myName() }} {{ myJob() }}`, + }) + class InputComponent { + myName = input('foo'); + + myJob = input('bar', { alias: 'job' }); + } + + it('should set the input component', async () => { + await render(InputComponent, { + inputs: { + myName: 'Bob', + ...aliasedInput('job', 'Builder'), + }, + }); + + expect(screen.getByText('Bob')).toBeInTheDocument(); + expect(screen.getByText('Builder')).toBeInTheDocument(); + }); + + it('should typecheck correctly', async () => { + // we only want to check the types here + // so we are purposely not calling render - await render(FixtureComponent, { - providers: [ - { - provide: APP_INITIALIZER, - useFactory: () => mock, - multi: true, + const typeTests = [ + async () => { + // OK: + await render(InputComponent, { + inputs: { + myName: 'OK', + }, + }); + }, + async () => { + // @ts-expect-error - myName is a string + await render(InputComponent, { + inputs: { + myName: 123, + }, + }); }, - ], + async () => { + // OK: + await render(InputComponent, { + inputs: { + ...aliasedInput('job', 'OK'), + }, + }); + }, + async () => { + // @ts-expect-error - job is not using aliasedInput + await render(InputComponent, { + inputs: { + job: 'not used with aliasedInput', + }, + }); + }, + ]; + + // add a statement so the test succeeds + expect(typeTests).toBeTruthy(); }); +}); + +describe('README examples', () => { + describe('Counter', () => { + @Component({ + selector: 'atl-counter', + template: ` + {{ hello() }} + + Current Count: {{ counter() }} + + `, + }) + class CounterComponent { + counter = model(0); + hello = input('Hi', { alias: 'greeting' }); + + increment() { + this.counter.set(this.counter() + 1); + } + + decrement() { + this.counter.set(this.counter() - 1); + } + } + + it('should render counter', async () => { + await render(CounterComponent, { + inputs: { + counter: 5, + ...aliasedInput('greeting', 'Hello Alias!'), + }, + }); - expect(TestBed.inject(ApplicationInitStatus).done).toEqual(true); - expect(mock).toHaveBeenCalled(); + expect(screen.getByText('Current Count: 5')).toBeVisible(); + expect(screen.getByText('Hello Alias!')).toBeVisible(); + }); + + it('should increment the counter on click', async () => { + await render(CounterComponent, { inputs: { counter: 5 } }); + + const incrementButton = screen.getByRole('button', { name: '+' }); + fireEvent.click(incrementButton); + + expect(screen.getByText('Current Count: 6')).toBeVisible(); + }); + }); }); diff --git a/projects/testing-library/tests/rerender.spec.ts b/projects/testing-library/tests/rerender.spec.ts index c98bd1bc..04b8185a 100644 --- a/projects/testing-library/tests/rerender.spec.ts +++ b/projects/testing-library/tests/rerender.spec.ts @@ -1,66 +1,188 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { render, screen } from '../src/public_api'; +let ngOnChangesSpy: jest.Mock; @Component({ selector: 'atl-fixture', - template: ` {{ name }} `, + template: ` {{ firstName }} {{ lastName }} `, }) -class FixtureComponent { - @Input() name = 'Sarah'; +class FixtureComponent implements OnChanges { + @Input() firstName = 'Sarah'; + @Input() lastName?: string; + ngOnChanges(changes: SimpleChanges): void { + ngOnChangesSpy(changes); + } } -test('will rerender the component with updated props', async () => { +beforeEach(() => { + ngOnChangesSpy = jest.fn(); +}); + +test('rerenders the component with updated props', async () => { const { rerender } = await render(FixtureComponent); expect(screen.getByText('Sarah')).toBeInTheDocument(); - const name = 'Mark'; - rerender({ name }); + const firstName = 'Mark'; + await rerender({ componentProperties: { firstName } }); - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(firstName)).toBeInTheDocument(); }); -@Component({ - selector: 'atl-fixture', - template: ` {{ name }} `, -}) -class FixtureWithNgOnChangesComponent implements OnChanges { - @Input() name = 'Sarah'; - @Input() nameChanged: (name: string, isFirstChange: boolean) => void; - - ngOnChanges(changes: SimpleChanges) { - if (changes.name && this.nameChanged) { - this.nameChanged(changes.name.currentValue, changes.name.isFirstChange()); - } - } -} +test('rerenders without props', async () => { + const { rerender } = await render(FixtureComponent); + expect(screen.getByText('Sarah')).toBeInTheDocument(); + + await rerender(); -test('will call ngOnChanges on rerender', async () => { - const nameChanged = jest.fn(); - const componentProperties = { nameChanged }; - const { rerender } = await render(FixtureWithNgOnChangesComponent, { componentProperties }); expect(screen.getByText('Sarah')).toBeInTheDocument(); + expect(ngOnChangesSpy).toHaveBeenCalledTimes(1); // one time initially and one time for rerender +}); - const name = 'Mark'; - rerender({ name }); +test('rerenders the component with updated inputs', async () => { + const { rerender } = await render(FixtureComponent); + expect(screen.getByText('Sarah')).toBeInTheDocument(); + + const firstName = 'Mark'; + await rerender({ inputs: { firstName } }); - expect(screen.getByText(name)).toBeInTheDocument(); - expect(nameChanged).toHaveBeenCalledWith(name, false); + expect(screen.getByText(firstName)).toBeInTheDocument(); }); -@Component({ - changeDetection: ChangeDetectionStrategy.OnPush, - selector: 'atl-fixture', - template: `