FEATURE: new date/time components (#7898)

test/javascripts/components/date-input-test.js.es6

@@ -0,0 +1,65 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("date-input", { integration: true });
+
+function dateInput() {
+  return find(".date-picker");
+}
+
+function setDate(date) {
+  this.set("date", date);
+}
+
+async function pika(year, month, day) {
+  await click(
+    `.pika-button.pika-day[data-pika-year="${year}"][data-pika-month="${month}"][data-pika-day="${day}"]`
+  );
+}
+
+function noop() {}
+
+const DEFAULT_DATE = new Date(2019, 0, 29);
+
+componentTest("default", {
+  template: `{{date-input date=date}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE });
+  },
+
+  test(assert) {
+    assert.equal(dateInput().val(), "January 29, 2019");
+  }
+});
+
+componentTest("prevents mutations", {
+  template: `{{date-input date=date onChange=onChange}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE });
+    this.set("onChange", noop);
+  },
+
+  async test(assert) {
+    await click(dateInput());
+    await pika(2019, 0, 2);
+
+    assert.ok(this.date.getTime() === DEFAULT_DATE.getTime());
+  }
+});
+
+componentTest("allows mutations through actions", {
+  template: `{{date-input date=date onChange=onChange}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE });
+    this.set("onChange", setDate);
+  },
+
+  async test(assert) {
+    await click(dateInput());
+    await pika(2019, 0, 2);
+
+    assert.ok(this.date.getTime() === new Date(2019, 0, 2).getTime());
+  }
+});

test/javascripts/components/date-time-input-range-test.js.es6

@@ -0,0 +1,102 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("date-time-input-range", { integration: true });
+
+function fromDateInput() {
+  return find(".from .date-picker");
+}
+
+function fromHoursInput() {
+  return find(".from .field.hours");
+}
+
+function fromMinutesInput() {
+  return find(".from .field.minutes");
+}
+
+function toDateInput() {
+  return find(".to .date-picker");
+}
+
+function toHoursInput() {
+  return find(".to .field.hours");
+}
+
+function toMinutesInput() {
+  return find(".to .field.minutes");
+}
+
+function setDates(dates) {
+  this.setProperties(dates);
+}
+
+async function pika(year, month, day) {
+  await click(
+    `.pika-button.pika-day[data-pika-year="${year}"][data-pika-month="${month}"][data-pika-day="${day}"]`
+  );
+}
+
+const DEFAULT_DATE_TIME = new Date(2019, 0, 29, 14, 45);
+
+componentTest("default", {
+  template: `{{date-time-input-range from=date to=to}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE_TIME, to: null });
+  },
+
+  test(assert) {
+    assert.equal(fromDateInput().val(), "January 29, 2019");
+    assert.equal(fromHoursInput().val(), "14");
+    assert.equal(fromMinutesInput().val(), "45");
+
+    assert.equal(toDateInput().val(), "");
+    assert.equal(toHoursInput().val(), "");
+    assert.equal(toMinutesInput().val(), "");
+  }
+});
+
+componentTest("can switch panels", {
+  template: `{{date-time-input-range}}`,
+
+  async test(assert) {
+    assert.ok(exists(".panel.from.visible"));
+    assert.notOk(exists(".panel.to.visible"));
+
+    await click(".panels .to-panel");
+
+    assert.ok(exists(".panel.to.visible"));
+    assert.notOk(exists(".panel.from.visible"));
+  }
+});
+
+componentTest("prevents toDate to be before fromDate", {
+  template: `{{date-time-input-range from=from to=to onChange=onChange}}`,
+
+  beforeEach() {
+    this.setProperties({
+      from: DEFAULT_DATE_TIME,
+      to: DEFAULT_DATE_TIME,
+      onChange: setDates
+    });
+  },
+
+  async test(assert) {
+    assert.notOk(exists(".error"));
+
+    await click(toDateInput());
+    await pika(2019, 0, 1);
+
+    assert.ok(exists(".error"));
+    assert.ok(
+      this.to.getTime() === DEFAULT_DATE_TIME.getTime(),
+      "it didnt trigger a mutation"
+    );
+
+    await click(toDateInput());
+    await pika(2019, 0, 30);
+
+    assert.notOk(exists(".error"));
+    assert.ok(this.to.getTime() === new Date(2019, 0, 30, 14, 45).getTime());
+  }
+});

test/javascripts/components/date-time-input-test.js.es6

