Fix errors on Travis CI (#290)

* Should hopefully fix the "SecurityError: localStorage is not available for opaque origins" error * Fixed tests that were failing, updated Enzyme, and removed the polyfill for the new react lifecycle methods. Even though the polyfill in Mask was working in the wild, it was exhibiting erroneous behavior in Enzyme, so I decided to just get rid of it and put the checks in componentDidUpdate instead. To show that the controlled, masked components still work, I've included my original example in the Mask example. * Remove the compiled version of the Mask component from the diff * Apparently some of the tests on CI rely on the dist copies, and the dist copy from master has a dependency that we no longer have. Revert "Remove the compiled version of the Mask component from the diff" This reverts commit 64e1b3a. * Removed this compiled file * Revert "Removed this compiled file" - I guess I included this on purpose. Catching up to my October self This reverts commit 646e2af.
CMSgov · Dec 12, 2018 · a55e987 · a55e987
1 parent ee8df98
commit a55e987
Show file tree

Hide file tree

Showing 11 changed files with 1,247 additions and 151 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "cssstats": "^3.1.0",
     "del": "^3.0.0",
     "ejs": "^2.5.7",
-    "enzyme": "^3.2.0",
+    "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.0",
     "eslint": "^4.18.1",
@@ -98,6 +98,7 @@
     "node": ">=7.0.0"
   },
   "jest": {
+    "testURL": "http://localhost",
     "setupFiles": [
       "<rootDir>/tools/jest/polyfills.js",
       "<rootDir>/tools/jest/setupEnzyme.js"

diff --git a/packages/core/dist/components/TextField/Mask.js b/packages/core/dist/components/TextField/Mask.js
@@ -7,6 +7,7 @@ exports.Mask = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+exports.maskValue = maskValue;
 exports.unmask = unmask;
 
 require('core-js/fn/array/includes');
@@ -19,8 +20,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactLifecyclesCompat = require('react-lifecycles-compat');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -178,49 +177,50 @@ Style guide: components.masked-field.react
  * of the value.
  */
 
-var _Mask = function (_React$PureComponent) {
-  _inherits(_Mask, _React$PureComponent);
-
-  _createClass(_Mask, null, [{
-    key: 'getDerivedStateFromProps',
-    value: function getDerivedStateFromProps(props, state) {
-      var fieldProps = _react2.default.Children.only(props.children).props;
-      var isControlled = fieldProps.value !== undefined;
-      if (isControlled) {
-        var mask = props.mask;
+var Mask = exports.Mask = function (_React$PureComponent) {
+  _inherits(Mask, _React$PureComponent);
 
-        if (unmask(fieldProps.value, mask) !== unmask(state.value, mask)) {
-          return {
-            value: maskValue(fieldProps.value || '', mask)
-          };
-        }
-      }
-      return null;
-    }
-  }]);
+  function Mask(props) {
+    _classCallCheck(this, Mask);
 
-  function _Mask(props) {
-    _classCallCheck(this, _Mask);
-
-    var _this = _possibleConstructorReturn(this, (_Mask.__proto__ || Object.getPrototypeOf(_Mask)).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Mask.__proto__ || Object.getPrototypeOf(Mask)).call(this, props));
 
     var field = _this.field();
     var initialValue = field.props.value || field.props.defaultValue;
-    // console.log('initial value', initialValue, maskValue(initialValue, props.mask), props.mask)
 
     _this.state = {
       value: maskValue(initialValue, props.mask)
     };
     return _this;
   }
 
-  _createClass(_Mask, [{
+  _createClass(Mask, [{
     key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps) {
       if (this.debouncedOnBlurEvent) {
         this.field().props.onBlur(this.debouncedOnBlurEvent);
         this.debouncedOnBlurEvent = null;
       }
+
+      var fieldProps = this.field().props;
+      var prevFieldProps = _react2.default.Children.only(prevProps.children).props;
+      var isControlled = fieldProps.value !== undefined;
+      if (isControlled && prevFieldProps.value !== fieldProps.value) {
+        var mask = this.props.mask;
+        // For controlled components, the value prop should ideally be changed by
+        // the controlling component once we've called onChange with our updates.
+        // If the change was triggered this way through user input, then the prop
+        // given should match our internal state when unmasked. If what we're
+        // given and what we have locally don't match, that means the controlling
+        // component has made its own unrelated change, so we should update our
+        // state and mask this new value.
+
+        if (unmask(fieldProps.value, mask) !== unmask(this.state.value, mask)) {
+          this.setState({
+            value: maskValue(fieldProps.value || '', mask)
+          });
+        }
+      }
     }
 
     /**
@@ -307,10 +307,10 @@ var _Mask = function (_React$PureComponent) {
     }
   }]);
 
-  return _Mask;
+  return Mask;
 }(_react2.default.PureComponent);
 
-_Mask.propTypes = {
+Mask.propTypes = {
   /** Pass the input as the child */
   children: _propTypes2.default.node.isRequired,
   mask: _propTypes2.default.string.isRequired
@@ -345,7 +345,4 @@ function unmask(value, mask) {
   return value;
 }
 
-var Mask = (0, _reactLifecyclesCompat.polyfill)(_Mask);
-
-exports.Mask = Mask;
 exports.default = Mask;
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -15,8 +15,7 @@
     "downshift": "1.31.16",
     "ev-emitter": "^1.1.1",
     "lodash.uniqueid": "^4.0.1",
-    "react-aria-modal": "^2.11.1",
-    "react-lifecycles-compat": "^3.0.4"
+    "react-aria-modal": "^2.11.1"
   },
   "peerDependencies": {
     "prop-types": "^15.0.0 || ^16.0.0",

diff --git a/packages/core/src/components/ChoiceList/Choice.test.jsx b/packages/core/src/components/ChoiceList/Choice.test.jsx
@@ -231,7 +231,7 @@ describe('Choice', () => {
       const data = shallowRender({ checked: true });
 
       expect(data.wrapper.instance().isControlled).toBe(true);
-      expect(data.wrapper.state('checked')).toBeUndefined();
+      expect(data.wrapper.state()).toBeNull();
     });
   });
 
@@ -279,7 +279,7 @@ describe('Choice', () => {
           target: { checked: false }
         });
 
-        expect(data.wrapper.state('checked')).toBeUndefined();
+        expect(data.wrapper.state()).toBeNull();
       });
     });
 

diff --git a/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap b/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap
@@ -76,93 +76,140 @@ exports[`Dialog renders react-aria-modal 1`] = `
     underlayClass="ds-c-dialog-wrap"
     underlayClickExits={false}
   >
-    <Modal
-      dialogClass="ds-c-dialog ds-base"
-      dialogId="react-aria-modal-dialog"
-      escapeExits={true}
-      focusTrapPaused={false}
-      getApplicationNode={
-        [MockFunction] {
-          "calls": Array [
-            Array [],
-          ],
-        }
+    <Portal
+      containerInfo={
+        <div>
+          <div>
+            <div
+              class="ds-c-dialog-wrap"
+            >
+              <div
+                aria-labelledby="dialog-title"
+                class="ds-c-dialog ds-base"
+                id="react-aria-modal-dialog"
+                role="dialog"
+              >
+                <div
+                  role="document"
+                >
+                  <header
+                    class="ds-c-dialog__header"
+                    role="banner"
+                  >
+                    <h1
+                      class="ds-h2"
+                      id="dialog-title"
+                    >
+                      Foo
+                    </h1>
+                    <button
+                      aria-label="Close modal dialog"
+                      class="ds-c-button ds-c-button--transparent ds-c-dialog__close"
+                      type="button"
+                    >
+                      Close
+                    </button>
+                  </header>
+                  <main
+                    role="main"
+                  >
+                    Bar
+                  </main>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       }
-      includeDefaultStyles={false}
-      mounted={true}
-      onExit={[MockFunction]}
-      scrollDisabled={true}
-      titleId="dialog-title"
-      underlayClass="ds-c-dialog-wrap"
-      underlayClickExits={false}
-      underlayColor="rgba(0,0,0,0.5)"
-      underlayProps={Object {}}
     >
-      <FocusTrap
-        _createFocusTrap={[Function]}
-        active={true}
-        focusTrapOptions={
-          Object {
-            "initialFocus": undefined,
+      <Modal
+        dialogClass="ds-c-dialog ds-base"
+        dialogId="react-aria-modal-dialog"
+        escapeExits={true}
+        focusTrapPaused={false}
+        getApplicationNode={
+          [MockFunction] {
+            "calls": Array [
+              Array [],
+            ],
           }
         }
-        paused={false}
-        tag="div"
+        includeDefaultStyles={false}
+        mounted={true}
+        onExit={[MockFunction]}
+        scrollDisabled={true}
+        titleId="dialog-title"
+        underlayClass="ds-c-dialog-wrap"
+        underlayClickExits={false}
+        underlayColor="rgba(0,0,0,0.5)"
+        underlayProps={Object {}}
       >
-        <div>
-          <div
-            className="ds-c-dialog-wrap"
-            style={Object {}}
-          >
+        <FocusTrap
+          _createFocusTrap={[Function]}
+          active={true}
+          focusTrapOptions={
+            Object {
+              "initialFocus": undefined,
+            }
+          }
+          paused={false}
+          tag="div"
+        >
+          <div>
             <div
-              aria-labelledby="dialog-title"
-              className="ds-c-dialog ds-base"
-              id="react-aria-modal-dialog"
-              key="b"
-              role="dialog"
+              className="ds-c-dialog-wrap"
               style={Object {}}
             >
               <div
-                role="document"
+                aria-labelledby="dialog-title"
+                className="ds-c-dialog ds-base"
+                id="react-aria-modal-dialog"
+                key="b"
+                role="dialog"
+                style={Object {}}
               >
-                <header
-                  className="ds-c-dialog__header"
-                  role="banner"
+                <div
+                  role="document"
                 >
-                  <h1
-                    className="ds-h2"
-                    id="dialog-title"
-                  >
-                    Foo
-                  </h1>
-                  <Button
-                    aria-label="Close modal dialog"
-                    className="ds-c-dialog__close"
-                    onClick={[MockFunction]}
-                    type="button"
-                    variation="transparent"
+                  <header
+                    className="ds-c-dialog__header"
+                    role="banner"
                   >
-                    <button
+                    <h1
+                      className="ds-h2"
+                      id="dialog-title"
+                    >
+                      Foo
+                    </h1>
+                    <Button
                       aria-label="Close modal dialog"
-                      className="ds-c-button ds-c-button--transparent ds-c-dialog__close"
-                      onClick={[Function]}
+                      className="ds-c-dialog__close"
+                      onClick={[MockFunction]}
                       type="button"
+                      variation="transparent"
                     >
-                      Close
-                    </button>
-                  </Button>
-                </header>
-                <main
-                  role="main"
-                >
-                  Bar
-                </main>
+                      <button
+                        aria-label="Close modal dialog"
+                        className="ds-c-button ds-c-button--transparent ds-c-dialog__close"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        Close
+                      </button>
+                    </Button>
+                  </header>
+                  <main
+                    role="main"
+                  >
+                    Bar
+                  </main>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </FocusTrap>
-    </Modal>
+        </FocusTrap>
+      </Modal>
+    </Portal>
   </Displaced>
 </Dialog>
 `;