typed-ember / glint

TypeScript powered tooling for Glimmer templates
https://typed-ember.gitbook.io/glint
MIT License
109 stars 51 forks source link

Bug?: "Unclosed element `pre`, when `<pre>` is mentioned in test name of gts test file #617

Open NullVoxPopuli opened 1 year ago

NullVoxPopuli commented 1 year ago

I believe this'd be solved by: https://github.com/typed-ember/glint/pull/615

The error:

2:22:16 PM - File change detected. Starting incremental compilation...

tests/rendering/markdown-test.gts:140:35 - error TS0: Unclosed element `pre`: 

|
|  <pre>
|

(error occurred in 'an unknown module' @ line 140 : column 34)

140         test('with the plugin: no <pre> renders', async function (assert) {

2:22:16 PM - Found 1 error. Watching for file changes.

Line 140:

        test('with the plugin: no <pre> renders', async function (assert) {
the whole file ```ts import { assert as debugAssert } from '@ember/debug'; import { render, setupOnerror } from '@ember/test-helpers'; import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { stripIndent } from 'common-tags'; import { compile } from'ember-repl'; import { CACHE } from 'ember-repl/__PRIVATE__DO_NOT_USE__'; import { visit } from 'unist-util-visit'; import type { ComponentLike } from '@glint/template'; import type { Parent } from 'unist'; module('Rendering | compile()', function (hooks) { setupRenderingTest(hooks); module('markdown features', function () { test('tables', async function (assert) { setupOnerror(() => { assert.notOk('This should not error'); }); let snippet = stripIndent` | Color | Food | | ---- | ---- | | red | apple | | yellow| banana | `; let component: ComponentLike | undefined; await compile(snippet, { format: 'glimdown', onSuccess: (comp) => (component = comp), onError: () => assert.notOk('did not expect error'), onCompileStart: () => { /* not used */ }, }); debugAssert(`[BUG]`, component); await render(component); assert.dom('table').exists(); assert.dom('td').containsText('red'); }); test('footnotes', async function (assert) { setupOnerror(() => { assert.notOk('This should not error'); }); let snippet = stripIndent` text[^note] [^note]: a note about a thing `; let component: ComponentLike | undefined; await compile(snippet, { format: 'glimdown', onSuccess: (comp) => (component = comp), onError: () => assert.notOk('did not expect error'), onCompileStart: () => { /* not used */ }, }); debugAssert(`[BUG]`, component); await render(component); assert.dom('sup').exists(); assert.dom('a').exists({ count: 2 }); // to and from the footnote }); module('custom remark plugins', function () { module('demo: remove
 code', function (hooks) {
        let snippet = stripIndent`
          text

          \`\`\`js
          const two = 2;
          \`\`\`
        `;

        /**
         * Test plugin that just turns code into an
         * unformatted mess in a 

tag */ function uncodeSnippet(/* options */ ) { return function transformer(tree: Parent) { // eslint-disable-next-line @typescript-eslint/no-explicit-any visit(tree, ['code'], function (node: any, index, parent) { if (!parent) return; if (!index) return; parent.children[index] = { type: 'html', value: `

${node.value}

` } }); } } let build: (plugin: unknown) => Promise; let component: ComponentLike | undefined; hooks.beforeEach(function (assert) { CACHE.clear(); component = undefined; build = async function build(plugin) { await compile(snippet, { format: 'glimdown', remarkPlugins: plugin ? [plugin] : [], onSuccess: (comp) => (component = comp), onError: () => assert.notOk('did not expect error'), onCompileStart: () => { /* not used */ }, }); } }); test('baseline: without the plugin,
 renders', async function (assert) {

          debugAssert(`[BUG]`, build);
          await build();
          debugAssert(`[BUG]`, component);

          await render(component);
          assert.dom('pre').exists();
        });

        test('with the plugin: no 
 renders', async function (assert) {
          debugAssert(`[BUG]`, build);
          await build(uncodeSnippet);
          debugAssert(`[BUG]`, component);

          await render(component);
          // await this.pauseTest();
          assert.dom('pre').doesNotExist();
        });
      });
    });
  });
});

```

Changing <pre> to pre on 140 and 130 gives:

tests/rendering/markdown-test.gts:109:49 - error TS0: Unclosed element `void`: 

|
|  <void>
|

(error occurred in 'an unknown module' @ line 109 : column 48)

109         let build: (plugin?: unknown) => Promise<void>;

2:42:13 PM - Found 1 error. Watching for file changes.

I had another <pre> on 81, swapping that with pre doesn't change anything.

If I move

        let build: (plugin?: unknown) => Promise<void>;
        let component: ComponentLike | undefined;

to the top of the module (demo: remove pre code), then I get this error:

tests/rendering/markdown-test.gts:95:34 - error TS0: Unclosed element `p`: 

|
|  <p>
|

(error occurred in 'an unknown module' @ line 95 : column 33)

95          * unformatted mess in a <p> tag

2:49:40 PM - Found 1 error. Watching for file changes.

but that is in a comment!!!

        /**
         * Test plugin that just turns code into an
         * unformatted mess in a <p> tag
         */

Changing <p> to p then leaves me with this error:

tests/rendering/markdown-test.gts:82:49 - error TS0: Unclosed element `void`: 

|
|  <void>
|

(error occurred in 'an unknown module' @ line 82 : column 48)

82         let build: (plugin?: unknown) => Promise<void>;

2:50:53 PM - Found 1 error. Watching for file changes.

Even if I extract the type to the top of the file, now on line 14:

type Build = (plugin?: unknown) => Promise<void>;

I get:

tests/rendering/markdown-test.gts:14:43 - error TS0: Unclosed element `void`: 

|
|  <void>
|

(error occurred in 'an unknown module' @ line 14 : column 42)

14 type Build = (plugin?: unknown) => Promise<void>;

3:02:06 PM - Found 1 error. Watching for file changes.

if I change the type to

type Build = (plugin?: unknown) => unknown;

then I can finally see an actual error in my test file! :tada: