[Rating] Add form integration test suite (#22573)

mui · Sep 15, 2020 · f53ecda · f53ecda
1 parent 2e1502f
commit f53ecda
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "eslint-plugin-react-hooks": "^4.0.7",
     "expect-puppeteer": "^4.3.0",
     "format-util": "^1.0.5",
+    "formdata-polyfill": "^3.0.20",
     "fs-extra": "^9.0.0",
     "glob": "^7.1.2",
     "glob-gitignore": "^1.0.11",

diff --git a/packages/material-ui-lab/src/Rating/Rating.test.js b/packages/material-ui-lab/src/Rating/Rating.test.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { stub, spy } from 'sinon';
 import {
+  act,
   getClasses,
   createMount,
   describeConformance,
@@ -110,4 +111,69 @@ describe('<Rating />', () => {
     checked = container.querySelector('input[name="rating-test"]:checked');
     expect(checked.value).to.equal('2');
   });
+
+  describe('<form> integration', () => {
+    before(function beforeHook() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        // JSDOM has issues with form validation for certain elements.
+        // We could adress them individually but that doesn't add much value if we already have a working environment.
+        this.skip();
+      }
+    });
+
+    [
+      {
+        ratingProps: { name: 'rating', defaultValue: 2 },
+        formData: [['rating', '2']],
+      },
+      {
+        ratingProps: { name: 'rating', defaultValue: 2, disabled: true },
+        formData: [],
+      },
+      {
+        ratingProps: { name: 'rating', defaultValue: 2, readOnly: true },
+        // FIXME: With native <input type="radio" /> read-only values are still submitted
+        // formData: [['rating', '2']],
+        formData: [],
+      },
+      {
+        ratingProps: { name: 'rating', required: true },
+        // FIXME: `Rating` does not implement `required`.
+        //        Native <input type="radio" /> would not pass validation
+        // formData: undefined,
+        formData: [['rating', '']],
+      },
+    ].forEach((testData, testNumber) => {
+      it(`submits the expected form data #${testNumber + 1}`, () => {
+        /**
+         * @type FormData
+         */
+        let data;
+        const handleSubmit = spy((event) => {
+          // Prevent navigation
+          event.preventDefault();
+          // populate FormData with the submitted form
+          data = new FormData(event.target);
+        });
+        render(
+          <form onSubmit={handleSubmit}>
+            <Rating {...testData.ratingProps} />
+            <button type="submit" />
+          </form>,
+        );
+        const submitter = document.querySelector('button[type="submit"]');
+
+        act(() => {
+          // form.submit() would not run form validation
+          submitter.click();
+        });
+
+        if (testData.formData === undefined) {
+          expect(handleSubmit.callCount).to.equal(0);
+        } else {
+          expect(Array.from(data.entries())).to.deep.equal(testData.formData);
+        }
+      });
+    });
+  });
 });
diff --git a/test/karma.tests.js b/test/karma.tests.js
@@ -1,5 +1,6 @@
 // https://github.com/airbnb/enzyme/issues/1792
 import 'core-js/modules/es6.array.from';
+import 'formdata-polyfill';
 import './utils/init';
 
 const integrationContext = require.context(

diff --git a/yarn.lock b/yarn.lock
@@ -7837,6 +7837,11 @@ format-util@^1.0.5:
   resolved "https://registry.yarnpkg.com/format-util/-/format-util-1.0.5.tgz#1ffb450c8a03e7bccffe40643180918cc297d271"
   integrity sha512-varLbTj0e0yVyRpqQhuWV+8hlePAgaoFRhNFj50BNjEIrw1/DphHSObtqwskVCPWNgzwPoQrZAbfa/SBiicNeg==
 
+formdata-polyfill@^3.0.20:
+  version "3.0.20"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-3.0.20.tgz#d6319db8efc5cf4bb2da27856c2b902be63be1c6"
+  integrity sha512-TAaxIEwTBdoH1TWndtUH1T0/GisUHwmOKcV5hjkR/iTatHBJSOHb563FP86Lra5nXo3iNdhK7HPwMl5Ihg71pg==
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"