DEV: adds a new dropdown widget usable in any widget (#9297)

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

@@ -0,0 +1,298 @@
+import { moduleForWidget, widgetTest } from "helpers/widget-test";
+
+moduleForWidget("widget-dropdown");
+
+const DEFAULT_CONTENT = {
+  content: [
+    { id: 1, label: "foo" },
+    { id: 2, translatedLabel: "FooBar" },
+    "separator",
+    { id: 3, translatedLabel: "With icon", icon: "times" },
+    { id: 4, html: "<b>baz</b>" }
+  ],
+  label: "foo"
+};
+
+async function clickRowById(id) {
+  await click(`#my-dropdown .widget-dropdown-item.item-${id}`);
+}
+
+function rowById(id) {
+  return find(`#my-dropdown .widget-dropdown-item.item-${id}`)[0];
+}
+
+async function toggle() {
+  await click("#my-dropdown .widget-dropdown-header");
+}
+
+function headerLabel() {
+  return find(
+    "#my-dropdown .widget-dropdown-header .label"
+  )[0].innerText.trim();
+}
+
+function header() {
+  return find("#my-dropdown .widget-dropdown-header")[0];
+}
+
+function body() {
+  return find("#my-dropdown .widget-dropdown-body")[0];
+}
+
+const TEMPLATE = `
+  {{mount-widget
+    widget="widget-dropdown"
+    args=(hash
+      id="my-dropdown"
+      icon=icon
+      label=label
+      class=class
+      translatedLabel=translatedLabel
+      content=content
+      options=options
+    )
+}}`;
+
+widgetTest("dropdown id", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  test(assert) {
+    assert.ok(exists("#my-dropdown"));
+  }
+});
+
+widgetTest("label", {
+  template: TEMPLATE,
+
+  _translations: I18n.translations,
+
+  beforeEach() {
+    I18n.translations = { en: { js: { foo: "FooBaz" } } };
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  afterEach() {
+    I18n.translations = this._translations;
+  },
+
+  test(assert) {
+    assert.equal(headerLabel(), "FooBaz");
+  }
+});
+
+widgetTest("translatedLabel", {
+  template: TEMPLATE,
+
+  _translations: I18n.translations,
+
+  beforeEach() {
+    I18n.translations = { en: { js: { foo: "FooBaz" } } };
+    this.setProperties(DEFAULT_CONTENT);
+    this.set("translatedLabel", "BazFoo");
+  },
+
+  afterEach() {
+    I18n.translations = this._translations;
+  },
+
+  test(assert) {
+    assert.equal(headerLabel(), this.translatedLabel);
+  }
+});
+
+widgetTest("content", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  test(assert) {
+    assert.equal(rowById(1).dataset.id, 1, "it creates rows");
+    assert.equal(rowById(2).dataset.id, 2, "it creates rows");
+    assert.equal(rowById(3).dataset.id, 3, "it creates rows");
+  }
+});
+
+widgetTest("onChange action", {
+  template: `
+    <div id="test"></div>
+    {{mount-widget
+      widget="widget-dropdown"
+      args=(hash
+        id="my-dropdown"
+        label=label
+        content=content
+        onChange=(action "onChange")
+      )
+    }}
+  `,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+
+    this.on(
+      "onChange",
+      item => (this._element.querySelector("#test").innerText = item.id)
+    );
+  },
+
+  async test(assert) {
+    await clickRowById(2);
+    assert.equal(find("#test").text(), 2, "it calls the onChange actions");
+  }
+});
+
+widgetTest("can be opened and closed", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  async test(assert) {
+    assert.ok(exists("#my-dropdown.closed"));
+    await toggle();
+    assert.ok(exists("#my-dropdown.opened"));
+    await toggle();
+    assert.ok(exists("#my-dropdown.closed"));
+  }
+});
+
+widgetTest("icon", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+    this.set("icon", "times");
+  },
+
+  test(assert) {
+    assert.ok(exists(header().querySelector(".d-icon-times")));
+  }
+});
+
+widgetTest("class", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+    this.set("class", "activated");
+  },
+
+  test(assert) {
+    assert.ok(exists("#my-dropdown.activated"));
+  }
+});
+
+widgetTest("content with translatedLabel", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  test(assert) {
+    assert.equal(rowById(2).innerText.trim(), "FooBar");
+  }
+});
+
+widgetTest("content with label", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    I18n.translations = { en: { js: { foo: "FooBaz" } } };
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  test(assert) {
+    assert.equal(rowById(1).innerText.trim(), "FooBaz");
+  }
+});
+
+widgetTest("content with icon", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  test(assert) {
+    assert.ok(exists(rowById(3).querySelector(".d-icon-times")));
+  }
+});
+
+widgetTest("content with html", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  test(assert) {
+    assert.equal(rowById(4).innerHTML.trim(), "<span><b>baz</b></span>");
+  }
+});
+
+widgetTest("separator", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+  },
+
+  test(assert) {
+    assert.ok(
+      find(
+        "#my-dropdown .widget-dropdown-item:nth-child(3)"
+      )[0].classList.contains("separator")
+    );
+  }
+});
+
+widgetTest("hides widget if no content", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties({ content: null, label: "foo" });
+  },
+
+  test(assert) {
+    assert.notOk(exists("#my-dropdown .widget-dropdown-header"));
+    assert.notOk(exists("#my-dropdown .widget-dropdown-body"));
+  }
+});
+
+widgetTest("headerClass option", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+    this.set("options", { headerClass: "btn-small and-text" });
+  },
+
+  test(assert) {
+    assert.ok(header().classList.contains("widget-dropdown-header"));
+    assert.ok(header().classList.contains("btn-small"));
+    assert.ok(header().classList.contains("and-text"));
+  }
+});
+
+widgetTest("bodyClass option", {
+  template: TEMPLATE,
+
+  beforeEach() {
+    this.setProperties(DEFAULT_CONTENT);
+    this.set("options", { bodyClass: "gigantic and-yet-small" });
+  },
+
+  test(assert) {
+    assert.ok(body().classList.contains("widget-dropdown-body"));
+    assert.ok(body().classList.contains("gigantic"));
+    assert.ok(body().classList.contains("and-yet-small"));
+  }
+});