test(omiu): button test finish

components/button/package.json

@@ -16,7 +16,8 @@
     "docs": "node ./scripts/docs-gen.js",
     "start": "node ./scripts/webpack.build.js -- demo",
     "build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js",
-    "test": "web-test-runner \"test/*.test.js\" --node-resolve"
+    "test": "web-test-runner \"test/*.test.js\" --node-resolve",
+    "test:watch": "web-test-runner \"test/*.test.js\" --node-resolve --watch"
   },
   "typings": "./dist/index.d.ts",
   "repository": {
@@ -71,6 +72,7 @@
     "rollup-plugin-scss": "^2.4.0",
     "rollup-plugin-typescript": "^1.0.1",
     "sass-loader": "^7.1.0",
+    "sinon": "^11.1.1",
     "style-loader": "^0.23.1",
     "to-string-loader": "^1.1.5",
     "ts-loader": "^5.4.4",

components/button/test/button.test.js

@@ -1,20 +1,86 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect } from '@open-wc/testing'
 
-import '../src/index.esm.js';
+import '../src/index.esm.js'
 
-describe('button testing', () => {
-    it('Test Button innerText', async () => {
-        const el = await fixture(html`
-      <o-button>Default</o-button>
-    `);
-        console.log(el.innerText);
-        expect(el.innerText).to.equal('Default');
-    });
+const defaultProps = {
+  plain: false,
+  round: false,
+  circle: false,
+  loading: false,
+  disabled: false,
+  autofocus: false,
+  nativeType: 'button',
+  block: false,
+}
 
-    it('Test Button Click', async () => {
-        const el = await fixture(html`
-      <o-button>Default</o-button>
-    `);
-        el.shadowRoot.querySelector('button').click();
-    });
-});
+describe('Testing o-button', () => {
+  it('tests button with default props', async () => {
+    const el = await fixture(html` <o-button>Default</o-button> `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(classList.includes('o-button')).to.be.true
+  })
+
+  it('tests setting type', async () => {
+    const el = await fixture(html`
+      <o-button type="primary">Primary</o-button>
+    `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(classList.includes('o-button-primary')).to.be.true
+  })
+
+  it('tests setting disabled', async () => {
+    const el = await fixture(html` <o-button disabled>Disabled</o-button> `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(button.getAttribute('disabled')).to.equal('')
+    expect(classList.includes('is-disabled')).to.be.true
+  })
+
+  it('tests setting plain', async () => {
+    const el = await fixture(html` <o-button plain>Plain</o-button> `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(classList.includes('is-plain')).to.be.true
+  })
+
+  it('tests setting size', async () => {
+    const el = await fixture(html` <o-button size="medium">Medium</o-button> `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(classList.includes('o-button-medium')).to.be.true
+  })
+
+  it('tests setting round', async () => {
+    const el = await fixture(html` <o-button round>Round</o-button> `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(classList.includes('is-round')).to.be.true
+  })
+
+  it('tests setting circle', async () => {
+    const el = await fixture(html` <o-button circle>Circle</o-button> `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(classList.includes('is-circle')).to.be.true
+  })
+
+  it('tests setting block', async () => {
+    const el = await fixture(html` <o-button block>Block</o-button> `)
+    const button = el.shadowRoot.querySelector('button')
+    const classList = button.getAttribute('class').split(' ')
+    expect(classList.includes('is-block')).to.be.true
+  })
+
+  it('tests setting loading', async () => {
+    const el = await fixture(html` <o-button loading>Loading</o-button> `)
+    const svg = el.shadowRoot.querySelector('svg')
+    expect(svg).to.not.be.null
+  })
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture(html` <o-button></o-button> `)
+    expect(el).shadowDom.to.be.accessible()
+  })
+})