mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 12:45:09 +08:00
a17d54d0bf
Using arrow functions changes `this` context, which is undesired in tests, e.g. it makes it impossible to setup things like pretender (`this.server`) in `beforeEach` hooks. Ember guides always use classic functions in examples (e.g. https://guides.emberjs.com/release/testing/test-types/), and that's what it uses in its own test suite, as do various addons and ember apps. It was also already used in Discourse where `this` was required. Moving forward, it will be needed in more places as we migrate toward ember-cli. (I might later add a custom rule to eslint-discourse-ember to enforce this)
79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
import { test, module } from "qunit";
|
||
import { run } from "@ember/runloop";
|
||
import startApp from "wizard/test/helpers/start-app";
|
||
import { visit } from "@ember/test-helpers";
|
||
|
||
var wizard;
|
||
module("Acceptance: wizard", {
|
||
beforeEach() {
|
||
wizard = startApp();
|
||
},
|
||
|
||
afterEach() {
|
||
run(wizard, "destroy");
|
||
},
|
||
});
|
||
|
||
function exists(selector) {
|
||
return document.querySelector(selector) !== null;
|
||
}
|
||
|
||
test("Wizard starts", async function (assert) {
|
||
await visit("/");
|
||
assert.ok(exists(".wizard-column-contents"));
|
||
assert.equal(currentPath(), "step");
|
||
});
|
||
|
||
test("Going back and forth in steps", async function (assert) {
|
||
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"
|
||
);
|
||
assert.ok(!exists(".wizard-btn.finish"), "can’t finish on first step");
|
||
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"));
|
||
|
||
// invalid data
|
||
await click(".wizard-btn.next");
|
||
assert.ok(exists(".invalid .field-full-name"));
|
||
|
||
// server validation fail
|
||
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"));
|
||
|
||
// server validation ok
|
||
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"));
|
||
assert.ok(
|
||
exists(".wizard-btn.finish"),
|
||
"shows finish on an intermediate step"
|
||
);
|
||
|
||
await click(".wizard-btn.next");
|
||
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");
|
||
assert.ok(!exists(".wizard-step-title"));
|
||
assert.ok(!exists(".wizard-btn.finish"), "can’t finish on last step");
|
||
|
||
await click(".action-link.back");
|
||
assert.ok(exists(".wizard-step-title"));
|
||
assert.ok(exists(".wizard-btn.next"));
|
||
assert.ok(!exists(".wizard-prev"));
|
||
});
|