@descope-ui/descope-address-field 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-02-17)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.4`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.4`
+* `@descope-ui/descope-autocomplete-field` updated to version `0.0.2`

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

@@ -0,0 +1,190 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl } from 'e2e-utils';
+import createAddressFieldTestDriver from '../testDriver/addressFieldTestDriver';
+import { MOCK_SUGGESTIONS, MOCK_SUGGESTIONS_SINGLE } from './mocks';
+const storyName = 'descope-address-field';
+const componentName = 'descope-address-field';
+
+declare global {
+  interface Window {
+    google: any;
+    __lastRequest: any;
+  }
+}
+
+const googleMapsAttrs = {
+  'allow-custom-value': 'false',
+  'connector-template': 'google-maps-places',
+  'public-api-key': 'test-api-key',
+};
+
+test.describe('connectors - google', () => {
+  test('no api key', async ({ page }) => {
+    await page.route('**/*apis.com/maps/api/js*', (route) => {
+      throw new Error(
+        'Google Maps script should not be loaded when no API key is provided',
+      );
+    });
+
+    await page.goto(
+      getStoryUrl(storyName, {
+        'allow-custom-value': 'false',
+        'connector-template': 'google-maps-places',
+      }),
+    );
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+    await component.insertValue('fastmock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'An error occurred',
+    });
+    await resultsLoaded.waitFor();
+    await expect(component.dropDown).toBeVisible();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+    await expect(item).toHaveText('An error occurred fetching results');
+  });
+
+  test('load google maps script with api key', async ({ page }) => {
+    let googleScriptLoaded = false;
+
+    await page.route('**/*apis.com/maps/api/js*', (route) => {
+      googleScriptLoaded = true;
+    });
+
+    await page.goto(getStoryUrl(storyName, googleMapsAttrs));
+    // Verify Google Maps script was loaded
+    await expect(async () => {
+      expect(googleScriptLoaded).toBe(true);
+    }).toPass();
+  });
+
+  test('with api key', async ({ page }) => {
+    await page.addInitScript((mockSuggestions) => {
+      window.__lastRequest = null;
+      window.google = {
+        maps: {
+          importLibrary: () =>
+            Promise.resolve({
+              AutocompleteSuggestion: class {
+                static async fetchAutocompleteSuggestions(req) {
+                  window.__lastRequest = req;
+                  // Simulate network delay
+                  await new Promise((resolve) => setTimeout(resolve, 100));
+                  return mockSuggestions;
+                }
+              },
+            }),
+        },
+      };
+    }, MOCK_SUGGESTIONS);
+
+    await page.goto(getStoryUrl(storyName, googleMapsAttrs));
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+    await component.insertValue('mock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'Mock Street',
+    });
+    await resultsLoaded.waitFor();
+    const items = await component.getItems();
+    expect(items.length).toEqual(3);
+    await expect(component.dropDown).toBeVisible();
+    await component.selectItem('123 Mock Street');
+    expect(await component.getValue()).toBe(
+      '123 Mock Street, Mock City, MC 12345',
+    );
+    await expect(component.dropDown).not.toBeVisible();
+    const request = await page.evaluate(() => window.__lastRequest);
+    await expect(request).toEqual({
+      input: 'mock',
+    });
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  test('with optional parameters', async ({ page }) => {
+    await page.addInitScript((mockSuggestions) => {
+      window.__lastRequest = null;
+      window.google = {
+        maps: {
+          importLibrary: () =>
+            Promise.resolve({
+              AutocompleteSuggestion: class {
+                static async fetchAutocompleteSuggestions(req) {
+                  window.__lastRequest = req;
+                  // Simulate network delay
+                  await new Promise((resolve) => setTimeout(resolve, 100));
+                  return mockSuggestions;
+                }
+              },
+            }),
+        },
+      };
+    }, MOCK_SUGGESTIONS_SINGLE);
+
+    await page.goto(
+      getStoryUrl(storyName, {
+        ...googleMapsAttrs,
+        'address-language': 'en-US',
+        'address-region': 'us',
+      }),
+    );
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+    // This attribute needs to be added to the HTML since storybook does not support adding "," in the attribute value
+    await locator.evaluate((el) => {
+      el.setAttribute('address-types', 'street_address, finance');
+    });
+    await component.insertValue('mock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'Mock Street',
+    });
+    await resultsLoaded.waitFor();
+    const items = await component.getItems();
+    expect(items.length).toBeGreaterThan(0);
+    await expect(component.dropDown).toBeVisible();
+    await component.selectItem('123 Mock Street');
+    expect(await component.getValue()).toBe(
+      '123 Mock Street, Mock City, MC 12345',
+    );
+    await expect(component.dropDown).not.toBeVisible();
+    const request = await page.evaluate(() => window.__lastRequest);
+    await expect(request).toEqual({
+      input: 'mock',
+      includedPrimaryTypes: ['street_address', 'finance'],
+      language: 'en-US',
+      region: 'us',
+    });
+  });
+
+  test('handles API error', async ({ page }) => {
+    await page.addInitScript(() => {
+      window.google = {
+        maps: {
+          importLibrary: () =>
+            Promise.resolve({
+              AutocompleteSuggestion: class {
+                static async fetchAutocompleteSuggestions(req) {
+                  await new Promise((resolve) => setTimeout(resolve, 100));
+                  throw new Error('API error');
+                }
+              },
+            }),
+        },
+      };
+    });
+
+    await page.goto(getStoryUrl(storyName, googleMapsAttrs));
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+    await component.insertValue('fastmock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'An error occurred',
+    });
+    await resultsLoaded.waitFor();
+    await expect(component.dropDown).toBeVisible();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+    await expect(item).toHaveText('An error occurred fetching results');
+  });
+});

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

