fix(autocomplete-css): use babel transpiling for places.css (#887)

* fix(autocomplete-css): use babel transpiling for places.css * fix(autocomplete-css): use proxy file to trigger babel transpiling * fix(autocomplete-css): include babel-css into dist folder * test(autocomplete-css): add tests to ensure that places.css is not crashing with npm
algolia · Sep 30, 2019 · fcc7112 · fcc7112
1 parent e4c1b83
commit fcc7112
Show file tree

Hide file tree

Showing 12 changed files with 381 additions and 21 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,3 +2,5 @@ dist/
 docs/build/
 docs/vendor/
 test/npm-lib/
+test/npm-autocomplete/
+test/npm-widget/
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,5 @@ docs/.webpack/
 .coverage/
 .vscode/
 test/npm-lib/places.js
+test/npm-widget/places.js
+test/npm-autocomplete/places.js
diff --git a/autocompleteDataset.js b/autocompleteDataset.js
@@ -6,7 +6,7 @@
 require('./src/navigatorLanguage');
 const createAutocompleteDataset = require('./src/createAutocompleteDataset')
   .default;
-const css = require('./src/places.css').default;
+const css = require('./babel-css').default;
 const insertCss = require('insert-css');
 insertCss(css, { prepend: true });
 

diff --git a/babel-css.js b/babel-css.js
@@ -0,0 +1,5 @@
+// this is proxy file so that babel inlines src/places.css into the css variable
+// since it is not a commonjs file
+import css from './src/places.css';
+
+export default css;
diff --git a/scripts/build.sh b/scripts/build.sh
@@ -45,6 +45,7 @@ done
 # The goal is for the user to be able to require/import places without
 # having to import a complete build (dist/cdn), to avoid duplication of dependencies
 BABEL_DISABLE_CACHE=1 BABEL_ENV=npm babel index.js -o "$dist_dir/index.js"
+BABEL_DISABLE_CACHE=1 BABEL_ENV=npm babel babel-css.js -o "$dist_dir/babel-css.js"
 BABEL_DISABLE_CACHE=1 BABEL_ENV=npm babel autocompleteDataset.js -o "$dist_dir/autocompleteDataset.js"
 BABEL_DISABLE_CACHE=1 BABEL_ENV=npm babel instantsearchWidget.js -o "$dist_dir/instantsearchWidget.js"
 BABEL_DISABLE_CACHE=1 BABEL_ENV=npm babel src/ --out-dir "$dist_dir/src/" --ignore "src/**/*.test.js","src/**/__mocks__/*","src/**/__snapshots__/*"
diff --git a/test/cdn-autocomplete-min/index.html b/test/cdn-autocomplete-min/index.html
@@ -5,7 +5,7 @@
       .algolia-autocomplete {
         width: 100%;
       }
-      .ad-example-dropdown-menu {
+      .ap-dropdown-menu {
         width: 100%;
         color: black;
         background-color: #fff;
@@ -15,28 +15,28 @@
         padding: .5em;
         box-shadow: 1px 1px 32px -10px rgba(0,0,0,0.62);
       }
-      .ad-example-dropdown-menu .ad-example-suggestion {
+      .ap-dropdown-menu .ap-suggestion {
         cursor: pointer;
         padding: 5px 4px;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion img {
+      .ap-dropdown-menu .ap-suggestion img {
         height: 2em;
         margin-top: .5em;
         margin-right: 10px;
         float: left;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion small {
+      .ap-dropdown-menu .ap-suggestion small {
         font-size: .8em;
         color: #bbb;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion.ad-example-cursor {
+      .ap-dropdown-menu .ap-suggestion.ap-cursor {
         background-color: #B2D7FF;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion em {
+      .ap-dropdown-menu .ap-suggestion em {
         font-weight: bold;
         font-style: normal;
       }
-      .ad-example-header {
+      .ap-header {
         font-weight: bold;
         padding: .5em 0;
         margin-bottom: 1em;
@@ -88,7 +88,7 @@
         hint: false,
         debug: true,
         cssClasses: {
-          prefix: 'ad-example'
+          prefix: 'ap'
         }
       }, [
         rentalsDataset,

diff --git a/test/cdn-autocomplete/index.html b/test/cdn-autocomplete/index.html
@@ -5,7 +5,7 @@
       .algolia-autocomplete {
         width: 100%;
       }
-      .ad-example-dropdown-menu {
+      .ap-dropdown-menu {
         width: 100%;
         color: black;
         background-color: #fff;
@@ -15,28 +15,28 @@
         padding: .5em;
         box-shadow: 1px 1px 32px -10px rgba(0,0,0,0.62);
       }
-      .ad-example-dropdown-menu .ad-example-suggestion {
+      .ap-dropdown-menu .ap-suggestion {
         cursor: pointer;
         padding: 5px 4px;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion img {
+      .ap-dropdown-menu .ap-suggestion img {
         height: 2em;
         margin-top: .5em;
         margin-right: 10px;
         float: left;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion small {
+      .ap-dropdown-menu .ap-suggestion small {
         font-size: .8em;
         color: #bbb;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion.ad-example-cursor {
+      .ap-dropdown-menu .ap-suggestion.ap-cursor {
         background-color: #B2D7FF;
       }
-      .ad-example-dropdown-menu .ad-example-suggestion em {
+      .ap-dropdown-menu .ap-suggestion em {
         font-weight: bold;
         font-style: normal;
       }
-      .ad-example-header {
+      .ap-header {
         font-weight: bold;
         padding: .5em 0;
         margin-bottom: 1em;
@@ -88,7 +88,7 @@
         hint: false,
         debug: true,
         cssClasses: {
-          prefix: 'ad-example'
+          prefix: 'ap'
         }
       }, [
         rentalsDataset,

diff --git a/test/e2e.test.js b/test/e2e.test.js
@@ -224,6 +224,218 @@ describe('releases', () => {
     });
   });
 
+  describe('npm autocomplete', () => {
+    let url;
+    let browser;
+    let page;
+
+    beforeAll(done => {
+      url = `file://${path.join(__dirname, 'npm-autocomplete', 'index.html')}`;
+      // webpack bundle
+      webpack(
+        {
+          mode: 'development',
+          target: 'web',
+          entry: {
+            places: path.join(__dirname, 'npm-autocomplete', 'import.js'),
+          },
+          output: {
+            path: path.join(__dirname, 'npm-autocomplete'),
+            libraryTarget: 'umd',
+          },
+        },
+        () => {
+          done();
+        }
+      );
+    });
+
+    beforeEach(async () => {
+      browser = await puppeteer.launch({
+        headless: true,
+      });
+      page = await browser.newPage();
+      await page.goto(url);
+
+      await page.setExtraHTTPHeaders({
+        referer: 'https://community.algolia.com/',
+      });
+
+      page.on('error', err => {
+        throw new Error(err);
+      });
+
+      page.on('pageerror', pageerr => {
+        throw new Error(pageerr);
+      });
+    });
+
+    afterEach(async () => {
+      await browser.close();
+    });
+
+    it('puppeteer can access demo file', () => {
+      page.on('error', err => {
+        throw new Error(err);
+      });
+
+      page.on('pageerror', pageerr => {
+        throw new Error(pageerr);
+      });
+    });
+
+    it('can search from search box', async () => {
+      const pendingXHR = new PendingXHR(page);
+      await page.focus('#search-box');
+      const query = `London`;
+      await page.keyboard.type(query);
+
+      // autocomplete should send a query per character typed
+      expect(pendingXHR.pendingXhrCount()).toEqual(query.length * 2);
+      await pendingXHR.waitForAllXhrFinished();
+
+      const request = utils.getXHRDataForQuery(pendingXHR, query);
+
+      // Places response should have the expected number of hits
+      const body = await utils.getResponseBodyFromRequest(request);
+      expect(body.hits).toHaveLength(3);
+
+      // autocomplete container should display suggestion dropdown
+      const apDropdown = await page.$('.ap-dropdown-menu');
+      expect(apDropdown).toBeTruthy();
+
+      // Places suggestion dropdown should have has many suggestions as there are hits
+      const suggestions = await page.$$eval(
+        '.ap-dataset-places .ap-suggestion',
+        $suggestions => {
+          return Array.from($suggestions).map(elt => elt.textContent);
+        }
+      );
+
+      expect(suggestions).toHaveLength(body.hits.length);
+
+      // Places suggestion dropdown data should match hits
+      const allMatching = suggestions.every((domText, i) =>
+        domText.match(body.hits[i].locale_names[0])
+      );
+      expect(allMatching).toBeTruthy();
+    });
+  });
+
+  describe('npm widget', () => {
+    let url;
+    let browser;
+    let page;
+
+    beforeAll(done => {
+      url = `file://${path.join(__dirname, 'npm-widget', 'index.html')}`;
+      // webpack bundle
+      webpack(
+        {
+          mode: 'development',
+          target: 'web',
+          entry: {
+            places: path.join(__dirname, 'npm-widget', 'import.js'),
+          },
+          output: {
+            path: path.join(__dirname, 'npm-widget'),
+            libraryTarget: 'umd',
+          },
+        },
+        () => {
+          done();
+        }
+      );
+    });
+
+    beforeEach(async () => {
+      browser = await puppeteer.launch({
+        headless: true,
+      });
+      page = await browser.newPage();
+      await page.goto(url);
+
+      await page.setExtraHTTPHeaders({
+        referer: 'https://community.algolia.com/',
+      });
+
+      page.on('error', err => {
+        throw new Error(err);
+      });
+
+      page.on('pageerror', pageerr => {
+        throw new Error(pageerr);
+      });
+    });
+
+    afterEach(async () => {
+      await browser.close();
+    });
+
+    it('puppeteer can access demo file', () => {
+      page.on('error', err => {
+        throw new Error(err);
+      });
+
+      page.on('pageerror', pageerr => {
+        throw new Error(pageerr);
+      });
+    });
+
+    it('using places search box updates aroundLatLng in InstantSearch', async () => {
+      const pendingXHR = new PendingXHR(page);
+
+      expect(pendingXHR.pendingXhrCount()).toEqual(0);
+      await pendingXHR.waitForAllXhrFinished();
+
+      await page.focus('#search-box');
+      const query = `55 rue d'Amsterd`;
+      await page.keyboard.type(query);
+
+      // autocomplete should send a query per character typed
+      expect(pendingXHR.pendingXhrCount()).toEqual(query.length);
+      await pendingXHR.waitForAllXhrFinished();
+
+      const request = utils.getXHRDataForQuery(pendingXHR, query);
+
+      const body = await utils.getResponseBodyFromRequest(request);
+      const geoloc = body.hits[0]._geoloc;
+
+      const aroundLatLngQueriesBeforeSelect = Array.from(
+        pendingXHR.finishedWithSuccessXhrs
+      )
+        .filter($request => $request._url.match(/queries/)) // generic algolia query
+        .filter($request => {
+          const { _postData } = $request;
+          const $body = JSON.parse(_postData);
+          const params = new URLSearchParams($body.requests[0].params);
+          return params.get('aroundLatLng') === `${geoloc.lat},${geoloc.lng}`;
+        });
+
+      // we shouldn't have done any aroundLatLng query yet
+      expect(aroundLatLngQueriesBeforeSelect).toHaveLength(0);
+
+      // selecting a result should trigger a query
+      await page.keyboard.press('Enter');
+
+      expect(pendingXHR.pendingXhrCount()).toEqual(1);
+      await pendingXHR.waitForAllXhrFinished();
+
+      const aroundLatLngQueriesAfterSelect = Array.from(
+        pendingXHR.finishedWithSuccessXhrs
+      )
+        .filter($request => $request._url.match(/queries/)) // generic algolia query
+        .filter($request => {
+          const { _postData } = $request;
+          const $body = JSON.parse(_postData);
+          const params = new URLSearchParams($body.requests[0].params);
+          return params.get('aroundLatLng') === `${geoloc.lat},${geoloc.lng}`;
+        });
+
+      expect(aroundLatLngQueriesAfterSelect).toHaveLength(1);
+    });
+  });
+
   describe('cdn place.js non-minified', () => {
     let url;
     let browser;
@@ -588,12 +800,12 @@ describe('releases', () => {
       expect(body.hits).toHaveLength(3);
 
       // autocomplete container should display suggestion dropdown
-      const apDropdown = await page.$('.ad-example-dropdown-menu');
+      const apDropdown = await page.$('.ap-dropdown-menu');
       expect(apDropdown).toBeTruthy();
 
       // Places suggestion dropdown should have has many suggestions as there are hits
       const suggestions = await page.$$eval(
-        '.ad-example-dataset-places .ad-example-suggestion',
+        '.ap-dataset-places .ap-suggestion',
         $suggestions => {
           return Array.from($suggestions).map(elt => elt.textContent);
         }
@@ -673,12 +885,12 @@ describe('releases', () => {
       expect(body.hits).toHaveLength(3);
 
       // autocomplete container should display suggestion dropdown
-      const apDropdown = await page.$('.ad-example-dropdown-menu');
+      const apDropdown = await page.$('.ap-dropdown-menu');
       expect(apDropdown).toBeTruthy();
 
       // Places suggestion dropdown should have has many suggestions as there are hits
       const suggestions = await page.$$eval(
-        '.ad-example-dataset-places .ad-example-suggestion',
+        '.ap-dataset-places .ap-suggestion',
         $suggestions => {
           return Array.from($suggestions).map(elt => elt.textContent);
         }

diff --git a/test/npm-autocomplete/import.js b/test/npm-autocomplete/import.js
@@ -0,0 +1,3 @@
+const placesAutocompleteDataset = require('../../dist/autocompleteDataset');
+
+module.exports = { placesAutocompleteDataset };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const placesAutocompleteDataset = require('../../dist/autocompleteDataset');

		module.exports = { placesAutocompleteDataset };