FIX: Some re-render functionality in widgets, added more coverage

test/javascripts/widgets/widget-test.js.es6

@@ -0,0 +1,194 @@
+import { moduleForWidget, widgetTest } from 'helpers/widget-test';
+import { decorateWidget, createWidget } from 'discourse/widgets/widget';
+
+moduleForWidget('base');
+
+widgetTest('widget attributes are passed in via args', {
+  template: `{{mount-widget widget="hello-test" args=args}}`,
+
+  setup() {
+    createWidget('hello-test', {
+      tagName: 'div.test',
+
+      html(attrs) {
+        return `Hello ${attrs.name}`;
+      },
+    });
+
+    this.set('args', { name: 'Robin' });
+  },
+
+  test(assert) {
+    assert.equal(this.$('.test').text(), "Hello Robin");
+  }
+});
+
+widgetTest('buildClasses', {
+  template: `{{mount-widget widget="classname-test" args=args}}`,
+
+  setup() {
+    createWidget('classname-test', {
+      tagName: 'div.test',
+
+      buildClasses(attrs) {
+        return ['static', attrs.dynamic];
+      }
+    });
+
+    this.set('args', { dynamic: 'cool-class' });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.test.static.cool-class').length, 'it has all the classes');
+  }
+});
+
+widgetTest('buildAttributes', {
+  template: `{{mount-widget widget="attributes-test" args=args}}`,
+
+  setup() {
+    createWidget('attributes-test', {
+      tagName: 'div.test',
+
+      buildAttributes(attrs) {
+        return { "data-evil": 'trout', "aria-label": attrs.label };
+      }
+    });
+
+    this.set('args', { label: 'accessibility' });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.test[data-evil=trout]').length);
+    assert.ok(this.$('.test[aria-label=accessibility]').length);
+  }
+});
+
+widgetTest('buildId', {
+  template: `{{mount-widget widget="id-test" args=args}}`,
+
+  setup() {
+    createWidget('id-test', {
+      buildId(attrs) {
+        return `test-${attrs.id}`;
+      }
+    });
+
+    this.set('args', { id: 1234 });
+  },
+
+  test(assert) {
+    assert.ok(this.$('#test-1234').length);
+  }
+});
+
+widgetTest('widget state', {
+  template: `{{mount-widget widget="state-test"}}`,
+
+  setup() {
+    createWidget('state-test', {
+      tagName: 'button.test',
+
+      defaultState() {
+        return { clicks: 0 };
+      },
+
+      html(attrs, state) {
+        return `${state.clicks} clicks`;
+      },
+
+      click() {
+        this.state.clicks++;
+      }
+    });
+  },
+
+  test(assert) {
+    assert.ok(this.$('button.test').length, 'it renders the button');
+    assert.equal(this.$('button.test').text(), "0 clicks");
+
+    click(this.$('button'));
+    andThen(() => {
+      assert.equal(this.$('button.test').text(), "1 clicks");
+    });
+  }
+});
+
+widgetTest('widget update with promise', {
+  template: `{{mount-widget widget="promise-test"}}`,
+
+  setup() {
+    createWidget('promise-test', {
+      tagName: 'button.test',
+
+      html(attrs, state) {
+        return state.name || "No name";
+      },
+
+      click() {
+        return new Ember.RSVP.Promise(resolve => {
+          Ember.run.next(() => {
+            this.state.name = "Robin";
+            resolve();
+          });
+        });
+      }
+    });
+  },
+
+  test(assert) {
+    assert.equal(this.$('button.test').text(), "No name");
+
+    click(this.$('button'));
+    andThen(() => {
+      assert.equal(this.$('button.test').text(), "Robin");
+    });
+  }
+});
+
+widgetTest('widget attaching', {
+  template: `{{mount-widget widget="attach-test"}}`,
+
+  setup() {
+    createWidget('test-embedded', { tagName: 'div.embedded' });
+
+    createWidget('attach-test', {
+      tagName: 'div.container',
+      html() {
+        return this.attach('test-embedded');
+      },
+    });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.container').length, "renders container");
+    assert.ok(this.$('.container .embedded').length, "renders attached");
+  }
+});
+
+widgetTest('widget decorating', {
+  template: `{{mount-widget widget="decorate-test"}}`,
+
+  setup() {
+    createWidget('decorate-test', {
+      tagName: 'div.decorate',
+      html() {
+        return "main content";
+      },
+    });
+
+    decorateWidget('decorate-test:before', dec => {
+      return dec.h('b', 'before');
+    });
+
+    decorateWidget('decorate-test:after', dec => {
+      return dec.h('i', 'after');
+    });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.decorate').length);
+    assert.equal(this.$('.decorate b').text(), 'before');
+    assert.equal(this.$('.decorate i').text(), 'after');
+  }
+});