@@ -0,0 +1,167 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl } from 'e2e-utils';
+import createAddressFieldTestDriver from '../testDriver/addressFieldTestDriver';
+
+const storyName = 'descope-address-field';
+const componentName = 'descope-address-field';
+
+const radarAttrs = {
+  'allow-custom-value': 'false',
+  'connector-template': 'radar',
+  'public-api-key': 'test-api-key',
+};
+
+const MOCK_RADAR_AUTOCOMPLETE_SUGGESTIONS = {
+  addresses: [
+    { formattedAddress: '123 Mock Street, Mock City, MC 12345' },
+    { formattedAddress: '456 Test Avenue, Mock Town, TT 67890' },
+    { formattedAddress: '789 Sample Boulevard, Mock City, DC 54321' },
+  ],
+};
+
+const MOCK_RADAR_AUTOCOMPLETE_SUGGESTIONS_2 = {
+  addresses: [
+    { formattedAddress: '123 Mock Street, Mock City, MC 12345' },
+    { formattedAddress: '456 Test Avenue, Mock Town, TT 67890' },
+  ],
+};
+
+test.describe('connectors - radar', () => {
+  test('no api key', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        'allow-custom-value': 'false',
+        'connector-template': 'radar',
+      }),
+    );
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+    await component.insertValue('fastmock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'An error occurred',
+    });
+    await resultsLoaded.waitFor();
+    await expect(component.dropDown).toBeVisible();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+    await expect(item).toHaveText('An error occurred fetching results');
+  });
+
+  test('with api key', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, radarAttrs));
+
+    await page.route(
+      '**/*api.radar.io/v1/search/autocomplete*',
+      async (route) => {
+        const req = route.request();
+        const url = new URL(req.url());
+        const headers = req.headers();
+        // Assert headers
+        expect(headers['authorization']).toBe('test-api-key');
+        // Assert URL parameters
+        expect(url.searchParams.size).toBe(1);
+        expect(url.searchParams.get('query')).toBe('mock');
+        route.fulfill({
+          status: 200,
+          body: JSON.stringify(MOCK_RADAR_AUTOCOMPLETE_SUGGESTIONS),
+        });
+      },
+    );
+
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+    await component.insertValue('mock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'Mock Street',
+    });
+    await resultsLoaded.waitFor();
+    const items = await component.getItems();
+    expect(items.length).toEqual(3);
+    await expect(component.dropDown).toBeVisible();
+    await component.selectItem('123 Mock Street');
+    expect(await component.getValue()).toBe(
+      '123 Mock Street, Mock City, MC 12345',
+    );
+    await expect(component.dropDown).not.toBeVisible();
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  test('with optional parameters', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        ...radarAttrs,
+        'address-language': 'en',
+        'address-limit': '5',
+      }),
+    );
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+
+    // These attributes need to be added to the HTML since storybook does not support adding "," in the attribute value
+    await locator.evaluate((el) => {
+      el.setAttribute('address-types', 'address, state');
+      el.setAttribute('address-region', 'US,AR');
+    });
+
+    await page.route(
+      '**/*api.radar.io/v1/search/autocomplete*',
+      async (route) => {
+        const req = route.request();
+        const url = new URL(req.url());
+        const headers = req.headers();
+        // Assert headers
+        expect(headers['authorization']).toBe('test-api-key');
+        // Assert URL parameters
+        expect(url.searchParams.size).toBe(5);
+        expect(url.searchParams.get('query')).toBe('mock');
+        expect(url.searchParams.get('lang')).toBe('en');
+        expect(url.searchParams.get('countryCode')).toBe('US,AR');
+        expect(url.searchParams.get('limit')).toBe('5');
+        expect(url.searchParams.get('layers')).toBe('address,state');
+        route.fulfill({
+          status: 200,
+          body: JSON.stringify(MOCK_RADAR_AUTOCOMPLETE_SUGGESTIONS_2),
+        });
+      },
+    );
+
+    await component.insertValue('mock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'Mock Street',
+    });
+    await resultsLoaded.waitFor();
+    const items = await component.getItems();
+    expect(items.length).toEqual(2);
+    await expect(component.dropDown).toBeVisible();
+    await component.selectItem('123 Mock Street');
+    expect(await component.getValue()).toBe(
+      '123 Mock Street, Mock City, MC 12345',
+    );
+    await expect(component.dropDown).not.toBeVisible();
+  });
+
+  test('handles API error', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, radarAttrs));
+
+    await page.route(
+      '**/*api.radar.io/v1/search/autocomplete*',
+      async (route) => {
+        route.fulfill({
+          status: 400,
+          body: 'Bad Request',
+        });
+      },
+    );
+
+    const locator = page.locator(componentName);
+    const component = createAddressFieldTestDriver(locator);
+    await component.insertValue('mock');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'An error occurred',
+    });
+    await resultsLoaded.waitFor();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+    await expect(item).toHaveText('An error occurred fetching results');
+  });
+});