@popsure/dirty-swan 0.27.23 → 0.27.24

package/dist/lib/components/autocompleteAddress/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.23",
+  "version": "0.27.24",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/autocompleteAddress/index.test.tsx

@@ -0,0 +1,94 @@
+import { Address } from '@popsure/public-models';
+import { fireEvent, render } from '@testing-library/react';
+
+import AutoCompleteAddress from '.';
+
+const address = {
+  street: 'Köpeniker Strasse',
+  houseNumber: '4000',
+  postcode: '10179',
+  city: 'Berlin',
+  country: 'DE',
+};
+
+const setup = (
+  address: Partial<Address> | undefined = undefined,
+  onAddressChange: (address: Partial<Address>) => void = () => {}
+) => {
+  return render(
+    <AutoCompleteAddress
+      address={address}
+      apiKey={''}
+      onAddressChange={onAddressChange}
+    />
+  );
+};
+
+const inputTestId = 'ds-input-input';
+
+describe('AutocompleteAddress component', () => {
+  it('Should show all address fields once a search is completed', () => {
+    // @ts-ignore
+    window.google.maps.places.Autocomplete = class {
+      reference: HTMLElement;
+      constructor(reference: HTMLElement) {
+        this.reference = reference;
+      }
+      // @ts-ignore
+      addListener(_action, callback) {
+        this.reference.addEventListener('change', (e: Event) =>
+          (e.target as HTMLInputElement).value !== ''
+            ? callback({
+                geometry: {
+                  location: class {},
+                },
+                address_components: [
+                  {
+                    long_name: 'Köpeniker Strasse',
+                    short_name: 'Köpeniker Strasse',
+                    types: ['route'],
+                  },
+                ],
+              })
+            : null
+        );
+      }
+    };
+
+    const screen = setup();
+    fireEvent.change(screen.getByTestId(inputTestId), {
+      target: { value: 'Köpeniker' },
+    });
+
+    const inputs = screen.getAllByTestId(inputTestId);
+    expect(inputs[0].getAttribute('value')).toBe('Köpeniker Strasse');
+    expect(inputs.length).toEqual(5);
+  });
+
+  it('Should enable to enter the address manually', async () => {
+    const callback = jest.fn();
+    const screen = setup(undefined, callback);
+    const btn = await screen.findByText('Enter address manually');
+    fireEvent.click(btn);
+
+    // fill out all fields
+    const inputs = screen.getAllByTestId(inputTestId);
+
+    fireEvent.change(inputs[0], { target: { value: 'Köpeniker Strasse' } });
+    fireEvent.change(inputs[1], { target: { value: '4000' } });
+    fireEvent.change(inputs[3], { target: { value: '10179' } });
+    fireEvent.change(inputs[4], { target: { value: 'Berlin' } });
+
+    // callback should be called with a complete address
+    expect(callback).toHaveBeenCalledWith(address);
+  });
+
+  it('Should prefill fields if an address is provided', async () => {
+    const screen = setup(address);
+    const inputs = screen.getAllByTestId(inputTestId);
+    expect(inputs[0].getAttribute('value')).toBe('Köpeniker Strasse');
+    expect(inputs[1].getAttribute('value')).toBe('4000');
+    expect(inputs[3].getAttribute('value')).toBe('10179');
+    expect(inputs[4].getAttribute('value')).toBe('Berlin');
+  });
+});

package/src/lib/components/autocompleteAddress/index.tsx

@@ -228,6 +228,7 @@ const AutoCompleteAddress = ({
             <Input
               className="w100"
               id="autocomplete"
+              key="autocomplete-search"
               data-cy="autocomplete"
               type="text"
               placeholder={
@@ -247,6 +248,7 @@ const AutoCompleteAddress = ({
               <Input
                 className="w100"
                 data-cy="autocomplete"
+                key="autocomplete-street"
                 type="text"
                 placeholder={placeholders?.street || 'Street'}
                 value={address?.street || ''}
@@ -263,6 +265,7 @@ const AutoCompleteAddress = ({
               <Input
                 className={`wmx2 ${styles['house-number-input']}`}
                 data-cy="autocomplete-house-number"
+                key="autocomplete-house-number"
                 placeholder={placeholders?.houseNumber || 'House Number'}
                 value={address?.houseNumber || ''}
                 onChange={(e) => {
@@ -279,6 +282,7 @@ const AutoCompleteAddress = ({
             <Input
               className="mt16"
               data-cy="autocomplete-additional-info"
+              key="autocomplete-additional-info"
               placeholder={
                 placeholders?.additionalInformation ||
                 'Additional information (C/O, apartment, …)'
@@ -297,6 +301,7 @@ const AutoCompleteAddress = ({
               <Input
                 className="w100"
                 data-cy="autocomplete-postcode"
+                key="autocomplete-postcode"
                 placeholder={placeholders?.postcode || 'Postcode'}
                 value={address?.postcode || ''}
                 onChange={(e) => {
@@ -312,6 +317,7 @@ const AutoCompleteAddress = ({
               <Input
                 className="w100"
                 data-cy="autocomplete-city"
+                key="autocomplete-city"
                 placeholder={placeholders?.city || 'City'}
                 value={address?.city || ''}
                 onChange={(e) => {

package/src/setupTests.js

@@ -1,8 +1,54 @@
 window.google = {
   maps: {
+    StyledMapType: class {},
+    Marker: class {
+      setPosition() {}
+    },
+    Map: class {
+      constructor() {
+        this.mapTypes = { set: jest.fn() };
+      }
+
+      setMapTypeId() {
+        return jest.fn();
+      }
+      panTo() {}
+      setZoom() {}
+    },
+    LatLngBounds: class {},
     places: {
-      Autocomplete: class {},
+      Autocomplete: class {
+        addListener() {
+          return jest.fn();
+        }
+      },
+      AutocompleteService: class {},
+      PlacesServiceStatus: {
+        INVALID_REQUEST: 'INVALID_REQUEST',
+        NOT_FOUND: 'NOT_FOUND',
+        OK: 'OK',
+        OVER_QUERY_LIMIT: 'OVER_QUERY_LIMIT',
+        REQUEST_DENIED: 'REQUEST_DENIED',
+        UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+        ZERO_RESULTS: 'ZERO_RESULTS',
+      },
+      PlacesAutocomplete: {
+        INVALID_REQUEST: 'INVALID_REQUEST',
+        NOT_FOUND: 'NOT_FOUND',
+        OK: 'OK',
+        OVER_QUERY_LIMIT: 'OVER_QUERY_LIMIT',
+        REQUEST_DENIED: 'REQUEST_DENIED',
+        UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+        ZERO_RESULTS: 'ZERO_RESULTS',
+      },
+      PlacesService: class {
+        findPlaceFromQuery() {
+          return jest.fn();
+        }
+      },
     },
-    StyledMapType: class {},
+
+    MarkerClusterer: class {},
+    Geocoder: class {},
   },
 };