DEV: add test for wizard last step and some minor optimizations (#17752)

app/assets/javascripts/discourse/tests/acceptance/wizard-test.js

@@ -1,5 +1,11 @@
 import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
-import { click, currentRouteName, fillIn, visit } from "@ember/test-helpers";
+import {
+  click,
+  currentRouteName,
+  currentURL,
+  fillIn,
+  visit,
+} from "@ember/test-helpers";
 import { test } from "qunit";
 
 acceptance("Wizard", function (needs) {
@@ -54,7 +60,7 @@ acceptance("Wizard", function (needs) {
 
     await click(".wizard-container__button.next");
     assert.ok(
-      exists(".dropdown-field.dropdown-snack"),
+      exists(".wizard-container__text-input#company_name"),
       "went to the next step"
     );
     assert.ok(
@@ -67,14 +73,38 @@ acceptance("Wizard", function (needs) {
     );
     assert.ok(exists(".wizard-container__link.back"), "shows the back button");
     assert.ok(!exists(".wizard-container__step-title"));
+    assert.ok(
+      !exists(".wizard-container__button.next"),
+      "does not show next button"
+    );
     assert.ok(
       !exists(".wizard-container__button.finish"),
       "cannot finish on last step"
     );
 
     await click(".wizard-container__link.back");
-    assert.ok(exists(".wizard-container__step-title"));
-    assert.ok(exists(".wizard-container__button.next"));
-    assert.ok(!exists(".wizard-prev"));
+    assert.ok(exists(".wizard-container__step-title"), "shows the step title");
+    assert.ok(
+      exists(".wizard-container__button.next"),
+      "shows the next button"
+    );
+    await click(".wizard-container__button.next");
+
+    // server validation fail
+    await fillIn("input#company_name", "Server Fail");
+    await click(".wizard-container__button.jump-in");
+    assert.ok(
+      exists(".invalid #company_name"),
+      "highlights the field with error"
+    );
+    assert.ok(exists(".wizard-container__field .error"), "shows the error");
+
+    await fillIn("input#company_name", "Foo Bar");
+    await click(".wizard-container__button.jump-in");
+    assert.strictEqual(
+      currentURL(),
+      "/latest",
+      "it should transition to the homepage"
+    );
   });
 });

app/assets/javascripts/wizard/addon/components/wizard-step.js

@@ -5,10 +5,12 @@ import getUrl from "discourse-common/lib/get-url";
 import { htmlSafe } from "@ember/template";
 import { schedule } from "@ember/runloop";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 
 const alreadyWarned = {};
 
 export default Component.extend({
+  router: service(),
   classNameBindings: [":wizard-container__step", "stepClass"],
   saving: null,
 
@@ -133,7 +135,7 @@ export default Component.extend({
 
   @action
   quit() {
-    document.location = getUrl("/");
+    this.router.transitionTo("discovery.latest");
   },
 
   @action
@@ -146,7 +148,7 @@ export default Component.extend({
 
       step
         .save()
-        .then(() => this.send("quit"))
+        .then((response) => this.goNext(response))
         .finally(() => this.set("saving", false));
     } else {
       this.autoFocus();

app/assets/javascripts/wizard/addon/controllers/wizard-step.js

@@ -12,8 +12,10 @@ export default Controller.extend({
 
     if (response?.refresh_required) {
       document.location = getUrl(`/wizard/steps/${next}`);
-    } else if (response?.success) {
+    } else if (response?.success && next) {
       this.transitionToRoute("wizard.step", next);
+    } else if (response?.success) {
+      this.transitionToRoute("discovery.latest");
     }
   },
 

app/assets/javascripts/wizard/addon/test-helpers/wizard-pretender.js

@@ -26,7 +26,7 @@ export default function (helpers) {
             id: "styling",
             title: "Second step",
             index: 1,
-            fields: [{ id: "some-title", type: "text" }],
+            fields: [{ id: "some_title", type: "text" }],
             previous: "hello-world",
             next: "corporate",
           },
@@ -34,9 +34,8 @@ export default function (helpers) {
             id: "corporate",
             index: 2,
             fields: [
-              { id: "snack", type: "dropdown", required: true },
-              { id: "theme-preview", type: "component" },
-              { id: "an-image", type: "image" },
+              { id: "company_name", type: "text", required: true },
+              { id: "theme_preview", type: "component" },
             ],
             previous: "styling",
           },
@@ -52,6 +51,12 @@ export default function (helpers) {
       return response(422, {
         errors: [{ field: "full_name", description: "Invalid name" }],
       });
+    } else if (body.fields.company_name === "Server Fail") {
+      return response(422, {
+        errors: [
+          { field: "company_name", description: "Invalid company name" },
+        ],
+      });
     } else {
       return response(200, { success: true });
     }