Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add smoke test capabilities #19879

Merged
merged 2 commits into from
Mar 3, 2022

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