test: 💍 add icon only button tests

addons/rose/addon/components/rose/button.js

@@ -11,5 +11,5 @@ import layout from '../../templates/components/rose/button';
 export default Component.extend({
   layout,
 
-  tagName: ''
+  tagName: '',
 });

addons/rose/addon/templates/components/rose/button.hbs

@@ -21,7 +21,6 @@
     <Rose::Icon
       @name={{@iconOnly}}
       @size="medium"
-      class="rose-button-icon-only"
     />
   {{/if}}
 

addons/rose/stories/button.stories.js

@@ -11,6 +11,7 @@ const icons = {
   'alert-circle-fill': 'alert-circle-fill',
   'chevron-right': 'chevron-right',
   'copy-action': 'copy-action',
+  'lock-closed': 'lock-closed',
 };
 
 export const Normal = () => ({
@@ -44,7 +45,7 @@ export const Normal = () => ({
     iconLeft: select('iconLeft', icons, 'copy-action'),
     iconRight: select('iconRight', icons, 'chevron-right'),
     onClick: action('clicked'),
-  }
+  },
 });
 
 export const IconOnly = () => ({
@@ -56,12 +57,12 @@ export const IconOnly = () => ({
     <Rose::Button
       @style="secondary"
       @iconOnly={{iconOnly}}
-      >
+    >
       {{text}}
     </Rose::Button>
   `,
   context: {
     text: text('text', 'Button'),
-    iconOnly: select('iconOnly', icons, 'copy-action'),
-  }
+    iconOnly: select('iconOnly', icons, 'lock-closed'),
+  },
 });

addons/rose/tests/integration/components/rose/button-test.js

@@ -39,4 +39,10 @@ module('Integration | Component | rose/button', function (hooks) {
     await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
     assert.ok(find('.rose-button-icon-right'));
   });
+
+  test('it supports an icon-only type', async function (assert) {
+    await render(hbs`<Rose::Button @iconOnly="chevron-left" />`);
+    assert.ok(find('.rose-button-icon-only'));
+    assert.ok(find('.rose-button-icon-only .rose-icon'));
+  });
 });