ngx-html-bridge

import * as fs from "node:fs"; import { test } from "node:test"; import { strict as assert } from "node:assert"; import { parseAngularTemplateFile, parseAngularTemplate } from "../src/main"; test("parseAngularTemplate returns the same result as parseAngularTemplateFile", async () => { const templatePath = "tests/sample/src/app/plain/plain.html"; const template = fs.readFileSync(templatePath, "utf-8"); const result = await parseAngularTemplate(template, templatePath); assert.deepStrictEqual(result, [ { plain: "plain works!plain works!", annotated: 'plain works!plain works!', }, ]); }); test("parseAngularTemplateFile returns expected HTML for a plain template", async () => { const templatePath = "tests/sample/src/app/plain/plain.html"; const result = await parseAngularTemplateFile(templatePath); assert.deepStrictEqual(result, [ { plain: "plain works!plain works!", annotated: 'plain works!plain works!', }, ]); }); test("parseAngularTemplateFile returns expected HTML for @if, @else if, and @else blocks", async () => { const templatePath = "tests/sample/src/app/if/if.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ "Condition is true!", "Else if condition is true!", "All conditions are false!", ].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for @if without else", async () => { const templatePath = "tests/sample/src/app/if-without-else/if-without-else.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), ["Condition is true!", ""].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for @switch, @case, and @default blocks", async () => { const templatePath = "tests/sample/src/app/switch/switch.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), ["Case 1", "Case 2", "Default case"].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for @for block", async () => { const templatePath = "tests/sample/src/app/for/for.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ "", 'some random text', 'some random textsome random text', ].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for @for block with length check", async () => { const templatePath = "tests/sample/src/app/for-with-length-check/for-with-length-check.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ "", "<ul><li>some random text</li></ul>", "<ul><li>some random text</li></ul>", "<ul><li>some random text</li><li>some random text</li></ul>", "<ul><li>some random text</li><li>some random text</li></ul>", "<ul><li>some random text</li></ul><ul><li>some random text</li></ul>", "<ul><li>some random text</li></ul><ul><li>some random text</li><li>some random text</li></ul>", "<ul><li>some random text</li><li>some random text</li></ul><ul><li>some random text</li></ul>", "<ul><li>some random text</li><li>some random text</li></ul><ul><li>some random text</li><li>some random text</li></ul>", ].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for @for block with @empty", async () => { const templatePath = "tests/sample/src/app/for-with-empty/for-with-empty.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ "No items.", "some random text", "some random textsome random text", ].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for @defer block", async () => { const templatePath = "tests/sample/src/app/defer/defer.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ "Deferred content loaded!", "Placeholder content", "Loading...", ].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for *ngIf", async () => { const templatePath = "tests/sample/src/app/ngif/ngif.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ "<div>Condition is true!</div>", "Condition is false!", ].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for *ngIf without else", async () => { const templatePath = "tests/sample/src/app/ngif-without-else/ngif-without-else.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), ["<div>Condition is true!</div>", ""].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for *ngIf with then", async () => { const templatePath = "tests/sample/src/app/ngif-with-then/ngif-with-then.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), ["Condition is true (then block)!", ""].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for @switch with single case and no default", async () => { const templatePath = "tests/sample/src/app/switch-without-default/switch-without-default.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual(result.sort(), ["Case 1", ""].sort()); }); test("parseAngularTemplateFile returns expected HTML for attributes", async () => { const templatePath = "tests/sample/src/app/attr/attr.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ ' attr works!\n', ].sort(), ); }); test("parseAngularTemplateFile returns expected HTML for ternary operator in property binding", async () => { const templatePath = "tests/sample/src/app/ternary-operator/ternary-operator.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), [ '<div hidden="until-found">Ternary Operator Test</div>', '<div hidden="">Ternary Operator Test</div>', "<div>Ternary Operator Test</div>", ].sort(), ); }); test("parseAngularTemplateFile ignores style and class binding", async () => { const templatePath = "tests/sample/src/app/style-binding/style-binding.html"; const result = (await parseAngularTemplateFile(templatePath)).map( (r) => r.plain, ); assert.deepStrictEqual(result.sort(), ["style-binding works!"].sort()); }); test("parseAnglarTemplateFile includes custom attributes when specified in options", async () => { const templatePath = "tests/sample/src/app/included-attributes/included-attributes.html"; const options = { includedAttributes: ["custom-attribute"] }; const result = (await parseAngularTemplateFile(templatePath, options)).map( (r) => r.plain, ); assert.deepStrictEqual( result.sort(), ['<div custom-attribute="test-value">Hello</div>'].sort(), ); });