Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: remove RenderDirectiveOptions #265

Merged
merged 2 commits into from
Nov 26, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/example-app/src/app/examples/11-ng-content.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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!';

await render(`<app-fixture data-testid="one-cell-with-ng-content">${projection}</app-fixture>`, {
declarations: [CellComponent]
});
Expand Down
37 changes: 0 additions & 37 deletions projects/testing-library/src/lib/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -256,43 +256,6 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
removeAngularAttributes?: boolean;
}

/**
* @deprecated Use `render(template, { declarations: [SomeDirective] })` instead.
*/
// eslint-disable-next-line @typescript-eslint/ban-types
export interface RenderDirectiveOptions<WrapperType, Properties extends object = {}, Q extends Queries = typeof queries>
extends RenderComponentOptions<Properties, Q> {
/**
* @description
* The template to render the directive.
* This template will override the template from the WrapperComponent.
*
* @example
* const component = await render(SpoilerDirective, {
* template: `<div spoiler message='SPOILER'></div>`
* })
*
* @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: `<div spoiler message='SPOILER'></div>`
* wrapper: CustomWrapperComponent
* })
*/
wrapper?: Type<WrapperType>;
componentProperties?: Partial<WrapperType & Properties>;
}

// eslint-disable-next-line @typescript-eslint/ban-types
export interface RenderTemplateOptions<WrapperType, Properties extends object = {}, Q extends Queries = typeof queries>
extends RenderComponentOptions<Properties, Q> {
Expand Down
33 changes: 7 additions & 26 deletions projects/testing-library/src/lib/testing-library.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<ComponentFixture<any>>();
Expand All @@ -36,24 +36,14 @@ export async function render<ComponentType>(
component: Type<ComponentType>,
renderOptions?: RenderComponentOptions<ComponentType>,
): Promise<RenderResult<ComponentType, ComponentType>>;
/**
* @deprecated Use `render(template, { declarations: [DirectiveType] })` instead.
*/
export async function render<DirectiveType, WrapperType = WrapperComponent>(
component: Type<DirectiveType>,
renderOptions?: RenderDirectiveOptions<WrapperType>,
): Promise<RenderResult<WrapperType>>;
export async function render<WrapperType = WrapperComponent>(
template: string,
renderOptions?: RenderTemplateOptions<WrapperType>,
): Promise<RenderResult<WrapperType>>;

export async function render<SutType, WrapperType = SutType>(
sut: Type<SutType> | string,
renderOptions:
| RenderComponentOptions<SutType>
| RenderDirectiveOptions<WrapperType>
| RenderTemplateOptions<WrapperType> = {},
renderOptions: RenderComponentOptions<SutType> | RenderTemplateOptions<WrapperType> = {},
): Promise<RenderResult<SutType>> {
const { dom: domConfig, ...globalConfig } = getConfig();
const {
Expand Down Expand Up @@ -86,7 +76,6 @@ export async function render<SutType, WrapperType = SutType>(
declarations: addAutoDeclarations(sut, {
declarations,
excludeComponentDeclaration,
template,
wrapper,
}),
imports: addAutoImports({
Expand All @@ -106,7 +95,7 @@ export async function render<SutType, WrapperType = SutType>(
TestBed.overrideProvider(provide, provider);
});

const componentContainer = createComponentFixture(sut, { template, wrapper });
const componentContainer = createComponentFixture(sut, { wrapper });

let fixture: ComponentFixture<SutType>;
let detectChanges: () => void;
Expand Down Expand Up @@ -227,22 +216,18 @@ async function createComponent<SutType>(component: Type<SutType>): Promise<Compo

function createComponentFixture<SutType>(
sut: Type<SutType> | string,
{ template, wrapper }: Pick<RenderDirectiveOptions<any>, 'template' | 'wrapper'>,
{ wrapper }: Pick<RenderTemplateOptions<SutType>, 'wrapper'>,
): Type<any> {
if (typeof sut === 'string') {
TestBed.overrideTemplate(wrapper, sut);
return wrapper;
}
if (template) {
TestBed.overrideTemplate(wrapper, template);
return wrapper;
}
return sut;
}

function setComponentProperties<SutType>(
fixture: ComponentFixture<SutType>,
{ componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
{ componentProperties = {} }: Pick<RenderTemplateOptions<SutType, any>, 'componentProperties'>,
) {
for (const key of Object.keys(componentProperties)) {
const descriptor: PropertyDescriptor = Object.getOwnPropertyDescriptor(
Expand Down Expand Up @@ -293,19 +278,15 @@ function addAutoDeclarations<SutType>(
{
declarations,
excludeComponentDeclaration,
template,
wrapper,
}: Pick<RenderDirectiveOptions<any>, 'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'>,
}: Pick<RenderTemplateOptions<any>, '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<RenderComponentOptions<any>, 'imports' | 'routes'>) {
Expand Down
9 changes: 0 additions & 9 deletions projects/testing-library/tests/render-template.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: '<div onOff></div>',
});

// eslint-disable-next-line testing-library/no-container
expect(view.container.querySelector('[onoff]')).toBeInTheDocument();
});

test('uses the default props', async () => {
await render('<div onOff></div>', {
declarations: [OnOffDirective],
Expand Down