diff --git a/apps/example-app/src/app/examples/19-standalone-component.spec.ts b/apps/example-app/src/app/examples/19-standalone-component.spec.ts index b21b3d7a..d1d1e0ba 100644 --- a/apps/example-app/src/app/examples/19-standalone-component.spec.ts +++ b/apps/example-app/src/app/examples/19-standalone-component.spec.ts @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/angular'; import { StandaloneComponent, StandaloneWithChildComponent } from './19-standalone-component'; -test('is possible to render a standalone component', async () => { +test('can render a standalone component', async () => { await render(StandaloneComponent); const content = screen.getByTestId('standalone'); @@ -9,7 +9,7 @@ test('is possible to render a standalone component', async () => { expect(content).toHaveTextContent('Standalone Component'); }); -test('is possibl to render a standalone component with a child', async () => { +test('can render a standalone component with a child', async () => { await render(StandaloneWithChildComponent, { componentProperties: { name: 'Bob' }, }); diff --git a/apps/example-app/src/app/examples/19-standalone-component.ts b/apps/example-app/src/app/examples/19-standalone-component.ts index e203991d..481f0562 100644 --- a/apps/example-app/src/app/examples/19-standalone-component.ts +++ b/apps/example-app/src/app/examples/19-standalone-component.ts @@ -5,7 +5,7 @@ import { Component, Input } from '@angular/core'; template: `
Standalone Component
`, standalone: true, }) -export class StandaloneComponent { } +export class StandaloneComponent {} @Component({ selector: 'app-standalone-with-child', diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts index 07fdf71d..96771232 100644 --- a/projects/testing-library/src/lib/testing-library.ts +++ b/projects/testing-library/src/lib/testing-library.ts @@ -10,7 +10,6 @@ import { ɵisStandalone, } from '@angular/core'; import { ComponentFixture, TestBed, tick } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; import { NavigationExtras, Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; @@ -77,7 +76,7 @@ export async function render( excludeComponentDeclaration, wrapper, }), - imports: addAutoImports(sut,{ + imports: addAutoImports(sut, { imports: imports.concat(defaultImports), routes, }), @@ -129,23 +128,23 @@ export async function render( const [path, params] = (basePath + href).split('?'); const queryParams = params ? params.split('&').reduce((qp, q) => { - const [key, value] = q.split('='); - const currentValue = qp[key]; - if (typeof currentValue === 'undefined') { - qp[key] = value; - } else if (Array.isArray(currentValue)) { - qp[key] = [...currentValue, value]; - } else { - qp[key] = [currentValue, value]; - } - return qp; - }, {} as Record) + const [key, value] = q.split('='); + const currentValue = qp[key]; + if (typeof currentValue === 'undefined') { + qp[key] = value; + } else if (Array.isArray(currentValue)) { + qp[key] = [...currentValue, value]; + } else { + qp[key] = [currentValue, value]; + } + return qp; + }, {} as Record) : undefined; const navigateOptions: NavigationExtras | undefined = queryParams ? { - queryParams, - } + queryParams, + } : undefined; const doNavigate = () => { @@ -172,7 +171,7 @@ export async function render( rerender, change, // @ts-ignore: fixture assigned - debugElement: typeof sut === 'string' ? fixture.debugElement : fixture.debugElement.query(By.directive(sut)), + debugElement: fixture.debugElement, // @ts-ignore: fixture assigned container: fixture.nativeElement, debug: (element = fixture.nativeElement, maxLength, options) => @@ -398,7 +397,7 @@ if (typeof process === 'undefined' || !process.env?.ATL_SKIP_AUTO_CLEANUP) { } @Component({ selector: 'atl-wrapper-component', template: '' }) -class WrapperComponent { } +class WrapperComponent {} /** * Wrap findBy queries to poke the Angular change detection cycle diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts index 8312bd4a..33e8d80f 100644 --- a/projects/testing-library/tests/render.spec.ts +++ b/projects/testing-library/tests/render.spec.ts @@ -10,7 +10,7 @@ import { } from '@angular/core'; import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TestBed } from '@angular/core/testing'; -import { render, fireEvent } from '../src/public_api'; +import { render, fireEvent, screen } from '../src/public_api'; @Component({ selector: 'atl-fixture', @@ -33,6 +33,21 @@ test('creates queries and events', async () => { fireEvent.click(view.getByText('button')); }); +describe('standalone', () => { + @Component({ + selector: 'atl-fixture', + template: ` {{ name }} `, + }) + class StandaloneFixtureComponent { + @Input() name = ''; + } + + it('renders standalone component', async () => { + await render(StandaloneFixtureComponent, { componentProperties: { name: 'Bob' } }); + expect(screen.getByText('Bob')).toBeInTheDocument(); + }); +}); + describe('removeAngularAttributes', () => { it('should remove angular attribute', async () => { await render(FixtureComponent, { @@ -148,6 +163,13 @@ test('waits for angular app initialization before rendering components', async ( ], }); - expect(TestBed.inject(ApplicationInitStatus).done).toEqual(true); + expect(TestBed.inject(ApplicationInitStatus).done).toBe(true); expect(mock).toHaveBeenCalled(); }); + +test('gets the DebugElement', async () => { + const view = await render(FixtureComponent); + + expect(view.debugElement).not.toBeNull(); + expect(view.debugElement.componentInstance).toBeInstanceOf(FixtureComponent); +});