diff --git a/apps/example-app/src/app/examples/02-input-output.spec.ts b/apps/example-app/src/app/examples/02-input-output.spec.ts
index 663d63e0..f1bd4a1c 100644
--- a/apps/example-app/src/app/examples/02-input-output.spec.ts
+++ b/apps/example-app/src/app/examples/02-input-output.spec.ts
@@ -33,8 +33,8 @@ test('is possible to set input and listen for output', async () => {
test('is possible to set input and listen for output with the template syntax', async () => {
const sendSpy = jest.fn();
- await render(InputOutputComponent, {
- template: '',
+ await render('', {
+ declarations: [InputOutputComponent],
componentProperties: {
sendValue: sendSpy,
},
diff --git a/apps/example-app/src/app/examples/11-ng-content.spec.ts b/apps/example-app/src/app/examples/11-ng-content.spec.ts
index 14a1630c..f061e862 100644
--- a/apps/example-app/src/app/examples/11-ng-content.spec.ts
+++ b/apps/example-app/src/app/examples/11-ng-content.spec.ts
@@ -1,14 +1,12 @@
-import { TestBed } from '@angular/core/testing';
import { render, screen } from '@testing-library/angular';
import { CellComponent } from './11-ng-content';
test('it is possible to test ng-content without selector', async () => {
const projection = 'it should be showed into a p element!';
-
- TestBed.overrideComponent(CellComponent, { set: { selector: 'cell' } });
- await render(CellComponent, {
- template: `${projection} | `,
+
+ await render(`${projection}`, {
+ declarations: [CellComponent]
});
expect(screen.getByText(projection)).toBeInTheDocument();
diff --git a/apps/example-app/src/app/examples/11-ng-content.ts b/apps/example-app/src/app/examples/11-ng-content.ts
index 302563f1..47845919 100644
--- a/apps/example-app/src/app/examples/11-ng-content.ts
+++ b/apps/example-app/src/app/examples/11-ng-content.ts
@@ -1,6 +1,7 @@
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
+ selector: 'app-fixture',
template: `
diff --git a/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts b/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts
new file mode 100644
index 00000000..cd6334d1
--- /dev/null
+++ b/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts
@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/angular';
+import {ComponentWithAttributeSelectorComponent} from './17-component-with-attribute-selector';
+
+// Note: At this stage it is not possible to use the render(ComponentWithAttributeSelectorComponent, {...}) syntax
+// for components with attribute selectors!
+test('is possible to set input of component with attribute selector through template', async () => {
+ await render(``, {
+ declarations: [ComponentWithAttributeSelectorComponent]
+ });
+
+ const valueControl = screen.getByTestId('value');
+
+ expect(valueControl).toHaveTextContent('42');
+});
diff --git a/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts b/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts
new file mode 100644
index 00000000..2d0b904b
--- /dev/null
+++ b/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-fixture-component-with-attribute-selector[value]',
+ template: `
+ {{ value }}
+ `,
+})
+export class ComponentWithAttributeSelectorComponent {
+ @Input() value!: number;
+}
diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts
index bda39543..7f5a02a7 100644
--- a/projects/testing-library/src/lib/models.ts
+++ b/projects/testing-library/src/lib/models.ts
@@ -256,43 +256,6 @@ export interface RenderComponentOptions
- extends RenderComponentOptions {
- /**
- * @description
- * The template to render the directive.
- * This template will override the template from the WrapperComponent.
- *
- * @example
- * const component = await render(SpoilerDirective, {
- * template: ``
- * })
- *
- * @deprecated Use `render(template, { declarations: [SomeDirective] })` instead.
- */
- template: string;
- /**
- * @description
- * An Angular component to wrap the component in.
- * The template will be overridden with the `template` option.
- *
- * @default
- * `WrapperComponent`, an empty component that strips the `ng-version` attribute
- *
- * @example
- * const component = await render(SpoilerDirective, {
- * template: ``
- * wrapper: CustomWrapperComponent
- * })
- */
- wrapper?: Type;
- componentProperties?: Partial;
-}
-
// eslint-disable-next-line @typescript-eslint/ban-types
export interface RenderTemplateOptions
extends RenderComponentOptions {
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index bfbe7f93..6d66e933 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/projects/testing-library/src/lib/testing-library.ts
@@ -26,7 +26,7 @@ import {
getQueriesForElement,
queries as dtlQueries,
} from '@testing-library/dom';
-import { RenderComponentOptions, RenderDirectiveOptions, RenderTemplateOptions, RenderResult } from './models';
+import { RenderComponentOptions, RenderTemplateOptions, RenderResult } from './models';
import { getConfig } from './config';
const mountedFixtures = new Set>();
@@ -36,13 +36,6 @@ export async function render(
component: Type,
renderOptions?: RenderComponentOptions,
): Promise>;
-/**
- * @deprecated Use `render(template, { declarations: [DirectiveType] })` instead.
- */
-export async function render(
- component: Type,
- renderOptions?: RenderDirectiveOptions,
-): Promise>;
export async function render(
template: string,
renderOptions?: RenderTemplateOptions,
@@ -50,10 +43,7 @@ export async function render(
export async function render(
sut: Type | string,
- renderOptions:
- | RenderComponentOptions
- | RenderDirectiveOptions
- | RenderTemplateOptions = {},
+ renderOptions: RenderComponentOptions | RenderTemplateOptions = {},
): Promise> {
const { dom: domConfig, ...globalConfig } = getConfig();
const {
@@ -86,7 +76,6 @@ export async function render(
declarations: addAutoDeclarations(sut, {
declarations,
excludeComponentDeclaration,
- template,
wrapper,
}),
imports: addAutoImports({
@@ -106,7 +95,7 @@ export async function render(
TestBed.overrideProvider(provide, provider);
});
- const componentContainer = createComponentFixture(sut, { template, wrapper });
+ const componentContainer = createComponentFixture(sut, { wrapper });
let fixture: ComponentFixture;
let detectChanges: () => void;
@@ -227,22 +216,18 @@ async function createComponent(component: Type): Promise(
sut: Type | string,
- { template, wrapper }: Pick, 'template' | 'wrapper'>,
+ { wrapper }: Pick, 'wrapper'>,
): Type {
if (typeof sut === 'string') {
TestBed.overrideTemplate(wrapper, sut);
return wrapper;
}
- if (template) {
- TestBed.overrideTemplate(wrapper, template);
- return wrapper;
- }
return sut;
}
function setComponentProperties(
fixture: ComponentFixture,
- { componentProperties = {} }: Pick, 'componentProperties'>,
+ { componentProperties = {} }: Pick, 'componentProperties'>,
) {
for (const key of Object.keys(componentProperties)) {
const descriptor: PropertyDescriptor = Object.getOwnPropertyDescriptor(
@@ -293,19 +278,15 @@ function addAutoDeclarations(
{
declarations,
excludeComponentDeclaration,
- template,
wrapper,
- }: Pick, 'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'>,
+ }: Pick, 'declarations' | 'excludeComponentDeclaration' | 'wrapper'>,
) {
if (typeof sut === 'string') {
return [...declarations, wrapper];
}
- const wrappers = () => (template ? [wrapper] : []);
-
const components = () => (excludeComponentDeclaration ? [] : [sut]);
-
- return [...declarations, ...wrappers(), ...components()];
+ return [...declarations, ...components()];
}
function addAutoImports({ imports, routes }: Pick, 'imports' | 'routes'>) {
diff --git a/projects/testing-library/tests/render-template.spec.ts b/projects/testing-library/tests/render-template.spec.ts
index 60c2a074..9dd20d01 100644
--- a/projects/testing-library/tests/render-template.spec.ts
+++ b/projects/testing-library/tests/render-template.spec.ts
@@ -62,15 +62,6 @@ test('the component renders', async () => {
expect(screen.getByText('Hello Angular!')).toBeInTheDocument();
});
-test('the directive renders (compatibility with the deprecated signature)', async () => {
- const view = await render(OnOffDirective, {
- template: '',
- });
-
- // eslint-disable-next-line testing-library/no-container
- expect(view.container.querySelector('[onoff]')).toBeInTheDocument();
-});
-
test('uses the default props', async () => {
await render('', {
declarations: [OnOffDirective],