Re-formatting inline hbs tags in tests

[dwickern]

This code fails the ember-template-lint prettier rule:

module('Integration | Component | duration-picker', function (hooks) {
  test('renders', async function (assert) {
    await render(hbs`
      <DurationPicker>
        label
      </DurationPicker>
    `);
    assert.dom(this.element).includesText('label');
  });
);

[lint:hbs] tests/integration/components/duration-picker-test.js
[lint:hbs]   10:21  error  Delete `⏎······`  prettier
[lint:hbs]   12:2  error  Delete `······`  prettier
[lint:hbs]   12:14  error  Replace `······</DurationPicker>⏎····` with `</DurationPicker>`  prettier
[lint:hbs]   21:90  error  Replace `"value"` with `'value'`  prettier

After running ember-template-lint --fix, this is the result:

module('Integration | Component | duration-picker', function (hooks) {
  test('renders', async function (assert) {
    await render(hbs`<DurationPicker>
  label
</DurationPicker>`);
    assert.dom(this.element).includesText('label');
  });
);

Not good.

This behavior seemed to start in ember-template-lint v5 because .js files were included by default. But you can reproduce it on ember-template-lint v4 by running directly against a js file, e.g. ember-template-lint ./tests/integration/components/duration-picker-test.js.

It seems like the intention in #2 was for ember-template-lint-plugin-prettier not to run against embedded blocks: https://github.com/ember-template-lint/ember-template-lint-plugin-prettier/blob/43d7270c991d49338cc928f586b56ea0ca9069ae/lib/rules/prettier.js#L45-L49 But the contents of the hbs`...` block is getting passed into this plugin without any surrounding context and with { line: 1, column: 0 }.

Solutions

For now the best solution IMO is to disable this plugin for js files:

// .template-lintrc.js
'use strict';

module.exports = {
  plugins: ['ember-template-lint-plugin-prettier'],
  extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
  rules: {
    // ...
  },
  overrides: [
    {
      // overrides for inline hbs`...` literals in tests
      files: ['tests/**/*-test.{js,ts}'],
      rules: {
        prettier: 'off',
      },
    },
  ],
};

Inline hbs support in prettier https://github.com/prettier/prettier/pull/8647 is currently blocked by https://github.com/prettier/prettier/issues/5588 and not getting much traction.