feat(linked-item): yield active state of item component

adfinis · Jan 24, 2022 · b28d06a · b28d06a
1 parent df8e06c
commit b28d06a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/addon/components/-private/linked-list-item.hbs b/addon/components/-private/linked-list-item.hbs
@@ -5,5 +5,5 @@
   }}
   ...attributes
 >
-  <a href={{@href}} {{on "click" this.navigate}}>{{yield}}</a>
+  <a href={{@href}} {{on "click" this.navigate}}>{{yield this.active}}</a>
 </li>
diff --git a/tests/integration/components/uk-subnav/item-test.js b/tests/integration/components/uk-subnav/item-test.js
@@ -55,4 +55,22 @@ module("Integration | Component | uk subnav/item", function (hooks) {
 
     assert.verifySteps(["navigate"]);
   });
+
+  test("yields the active state", async function (assert) {
+    assert.expect(2);
+
+    this.owner.lookup("service:router").isActive = () => false;
+    await render(
+      hbs`<UkSubnav::Item @href="/" as |active|>{{unless active "not "}}active</UkSubnav::Item>`
+    );
+
+    assert.dom("a").hasText("not active");
+
+    this.owner.lookup("service:router").isActive = () => true;
+    await render(
+      hbs`<UkSubnav::Item @href="/" as |active|>{{unless active "not "}}active</UkSubav::Item>`
+    );
+
+    assert.dom("a").hasText("active");
+  });
 });
diff --git a/tests/integration/components/uk-tab/item-test.js b/tests/integration/components/uk-tab/item-test.js
@@ -52,4 +52,22 @@ module("Integration | Component | uk tab/item", function (hooks) {
 
     assert.verifySteps(["navigate"]);
   });
+
+  test("yields the active state", async function (assert) {
+    assert.expect(2);
+
+    this.owner.lookup("service:router").isActive = () => false;
+    await render(
+      hbs`<UkTab::Item @href="/" as |active|>{{unless active "not "}}active</UkTab::Item>`
+    );
+
+    assert.dom("a").hasText("not active");
+
+    this.owner.lookup("service:router").isActive = () => true;
+    await render(
+      hbs`<UkTab::Item @href="/" as |active|>{{unless active "not "}}active</UkTab::Item>`
+    );
+
+    assert.dom("a").hasText("active");
+  });
 });