Skip to content

Conversation

@NullVoxPopuli
Copy link
Contributor

@NullVoxPopuli NullVoxPopuli commented Dec 18, 2021

This came out of: #19878
The motivation being that I felt it's kinda difficult to quickly throw a reproduction / failing test PR together, because of the custom test harness used so far. I'm in agreement that the existing test stuff should be used first for performance reasons, but I think the utility and integration of a full app is useful for a starting point and easing initial contribution from people. 🎉

Update: (why I think this kind of test is useful)

even after trying to re-create this test,

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { precompileTemplate } from '@ember/template-compilation';

import service from 'ember-test-app/helpers/service';

module('tests/integration/components/gjs', function (hooks) {
  setupRenderingTest(hooks);

  test('it works with ember helpers', async function (assert) {
    await render(
      precompileTemplate(
        `
        {{#let (service 'router') as |router|}}
          {{router.currentRouteName}} hi
        {{/let}}
        `,
        {
          strictMode: true,
          scope: () => ({ service }),
        }
      )
    );

    // assertion not *that* important, runtime error is thrown
    // which is why: https://github.com/emberjs/ember.js/pull/19878/ exists
    assert.dom().containsText('hi');
  });
});

using only internal testing tools:

import { RenderingTestCase, moduleFor, strip } from 'internal-test-helpers';

import { precompileJSON } from '@glimmer/compiler';
import { getTemplateLocals } from '@glimmer/syntax';
import { createTemplateFactory } from '@ember/template-factory';

import { Helper } from '../../index';
import { setComponentTemplate } from '@glimmer/manager';
import { templateOnlyComponent } from '@glimmer/runtime';

/**
 * The template-compiler does not support strict mode at this time.
 * precompile from ember-template-compiler returns a string and
 * not a template-factory, so it doesn't help with strict-mode testing.
 *
 * We also can't import from `@ember/template-compiler` because it
 * doesn't exist to this kind of test, otherwise we'd be able to use
 * precompileTemplate, which would be perfect :D
 *
 * Copied(ish) from https://github.com/NullVoxPopuli/ember-repl/blob/main/addon/hbs.ts#L51
 */
function precompileTemplate(source, { moduleName, scope = {} }) {
  let locals = getTemplateLocals(source);

  let options = {
    strictMode: true,
    moduleName,
    locals,
    isProduction: false,
    meta: { moduleName },
  };

  // Copied from @glimmer/compiler/lib/compiler#precompile
  let [block] = precompileJSON(source, options);

  let blockJSON = JSON.stringify(block);
  let templateJSONObject = {
    id: moduleName,
    block: blockJSON,
    moduleName: moduleName ?? '(unknown template module)',
    scope,
    isStrictMode: true,
  };

  let factory = createTemplateFactory(templateJSONObject);

  return factory;
}

moduleFor(
  'Custom Helper test',
  class extends RenderingTestCase {
    ['@test works with strict-mode']() {
      class Custom extends Helper {
        compute([value]) {
          return `${value}-custom`;
        }
      }

      let template = strip`
        {{ (Custom 'my-test') }}
      `;

      let precompiled = precompileTemplate(template, {
        moduleName: 'strict-mode',
        scope: () => ({ Custom }),
      });

      let strictMode = setComponentTemplate(precompiled, templateOnlyComponent());

      this.render(`<this.strictMode />`, {
        strictMode,
      });
      this.assertText('my-test-custom');
      this.assertStableRerender();
    }
  }
);

I'm at a loss (at the time of writing) -- reproducing whatever the behavior is available to apps is very difficult (to me anyway). I could be that I'm just thick, and I don't know what I'm doing (likely! lol), but I'd like to help lower the barrier to entry for writing tests for ember, ya know?

@wagenet wagenet merged commit e67cfde into emberjs:master Mar 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants