@descope-ui/descope-address-field 0.0.1

package/e2e/descope-address-field.spec.ts

@@ -0,0 +1,464 @@
+import { test, expect, Page } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+import createAddressFieldTestDriver from '../testDriver/addressFieldTestDriver';
+
+const storyName = 'descope-address-field';
+const componentName = 'descope-address-field';
+
+const BooleanValues = ['true', 'false'];
+
+const componentAttributes = {
+  label: 'address label',
+  placeholder: 'Test placeholder',
+  size: ['xs', 'sm', 'md', 'lg'],
+  bordered: BooleanValues,
+  readonly: BooleanValues,
+  required: BooleanValues,
+  'full-width': BooleanValues,
+  disabled: 'true',
+  'default-value': 'test value',
+};
+
+test.describe('theme', () => {
+  const { placeholder, ...restConfig } = componentAttributes;
+
+  loopPresets(
+    {
+      'with placeholder': { placeholder },
+      'with default-value and allow-custom-value': {
+        'default-value': 'default value',
+        'allow-custom-value': 'true',
+      },
+      'with default-value and not allow-custom-value': {
+        'default-value': 'default value',
+        'allow-custom-value': 'false',
+      },
+      'rtl with default-value': {
+        'default-value': '-default value',
+        direction: 'rtl',
+      },
+    },
+    (preset, name) => {
+      test.describe(name, () => {
+        test.beforeEach(async ({ page }) => {
+          await page.goto(getStoryUrl(storyName, preset));
+        });
+
+        test('hover', async ({ page }) => {
+          const component = createAddressFieldTestDriver(
+            page.locator(componentName),
+          );
+          await component.hover();
+          expect(await component.screenshot()).toMatchSnapshot();
+        });
+
+        test('focus', async ({ page }) => {
+          const component = createAddressFieldTestDriver(
+            page.locator(componentName),
+          );
+          await component.focus();
+          expect(await component.screenshot()).toMatchSnapshot();
+        });
+      });
+    },
+  );
+
+  loopPresets(
+    {
+      'with label and required': {
+        label: '-Label',
+        placeholder: '-Placeholder',
+        required: 'true',
+      },
+      'with floating label and required': {
+        label: '-Label',
+        placeholder: '-Placeholder',
+        required: 'true',
+        'label-type': 'floating',
+      },
+      'with label and not required': {
+        label: '-Label',
+        placeholder: '-Placeholder',
+        required: 'false',
+      },
+      'with floating label and not required': {
+        label: '-Label',
+        placeholder: '-Placeholder',
+        required: 'false',
+        'label-type': 'floating',
+      },
+    },
+    (preset, name) => {
+      test(name, async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, preset));
+        const component = createAddressFieldTestDriver(
+          page.locator(componentName),
+        );
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+
+      test(`rtl ${name}`, async ({ page }) => {
+        await page.goto(
+          getStoryUrl(storyName, { ...preset, direction: 'rtl' }),
+        );
+        const component = createAddressFieldTestDriver(
+          page.locator(componentName),
+        );
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+    },
+  );
+
+  ['', 'rtl'].forEach((direction) => {
+    test(`${!!direction ? 'rtl ' : ''}default error message`, async ({
+      page,
+    }) => {
+      await page.goto(
+        getStoryUrl(storyName, {
+          label: '-Label',
+          placeholder: '-Placeholder',
+          required: 'true',
+          direction,
+        }),
+      );
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await page.getByRole('button').getByText('Submit').click();
+      expect(
+        await component.screenshot({ timeout: 1000, animations: 'disabled' }),
+      ).toMatchSnapshot();
+    });
+  });
+
+  ['', 'rtl'].forEach((direction) => {
+    test(`${!!direction ? 'rtl ' : ''}custom error message`, async ({
+      page,
+    }) => {
+      await page.goto(
+        getStoryUrl(storyName, {
+          label: '-Label',
+          placeholder: '-Placeholder',
+          required: 'true',
+          'data-errormessage-value-missing': '-please fill it',
+          direction,
+        }),
+      );
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await page.getByRole('button').getByText('Submit').click();
+      expect(
+        await component.screenshot({ timeout: 1000, 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 }));
+          const component = createAddressFieldTestDriver(
+            page.locator(componentName),
+          );
+          await component.setValue('autovalue');
+        });
+
+        test('hover', async ({ page }) => {
+          const component = createAddressFieldTestDriver(
+            page.locator(componentName),
+          );
+          await component.hover();
+          expect(await component.screenshot()).toMatchSnapshot();
+        });
+
+        test('focus', async ({ page }) => {
+          const component = createAddressFieldTestDriver(
+            page.locator(componentName),
+          );
+          await component.focus();
+          expect(await component.screenshot()).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  test.describe('dropdown', () => {
+    loopPresets(
+      {
+        'size: xs': { size: 'xs' },
+        'size: sm': { size: 'sm' },
+        'size: md': { size: 'md' },
+        'size: lg': { size: 'lg' },
+        'full-width: true': { 'full-width': 'true' },
+        'full-width: false': { 'full-width': 'false' },
+        rtl: { direction: 'rtl', 'full-width': 'true' },
+      },
+      (preset, name) => {
+        test(name, async ({ page }) => {
+          await page.goto(getStoryUrl(storyName, preset));
+          const component = createAddressFieldTestDriver(
+            page.locator(componentName),
+          );
+          await component.insertValue('fastmock');
+          const resultsLoaded = page.locator('vaadin-combo-box-item', {
+            hasText: 'fastmock Custom Road, Sample City,',
+          });
+          await resultsLoaded.waitFor();
+          expect(await component.dropDown.screenshot()).toMatchSnapshot();
+        });
+      },
+    );
+  });
+
+  test('loading', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}));
+    const component = createAddressFieldTestDriver(page.locator(componentName));
+    await component.insertValue('loadin');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'Custom Road',
+    });
+    await resultsLoaded.waitFor();
+    await component.insertValue('g');
+    await page.waitForTimeout(300);
+    expect(
+      await component.dropDown.screenshot({ animations: 'disabled' }),
+    ).toMatchSnapshot();
+  });
+
+  test('error message with icon', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, { required: true, errorMsgIcon: true }),
+    );
+    const component = createAddressFieldTestDriver(page.locator(componentName));
+    await page.getByRole('button').getByText('Submit').click();
+    await component.blur();
+    expect(
+      await component.screenshot({
+        animations: 'disabled',
+        caret: 'hide',
+        timeout: 3000,
+      }),
+    ).toMatchSnapshot();
+  });
+});
+
+test.describe('logic', () => {
+  test.describe('min search length', () => {
+    test('default', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName));
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('moc');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: ' Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      const items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+    });
+
+    test('custom', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'min-search-length': '4' }));
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fas');
+      // Need to have the timeout to wait for the results to load (or not)
+      await page.waitForTimeout(1000);
+      let items = await component.getItems();
+      expect(items.length).toBe(0);
+      await expect(component.dropDown).not.toBeVisible();
+      await component.insertValue('t');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: ' Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+    });
+  });
+
+  ['', 'rtl'].forEach((direction) => {
+    test(`${!!direction ? 'rtl ' : ''}select item and clear`, async ({
+      page,
+    }) => {
+      await page.goto(getStoryUrl(storyName, { direction }));
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fastmock');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: ' Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      await component.selectItem('mock');
+      expect(await component.getValue()).toBe(
+        'fastmock Custom Road, Sample City, SC 54321',
+      );
+      expect(await component.screenshot()).toMatchSnapshot();
+      await component.openDropdown();
+      expect(await component.dropDown.screenshot()).toMatchSnapshot();
+      await component.blur();
+      await component.clearSelection();
+      expect(await component.getValue()).toBe('');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test.describe('set value', () => {
+    test('allow custom value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'allow-custom-value': 'true' }));
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await component.setValue('set value');
+      expect(await component.screenshot()).toMatchSnapshot();
+      expect(await component.getValue()).toBe('set value');
+    });
+
+    test('not allow custom value', async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, { 'allow-custom-value': 'false' }),
+      );
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await component.setValue('set value');
+      expect(await component.screenshot()).toMatchSnapshot();
+      expect(await component.getValue()).toBe('set value');
+    });
+  });
+
+  test.describe('search and blur', () => {
+    test('allow custom value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'allow-custom-value': 'true' }));
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fastmock1');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      const items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe('fastmock1');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('not allow custom value', async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, { 'allow-custom-value': 'false' }),
+      );
+      const component = createAddressFieldTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fastmock1');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      const items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe('');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('select - allow custom value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'allow-custom-value': 'true' }));
+      const locator = page.locator(componentName);
+      const component = createAddressFieldTestDriver(locator);
+      await component.insertValue('fastmock');
+      let resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      await component.selectItem('mock');
+      expect(await component.getValue()).toBe(
+        'fastmock Custom Road, Sample City, SC 54321',
+      );
+      await expect(component.dropDown).not.toBeVisible();
+      await component.replaceSearchValue('fasthello');
+      resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'fasthello Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe('fasthello');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('select - not allow custom value', async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, { 'allow-custom-value': 'false' }),
+      );
+      const locator = page.locator(componentName);
+      const component = createAddressFieldTestDriver(locator);
+      await component.insertValue('fastmock');
+      let resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      await component.selectItem('mock');
+      expect(await component.getValue()).toBe(
+        'fastmock Custom Road, Sample City, SC 54321',
+      );
+      await expect(component.dropDown).not.toBeVisible();
+      await component.replaceSearchValue('fasthello');
+      resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'fasthello Custom Road, Sample City,',
+      });
+      await resultsLoaded.waitFor();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe(
+        'fastmock Custom Road, Sample City, SC 54321',
+      );
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test('no results', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}));
+    const component = createAddressFieldTestDriver(page.locator(componentName));
+    await component.insertValue('no ');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'No results',
+    });
+    await resultsLoaded.waitFor();
+    await expect(component.dropDown).toBeVisible();
+    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+  });
+
+  test('error searching', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}));
+    const component = createAddressFieldTestDriver(page.locator(componentName));
+    await component.insertValue('error');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'An error occurred',
+    });
+    await resultsLoaded.waitFor();
+    await expect(component.dropDown).toBeVisible();
+    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+  });
+});

