test(esl-mixin): additional prototype tests

src/modules/esl-mixin-element/test/mixin.test.ts

@@ -101,4 +101,108 @@ describe('ESLMixinElement', () => {
       while (document.body.lastElementChild) document.body.removeChild(document.body.lastElementChild);
     });
   });
+
+  describe('ESLMixinElement prototype', () => {
+    class CTestMixin extends ESLMixinElement {
+      static override is = 'c-test';
+    }
+
+    const $host = document.createElement('div');
+    $host.toggleAttribute(CTestMixin.is, true);
+    CTestMixin.register();
+
+    beforeAll(() => document.body.appendChild($host));
+
+    describe('ESLMixinElement $attr', () => {
+      let $el: CTestMixin;
+      const attrName = 'test-attr';
+
+      beforeAll(() => $el = CTestMixin.get($host) as CTestMixin);
+
+      test('should return the attribute value', () => {
+        const val = $host.getAttribute(attrName);
+        expect($el.$$attr(attrName)).toBe(val);
+      });
+
+      test('should set the attribute value and return the new value', () => {
+        expect($el.$$attr(attrName, 'test')).toBe(null);
+        expect($el.$$attr(attrName)).toBe('test');
+      });
+    });
+
+    describe('ESLMixinElement $attr - boolean', () => {
+      let el: CTestMixin;
+      const attrName = 'test-attr-bool';
+
+      beforeAll(() => el = CTestMixin.get($host) as CTestMixin);
+
+      test('should return the initial attribute value', () => {
+        const val = $host.getAttribute(attrName);
+        expect(el.$$attr(attrName)).toBe(val);
+      });
+
+      test('should set and return an empty string for boolean true', () => {
+        expect(el.$$attr(attrName, true)).toBe(null);
+        expect(el.$$attr(attrName)).toBe('');
+      });
+
+      test('should set and return null for removed attribute', () => {
+        expect(el.$$attr(attrName, false)).toBe('');
+        expect(el.$$attr(attrName)).toBe(null);
+      });
+    });
+
+    describe('ESLMixinElement $cls - get', () => {
+      let $el: CTestMixin;
+
+      beforeAll(() => $el = CTestMixin.get($host) as CTestMixin);
+
+      test('should return false when class does not exist', () => expect($el.$$cls('a')).toBe(false));
+
+      test('should return true when class exists', () => {
+        $host.className = 'a b';
+        expect($el.$$cls('a')).toBe(true);
+        expect($el.$$cls('a b')).toBe(true);
+      });
+    });
+
+    describe('ESLMixinElement $cls - set', () => {
+      let $el: CTestMixin;
+
+      beforeAll(() => $el = CTestMixin.get($host) as CTestMixin);
+
+      test('should add the class when setting to true', () => {
+        $host.className = '';
+        $el.$$cls('a', true);
+        $el.$$cls('b', true);
+        expect($host.className).toBe('a b');
+      });
+
+      test('should remove the class when setting to false', () => {
+        $host.className = 'a b';
+        expect($el.$$cls('a b', false)).toBe(false);
+        expect($host.className).toBe('');
+      });
+    });
+
+    test('ESLMixinElement $$fire', (done) => {
+      const $el = CTestMixin.get($host) as CTestMixin;
+
+      $host.addEventListener('testevent', (e) => {
+        expect(e).toBeInstanceOf(CustomEvent);
+        done();
+      }, {once: true});
+      $el.$$fire('testevent');
+    }, 10);
+
+    test('ESLMixinElement $$fire - bubbling', (done) => {
+      const $el = CTestMixin.get($host) as CTestMixin;
+
+      document.addEventListener('testevent', (e) => {
+        expect(e).toBeInstanceOf(CustomEvent);
+        done();
+      }, {once: true});
+      $el.$$fire('testevent');
+    }, 10);
+  });
 });