From 0fa222c21b8361ebf0396791d06ef7f39228944c Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Wed, 7 Apr 2021 17:25:00 +0200
Subject: [PATCH] chore(form-integrations): test all registrations

---
 .../test/dialog-integrations.js               | 20 -----
 .../test/dialog-integrations.test.js          | 86 +++++++++++++++++++
 .../test/form-integrations.test.js            | 71 +++++++++++++++
 3 files changed, 157 insertions(+), 20 deletions(-)
 delete mode 100644 packages/form-integrations/test/dialog-integrations.js
 create mode 100644 packages/form-integrations/test/dialog-integrations.test.js

diff --git a/packages/form-integrations/test/dialog-integrations.js b/packages/form-integrations/test/dialog-integrations.js
deleted file mode 100644
index e661f544b..000000000
--- a/packages/form-integrations/test/dialog-integrations.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import './helpers/umbrella-form.js';
-import '@lion/dialog/lion-dialog.js';
-
-/**
- * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
- * @typedef {import('@lion/dialog/').LionDialog} LionDialog
- */
-
-// Test umbrella form inside dialog
-describe('Form inside dialog Integrations', () => {
-  it('"Successfully spawns all form components inside a dialog', async () => {
-    expect(
-      await fixture(html` <lion-dialog>
-        <button slot="invoker">Open Dialog</button>
-        <umbrella-form slot="content"></umbrella-form>
-      </lion-dialog>`),
-    ).to.not.throw();
-  });
-});
diff --git a/packages/form-integrations/test/dialog-integrations.test.js b/packages/form-integrations/test/dialog-integrations.test.js
new file mode 100644
index 000000000..3297c2428
--- /dev/null
+++ b/packages/form-integrations/test/dialog-integrations.test.js
@@ -0,0 +1,86 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './helpers/umbrella-form.js';
+import '@lion/dialog/define';
+
+/**
+ * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
+ * @typedef {import('@lion/dialog').LionDialog} LionDialog
+ * @typedef {import('@lion/form').LionForm} LionForm
+ */
+
+// Test umbrella form inside dialog
+describe('Form inside dialog Integrations', () => {
+  it('"Successfully registers all form components inside a dialog', async () => {
+    const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog>
+      <button slot="invoker">Open Dialog</button>
+      <umbrella-form slot="content"></umbrella-form>
+    </lion-dialog>`);
+
+    // @ts-ignore
+    const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);
+    const getTagNames = (/** @type {HTMLElement} */ elm) => [
+      elm.tagName.toLowerCase(),
+      // @ts-ignore
+      ...(elm.formElements ? elm.formElements.map(getTagNames).flat() : []),
+    ];
+
+    // @ts-ignore
+    const registeredEls = formEl.formElements.map(getTagNames).flat();
+
+    // TODO: fix registration of lion-switch and lion-input-stepper
+    expect(registeredEls).to.eql([
+      'lion-fieldset',
+      'lion-input',
+      'lion-input',
+
+      'lion-input-date',
+
+      'lion-input-datepicker',
+
+      'lion-textarea',
+
+      'lion-input-amount',
+
+      'lion-input-iban',
+
+      'lion-input-email',
+
+      'lion-checkbox-group',
+      'lion-checkbox',
+      'lion-checkbox',
+      'lion-checkbox',
+
+      'lion-radio-group',
+      'lion-radio',
+      'lion-radio',
+      'lion-radio',
+
+      'lion-listbox',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+
+      'lion-combobox',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+
+      'lion-select-rich',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-select',
+
+      'lion-input-range',
+
+      'lion-checkbox-group',
+      'lion-checkbox',
+      // 'lion-switch',
+      // 'lion-input-stepper',
+      'lion-textarea',
+    ]);
+  });
+});
diff --git a/packages/form-integrations/test/form-integrations.test.js b/packages/form-integrations/test/form-integrations.test.js
index 2780cdb21..354dd5eac 100644
--- a/packages/form-integrations/test/form-integrations.test.js
+++ b/packages/form-integrations/test/form-integrations.test.js
@@ -85,4 +85,75 @@ describe('Form Integrations', () => {
       expect(el._lionFormNode.dirty).to.be.false;
     });
   });
+
+  it('"Successfully registers all form components', async () => {
+    const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
+
+    // @ts-ignore
+    const formEl = /** @type {LionForm} */ (el._lionFormNode);
+    const getTagNames = (/** @type {HTMLElement} */ elm) => [
+      elm.tagName.toLowerCase(),
+      // @ts-ignore
+      ...(elm.formElements ? elm.formElements.map(getTagNames).flat() : []),
+    ];
+
+    // @ts-ignore
+    const registeredEls = formEl.formElements.map(getTagNames).flat();
+
+    // TODO: fix registration of lion-switch and lion-input-stepper
+    expect(registeredEls).to.eql([
+      'lion-fieldset',
+      'lion-input',
+      'lion-input',
+
+      'lion-input-date',
+
+      'lion-input-datepicker',
+
+      'lion-textarea',
+
+      'lion-input-amount',
+
+      'lion-input-iban',
+
+      'lion-input-email',
+
+      'lion-checkbox-group',
+      'lion-checkbox',
+      'lion-checkbox',
+      'lion-checkbox',
+
+      'lion-radio-group',
+      'lion-radio',
+      'lion-radio',
+      'lion-radio',
+
+      'lion-listbox',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+
+      'lion-combobox',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+
+      'lion-select-rich',
+      'lion-option',
+      'lion-option',
+      'lion-option',
+      'lion-select',
+
+      'lion-input-range',
+
+      'lion-checkbox-group',
+      'lion-checkbox',
+      // 'lion-switch',
+      // 'lion-input-stepper',
+      'lion-textarea',
+    ]);
+  });
 });