@descope/web-components-ui 1.0.425 → 1.0.426

package/node_modules/descope-combo-box/e2e/descope-combo-box.spec.ts

@@ -0,0 +1,462 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+import { createComboBoxTestDriver } from 'test-drivers';
+
+const storyName = 'descope-combo-box';
+const componentName = 'descope-combo-box';
+
+const BooleanValues = ['true', 'false'];
+
+const componentAttributes = {
+  label: 'Number field label',
+  placeholder: 'Test placeholder',
+  size: ['xs', 'sm', 'md', 'lg'],
+  bordered: BooleanValues,
+  readonly: BooleanValues,
+  required: BooleanValues,
+  'full-width': BooleanValues,
+  disabled: 'true',
+  'default-value': 'itemId2',
+};
+
+const presets = {
+  'Render with alt item renderer': {
+    itemsSource: 'prop',
+    overrideRenderItem: 'true',
+  },
+  'Render with data property': { itemsSource: 'prop' },
+  'Render with data attribute': { itemsSource: 'attr' },
+  'Render with data property and default value': {
+    itemsSource: 'prop',
+    'default-value': 'itemId2',
+  },
+};
+
+const rtlPresets = {
+  'direction rtl': {
+    direction: 'rtl',
+    label: '-Test Label',
+    placeholder: '-Test Placeholder',
+    itemsSource: 'attr',
+    'data[0].displayName': '-Item 1',
+    'data[1].displayName': '-Item 2',
+    'data[1].label': '-Data Item 2',
+  },
+  'direction rtl required': {
+    direction: 'rtl',
+    label: '-Test Label',
+    placeholder: '-Test Placeholder',
+    itemsSource: 'attr',
+    'data[0].displayName': '-Item 1',
+    'data[1].displayName': '-Item 2',
+    'data[1].label': '-Data Item 2',
+    required: 'true',
+  },
+};
+
+const floatingLabelProps = {
+  'label-type': 'floating',
+  label: 'label-',
+  placeholder: 'placeholder',
+};
+
+export const floatingLabelTypePresets = {
+  'floating label ltr': floatingLabelProps,
+  'floating label rtl': {
+    ...floatingLabelProps,
+    direction: 'rtl',
+  },
+  'floating label ltr with value': {
+    ...floatingLabelProps,
+    'default-value': 'itemId2',
+    direction: 'ltr',
+  },
+  'floating label rtl with value': {
+    ...floatingLabelProps,
+    'default-value': 'itemId2',
+    direction: 'rtl',
+  },
+};
+
+test.describe('theme', () => {
+  const { placeholder, ...restConfig } = componentAttributes;
+
+  test.describe('with placeholder', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { placeholder }), {
+        waitUntil: 'networkidle',
+      });
+      await page.waitForSelector(componentName);
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.clear();
+    });
+
+    test('hover', async ({ page }) => {
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.hover();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('focus', async ({ page }) => {
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.focus();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  loopPresets(presets, (preset, name) => {
+    test.describe(name, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, preset), {
+          waitUntil: 'networkidle',
+        });
+      });
+
+      test('hover', async ({ page }) => {
+        const component = createComboBoxTestDriver(page.locator(componentName));
+        await component.hover();
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+
+      test('focus', async ({ page }) => {
+        const component = createComboBoxTestDriver(page.locator(componentName));
+        await component.focus();
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+    });
+  });
+
+  test.describe('with value', () => {
+    loopConfig(restConfig, (attr, value) => {
+      test.describe(`${attr}: ${value}`, () => {
+        test.beforeEach(async ({ page }) => {
+          await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+            waitUntil: 'networkidle',
+          });
+
+          const component = createComboBoxTestDriver(
+            page.locator(componentName),
+          );
+          component.setValue('itemId4');
+        });
+
+        test('hover', async ({ page }) => {
+          const component = createComboBoxTestDriver(
+            page.locator(componentName),
+          );
+          await component.hover();
+          expect(await component.screenshot()).toMatchSnapshot();
+        });
+
+        test('focus', async ({ page }) => {
+          const component = createComboBoxTestDriver(
+            page.locator(componentName),
+          );
+          await component.focus();
+          expect(await component.screenshot()).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  test.describe('dropDown', () => {
+    loopConfig(
+      {
+        size: componentAttributes.size,
+        'full-width': componentAttributes['full-width'],
+      },
+      (attr, value) => {
+        test.describe(`${attr}: ${value}`, () => {
+          test.beforeEach(async ({ page }) => {
+            await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+              waitUntil: 'networkidle',
+            });
+
+            const component = createComboBoxTestDriver(
+              page.locator(componentName),
+            );
+            await component.openDropdown();
+          });
+          test('visible', async ({ page }) => {
+            const component = createComboBoxTestDriver(
+              page.locator(componentName),
+            );
+            await component.hover();
+            expect(await component.dropDown.screenshot()).toMatchSnapshot();
+          });
+        });
+      },
+    );
+  });
+
+  test.describe('direction rtl', () => {
+    loopPresets(rtlPresets, (preset, name) => {
+      test(name, async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, preset));
+        await page.waitForSelector(componentName);
+        const component = page.locator(componentName);
+
+        expect(
+          await component.screenshot({
+            animations: 'disabled',
+            timeout: 3000,
+            caret: 'hide',
+          }),
+        ).toMatchSnapshot();
+      });
+    });
+    test('with error', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
+        waitUntil: 'networkidle',
+      });
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await page.getByRole('button').getByText('Submit').click();
+      expect(await component.screenshot({ delay: 1000 })).toMatchSnapshot();
+    });
+
+    test('with open dropdown', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
+        waitUntil: 'networkidle',
+      });
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.openDropdown();
+      await component.hover();
+      expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    });
+
+    test('with open dropdown and value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
+        waitUntil: 'networkidle',
+      });
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.setValue('itemId2');
+      await component.openDropdown();
+      await component.hover();
+      expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    });
+
+    test('with value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
+        waitUntil: 'networkidle',
+      });
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.setValue('itemId2');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+});
+
+test.describe('logic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { 'full-width': true }), {
+      waitUntil: 'networkidle',
+    });
+  });
+
+  test('select item', async ({ page }) => {
+    const component = createComboBoxTestDriver(page.locator(componentName));
+    await component.openDropdown();
+    await component.selectItem("Achilles' Fateful Wrath");
+
+    expect(await component.getValue()).toBe('itemId2');
+  });
+
+  // 'required' - not working as expected
+
+  test.describe('clear button', () => {
+    test('clear button visible when has value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'default-value': 'itemId2' }), {
+        waitUntil: 'networkidle',
+      });
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.clearSelection();
+      expect(await component.getValue()).toBe('');
+    });
+  });
+
+  test('loading state', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}));
+    const componentLocator = page.locator(componentName);
+    const component = createComboBoxTestDriver(componentLocator);
+
+    await componentLocator.evaluate((node: HTMLElement) => {
+      node.setAttribute('loading', 'true');
+    });
+    await component.openDropdown();
+    expect(
+      await component.dropDown.screenshot({ animations: 'disabled' }),
+    ).toMatchSnapshot();
+
+    await componentLocator.evaluate((node: HTMLElement) => {
+      node.removeAttribute('loading');
+    });
+    await page.waitForTimeout(1000);
+    expect(
+      await component.dropDown.screenshot({ animations: 'disabled' }),
+    ).toMatchSnapshot();
+  });
+
+  test('allow custom value', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { 'allow-custom-value': true }));
+    const component = createComboBoxTestDriver(page.locator(componentName));
+    const value = 'new value';
+    await component.setValue(value);
+    expect(await component.screenshot()).toMatchSnapshot();
+    expect(await component.getValue()).toBe(value);
+  });
+
+  test.describe('reset value', () => {
+    const testResetValue = async (
+      page: any,
+      allowCustomValue: boolean,
+      extraSteps?: (component: any) => Promise<void>,
+    ) => {
+      const urlParams = allowCustomValue ? { 'allow-custom-value': true } : {};
+      await page.goto(getStoryUrl(storyName, urlParams));
+      const component = createComboBoxTestDriver(page.locator(componentName));
+      await component.setValue('itemId2');
+      expect(await component.getValue()).toBe('itemId2');
+      expect(await component.screenshot()).toMatchSnapshot();
+      await component.setValue('');
+      expect(await component.getValue()).toBe('');
+      expect(await component.screenshot()).toMatchSnapshot();
+
+      if (extraSteps) {
+        await extraSteps(component);
+      }
+    };
+
+    test('no custom value', async ({ page }) => {
+      await testResetValue(page, false);
+    });
+
+    test('allow custom value', async ({ page }) => {
+      await testResetValue(page, true, async (component) => {
+        await component.setValue('new value');
+        expect(await component.getValue()).toBe('new value');
+        expect(await component.screenshot()).toMatchSnapshot();
+        await component.setValue('');
+        expect(await component.getValue()).toBe('');
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+
+  test('error message with icon', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, { required: true, errorMsgIcon: true }),
+    );
+
+    const component = createComboBoxTestDriver(page.locator(componentName));
+
+    await page.getByRole('button').getByText('Submit').click();
+
+    await component.blur();
+
+    expect(
+      await component.screenshot({
+        animations: 'disabled',
+        caret: 'hide',
+        delay: 3000,
+      }),
+    ).toMatchSnapshot();
+  });
+});
+
+test.describe('variants', () => {
+  loopPresets(floatingLabelTypePresets, (preset, name) => {
+    test.describe(name, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, preset), {
+          waitUntil: 'networkidle',
+        });
+      });
+
+      test('hover', async ({ page }) => {
+        const component = createComboBoxTestDriver(page.locator(componentName));
+        await component.setValue('itemId2');
+        await component.hover();
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+      test('focus', async ({ page }) => {
+        const component = createComboBoxTestDriver(page.locator(componentName));
+        await component.focus();
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+    });
+  });
+});
+
+test.describe('hide toggle button', () => {
+  test('hide toggle button', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { 'hide-toggle-button': true }));
+    const component = createComboBoxTestDriver(page.locator(componentName));
+    expect(await component.screenshot()).toMatchSnapshot();
+    await component.openDropdown();
+    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    await component.insertValue('itemname1');
+    expect(await component.screenshot()).toMatchSnapshot();
+    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+  });
+});
+
+test.describe('data attribute', () => {
+  test('clear items', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { itemsSource: 'prop' }));
+    const componentLocator = page.locator(componentName);
+    const component = createComboBoxTestDriver(componentLocator);
+    await component.openDropdown();
+    let items = await component.getItems();
+    expect(items).toHaveLength(4);
+    // Reduce data items
+    await componentLocator.evaluate((node: HTMLElement & { data: any[] }) => {
+      node.data = [
+        { displayName: 'Item1', value: '1', label: 'data item 1' },
+        { displayName: 'Item2', value: '2', label: 'data item 2' },
+      ];
+    });
+    items = await component.getItems();
+    expect(items).toHaveLength(2);
+    // Clear data items
+    await componentLocator.evaluate((node: HTMLElement & { data: any[] }) => {
+      node.data = [];
+    });
+    items = await component.getItems();
+    expect(items).toHaveLength(0);
+  });
+
+  test('allow custom value with no items', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        itemsSource: 'prop',
+        'allow-custom-value': true,
+      }),
+    );
+    const componentLocator = page.locator(componentName);
+    const component = createComboBoxTestDriver(componentLocator);
+    // Clear data items
+    await componentLocator.evaluate((node: HTMLElement & { data: any[] }) => {
+      node.data = [];
+    });
+    await component.setValue('new value');
+    expect(await component.getValue()).toBe('new value');
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});
+
+test.describe('override renderer', () => {
+  test('custom background', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { overrideRenderer: true }));
+    const component = createComboBoxTestDriver(page.locator(componentName));
+    await component.openDropdown();
+    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+  });
+});

package/node_modules/descope-combo-box/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "descope-combo-box",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/ComboBoxClass.js"
+    }
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  },
+  "devDependencies": {
+    "e2e-utils": "workspace:*",
+    "test-drivers": "workspace:*",
+    "@playwright/test": "1.38.1"
+  },
+  "dependencies": {
+    "@vaadin/combo-box": "24.3.4",
+    "common": "0.0.1",
+    "theme-globals": "0.0.1",
+    "theme-input-wrapper": "0.0.1"
+  },
+  "private": true,
+  "publishConfig": {
+    "link-workspace-packages": false
+  }
+}

package/node_modules/descope-combo-box/project.json

@@ -0,0 +1,7 @@
+{
+  "name": "descope-combo-box",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-combo-box/src",
+  "projectType": "library",
+  "tags": []
+}