[bug] Render() does not work with embedded HTML in template literal

[the-ult]

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

[github-actions]

🎉 This issue has been resolved in version 11.0.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