CRA 2.1.8 update

CHANGELOG.md

@@ -14,6 +14,13 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [change] Update sharetribe-scripts (CRA fork) to v2.1.8. There are a couple of changes that you
+  should check from [#1073](https://github.com/sharetribe/flex-template-web/pull/1073)
+  - package.json has now a "browserlist" configuration key. This gives you an option to affect
+    Autoprefixer configs (aka CSS vendor prefixes / browser support). You might want to update it.
+  - IE support is removed from Create React App, but you can add polyfills yourself if needed.
+  - Test snapshots were also changed a bit. (Update your own custom tests if needed.)
+  - Some CSS and React rules were more strict, you might need to make changes to your custom code.
 - [fix] New npm vulnerability alerts checked and added to exception list.
   [#1075](https://github.com/sharetribe/flex-template-web/pull/1075)
 - [fix] ListingPage.duck: fix minor bug on dispatching the fetchReviewsRequest action

package.json

@@ -50,7 +50,7 @@
     "sanitize.css": "^5.0.0",
     "seedrandom": "^2.4.4",
     "sharetribe-flex-sdk": "^1.3.0",
-    "sharetribe-scripts": "1.1.5",
+    "sharetribe-scripts": "2.1.8",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.9",
     "url": "^0.11.0"
@@ -74,14 +74,22 @@
     "format": "prettier --write '**/*.{js,css}'",
     "format-ci": "prettier --list-different '**/*.{js,css}'",
     "format-docs": "prettier --write '**/*.md'",
-    "test": "sharetribe-scripts test --env=jsdom",
-    "test-ci": "sharetribe-scripts test --env=jsdom --runInBand",
+    "test": "sharetribe-scripts test",
+    "test-ci": "sharetribe-scripts test --runInBand",
     "eject": "sharetribe-scripts eject",
     "start": "node server/index.js",
     "dev-server": "export NODE_ENV=development PORT=4000 REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js",
     "heroku-postbuild": "yarn run build",
     "translate": "node scripts/translations.js"
   },
+  "browserslist": {
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "es5",

src/app.test.js

@@ -15,6 +15,16 @@ const render = (url, context) => {
   return { head, body };
 };
 
+const jsdomScroll = window.scroll;
+beforeAll(() => {
+  // Mock window.scroll - otherwise, Jest/JSDOM will print a not-implemented error.
+  window.scroll = () => {};
+});
+
+afterAll(() => {
+  window.scroll = jsdomScroll;
+});
+
 describe('Application', () => {
   it('renders in the client without crashing', () => {
     window.google = { maps: {} };

src/components/ActivityFeed/__snapshots__/ActivityFeed.test.js.snap

@@ -53,8 +53,8 @@ exports[`ActivityFeed matches snapshot 1`] = `
       <div>
         <p>
           Message msg1
-          
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
         <p>
           2017-11-09, 08:12
@@ -70,8 +70,8 @@ exports[`ActivityFeed matches snapshot 1`] = `
       <div>
         <p>
           Message msg2
-          
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
       </div>
       <p>

src/components/Button/Button.example.js

@@ -9,6 +9,7 @@ const preventDefault = e => {
   e.preventDefault();
 };
 
+const hashLink = '#';
 class InteractiveButton extends Component {
   constructor(props) {
     super(props);
@@ -130,29 +131,29 @@ const ButtonsComponent = () => {
       </p>
       <p>
         Lorem ipsum{' '}
-        <a href="#" onClick={preventDefault}>
+        <a href={hashLink} onClick={preventDefault}>
           a normal link
         </a>{' '}
         dolor sit amet
       </p>
 
       <h3>Link that looks like a default button:</h3>
-      <a className={css.buttonLink} href="#" onClick={preventDefault}>
+      <a className={css.buttonLink} href={hashLink} onClick={preventDefault}>
         Click me
       </a>
 
       <h3>Translated link that looks like a default button:</h3>
-      <a className={css.buttonLink} href="#" onClick={preventDefault}>
+      <a className={css.buttonLink} href={hashLink} onClick={preventDefault}>
         <span>Clique moi</span>
       </a>
 
       <h3>Link that looks like a primary button:</h3>
-      <a className={css.buttonLinkPrimary} href="#" onClick={preventDefault}>
+      <a className={css.buttonLinkPrimary} href={hashLink} onClick={preventDefault}>
         Click me
       </a>
 
       <h3>Link that looks like a secondary button:</h3>
-      <a className={css.buttonLinkSecondary} href="#" onClick={preventDefault}>
+      <a className={css.buttonLinkSecondary} href={hashLink} onClick={preventDefault}>
         Click me
       </a>
 

src/components/LocationAutocompleteInput/LocationAutocompleteInput.css

@@ -80,7 +80,7 @@ size and position, etc.
   border-bottom-left-radius: var(--borderRadius);
   border-bottom-right-radius: var(--borderRadius);
   box-shadow: var(--boxShadowPopup);
-  z-index: var(--zIndexPopup + 1);
+  z-index: calc(var(--zIndexPopup) + 1);
 }
 
 /*