@@ -0,0 +1,84 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("date-time-input", { integration: true });
+
+function dateInput() {
+  return find(".date-picker");
+}
+
+function hoursInput() {
+  return find(".field.hours");
+}
+
+function minutesInput() {
+  return find(".field.minutes");
+}
+
+function setDate(date) {
+  this.set("date", date);
+}
+
+async function pika(year, month, day) {
+  await click(
+    `.pika-button.pika-day[data-pika-year="${year}"][data-pika-month="${month}"][data-pika-day="${day}"]`
+  );
+}
+
+const DEFAULT_DATE_TIME = new Date(2019, 0, 29, 14, 45);
+
+componentTest("default", {
+  template: `{{date-time-input date=date}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE_TIME });
+  },
+
+  test(assert) {
+    assert.equal(dateInput().val(), "January 29, 2019");
+    assert.equal(hoursInput().val(), "14");
+    assert.equal(minutesInput().val(), "45");
+  }
+});
+
+componentTest("prevents mutations", {
+  template: `{{date-time-input date=date}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE_TIME });
+  },
+
+  async test(assert) {
+    await click(dateInput());
+    await pika(2019, 0, 2);
+
+    assert.ok(this.date.getTime() === DEFAULT_DATE_TIME.getTime());
+  }
+});
+
+componentTest("allows mutations through actions", {
+  template: `{{date-time-input date=date onChange=onChange}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE_TIME });
+    this.set("onChange", setDate);
+  },
+
+  async test(assert) {
+    await click(dateInput());
+    await pika(2019, 0, 2);
+
+    assert.ok(this.date.getTime() === new Date(2019, 0, 2, 14, 45).getTime());
+  }
+});
+
+componentTest("can hide time", {
+  template: `{{date-time-input date=date showTime=false}}`,
+
+  beforeEach() {
+    this.setProperties({ date: DEFAULT_DATE_TIME });
+  },
+
+  async test(assert) {
+    assert.notOk(exists(hoursInput()));
+  }
+});

test/javascripts/components/time-input-test.js.es6

@@ -0,0 +1,97 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("time-input", { integration: true });
+
+function hoursInput() {
+  return find(".field.hours");
+}
+
+function minutesInput() {
+  return find(".field.minutes");
+}
+
+function setTime(time) {
+  this.setProperties(time);
+}
+
+function noop() {}
+
+componentTest("default", {
+  template: `{{time-input hours=hours minutes=minutes}}`,
+
+  beforeEach() {
+    this.setProperties({ hours: "14", minutes: "58" });
+  },
+
+  test(assert) {
+    assert.equal(hoursInput().val(), "14");
+    assert.equal(minutesInput().val(), "58");
+  }
+});
+
+componentTest("prevents mutations", {
+  template: `{{time-input hours=hours minutes=minutes}}`,
+
+  beforeEach() {
+    this.setProperties({ hours: "14", minutes: "58" });
+  },
+
+  async test(assert) {
+    await fillIn(hoursInput(), "12");
+    assert.ok(this.hours === "14");
+
+    await fillIn(minutesInput(), "36");
+    assert.ok(this.minutes === "58");
+  }
+});
+
+componentTest("allows mutations through actions", {
+  template: `{{time-input hours=hours minutes=minutes onChange=onChange}}`,
+
+  beforeEach() {
+    this.setProperties({ hours: "14", minutes: "58" });
+    this.set("onChange", setTime);
+  },
+
+  async test(assert) {
+    await fillIn(hoursInput(), "12");
+    assert.ok(this.hours === "12");
+
+    await fillIn(minutesInput(), "36");
+    assert.ok(this.minutes === "36");
+  }
+});
+
+componentTest("hours and minutes have boundaries", {
+  template: `{{time-input hours=14 minutes=58 onChange=onChange}}`,
+
+  beforeEach() {
+    this.set("onChange", noop);
+  },
+
+  async test(assert) {
+    await fillIn(hoursInput(), "2");
+    assert.equal(hoursInput().val(), "02");
+
+    await fillIn(hoursInput(), "@");
+    assert.equal(hoursInput().val(), "00");
+
+    await fillIn(hoursInput(), "24");
+    assert.equal(hoursInput().val(), "23");
+
+    await fillIn(hoursInput(), "-1");
+    assert.equal(hoursInput().val(), "00");
+
+    await fillIn(minutesInput(), "@");
+    assert.equal(minutesInput().val(), "00");
+
+    await fillIn(minutesInput(), "2");
+    assert.equal(minutesInput().val(), "02");
+
+    await fillIn(minutesInput(), "60");
+    assert.equal(minutesInput().val(), "59");
+
+    await fillIn(minutesInput(), "-1");
+    assert.equal(minutesInput().val(), "00");
+  }
+});