test(rounded): add test for rounded button #212

test/auro-button.test.js

@@ -5,7 +5,9 @@
 /* eslint-disable lit/attribute-value-entities */
 /* eslint-disable one-var */
 /* eslint-disable no-undef */
-import { fixture, html, expect } from '@open-wc/testing';
+import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
+import { AuroButton } from '../src/auro-button.js';
+import { registerComponent } from '../index.js';
 import '../index.js';
 
 describe('auro-button', () => {
@@ -30,6 +32,12 @@ describe('auro-button', () => {
     expect(classList.includes('auro-button')).to.be.true;
   });
 
+  it('successfully registers custom component', async () => {
+    registerComponent('test-button');
+
+    expect(typeof customElements.get('test-button')).to.equal(typeof AuroButton);
+  });
+
   it('tests setting autofocus', async () => {
     const el = await fixture(html`
       <auro-button autofocus>Click Me!</auro-button>
@@ -203,4 +211,22 @@ describe('auro-button', () => {
 
     await expect(el).to.be.true;
   });
+
+  it('toggleText attribute toggles value of iconOnly attribute', async () => {
+    const el = await fixture(html`
+      <auro-button rounded toggleText>
+        Primary
+        <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+      </auro-button>
+    `);
+
+    await expect(el.iconOnly).to.be.true;
+
+    const mouseoverEvent = new MouseEvent('mouseover', { bubbles: true });
+    el.dispatchEvent(mouseoverEvent);
+
+    await elementUpdated(el);
+
+    await expect(el.iconOnly).to.be.false;
+  });
 });