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

vaadin-bot · tomivirkki · web-flow · commit 34f431df8186 · 2023-12-15T12:50:47.000+02:00
Co-authored-by: Tomi Virkki &lt;tomivirkki@users.noreply.github.com&gt;
diff --git a/src/utils/createComponent.ts b/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,
diff --git a/test/Select.spec.tsx b/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;
+        });
+      });
+    });
+  });
 });
diff --git a/test/SideNav.spec.tsx b/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;
+        });
+      });
+    });
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -93,7 +93,7 @@ export function createComponent<I extends HTMLElement, E extends EventNames = {}`
`93`	`93`	`elementClass: {`
`94`	`94`	`// @ts-expect-error: it is a specific workaround for Polymer classes.`
`95`	`95`	`name: elementClass.name,`
`96`		`- prototype: elementClass._properties,`
	`96`	`+ prototype: { ...elementClass._properties, hidden: Boolean },`
`97`	`97`	`},`
`98`	`98`	`}`
`99`	`99`	`: options,`