diff --git a/addon/components/x-tabs.js b/addon/components/x-tabs.js
index d7bc620..362905e 100644
--- a/addon/components/x-tabs.js
+++ b/addon/components/x-tabs.js
@@ -5,7 +5,7 @@ import { action } from "@ember/object";
export default class XTabsComponent extends Component {
@tracked
- activeName;
+ activeName = this.args.activeName;
@tracked
activeData;
diff --git a/tests/integration/components/x-tabs-pane-data-test.js b/tests/integration/components/x-tabs-pane-data-test.js
index 13265f5..dc738ae 100644
--- a/tests/integration/components/x-tabs-pane-data-test.js
+++ b/tests/integration/components/x-tabs-pane-data-test.js
@@ -16,15 +16,15 @@ module("Integration | Component | x-tabs-pane-data", function (hooks) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
- await render(hbs`{{x-tabs-pane-data}}`);
+ await render(hbs``);
assert.equal(page.text, "", "non-block form");
// Template block usage:
await render(hbs`
- {{#x-tabs-pane-data}}
+
template block text
- {{/x-tabs-pane-data}}
+
`);
assert.equal(page.text, "template block text", "Block form");
diff --git a/tests/integration/components/x-tabs-pane-test.js b/tests/integration/components/x-tabs-pane-test.js
index 40e898a..a54876a 100644
--- a/tests/integration/components/x-tabs-pane-test.js
+++ b/tests/integration/components/x-tabs-pane-test.js
@@ -18,15 +18,15 @@ module("Integration | Component | x-tabs-pane", function (hooks) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
- await render(hbs`{{x-tabs-pane}}`);
+ await render(hbs``);
assert.equal(page.text, "");
// Template block usage:
await render(hbs`
- {{#x-tabs-pane}}
+
template block text
- {{/x-tabs-pane}}
+
`);
assert.equal(page.text, "template block text");
diff --git a/tests/integration/components/x-tabs-panes-test.js b/tests/integration/components/x-tabs-panes-test.js
index 0060508..768479a 100644
--- a/tests/integration/components/x-tabs-panes-test.js
+++ b/tests/integration/components/x-tabs-panes-test.js
@@ -16,15 +16,15 @@ module("Integration | Component | x-tabs-panes", function (hooks) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
- await render(hbs`{{x-tabs-panes}}`);
+ await render(hbs``);
assert.equal(page.text, "");
// Template block usage:
await render(hbs`
- {{#x-tabs-panes}}
+
template block text
- {{/x-tabs-panes}}
+
`);
assert.equal(page.text, "template block text");
diff --git a/tests/integration/components/x-tabs-tab-test.js b/tests/integration/components/x-tabs-tab-test.js
index 91a501a..bf176a9 100644
--- a/tests/integration/components/x-tabs-tab-test.js
+++ b/tests/integration/components/x-tabs-tab-test.js
@@ -13,19 +13,19 @@ module("Integration | Component | x-tabs-tab", function (hooks) {
setupRenderingTest(hooks);
test("it renders", async function (assert) {
- this.set("api", {
+ this.api = {
selectAction: () => {},
- });
+ };
- await render(hbs`{{x-tabs-tab api=this.api}}`);
+ await render(hbs``);
assert.equal(page.text, "");
// Template block usage:
await render(hbs`
- {{#x-tabs-tab api=this.api}}
+
template block text
- {{/x-tabs-tab}}
+
`);
assert.equal(page.text, "template block text");
diff --git a/tests/integration/components/x-tabs-tabs-test.js b/tests/integration/components/x-tabs-tabs-test.js
index 7348d48..4a215dd 100644
--- a/tests/integration/components/x-tabs-tabs-test.js
+++ b/tests/integration/components/x-tabs-tabs-test.js
@@ -16,15 +16,15 @@ module("Integration | Component | x-tabs-tabs", function (hooks) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
- await render(hbs`{{x-tabs-tabs}}`);
+ await render(hbs``);
assert.equal(page.text, "");
// Template block usage:
await render(hbs`
- {{#x-tabs-tabs}}
+
template block text
- {{/x-tabs-tabs}}
+
`);
assert.equal(page.text, "template block text");
diff --git a/tests/integration/components/x-tabs-test.js b/tests/integration/components/x-tabs-test.js
index 5e6c52a..159dc99 100644
--- a/tests/integration/components/x-tabs-test.js
+++ b/tests/integration/components/x-tabs-test.js
@@ -1,6 +1,6 @@
import { module, test } from "qunit";
import { setupRenderingTest } from "ember-qunit";
-import { render } from "@ember/test-helpers";
+import { render, settled } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile";
import {
@@ -30,41 +30,45 @@ const page = create({
module("Integration | Component | x-tabs", function (hooks) {
setupRenderingTest(hooks);
- const homeTab = 0,
- archiveTab = 1;
-
hooks.beforeEach(async function () {
+ this.homeTab = 0;
+ this.homeName = "home";
+ this.archiveTab = 1;
+ this.archiveName = "archive";
+ });
+
+ async function renderTabs() {
await render(hbs`
- {{#x-tabs tab-style=tabStyle as | xt | }}
+
{{!-- tab content --}}
- {{#xt.tabs as | tabs |}}
- {{#tabs.tab name="home"}}
+
+
Home
- {{/tabs.tab}}
- {{#tabs.tab name="archive"}}
+
+
Archive
- {{/tabs.tab}}
- {{/xt.tabs}}
+
+
{{!-- tab content --}}
- {{#xt.panes as | panes |}}
- {{#panes.pane name="home"}}
+
+
Home
This is home content
- {{/panes.pane}}
- {{#panes.pane name="archive"}}
+
+
Archive
This is archive content
- {{/panes.pane}}
- {{/xt.panes}}
+
+
{{xt.activeName}}
-
- {{/x-tabs}}
+
+
`);
- });
+ }
function assertActiveTab(assert, tabIndex) {
assert.ok(page.tabs.objectAt(tabIndex).isCurrentTab, "tab is active");
@@ -82,30 +86,46 @@ module("Integration | Component | x-tabs", function (hooks) {
);
}
- test("it generates tab navigation", function (assert) {
+ test("it generates tab navigation", async function (assert) {
+ await renderTabs();
+
assert.equal(page.navCount, 1, "has tabs navigation");
assert.equal(page.tabs.length, 2, "has tabs navigation items");
assert.equal(
- page.tabs.objectAt(homeTab).text,
+ page.tabs.objectAt(this.homeTab).text,
"Home",
"navigation item shows pane title"
);
assert.equal(
- page.tabs.objectAt(archiveTab).text,
+ page.tabs.objectAt(this.archiveTab).text,
"Archive",
"navigation item shows pane title"
);
});
- test("first tab is active by default", function (assert) {
- assertActiveTab(assert, homeTab);
- assertInActiveTab(assert, archiveTab);
+ test("first tab is active by default", async function (assert) {
+ await renderTabs();
+
+ assertActiveTab(assert, this.homeTab);
+ assertInActiveTab(assert, this.archiveTab);
});
test("Selecting a tab displays correct pane", async function (assert) {
+ await renderTabs();
await page.switchClick();
- assertInActiveTab(assert, homeTab);
- assertActiveTab(assert, archiveTab);
+ assertInActiveTab(assert, this.homeTab);
+ assertActiveTab(assert, this.archiveTab);
+ });
+
+ test("Can set tab via activeName", async function (assert) {
+ this.activeTabName = this.archiveName;
+
+ await renderTabs();
+
+ await settled();
+
+ assertInActiveTab(assert, this.homeTab);
+ assertActiveTab(assert, this.archiveTab);
});
});