From ee49217d087d9cf276883ee64a3a688838e2c6b8 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:09:17 +0200
Subject: [PATCH] fix: add hidden property to polymer based components (#171)

---
 src/utils/createComponent.ts |  2 +-
 test/Select.spec.tsx         | 27 ++++++++++++++++++++++++++-
 test/SideNav.spec.tsx        | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 test/SideNav.spec.tsx

diff --git a/src/utils/createComponent.ts b/src/utils/createComponent.ts
index 3a86a5a6..1fb78606 100644
--- 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
index bc08e310..b555ce8b 100644
--- 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
new file mode 100644
index 00000000..6efbd0b0
--- /dev/null
+++ 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;
+        });
+      });
+    });
+  });
+});