2020-11-13 05:40:28 +08:00
|
|
|
|
import { currentRouteName, visit } from "@ember/test-helpers";
|
2020-10-07 00:54:05 +08:00
|
|
|
|
import { module, test } from "qunit";
|
2019-10-30 21:48:24 +08:00
|
|
|
|
import { run } from "@ember/runloop";
|
2016-09-14 03:14:17 +08:00
|
|
|
|
import startApp from "wizard/test/helpers/start-app";
|
|
|
|
|
|
|
|
|
|
var wizard;
|
2020-10-07 00:54:05 +08:00
|
|
|
|
module("Acceptance: wizard", {
|
2016-09-14 03:14:17 +08:00
|
|
|
|
beforeEach() {
|
|
|
|
|
wizard = startApp();
|
|
|
|
|
},
|
|
|
|
|
|
2017-06-15 01:57:58 +08:00
|
|
|
|
afterEach() {
|
2019-10-30 21:48:24 +08:00
|
|
|
|
run(wizard, "destroy");
|
2016-09-14 03:14:17 +08:00
|
|
|
|
},
|
|
|
|
|
});
|
2016-08-25 02:35:07 +08:00
|
|
|
|
|
2020-10-28 02:54:38 +08:00
|
|
|
|
function exists(selector) {
|
|
|
|
|
return document.querySelector(selector) !== null;
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-31 00:37:32 +08:00
|
|
|
|
test("Wizard starts", async function (assert) {
|
2018-07-30 04:51:32 +08:00
|
|
|
|
await visit("/");
|
|
|
|
|
assert.ok(exists(".wizard-column-contents"));
|
2020-11-13 05:40:28 +08:00
|
|
|
|
assert.equal(currentRouteName(), "step");
|
2016-08-26 01:14:56 +08:00
|
|
|
|
});
|
|
|
|
|
|
2020-10-31 00:37:32 +08:00
|
|
|
|
test("Going back and forth in steps", async function (assert) {
|
2018-07-30 04:51:32 +08:00
|
|
|
|
await visit("/steps/hello-world");
|
|
|
|
|
assert.ok(exists(".wizard-step"));
|
|
|
|
|
assert.ok(
|
|
|
|
|
exists(".wizard-step-hello-world"),
|
|
|
|
|
"it adds a class for the step id"
|
|
|
|
|
);
|
2018-11-16 03:44:19 +08:00
|
|
|
|
assert.ok(!exists(".wizard-btn.finish"), "can’t finish on first step");
|
2018-07-30 04:51:32 +08:00
|
|
|
|
assert.ok(exists(".wizard-progress"));
|
|
|
|
|
assert.ok(exists(".wizard-step-title"));
|
|
|
|
|
assert.ok(exists(".wizard-step-description"));
|
|
|
|
|
assert.ok(
|
|
|
|
|
!exists(".invalid .field-full-name"),
|
|
|
|
|
"don't show it as invalid until the user does something"
|
|
|
|
|
);
|
|
|
|
|
assert.ok(exists(".wizard-field .field-description"));
|
|
|
|
|
assert.ok(!exists(".wizard-btn.back"));
|
|
|
|
|
assert.ok(!exists(".wizard-field .field-error-description"));
|
2016-08-26 01:14:56 +08:00
|
|
|
|
|
|
|
|
|
// invalid data
|
2018-07-30 04:51:32 +08:00
|
|
|
|
await click(".wizard-btn.next");
|
|
|
|
|
assert.ok(exists(".invalid .field-full-name"));
|
2016-08-26 01:14:56 +08:00
|
|
|
|
|
|
|
|
|
// server validation fail
|
2018-07-30 04:51:32 +08:00
|
|
|
|
await fillIn("input.field-full-name", "Server Fail");
|
|
|
|
|
await click(".wizard-btn.next");
|
|
|
|
|
assert.ok(exists(".invalid .field-full-name"));
|
|
|
|
|
assert.ok(exists(".wizard-field .field-error-description"));
|
2016-08-26 01:14:56 +08:00
|
|
|
|
|
|
|
|
|
// server validation ok
|
2018-07-30 04:51:32 +08:00
|
|
|
|
await fillIn("input.field-full-name", "Evil Trout");
|
|
|
|
|
await click(".wizard-btn.next");
|
|
|
|
|
assert.ok(!exists(".wizard-field .field-error-description"));
|
|
|
|
|
assert.ok(!exists(".wizard-step-description"));
|
2018-11-16 03:44:19 +08:00
|
|
|
|
assert.ok(
|
|
|
|
|
exists(".wizard-btn.finish"),
|
|
|
|
|
"shows finish on an intermediate step"
|
|
|
|
|
);
|
2016-09-02 23:42:14 +08:00
|
|
|
|
|
2018-11-16 03:44:19 +08:00
|
|
|
|
await click(".wizard-btn.next");
|
2018-07-30 04:51:32 +08:00
|
|
|
|
assert.ok(exists(".select-kit.field-snack"), "went to the next step");
|
|
|
|
|
assert.ok(exists(".preview-area"), "renders the component field");
|
|
|
|
|
assert.ok(exists(".wizard-btn.done"), "last step shows a done button");
|
|
|
|
|
assert.ok(exists(".action-link.back"), "shows the back button");
|
2018-11-16 03:44:19 +08:00
|
|
|
|
assert.ok(!exists(".wizard-step-title"));
|
|
|
|
|
assert.ok(!exists(".wizard-btn.finish"), "can’t finish on last step");
|
2016-08-26 01:14:56 +08:00
|
|
|
|
|
2018-07-30 04:51:32 +08:00
|
|
|
|
await click(".action-link.back");
|
|
|
|
|
assert.ok(exists(".wizard-step-title"));
|
|
|
|
|
assert.ok(exists(".wizard-btn.next"));
|
|
|
|
|
assert.ok(!exists(".wizard-prev"));
|
2016-08-25 02:35:07 +08:00
|
|
|
|
});
|