How to write type-tests for components?

[boris-petrov]

Coming from this example. I would like to write a test that the two images in the bottom work in exactly that way - i.e. passing an array of numbers yields a variable which has number as its type. Any suggestions as to how to do this in the best way?

[dfreeman]

This is a good question. One option would be to write something like:

const wantsANumber = helper((positional: [value: number]) => {});

interface MyTestContext {
  wantsANumber: typeof wantsANumber;
}

test('the yielded type depends on the input array', async function (this: MyTestContext, assert) {
  this.wantsANumber = wantsANumber;

  await render<MyTestContext>(hbs`
    <Foo @foos={{array 1 2 3}} as |foo|>
      {{this.wantsANumber foo}}
    </Foo>

    <Foo @foos={{array "a" "b" "c"}} as |foo|>
      {{! @glint-expect-error: no strings allowed! }}
      {{this.wantsANumber foo}}
    </Foo>
  `);

  assert.ok(true);
});

Of course you don't have to write it like an actual runtime test—you could put render<MyTextContext>(...) essentially anywhere (even somewhere that never gets built and executed, only typechecked) and have Glint check the types for you.

Another option is to do what it looks like they've done in some of the tests in glint-template-types and use Glint's own internals along with something like expect-type to test things. This is definitely more expressive, but of course is subject to breakage if we change how things work inside Glint over time.

It might be interesting to explore something like expect-type that could be expressed in template space itself. In GlimmerX, where functions are directly invokable as helpers, that might almost just work already (pending some parser updates):

import { expectTypeOf } from 'expect-type';
import { hbs } from '@glimmerx/component';

const foos = [1, 2, 3];

hbs`
  <Foo @foos={{foos}} as |foo|>
    {{(expectTypeOf foo).toEqualTypeOf 0}}
    {{(expectTypeOf foo).not.toEqualTypeOf "hello"}}
  </Foo>
`;

[boris-petrov]

I was thinking exactly about something like expect-type. It would be nice to have. Otherwise what you suggest definitely makes sense and works good, thank you!

[boris-petrov]

The "right" way to write type-tests is now with the built-in type-test package.