From 10a6b64918310576b0d54cdc28848cad016a75ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20Pi=C3=A9plu?= Date: Tue, 5 Mar 2019 14:39:33 -0500 Subject: [PATCH] Bug Fix empty html useless added by PR #1123 / v1.2.0 (#1158) * Infer type from enum if a type is not provided to SelectWidget (#1100) Connects to #1098 Change-type: minor Signed-off-by: Lucian * No more useless div on schema field not additional * Fix tests (remove useles html) - Revert some test added by https://github.com/mozilla-services/react-jsonschema-form/pull/1123/files - use new css class for form-additional insted layout css class for test selection * Don't use WrapIfAdditonal Component to hav a clerer diff, but adding code duplicate * Use a WrapIfAdditional Component to have a cleanner code / diff * Fix tests * Ignore vscode Ide folder * Remove useless parentProps * Fix old test selector for form additional --- .gitignore | 3 + src/components/fields/SchemaField.js | 104 +++++++++++++++------------ test/ArrayFieldTemplate_test.js | 2 +- test/ArrayField_test.js | 3 +- test/ObjectField_test.js | 26 ++++--- test/SchemaField_test.js | 2 +- 6 files changed, 82 insertions(+), 58 deletions(-) diff --git a/.gitignore b/.gitignore index 7f2ca177f1..b5009d0cbe 100644 --- a/.gitignore +++ b/.gitignore @@ -122,6 +122,9 @@ dist lib yarn.lock +# IDE +.vscode + # Code coverage coverage .nyc_output diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js index 50380ba6bc..bf60a3e412 100644 --- a/src/components/fields/SchemaField.js +++ b/src/components/fields/SchemaField.js @@ -122,7 +122,6 @@ function ErrorList(props) { function DefaultTemplate(props) { const { id, - classNames, label, children, errors, @@ -131,56 +130,19 @@ function DefaultTemplate(props) { hidden, required, displayLabel, - onKeyChange, - onDropPropertyClick, } = props; if (hidden) { return
{children}
; } - const additional = props.schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG); - const keyLabel = `${label} Key`; - return ( -
-
- {additional && ( -
-
-
-
- )} - -
- {displayLabel &&
-
- {additional && ( - - )} -
-
-
+ + {displayLabel && ); } if (process.env.NODE_ENV !== "production") { @@ -211,6 +173,58 @@ DefaultTemplate.defaultProps = { displayLabel: true, }; +function WrapIfAdditional(props) { + const { + id, + classNames, + disabled, + label, + onKeyChange, + onDropPropertyClick, + readonly, + required, + schema, + } = props; + const keyLabel = `${label} Key`; // i18n ? + const additional = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG); + + if (!additional) { + return
{props.children}
; + } + + return ( +
+
+
+
+
+
+
+ {props.children} +
+
+ +
+
+
+ ); +} + function SchemaFieldRender(props) { const { uiSchema, diff --git a/test/ArrayFieldTemplate_test.js b/test/ArrayFieldTemplate_test.js index 9abc9db7af..b6bad381e8 100644 --- a/test/ArrayFieldTemplate_test.js +++ b/test/ArrayFieldTemplate_test.js @@ -53,7 +53,7 @@ describe("ArrayFieldTemplate", () => { ArrayFieldTemplate, }); - expect(node.querySelectorAll(".field-array div")).to.have.length.of(6); + expect(node.querySelectorAll(".field-array div")).to.have.length.of(3); }); }); diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js index 2d40321868..1bc815b093 100644 --- a/test/ArrayField_test.js +++ b/test/ArrayField_test.js @@ -24,8 +24,7 @@ describe("ArrayField", () => { const { node } = createFormComponent({ schema: { type: "array" } }); expect( - node.querySelector(".field-array > div > div > .unsupported-field") - .textContent + node.querySelector(".field-array > .unsupported-field").textContent ).to.contain("Missing items definition"); }); }); diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js index afd1fb04cb..e8c04af47f 100644 --- a/test/ObjectField_test.js +++ b/test/ObjectField_test.js @@ -209,7 +209,7 @@ describe("ObjectField", () => { }, }); const labels = [].map.call( - node.querySelectorAll(".field > div > div > label"), + node.querySelectorAll(".field > label"), l => l.textContent ); @@ -224,7 +224,7 @@ describe("ObjectField", () => { }, }); const labels = [].map.call( - node.querySelectorAll(".field > div > div> label"), + node.querySelectorAll(".field > label"), l => l.textContent ); @@ -289,7 +289,7 @@ describe("ObjectField", () => { }, }); const labels = [].map.call( - node.querySelectorAll(".field > div > div > label"), + node.querySelectorAll(".field > label"), l => l.textContent ); @@ -322,7 +322,7 @@ describe("ObjectField", () => { }, }); const labels = [].map.call( - node.querySelectorAll(".field > div > div > label"), + node.querySelectorAll(".field > label"), l => l.textContent ); @@ -720,13 +720,18 @@ describe("ObjectField", () => { }); expect( - node.querySelector(".form-group > .row > .col-xs-2 .btn-danger") + node.querySelector( + ".form-group > .form-additional > .form-additional + .col-xs-2 .btn-danger" + ) ).eql(null); Simulate.click(node.querySelector(".object-property-expand button")); - expect(node.querySelector(".form-group > .row > .col-xs-2 > .btn-danger")) - .to.not.be.null; + expect( + node.querySelector( + ".form-group > .row > .form-additional + .col-xs-2 > .btn-danger" + ) + ).to.not.be.null; }); it("delete button should delete key-value pair", () => { @@ -736,7 +741,9 @@ describe("ObjectField", () => { }); expect(node.querySelector("#root_first-key").value).to.eql("first"); Simulate.click( - node.querySelector(".form-group > .row > .col-xs-2 > .btn-danger") + node.querySelector( + ".form-group > .row > .form-additional + .col-xs-2 > .btn-danger" + ) ); expect(node.querySelector("#root_first-key")).to.not.exist; }); @@ -746,7 +753,8 @@ describe("ObjectField", () => { schema, formData: { first: 1, second: 2, third: 3 }, }); - const selector = ".form-group > .row > .col-xs-2 > .btn-danger"; + const selector = + ".form-group > .row > .form-additional + .col-xs-2 > .btn-danger"; expect(node.querySelectorAll(selector).length).to.eql(3); Simulate.click(node.querySelectorAll(selector)[1]); expect(node.querySelector("#root_second-key")).to.not.exist; diff --git a/test/SchemaField_test.js b/test/SchemaField_test.js index 504e722ce8..fa503d767e 100644 --- a/test/SchemaField_test.js +++ b/test/SchemaField_test.js @@ -313,7 +313,7 @@ describe("SchemaField", () => { submit(node); const matches = node.querySelectorAll( - "form > .form-group > div > div > div > .error-detail .text-danger" + "form > .form-group > div > .error-detail .text-danger" ); expect(matches).to.have.length.of(1); expect(matches[0].textContent).to.eql("container");