3e3f3f7b7e
This PR moves all of the time picking functionality from the bookmark modal and controller into a reusable time-shortcut-picker component, which will be used for the topic timer UI revamp. All of the utility JS for getting dates like tomorrow/next week/next month etc. have also been moved into a separate utility lib.
The time-shortcut-picker has a couple of options that can be passed in:
* prefilledDatetime - The date and time to parse and prefill into the custom date and time section, useful for editing interfaces.
* onTimeSelected (callback) - Called when one of the time shortcuts is clicked, and passes the type of the shortcut (e.g. tomorrow) and the datetime selected.
* additionalOptionsToShow - An array of option ids to show (by default `later_today` and `later_this_week` are hidden)
* hiddenOptions - An array of option ids to hide
* customOptions - An array of custom options to display (e.g. the option to select a post date for the bookmarks modal). The options should have the below properties:
* id
* icon
* label (I18n key)
* time (moment datetime object)
* timeFormatted
* hidden
The other major work in this PR is moving all of the bookmark functionality out of the bookmark modal controller and into its own component, where it makes more sense to be able to access elements on the page via `document`. Tests have been added to accompany this move, and existing acceptance tests for bookmark are all passing.
161 lines
3.9 KiB
JavaScript
161 lines
3.9 KiB
JavaScript
import componentTest, {
|
|
setupRenderingTest,
|
|
} from "discourse/tests/helpers/component-test";
|
|
import {
|
|
discourseModule,
|
|
fakeTime,
|
|
query,
|
|
} from "discourse/tests/helpers/qunit-helpers";
|
|
import KeyboardShortcutInitializer from "discourse/initializers/keyboard-shortcuts";
|
|
import { getApplication } from "@ember/test-helpers";
|
|
import sinon from "sinon";
|
|
|
|
let clock = null;
|
|
|
|
function mockMomentTz(dateString, timezone) {
|
|
clock = fakeTime(dateString, timezone, true);
|
|
}
|
|
|
|
discourseModule("Integration | Component | bookmark", function (hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
let template =
|
|
'{{bookmark model=model afterSave=afterSave afterDelete=afterDelete onCloseWithoutSaving=onCloseWithoutSaving registerOnCloseHandler=(action "registerOnCloseHandler") closeModal=(action "closeModal")}}';
|
|
|
|
hooks.beforeEach(function () {
|
|
KeyboardShortcutInitializer.initialize(getApplication());
|
|
this.actions.registerOnCloseHandler = () => {};
|
|
this.actions.closeModal = () => {};
|
|
this.setProperties({
|
|
model: {},
|
|
afterSave: () => {},
|
|
afterDelete: () => {},
|
|
onCloseWithoutSaving: () => {},
|
|
});
|
|
});
|
|
|
|
hooks.afterEach(function () {
|
|
if (clock) {
|
|
clock.restore();
|
|
}
|
|
sinon.restore();
|
|
});
|
|
|
|
componentTest("show later this week option if today is < Thursday", {
|
|
template,
|
|
skip: true,
|
|
|
|
beforeEach() {
|
|
mockMomentTz("2019-12-10T08:00:00", this.currentUser._timezone);
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(exists("#tap_tile_later_this_week"), "it has later this week");
|
|
},
|
|
});
|
|
|
|
componentTest(
|
|
"does not show later this week option if today is >= Thursday",
|
|
{
|
|
template,
|
|
skip: true,
|
|
|
|
beforeEach() {
|
|
mockMomentTz("2019-12-13T08:00:00", this.currentUser._timezone);
|
|
},
|
|
|
|
test(assert) {
|
|
assert.notOk(
|
|
exists("#tap_tile_later_this_week"),
|
|
"it does not have later this week"
|
|
);
|
|
},
|
|
}
|
|
);
|
|
|
|
componentTest("later today does not show if later today is tomorrow", {
|
|
template,
|
|
skip: true,
|
|
|
|
beforeEach() {
|
|
mockMomentTz("2019-12-11T22:00:00", this.currentUser._timezone);
|
|
},
|
|
|
|
test(assert) {
|
|
assert.notOk(
|
|
exists("#tap_tile_later_today"),
|
|
"it does not have later today"
|
|
);
|
|
},
|
|
});
|
|
|
|
componentTest("later today shows if it is after 5pm but before 6pm", {
|
|
template,
|
|
skip: true,
|
|
|
|
beforeEach() {
|
|
mockMomentTz("2019-12-11T14:30:00", this.currentUser._timezone);
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(exists("#tap_tile_later_today"), "it does have later today");
|
|
},
|
|
});
|
|
|
|
componentTest("later today does not show if it is after 5pm", {
|
|
template,
|
|
skip: true,
|
|
|
|
beforeEach() {
|
|
mockMomentTz("2019-12-11T17:00:00", this.currentUser._timezone);
|
|
},
|
|
|
|
test(assert) {
|
|
assert.notOk(
|
|
exists("#tap_tile_later_today"),
|
|
"it does not have later today"
|
|
);
|
|
},
|
|
});
|
|
|
|
componentTest("later today does show if it is before the end of the day", {
|
|
template,
|
|
skip: true,
|
|
|
|
beforeEach() {
|
|
mockMomentTz("2019-12-11T13:00:00", this.currentUser._timezone);
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(exists("#tap_tile_later_today"), "it does have later today");
|
|
},
|
|
});
|
|
|
|
componentTest("prefills the custom reminder type date and time", {
|
|
template,
|
|
skip: true,
|
|
|
|
beforeEach() {
|
|
let name = "test";
|
|
let reminderAt = "2020-05-15T09:45:00";
|
|
this.model = { id: 1, name, reminderAt };
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(query("#bookmark-name").value, "test");
|
|
assert.equal(query("#custom-date > .date-picker").value, "2020-05-15");
|
|
assert.equal(query("#custom-time").value, "09:45");
|
|
},
|
|
});
|
|
|
|
componentTest("defaults to 08:00 for custom time", {
|
|
template,
|
|
skip: true,
|
|
|
|
async test(assert) {
|
|
await click("#tap_tile_custom");
|
|
assert.equal(query("#custom-time").value, "08:00");
|
|
},
|
|
});
|
|
});
|