DEV: Update the RepoStatus test

assets/javascripts/discourse/components/repo-status.hbs

@@ -51,18 +51,12 @@
           </li>
         </ul>
 
-        <LinkTo
+        <DButton
-          @route="upgrade.show"
+          @action={{this.upgrade}}
-          @model={{@repo}}
+          @disabled={{this.upgradeDisabled}}
-          disabled={{this.upgradeDisabled}}
+          @class="upgrade-button"
-          class="upgrade-button btn"
+          @translatedLabel={{this.upgradeButtonLabel}}
-        >
+        />
-          {{#if @repo.upgrading}}
-            Currently Upgrading...
-          {{else}}
-            Upgrade
-          {{/if}}
-        </LinkTo>
       </div>
     {{/if}}
   </td>

assets/javascripts/discourse/components/repo-status.js

@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
 
 export default class RepoStatus extends Component {
   @service router;
@@ -34,4 +35,17 @@ export default class RepoStatus extends Component {
       return "Official Plugin";
     }
   }
+
+  get upgradeButtonLabel() {
+    if (this.args.repo.upgrading) {
+      return "Currently Upgrading…";
+    } else {
+      return "Upgrade";
+    }
+  }
+
+  @action
+  upgrade() {
+    this.router.transitionTo("upgrade.show", this.args.repo);
+  }
 }

assets/javascripts/discourse/models/repo.js

@@ -26,8 +26,18 @@ export default class Repo {
   @tracked url = null;
   @tracked upgrading = false;
 
-  constructor(attributes) {
+  constructor(attributes = {}) {
+    if (attributes.latest) {
+      for (const [key, value] of Object.entries(attributes.latest)) {
+        this.latest[key] = value;
+      }
+    }
+
     for (const [key, value] of Object.entries(attributes)) {
+      if (key === "latest") {
+        continue;
+      }
+
       this[key] = value;
     }
   }

test/javascripts/integration/components/repo-status-test.js

@@ -1,10 +1,12 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { find, render } from "@ember/test-helpers";
+import { render, settled } from "@ember/test-helpers";
 import hbs from "htmlbars-inline-precompile";
 import Repo from "discourse/plugins/docker_manager/discourse/models/repo";
+import { query } from "discourse/tests/helpers/qunit-helpers";
 
-const repoObject = new Repo({
+const repoProps = {
+  unloaded: false,
   branch: "origin/main",
   id: "discourse",
   name: "discourse",
@@ -20,9 +22,10 @@ const repoObject = new Repo({
     pretty_version: "v2.2.0.beta6 +101",
     version: "2b006c0",
   },
-});
+};
 
-const managerRepo = new Repo({
+const managerProps = {
+  unloaded: false,
   branch: "origin/main",
   id: "docker_manager",
   name: "docker_manager",
@@ -38,81 +41,102 @@ const managerRepo = new Repo({
     pretty_version: null,
     version: "0b1fb4b",
   },
-});
+};
 
-module("Integration | Component | repo-status", function (hooks) {
+module("Integration | Component | RepoStatus", function (hooks) {
   setupRenderingTest(hooks);
 
   test("it renders correctly", async function (assert) {
-    this.set("repo", repoObject);
+    this.set("repo", new Repo(repoProps));
-    this.set("managerRepo", managerRepo);
+    this.set("managerRepo", new Repo(managerProps));
-    await render(hbs`{{repo-status repo=repo managerRepo=managerRepo}}`);
 
-    assert.equal(
+    await render(
-      find("span.current.commit-hash").textContent.trim(),
+      hbs`<RepoStatus @repo={{this.repo}} @managerRepo={{this.managerRepo}} />`
-      "v2.2.0.beta6 +98",
-      "tag version is used when present"
-    );
-    assert.equal(
-      find("span.new.commit-hash").textContent.trim(),
-      "v2.2.0.beta6 +101",
-      "tag version is used when present"
     );
 
-    assert.equal(
+    assert
-      find("li.new-commits a").textContent.trim(),
+      .dom("span.current.commit-hash")
-      "3 new commits",
+      .hasText("v2.2.0.beta6 +98", "tag version is used when present");
-      "shows number of new commits"
+    assert
-    );
+      .dom("span.new.commit-hash")
-    assert.equal(
+      .hasText("v2.2.0.beta6 +101", "tag version is used when present");
-      find("li.new-commits a").href.trim(),
+
+    assert
+      .dom("li.new-commits a")
+      .hasText("3 new commits", "shows number of new commits");
+    assert.strictEqual(
+      query("li.new-commits a").href.trim(),
       "https://github.com/discourse/discourse/compare/8f65e4f...2b006c0",
       "links to GitHub diff page"
     );
 
-    this.set("repo.pretty_version", null);
+    this.repo.pretty_version = null;
-    this.set("repo.latest.pretty_version", null);
+    this.repo.latest.pretty_version = null;
+    await settled();
 
-    assert.equal(
+    assert.strictEqual(
-      find("span.current.commit-hash").textContent.trim(),
+      query("span.current.commit-hash").textContent.trim(),
       "8f65e4f",
       "commit hash is used when tag version is absent"
     );
-    assert.equal(
+    assert.strictEqual(
-      find("span.new.commit-hash").textContent.trim(),
+      query("span.new.commit-hash").textContent.trim(),
       "2b006c0",
       "commit hash is used when tag version is absent"
     );
+  });
+
+  test("official check mark", async function (assert) {
+    this.set("repo", new Repo(repoProps));
+    this.set("managerRepo", new Repo(managerProps));
+
+    await render(
+      hbs`<RepoStatus @repo={{this.repo}} @managerRepo={{this.managerRepo}} />`
+    );
 
     assert
-      .dom("img.check-circle")
+      .dom("svg.d-icon-check-circle")
       .doesNotExist("green check is absent when not official");
-    this.set("repo.official", true);
+
+    this.repo.official = true;
+    await settled();
+
     assert
-      .dom("img.check-circle")
+      .dom("svg.d-icon-check-circle")
       .exists("green check is present when official");
+  });
 
-    assert
+  test("upgrade button", async function (assert) {
-      .dom("button.upgrade-button")
+    this.set("repo", new Repo(repoProps));
-      .exists("upgrade button is visible when plugin is out-of-date");
+    this.set("managerRepo", new Repo(managerProps));
 
-    assert.equal(
+    await render(
-      find("button.upgrade-button").disabled,
+      hbs`<RepoStatus @repo={{this.repo}} @managerRepo={{this.managerRepo}} />`
-      false,
-      "upgrade button is not disabled when docker_manager repo is up-to-date"
-    );
-    this.set("managerRepo.upToDate", false);
-    assert.equal(
-      find("button.upgrade-button").disabled,
-      true,
-      "upgrade button is disabled when docker_manager repo is out-of-date"
     );
 
-    this.set("repo.latest.commits_behind", 0);
-    this.set("repo.version", "2b006c0");
-    this.set("repo.pretty_version", "v2.2.0.beta6 +101");
     assert
-      .dom("button.upgrade-button")
+      .dom(".upgrade-button")
+      .exists("upgrade button is visible when plugin is out-of-date")
+      .isNotDisabled(
+        "upgrade button is not disabled when docker_manager repo is out-of-date"
+      );
+
+    this.managerRepo.version = "022aa3a";
+    await settled();
+
+    assert
+      .dom(".upgrade-button")
+      .isDisabled(
+        "upgrade button is disabled when docker_manager repo is not up-to-date"
+      );
+
+    this.repo.latest.commits_behind = 0;
+    this.repo.version = "2b006c0";
+    this.repo.pretty_version = "v2.2.0.beta6 +101";
+    await settled();
+
+    assert
+      .dom(".upgrade-button")
       .doesNotExist("upgrade button is not visible when plugin is up-to-date");
   });
 });