package/e2e/mocks.ts

@@ -0,0 +1,41 @@
+export const MOCK_SUGGESTIONS = {
+  suggestions: [
+    {
+      placePrediction: {
+        placeId: 'place1',
+        text: {
+          text: '123 Mock Street, Mock City, MC 12345',
+        },
+      },
+    },
+    {
+      placePrediction: {
+        placeId: 'place2',
+        text: {
+          text: '456 Test Avenue, Mock Town, TT 67890',
+        },
+      },
+    },
+    {
+      placePrediction: {
+        placeId: 'place3',
+        text: {
+          text: '789 Sample Boulevard, Mock City, DC 54321',
+        },
+      },
+    },
+  ],
+};
+
+export const MOCK_SUGGESTIONS_SINGLE = {
+  suggestions: [
+    {
+      placePrediction: {
+        placeId: 'place1',
+        text: {
+          text: '123 Mock Street, Mock City, MC 12345',
+        },
+      },
+    },
+  ],
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@descope-ui/descope-address-field",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/AddressFieldClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-drivers": "0.0.1"
+  },
+  "dependencies": {
+    "@vaadin/custom-field": "24.3.4",
+    "@descope-ui/common": "0.0.4",
+    "@descope-ui/theme-input-wrapper": "0.0.4",
+    "@descope-ui/descope-autocomplete-field": "0.0.2"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-address-field",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-address-field/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/AddressFieldClass.js

@@ -0,0 +1,135 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import {
+  getComponentName,
+  forwardAttrs,
+  syncAttrs,
+} from '@descope-ui/common/components-helpers';
+import { compose } from '@descope-ui/common/utils';
+import { AutocompleteFieldClass } from '@descope-ui/descope-autocomplete-field/class';
+import { componentName as descopeInternalComponentName } from './descope-address-field-internal/AddressFieldInternal';
+
+export const componentName = getComponentName('address-field');
+
+const customMixin = (superclass) =>
+  class AddressFieldMixinClass extends superclass {
+    get defaultValue() {
+      return this.getAttribute('default-value');
+    }
+
+    setDefaultValue() {
+      if (this.defaultValue) {
+        setTimeout(() => {
+          this.inputElement.value = this.defaultValue;
+        });
+      }
+    }
+
+    set connectorClasses(value) {
+      this.inputElement.connectorClasses = value;
+    }
+
+    get connectorClasses() {
+      return this.inputElement.connectorClasses;
+    }
+
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+        tabindex="-1"
+      ></${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(
+        descopeInternalComponentName,
+      );
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'bordered',
+          'label',
+          'required',
+          'label-type',
+          'placeholder',
+          'full-width',
+          'allow-custom-value',
+          'min-search-length',
+          'no-results-message',
+          'error-fetching-results-message',
+          'data-errormessage-value-missing',
+          'invalid',
+          'error-message',
+          'readonly',
+          'disabled',
+          'st-host-direction',
+          'st-error-message-icon',
+          'st-error-message-icon-size',
+          'st-error-message-icon-padding',
+          'connector-template',
+          'public-api-key',
+          'address-types',
+          'address-language',
+          'address-region',
+          'address-limit',
+        ],
+      });
+
+      // This is required since when we remove the invalid attribute from the internal mappings field,
+      // we want to reflect the change in the parent component
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+      this.setDefaultValue();
+    }
+  };
+
+const { host } = {
+  host: { selector: () => ':host' },
+};
+
+export const AddressFieldClass = compose(
+  createStyleMixin({
+    componentNameOverride: getComponentName('input-wrapper'),
+  }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({
+    proxyProps: ['value', 'selectionStart'],
+    inputEvent: 'input',
+    proxyParentValidation: true,
+  }),
+  componentNameValidationMixin,
+  customMixin,
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-custom-field',
+    style: () => `
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+    direction: ltr;
+  }
+  vaadin-custom-field {
+    line-height: unset;
+    width: 100%;
+  }
+`,
+    excludeAttrsSync: ['tabindex', 'error-message', 'label'],
+    componentName,
+  }),
+);