fix: add hidden property to polymer based components (#171) (#176)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>

src/utils/createComponent.ts

@@ -93,7 +93,7 @@ export function createComponent<I extends HTMLElement, E extends EventNames = {}
           elementClass: {
             // @ts-expect-error: it is a specific workaround for Polymer classes.
             name: elementClass.name,
-            prototype: elementClass._properties,
+            prototype: { ...elementClass._properties, hidden: Boolean },
           },
         }
       : options,

test/Select.spec.tsx

@@ -6,7 +6,7 @@ import chaiDom from 'chai-dom';
 import type { ReactElement } from 'react';
 import { ListBox } from '../src/ListBox.js';
 import { Item } from '../src/Item.js';
-import { Select } from '../src/Select.js';
+import { Select, SelectElement } from '../src/Select.js';
 import { findByQuerySelector } from './utils/findByQuerySelector.js';
 
 useChaiPlugin(chaiDom);
@@ -143,4 +143,29 @@ describe('Select', () => {
       await expect(findByQuerySelector('div[slot="prefix"]')).to.eventually.have.text('Value:');
     });
   });
+
+  describe('boolean property', () => {
+    const booleanProperties: Array<keyof typeof SelectElement.prototype & string> = [
+      'disabled',
+      'hidden',
+      'opened',
+      'draggable',
+    ];
+
+    booleanProperties.forEach((property) => {
+      describe(property, () => {
+        it(`should be true in the element if ${property} prop is true`, async () => {
+          render(<Select items={[{ label: 'foo', value: 'foo' }]} {...{ [property]: true }} />);
+          const select = await findByQuerySelector('vaadin-select');
+          expect(select[property]).to.be.ok;
+        });
+
+        it(`should be false in the element if ${property} prop is false`, async () => {
+          render(<Select items={[{ label: 'foo', value: 'foo' }]} {...{ [property]: false }} />);
+          const select = await findByQuerySelector('vaadin-select');
+          expect(select[property]).not.to.be.ok;
+        });
+      });
+    });
+  });
 });

test/SideNav.spec.tsx

@@ -0,0 +1,33 @@
+import { expect, use as useChaiPlugin } from '@esm-bundle/chai';
+import { render } from '@testing-library/react';
+import chaiDom from 'chai-dom';
+import { SideNav, SideNavElement } from '../src/SideNav.js';
+import { findByQuerySelector } from './utils/findByQuerySelector.js';
+
+useChaiPlugin(chaiDom);
+
+describe('SideNav', () => {
+  describe('boolean property', () => {
+    const booleanProperties: Array<keyof typeof SideNavElement.prototype & string> = [
+      'hidden',
+      'collapsed',
+      'draggable',
+    ];
+
+    booleanProperties.forEach((property) => {
+      describe(property, () => {
+        it(`should be true in the element if ${property} prop is true`, async () => {
+          render(<SideNav {...{ [property]: true }} />);
+          const sideNav = await findByQuerySelector('vaadin-side-nav');
+          expect(sideNav[property]).to.be.ok;
+        });
+
+        it(`should be false in the element if ${property} prop is false`, async () => {
+          render(<SideNav {...{ [property]: false }} />);
+          const sideNav = await findByQuerySelector('vaadin-side-nav');
+          expect(sideNav[property]).not.to.be.ok;
+        });
+      });
+    });
+  });
+});