@lion/ui 0.20.0 → 0.21.1

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js

@@ -0,0 +1,90 @@
+/**
+ * The tests suites for the components that have `this.formatCountryCodeStyle = 'parentheses';`
+ */
+
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+import { PhoneUtilManager } from '@lion/ui/input-tel.js';
+import { sendKeys, selectOption } from '@web/test-runner-commands';
+import {
+  expect,
+  defineCE,
+  unsafeStatic,
+  fixture as _fixture,
+  html,
+  waitUntil,
+} from '@open-wc/testing';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ * @typedef {import('./types.js').TelDropdownConfig} TelDropdownConfig
+ */
+
+const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */ (
+  _fixture
+);
+
+/**
+ * @type {TelDropdownConfig}
+ */
+const telDropdownConfig = {
+  getTelDropdownInvokerEl: el => el.querySelector('select'),
+  selectNlOption: async () => {
+    await selectOption({ selector: 'select', value: 'NL' });
+  },
+};
+
+/**
+ * @param {{ klass:LionInputTelDropdown, config: TelDropdownConfig }} config
+ */
+
+export function runInputTelDropdownParenthesesSuite(
+  // @ts-ignore
+  { klass, config } = { klass: LionInputTelDropdown, config: telDropdownConfig },
+) {
+  // @ts-ignore
+  const tagName = defineCE(/** @type {* & HTMLElement} */ (class extends klass {}));
+  const tag = unsafeStatic(tagName);
+
+  describe('LionInputTelDropdown suite with `parentheses`', () => {
+    /**
+     * @type {LionInputTelDropdown}
+     */
+    let el;
+    beforeEach(async () => {
+      // Wait till PhoneUtilManager has been loaded
+      await PhoneUtilManager.loadComplete;
+      el = await fixture(html` <${tag} format-country-code-style="parentheses"></${tag}> `);
+      await el.updateComplete;
+    });
+
+    describe('Dropdown value is in sync with text input', () => {
+      it('should set correct active region when selecting a country from dropdown ', async () => {
+        const dropdownInvoker = config.getTelDropdownInvokerEl(el);
+        // @ts-ignore
+        await waitUntil(() => dropdownInvoker?.checkVisibility());
+        await config.selectNlOption(el);
+        expect(el.activeRegion).to.equal('NL');
+      });
+
+      it('updates dropdown value', async () => {
+        const dropdown = config.getTelDropdownInvokerEl(el);
+        // @ts-ignore
+        await waitUntil(() => dropdown?.checkVisibility());
+        const input = el.querySelector('input');
+        expect(input).to.exist;
+        // @ts-ignore
+        input.value = '';
+        // @ts-ignore
+        input.focus();
+        // @ts-ignore
+        await sendKeys({
+          type: '(+91) 99',
+        });
+        await sendKeys({ press: 'Backspace' });
+        // @ts-ignore
+        expect(input.value).to.equal('(+91) 9');
+        expect(el.activeRegion).to.equal('IN');
+      });
+    });
+  });
+}

package/components/input-tel-dropdown/test-suites/types.ts

@@ -0,0 +1,6 @@
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+
+export type TelDropdownConfig = {
+  getTelDropdownInvokerEl: (el: LionInputTelDropdown) => HTMLElement | null;
+  selectNlOption: (el: LionInputTelDropdown) => Promise<void>;
+};