Closed
Description
While trying to test a custom Pipe, I encountered an error about the closing tags.
Errors during JIT compilation of template for WrapperComponent: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag.
Pipe
import { Pipe, PipeTransform } from '@angular/core';
import { stripHtml } from '@ddb/shared/utils';
@Pipe({
name: 'stripHTML',
})
export class StripHTMLPipe implements PipeTransform {
transform(stringValueWithHTML: string): string {
return stripHtml(stringValueWithHTML);
}
}spec
import { render, screen } from '@testing-library/angular';
import { StripHTMLPipe } from './strip-html.pipe';
import { render, screen } from '@testing-library/angular';
import { StripHTMLPipe } from './strip-html.pipe';
const STRING_WITH_HTML =
'Some <em>database</em> <b>field</b> <div><span>with <strong>stripped</strong> HTML</span></div>';
/// ERROR 👎
test('should strip the HTML from a string', async () => {
await render(`<p data-testid="test"> {{ ${STRING_WITH_HTML} | stripHTML }} </p>`, {
declarations: [StripHTMLPipe],
});
const testControl = screen.getByTestId('test');
expect(testControl).toHaveTextContent('Some database field with stripped HTML');
});
/// WORKS 👍
test('should strip the HTML from a string with the transform method', () => {
const stripHTMLPipe = new StripHTMLPipe();
const result = stripHTMLPipe.transform(STRING_WITH_HTML);
expect(result).toBe('Some database field with stripped HTML');
});
N.B.
Replacing stringWithHTML with a simple string works.
const stringWithHTML = 'actually without HTML';
Error
FAIL shared-ui-pipes libs/shared/ui/pipes/src/lib/strip-html.pipe.spec.ts
✕ should strip the HTML from a string (562 ms)
● should strip the HTML from a string
Errors during JIT compilation of template for WrapperComponent: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("tabase</em> <b>field</b> <div><span>with <strong>stripped</strong> HTML</span></div> | stripHTML }} [ERROR ->]</p>"): ng:///WrapperComponent/template.html@0:137
at parseJitTemplate (../../../../../packages/compiler/src/jit_compiler_facade.ts:464:11)
at CompilerFacadeImpl.Object.<anonymous>.CompilerFacadeImpl.compileComponent (../../../../../packages/compiler/src/jit_compiler_facade.ts:180:39)
at Function.get [as ɵcmp] (../../../../../packages/core/src/render3/jit/directive.ts:129:37)
at getComponentDef (../../../../../packages/core/src/render3/definition.ts:731:14)
at verifyDeclarationsHaveDefinitions (../../../../../packages/core/src/render3/jit/module.ts:246:17)
at Array.forEach (<anonymous>)
at verifySemanticsOfNgModuleDef (../../../../../packages/core/src/render3/jit/module.ts:216:16)
at Function.get (../../../../../packages/core/src/render3/jit/module.ts:169:13)
at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.applyProviderOverridesToModule (../../../../../packages/core/testing/src/r3_test_bed_compiler.ts:414:49)
at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.compileTestModule (../../../../../packages/core/testing/src/r3_test_bed_compiler.ts:679:10)
at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.finalize (../../../../../packages/core/testing/src/r3_test_bed_compiler.ts:245:10)
at TestBedRender3.get (../../../../../packages/core/testing/src/r3_test_bed.ts:416:43)
at TestBedRender3.Object.<anonymous>.TestBedRender3.inject (../../../../../packages/core/testing/src/r3_test_bed.ts:314:25)
at Object.<anonymous>.TestBedRender3.inject (../../../../../packages/core/testing/src/r3_test_bed.ts:175:33)
at ../../../../projects/testing-library/src/lib/testing-library.ts:210:9