From 1224879b1f09d73455e6de590672fa4fce7d2ef2 Mon Sep 17 00:00:00 2001 From: Chris-Blesson Date: Mon, 24 Oct 2022 23:19:17 +0530 Subject: [PATCH 1/2] [Issue-126] Disclosure component commit --- .../addon/components/disclosure.hbs | 9 +++ .../addon/components/disclosure.js | 15 +++++ .../addon/components/disclosure/button.hbs | 12 ++++ .../addon/components/disclosure/button.js | 19 ++++++ .../addon/components/disclosure/panel.hbs | 9 +++ .../addon/components/disclosure/panel.js | 10 +++ ember-headlessui/app/components/disclosure.js | 1 + .../app/components/disclosure/button.js | 1 + .../app/components/disclosure/panel.js | 1 + test-app/app/components/disclosure/basic.hbs | 61 +++++++++++++++++++ test-app/app/router.js | 4 ++ .../templates/disclosure/disclosure-basic.hbs | 1 + test-app/app/templates/index.hbs | 12 ++++ 13 files changed, 155 insertions(+) create mode 100644 ember-headlessui/addon/components/disclosure.hbs create mode 100644 ember-headlessui/addon/components/disclosure.js create mode 100644 ember-headlessui/addon/components/disclosure/button.hbs create mode 100644 ember-headlessui/addon/components/disclosure/button.js create mode 100644 ember-headlessui/addon/components/disclosure/panel.hbs create mode 100644 ember-headlessui/addon/components/disclosure/panel.js create mode 100644 ember-headlessui/app/components/disclosure.js create mode 100644 ember-headlessui/app/components/disclosure/button.js create mode 100644 ember-headlessui/app/components/disclosure/panel.js create mode 100644 test-app/app/components/disclosure/basic.hbs create mode 100644 test-app/app/templates/disclosure/disclosure-basic.hbs diff --git a/ember-headlessui/addon/components/disclosure.hbs b/ember-headlessui/addon/components/disclosure.hbs new file mode 100644 index 00000000..4da3fe3e --- /dev/null +++ b/ember-headlessui/addon/components/disclosure.hbs @@ -0,0 +1,9 @@ +{{yield + (hash + isOpen=this.isOpen + Button=(component + 'disclosure/button' toggleState=this.toggleState isOpen=this.isOpen + ) + Panel=(component 'disclosure/panel' isOpen=this.isOpen) + ) +}} \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure.js b/ember-headlessui/addon/components/disclosure.js new file mode 100644 index 00000000..48bb804c --- /dev/null +++ b/ember-headlessui/addon/components/disclosure.js @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; + +export default class Disclosure extends Component { + + @tracked isOpen = false; + + @action + toggleState(){ + this.isOpen = !this.isOpen; + } + +} \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/button.hbs b/ember-headlessui/addon/components/disclosure/button.hbs new file mode 100644 index 00000000..88b0d72f --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/button.hbs @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/button.js b/ember-headlessui/addon/components/disclosure/button.js new file mode 100644 index 00000000..f1cda36a --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/button.js @@ -0,0 +1,19 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { guidFor } from '@ember/object/internals'; + + +export default class Button extends Component { + guid = `${guidFor(this)}-tailwindui-disclosure-button`; + + + get itemsGuid() { + return `${this.guid}-items`; + } + + get buttonGuid() { + return `${this.guid}-button`; + } +} \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/panel.hbs b/ember-headlessui/addon/components/disclosure/panel.hbs new file mode 100644 index 00000000..a9aa7f69 --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/panel.hbs @@ -0,0 +1,9 @@ +{{#if @isOpen}} +
+ {{yield}} +
+{{/if}} \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/panel.js b/ember-headlessui/addon/components/disclosure/panel.js new file mode 100644 index 00000000..d3a26d4d --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/panel.js @@ -0,0 +1,10 @@ +import Component from '@glimmer/component'; + +import { tracked } from '@glimmer/tracking'; +import { guidFor } from '@ember/object/internals'; + +export default class Panel extends Component { + panelGuid = `${guidFor(this)}-tailwindui-disclosure-panel`; + + @tracked isOpen = false; +} \ No newline at end of file diff --git a/ember-headlessui/app/components/disclosure.js b/ember-headlessui/app/components/disclosure.js new file mode 100644 index 00000000..3a68d28b --- /dev/null +++ b/ember-headlessui/app/components/disclosure.js @@ -0,0 +1 @@ +export { default } from 'ember-headlessui/components/disclosure'; \ No newline at end of file diff --git a/ember-headlessui/app/components/disclosure/button.js b/ember-headlessui/app/components/disclosure/button.js new file mode 100644 index 00000000..0f544419 --- /dev/null +++ b/ember-headlessui/app/components/disclosure/button.js @@ -0,0 +1 @@ +export { default } from 'ember-headlessui/components/disclosure/button'; \ No newline at end of file diff --git a/ember-headlessui/app/components/disclosure/panel.js b/ember-headlessui/app/components/disclosure/panel.js new file mode 100644 index 00000000..0a854264 --- /dev/null +++ b/ember-headlessui/app/components/disclosure/panel.js @@ -0,0 +1 @@ +export { default } from 'ember-headlessui/components/disclosure/panel'; \ No newline at end of file diff --git a/test-app/app/components/disclosure/basic.hbs b/test-app/app/components/disclosure/basic.hbs new file mode 100644 index 00000000..62a73acb --- /dev/null +++ b/test-app/app/components/disclosure/basic.hbs @@ -0,0 +1,61 @@ +
+
+ + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No. + + + +
+
\ No newline at end of file diff --git a/test-app/app/router.js b/test-app/app/router.js index db98b07e..3be33381 100644 --- a/test-app/app/router.js +++ b/test-app/app/router.js @@ -35,4 +35,8 @@ Router.map(function () { this.route('radio-group', function () { this.route('radio-group-basic'); }); + + this.route('disclosure', function () { + this.route('disclosure-basic'); + }); }); diff --git a/test-app/app/templates/disclosure/disclosure-basic.hbs b/test-app/app/templates/disclosure/disclosure-basic.hbs new file mode 100644 index 00000000..8f60f4cc --- /dev/null +++ b/test-app/app/templates/disclosure/disclosure-basic.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs index 72e0c3b9..db55995f 100644 --- a/test-app/app/templates/index.hbs +++ b/test-app/app/templates/index.hbs @@ -105,6 +105,18 @@ +
  • +

    + Disclosure +

    +
      +
    • + + Disclosure (basic) + +
      • +
    +
    • From 1b6b0bdc19fcea94ea81f09165f57e4acdea7e08 Mon Sep 17 00:00:00 2001 From: Chris-Blesson Date: Tue, 25 Oct 2022 00:14:46 +0530 Subject: [PATCH 2/2] [Issue-126] Test cases commit --- .../addon/components/disclosure.hbs | 21 ++- .../integration/components/disclosure-test.js | 170 ++++++++++++++++++ 2 files changed, 183 insertions(+), 8 deletions(-) create mode 100644 test-app/tests/integration/components/disclosure-test.js diff --git a/ember-headlessui/addon/components/disclosure.hbs b/ember-headlessui/addon/components/disclosure.hbs index 4da3fe3e..fbd3a92a 100644 --- a/ember-headlessui/addon/components/disclosure.hbs +++ b/ember-headlessui/addon/components/disclosure.hbs @@ -1,9 +1,14 @@ -{{yield - (hash - isOpen=this.isOpen - Button=(component - 'disclosure/button' toggleState=this.toggleState isOpen=this.isOpen +
    + {{yield + (hash + isOpen=this.isOpen + Button=(component + 'disclosure/button' toggleState=this.toggleState isOpen=this.isOpen + ) + Panel=(component 'disclosure/panel' isOpen=this.isOpen) ) - Panel=(component 'disclosure/panel' isOpen=this.isOpen) - ) -}} \ No newline at end of file + }} +
    \ No newline at end of file diff --git a/test-app/tests/integration/components/disclosure-test.js b/test-app/tests/integration/components/disclosure-test.js new file mode 100644 index 00000000..86375973 --- /dev/null +++ b/test-app/tests/integration/components/disclosure-test.js @@ -0,0 +1,170 @@ +import { hbs } from 'ember-cli-htmlbars'; +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { click, render} from '@ember/test-helpers'; + +module('Integration | Component | ', (hooks) => { + setupRenderingTest(hooks); + + test('it should render disclosure component', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + `); + assert.dom('[data-test-ember-headlessui-disclosure-wrapper]').exists(); + }); + + test('it should render disclosure component titles', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No + + + + `); + assert.dom('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]').hasText('What is your refund policy?') + assert.dom('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]').hasText('Do you provide technical support ?') + }); + + test('it should render disclosure component panel description', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No + + + + `); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]'); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').hasText(`If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked.`); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').hasText('No'); + }); + + test('check the toggle for disclosure component', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No + + + + `); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').doesNotExist(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').exists(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').exists(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').exists(); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').doesNotExist(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').doesNotExist(); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').doesNotExist(); + }); +}); \ No newline at end of file