Merge pull request #685 from HelixDesignSystem/surf-2051-hx-busy-addi…

…tional-tests

test(hx-busy): restructure and add additional tests

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,11 +8,12 @@ Jira:
 
 ## Before you request a review for this PR:
 
-- [ ] Did you manually test in recent versions of modern browsers (Chrome, Firefox, Safari, and Chromium-based Edge)?
-- [ ] Did you manually test in IE and legacy Edge?
-- [ ] Did you add unit tests for any new code if needed?
-- [ ] Did you run the unit tests via `yarn test` to ensure they all pass?
-- [ ] Did you update the demo page and documentation if you changed/added functionality?
+- [ ] For UI changes, did you manually test in recent versions of modern browsers (Chrome, Firefox, and Safari)?
+- [ ] For UI changes, did you manually test in IE11 and legacy Edge?
+- [ ] Did you add component tests for any new code?
+- [ ] Did you run the component unit tests via `yarn test` to ensure all tests passed?
+- [ ] Did you include a screenshot of the component tests?
+- [ ] If you changed/added functionality, did you update the demo page and documentation?
 - [ ] If needed, did you add or modify the demo test page to test the changed/added functionality?
 - [ ] Did you assign reviewers?
-- [ ] Have you linked to this PR from the Jira ticket(s)?
+- [ ] In Jira, have you linked to this PR on the ticket(s)?

.travis.yml

@@ -1,12 +1,15 @@
-sudo: required
-dist: trusty
+sudo: false
+dist: xenial
+os:
+  - linux
 language: node_js
 node_js:
   - '12'
 notifications:
   email: false
 addons:
-  firefox: '61.0'
+  firefox: latest
+  chrome: stable
   #sauce_connect: true
 branch:
   only:

karma-init.js

@@ -1,3 +1,9 @@
+/**
+ * @overview Karma start script.
+ *
+ * Used to initialize HelixUI ES Modules for testing.
+ */
+
 import HelixUI from './dist/js/helix-ui.module.js';
-HelixUI.initialize();
 
+HelixUI.initialize();

src/elements/hx-busy/index.js

@@ -12,10 +12,6 @@ export class HXBusyElement extends HXElement {
         return 'hx-busy';
     }
 
-    static get template () {
-        return '';
-    }
-
     $onConnect () {
         this.$upgradeProperty('paused');
         this.$defaultAttribute('aria-hidden', true);

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

@@ -6,31 +6,82 @@ import { fixture, expect } from '@open-wc/testing';
  * @type HXBusyElement
  *
  */
-describe('<hx-busy> tests', () => {
+describe('<hx-busy> component tests', () => {
     const template = '<hx-busy>';
 
-    it('should be instantiated with hx-defined attribute', async () => {
-        const el = /** @type {HXBusyElement} */ await fixture(template);
+    describe('instantiate element', () => {
+        it('should be instantiated with hx-defined attribute', async () => {
+            const component = /** @type {HXBusyElement} */ await fixture(template);
+            const attr = component.hasAttribute('hx-defined');
 
-        expect(el.getAttribute('hx-defined')).to.exist;
-    });
+            expect(attr).to.be.true;
+        });
+
+        it('should not be hidden', async () => {
+            const component = /** @type {HXBusyElement} */ 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 {HXBusyElement} */ await fixture(template);
 
-    it('should have aria-hidden attribute set to true', async () => {
-        const el = /** @type {HXBusyElement} */ await fixture(template);
+            expect(component).lightDom.to.not.equal(template);
+        });
 
-        expect(el.getAttribute('aria-hidden')).to.be.equal(String(true));
+        it(`should NOT have a Shadow DOM`, async () => {
+            const component = /** @type {HXBusyElement} */ await fixture(template);
+            const shadow = component.shadowRoot;
+
+            expect(shadow).to.be.null;
+        });
     });
 
-    it(`the rendered light DOM should NOT equal simple template ${template}`, async () => {
-        const el = /** @type {HXBusyElement} */ await fixture(template);
+    describe('test $onConnect method', () => {
+        it('should not be paused on connect', async () => {
+            const component = /** @type {HXBusyElement} */ await fixture(template);
+            const prop = component.hasAttribute('paused');
+
+            expect(prop).to.be.false;
+        });
+
+        it('should have aria-hidden attribute', async () => {
+            const component = /** @type {HXBusyElement} */ await fixture(template);
+            const attr = component.hasAttribute('aria-hidden');
 
-        expect(el).lightDom.to.not.equal(template);
+            expect(attr).to.be.true;
+        });
+
+        it('should have aria-hidden attribute set to true', async () => {
+            const component = /** @type {HXBusyElement} */ await fixture(template);
+            const attr = component.getAttribute('aria-hidden');
+
+            expect(attr).to.be.equal(String(true));
+        });
     });
 
-    it(`should NOT have a Shadow DOM`, async () => {
-        const el = /** @type {HXBusyElement} */ await fixture(template);
-        const sd = el.shadowRoot;
+    describe('test <hx-busy> getter and setter methods', () => {
+        it('should be able to pause element', async () => {
+            const component = /** @type {HXBusyElement} */ await fixture(template);
+            component.paused = true;
+            const attr = component.hasAttribute('paused');
+
+            expect(attr).to.be.true;
+        });
+
+        it('should be able to pause and unpause element', async () => {
+            const component = /** @type {HXBusyElement} */ await fixture(template);
+            component.paused = true;
+            let attr = component.hasAttribute('paused');
 
-        expect(sd).to.be.null;
+            expect(attr).to.be.true;
+
+            component.paused = false;
+            attr = component.hasAttribute('paused');
+
+            expect(attr).to.be.false;
+        });
     });
+
 });