Merge pull request #12 from mugijiru/accept-action

addon/components/mg-button.hbs

@@ -1,3 +1,3 @@
-<button type="button" class={{this.classNamesString}} disabled={{this.disabled}}>
+<button type="button" class={{this.classNamesString}} disabled={{this.disabled}} {{on "click" this.click}}>
   {{this.text}}
 </button>

addon/components/mg-button.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component'
+import { action } from '@ember/object';
 
 export default class MgButton extends Component {
   get disabled() {
@@ -24,4 +25,13 @@ export default class MgButton extends Component {
 
     return classList.join(' ')
   }
+
+  @action
+  click () {
+    const onClick = this.args.onClick
+    if (typeof onClick !== 'function') {
+      return;
+    }
+    onClick()
+  }
 }

addon/components/mg-checkbox.hbs

@@ -1 +1 @@
-<div class={{this.classNamesString}} />
+<div class={{this.classNamesString}} {{on "click" this.click}} />

addon/components/mg-checkbox.js

@@ -1,4 +1,5 @@
-import Component from '@glimmer/component';
+import Component from '@glimmer/component'
+import { action } from '@ember/object'
 
 export default class MgCheckbox extends Component {
   get checked () {
@@ -11,4 +12,11 @@ export default class MgCheckbox extends Component {
 
     return classList.join(' ')
   }
+
+  @action
+  click () {
+    const onClick = this.args.onClick
+    if (typeof onClick !== 'function') { return }
+    onClick()
+  }
 }

addon/components/mg-toggle-switch.hbs

@@ -1,4 +1,4 @@
-<div class={{this.classNamesString}}>
+<div class={{this.classNamesString}} {{on "click" this.click}}>
   <div class="c-toggle-switch__label">{{this.label}}</div>
   <span class="c-toggle-switch__off-label">{{this.offLabel}}</span>
   <div class="c-toggle-switch__switch"></div>

addon/components/mg-toggle-switch.js

@@ -1,4 +1,5 @@
-import Component from '@glimmer/component';
+import Component from '@glimmer/component'
+import { action } from '@ember/object'
 
 export default class MgToggleSwitch extends Component {
   get label () { return this.args.label ?? '' }
@@ -11,4 +12,11 @@ export default class MgToggleSwitch extends Component {
     if (this.enabled) { classList.push('c-toggle-switch--enabled') }
     return classList.join(' ')
   }
+
+  @action
+  click () {
+    const onClick = this.args.onClick
+    if (typeof onClick !== 'function') { return }
+    onClick()
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mugijiru/ember-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "The default blueprint for ember-cli addons.",
   "keywords": [
     "ember-addon"

tests/integration/components/mg-button-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | mg button', function(hooks) {
@@ -47,4 +47,17 @@ module('Integration | Component | mg button', function(hooks) {
 
     assert.dom('.btn').doesNotHaveClass('btn-danger');
   });
+
+  test('click すると外部から渡されたアクションが実行される', async function(assert) {
+    assert.expect(1)
+
+    this.set('clickAction', (actual) => {
+      const expected = null
+      assert.equal(actual, expected)
+    });
+
+    await render(hbs`<MgButton @onClick={{this.clickAction}} />`)
+
+    click('.btn')
+  })
 });

tests/integration/components/mg-checkbox-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | mg checkbox', function(hooks) {
@@ -16,4 +16,26 @@ module('Integration | Component | mg checkbox', function(hooks) {
     await render(hbs`{{mg-checkbox checked=true}}`);
     assert.dom('.c-checkbox').hasClass('c-checkbox--checked');
   });
+
+  test('checkedに渡された値が切り替わると表示も切り替わる', async function(assert) {
+    this.set('flag', false)
+    await render(hbs`<MgCheckbox @checked={{this.flag}} />`);
+    assert.dom('.c-checkbox').doesNotHaveClass('c-checkbox--checked');
+
+    this.set('flag', true)
+    assert.dom('.c-checkbox').hasClass('c-checkbox--checked');
+  });
+
+  test('click すると外部から渡されたアクションが実行される', async function(assert) {
+    assert.expect(1)
+
+    this.set('clickAction', (actual) => {
+      const expected = null
+      assert.equal(actual, expected)
+    });
+
+    await render(hbs`<MgCheckbox @onClick={{this.clickAction}} />`)
+
+    click('.c-checkbox')
+  })
 });

tests/integration/components/mg-toggle-switch-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | mg toggle-switch', function(hooks) {
@@ -37,4 +37,29 @@ module('Integration | Component | mg toggle-switch', function(hooks) {
 
     assert.dom('.c-toggle-switch').hasClass('c-toggle-switch--enabled');
   });
+
+  test('enabled が切り替わると表示も切り替わる', async function(assert) {
+    assert.expect(2)
+
+    this.set('flag', false)
+    await render(hbs`<MgToggleSwitch @enabled={{this.flag}} />`);
+
+    assert.dom('.c-toggle-switch').doesNotHaveClass('c-toggle-switch--enabled');
+
+    this.set('flag', true)
+    assert.dom('.c-toggle-switch').hasClass('c-toggle-switch--enabled');
+  });
+
+  test('click すると外部から渡されたアクションが実行される', async function(assert) {
+    assert.expect(1)
+
+    this.set('clickAction', (actual) => {
+      const expected = null
+      assert.equal(actual, expected)
+    });
+
+    await render(hbs`<MgToggleSwitch @onClick={{this.clickAction}} />`)
+
+    click('.c-toggle-switch')
+  })
 });