Ember.JS add dynamic properties to a native class

class-decorator-test.js

/* eslint-disable ember/no-computed-properties-in-native-classes */
import { render, settled } from '@ember/test-helpers';
import { setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { module, test } from 'qunit';
import { set, defineProperty, computed } from '@ember/object';

function example(target) {
  defineProperty(
    target.prototype,
    'computed',
    computed('bar', function () {
      return `Works!${this.bar}`;
    })
  );

  return target;
}

@example
class Foo {
  bar = '';
}

module('Integration | Decorator', function (hooks) {
  setupRenderingTest(hooks);

  test('it works', async function (assert) {
    this.foo = new Foo();

    await render(hbs`
      <span id="computed">{{this.foo.computed}}</span>
    `);

    assert.dom('#computed').hasText('Works!');
  });

  test('it invalidates when the dependent key changes', async function (assert) {
    this.foo = new Foo();

    await render(hbs`
      <span id="computed">{{this.foo.computed}}</span>
    `);

    assert.dom('#computed').hasText('Works!');

    set(this.foo, 'bar', '!!');
    await settled();

    assert.dom('#computed').hasText('Works!!!');
  });
});