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); }); });