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);
+});