test(hx-disclosure): add component tests and sauce builds

Author: 100stacks

karma.sauce.config.js

@@ -2,43 +2,46 @@
 const { createDefaultConfig } = require('@open-wc/testing-karma');
 const merge = require('deepmerge');
 
-const customLaunchers = {
-	mac_firefox: {
-		base: 'SauceLabs',
-		browserName: 'firefox',
+/**
+ * SauceLabs supports up to 5 browsers per test run.
+ */
+const batches = {
+    mac_firefox: {
+        base: 'SauceLabs',
+        browserName: 'firefox',
         platform: 'OS X 10.13',
         version: 'latest-1'
-	},
-	mac_safari: {
-		base: 'SauceLabs',
-		browserName: 'safari',
+    },
+    mac_safari: {
+        base: 'SauceLabs',
+        browserName: 'safari',
         platform: 'OS X 10.13',
         version: 'latest-1'
-	},
-	mac_chrome: {
-		base: 'SauceLabs',
-		browserName: 'chrome',
+    },
+    mac_chrome: {
+        base: 'SauceLabs',
+        browserName: 'chrome',
         platform: 'OS X 10.13',
         version: 'latest-1'
-	},
-	win_edge_legacy: {
-		base: 'SauceLabs',
-		browserName: 'microsoftedge',
-		platform: 'Windows 10',
-		version: '18.17763'
+    },
+    win_edge_legacy: {
+        base: 'SauceLabs',
+        browserName: 'microsoftedge',
+        platform: 'Windows 10',
+        version: '18.17763'
     },
     win_10_ie_11: {
         base: 'SauceLabs',
         browserName: 'internet explorer',
         platform: 'Windows 10',
         version: '11.285',
     },
-	// win_edge_chromium: { // Current SL config only allows 5 browsers per test run
-	// 	base: 'SauceLabs',
-	// 	browserName: 'microsoftedge',
-	// 	platform: 'Windows 10',
-	// 	version: 'latest'
-	// },
+    // win_edge_chromium: {
+    //     base: 'SauceLabs',
+    //     browserName: 'microsoftedge',
+    //     platform: 'Windows 10',
+    //     version: 'latest-1'
+    // },
 };
 
 module.exports = config => {
@@ -65,13 +68,14 @@ module.exports = config => {
                 moduleDirs: ['node_modules', 'dist'],
             },
 			sauceLabs: {
-				testName: 'HelixUI Component Unit Tests',
+				testName: 'HelixUI Components - Browser Tests',
                 public: "public restricted",
                 recordVideo: false,
                 recordLogs: false,
+                build: process.env.TRAVIS_BUILD_NUMBER || Date.now(),
 			},
-			customLaunchers: customLaunchers,
-			browsers: Object.keys(customLaunchers),
+			customLaunchers: batches,
+			browsers: Object.keys(batches),
 			reporters: ['dots', 'saucelabs'],
 			singleRun: true,
 			browserDisconnectTimeout : 120000, // default 2000

src/elements/hx-disclosure/index.spec.js

@@ -0,0 +1,165 @@
+import { fixture, oneEvent, expect } from '@open-wc/testing';
+
+/**
+ * <hx-disclosure> component tests
+ *
+ * @type HXDisclosureElement
+ *
+ */
+describe('<hx-disclosure> component tests', () => {
+    const template = '<hx-disclosure>';
+
+    describe('instantiate element', () => {
+        it('should be instantiated with hx-defined attribute', async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const attr = component.hasAttribute('hx-defined');
+
+            expect(attr).to.be.true;
+        });
+
+        it('should not be hidden', async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const prop = component.hidden;
+
+            expect(prop).to.be.false;
+        });
+
+        it(`the rendered light DOM should NOT equal simple template ${template}`, async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+
+            expect(component).lightDom.to.not.equal(template);
+        });
+
+        it(`should NOT have a Shadow DOM`, async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const shadow = component.shadowRoot;
+
+            expect(shadow).to.be.null;
+        });
+    });
+
+    describe('test $onConnect method', () => {
+        it('should have aria-expanded attribute', async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const attr = component.hasAttribute('aria-expanded');
+
+            expect(attr).to.be.true;
+        });
+
+        it('should have aria-expanded attribute default to false', async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const attr = component.getAttribute('aria-expanded');
+
+            expect(attr).to.be.equal(String(false));
+        });
+
+        it('should default to null target', async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const targetProp = component.target;
+
+            expect(targetProp).to.be.null;
+        });
+
+        it('should have role attribute default to button', async () => {
+            const roleAttr = 'button';
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const attr = component.hasAttribute('role');
+            const role = component.getAttribute('role');
+
+            expect(attr).to.be.true;
+            expect(role).to.equal(roleAttr);
+        });
+
+        it('should have tabindex attribute', async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const attr = component.hasAttribute('tabindex');
+
+            expect(attr).to.be.true;
+        });
+
+        it('should have tabindex attribute default to 0', async () => {
+            const tabDefault = "0";
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const attr = component.hasAttribute('tabindex');
+            const attrValue = component.getAttribute('tabindex');
+
+            expect(attr).to.be.true;
+            expect(attrValue).to.be.equal(tabDefault);
+        });
+    });
+
+    describe('test <hx-disclosure> getter and setter methods', () => {
+        it('should have a default null target', async () => {
+            const component = /** @type {HXDisclosureElement} */ await fixture(template);
+            const target = component.target;
+
+            expect(target).to.be.null;
+        });
+    });
+
+    describe('test adding event listeners', () => {
+        describe('test click event listeners', () => {
+            it('should fire a click event', async () => {
+                const component = /** @type {HXDisclosureElement} */ await fixture(template);
+                const detail = { evt: 'clicked!'};
+                const customEvent = new CustomEvent('click', { detail });
+
+                setTimeout(() => component.dispatchEvent(customEvent));
+                const evt = await oneEvent(component, 'click');
+
+                expect(evt).to.equal(customEvent);
+                expect(evt.detail).to.equal(detail);
+            });
+
+            it('should add a keydown event listener', async () => {
+                const component = /** @type {HXDisclosureElement} */ await fixture(template);
+                const detail = { evt: 'key down!'};
+                const customEvent = new CustomEvent('keydown', { detail });
+
+                setTimeout(() => component.dispatchEvent(customEvent));
+                const evt = await oneEvent(component, 'keydown');
+
+                expect(evt).to.equal(customEvent);
+                expect(evt.detail).to.equal(detail);
+            });
+
+            it('should add a keyup event listener', async () => {
+                const component = /** @type {HXDisclosureElement} */ await fixture(template);
+                const detail = { evt: 'key up!'};
+                const customEvent = new CustomEvent('keyup', { detail });
+
+                setTimeout(() => component.dispatchEvent(customEvent));
+                const evt = await oneEvent(component, 'keyup');
+
+                expect(evt).to.equal(customEvent);
+                expect(evt.detail).to.equal(detail);
+            });
+        });
+
+        describe('test target event listeners', () => {
+            it('should be able to open target', async () => {
+                const component = /** @type {HXDisclosureElement} */ await fixture(template);
+                const detail = { evt: 'open target!'};
+                const customEvent = new CustomEvent('open', { detail });
+
+                setTimeout(() => component.dispatchEvent(customEvent));
+                const evt = await oneEvent(component, 'open');
+
+                expect(evt).to.equal(customEvent);
+                expect(evt.detail).to.equal(detail);
+            });
+
+            it('should be able to close target', async () => {
+                const component = /** @type {HXDisclosureElement} */ await fixture(template);
+                const detail = { evt: 'close target!'};
+                const customEvent = new CustomEvent('close', { detail });
+
+                setTimeout(() => component.dispatchEvent(customEvent));
+                const evt = await oneEvent(component, 'close');
+
+                expect(evt).to.equal(customEvent);
+                expect(evt.detail).to.equal(detail);
+            });
+        });
+    });
+});