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],