From ecaf22e3eaf15849d9b7331c445545c0660e16ea Mon Sep 17 00:00:00 2001 From: mikieyx <103902194+mikieyx@users.noreply.github.com> Date: Tue, 6 Aug 2024 11:17:41 -0700 Subject: [PATCH] #2081 Conditions + small portion of controls (#2082) --- .../conditions/alerts-test.js | 293 +++++++-------- .../conditions/allow-change-test.js | 38 +- .../conditions/condition-utils-test.js | 23 +- .../conditions/conditional-default-test.js | 48 +-- .../conditions/panel-conditions-test.js | 336 ++++++++++-------- .../conditions/ui-conditions-test.js | 4 +- .../controls/checkbox-test.js | 139 +++++--- .../common-properties/controls/code-test.js | 13 +- .../common-properties/controls/custom-test.js | 83 +++-- .../common-properties/controls/hidden-test.js | 30 +- 10 files changed, 551 insertions(+), 456 deletions(-) diff --git a/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js b/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js index 5a495fb588..27fb41e1ae 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js @@ -14,17 +14,18 @@ * limitations under the License. */ -import propertyUtils from "../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import { expect } from "chai"; import numberfieldParamDef from "../../test_resources/paramDefs/numberfield_paramDef.json"; import structuretableParamDef from "../../test_resources/paramDefs/structuretable_paramDef.json"; import actionParamDef from "../../test_resources/paramDefs/action_paramDef.json"; -import tableUtils from "./../../_utils_/table-utils"; +import tableUtilsRTL from "./../../_utils_/table-utilsRTL"; +import { fireEvent } from "@testing-library/react"; describe("condition messages should add alerts tab", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(numberfieldParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(numberfieldParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { @@ -32,113 +33,116 @@ describe("condition messages should add alerts tab", () => { }); it("control should have error message from null input and generator should trigger validation", () => { - let integerInput = wrapper.find("div[data-id='properties-number_int'] input"); + const { container } = wrapper; + let integerInput = container.querySelectorAll("div[data-id='properties-number_int'] input"); expect(integerInput).to.have.length(1); - integerInput.simulate("change", { target: { value: "", validity: { badInput: false } } }); - - const randomInput = wrapper.find("div[data-id='properties-number_random'] input"); + integerInput[0].setAttribute("badInput", false); + fireEvent.change(integerInput[0], { target: { value: "" } }); + const randomInput = container.querySelectorAll("div[data-id='properties-number_random'] input"); expect(randomInput).to.have.length(1); - randomInput.simulate("change", { target: { value: "", validity: { badInput: false } } }); + randomInput[0].setAttribute("badInput", false); + fireEvent.change(randomInput[0], { target: { value: "" } }); + // get alerts tabs - let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - let alertButton = alertCategory.find("button.cds--accordion__heading"); - expect(alertButton.text()).to.equal("Alerts (2)"); - alertButton.simulate("click"); + let alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + let alertButton = alertCategory.querySelector("button.cds--accordion__heading"); + expect(alertButton.textContent).to.equal("Alerts (2)"); + fireEvent.click(alertButton); // ensure that alert tab is open - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - const alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div + alertCategory = container.querySelector("div.properties-category-container"); // alert category + const alertDiv = alertCategory.querySelectorAll("li.properties-category-content.show"); // Alerts div expect(alertDiv).to.have.length(1); - let alertList = alertDiv.find("a.properties-link-text"); + let alertList = alertDiv[0].querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(2); - expect(alertList.at(0).text()).to.equal("You must enter a value for Integer."); - expect(alertList.at(1).text()).to.equal("You must enter a value for Random."); + expect(alertList[0].textContent).to.equal("You must enter a value for Integer."); + expect(alertList[1].textContent).to.equal("You must enter a value for Random."); // go to Values tab by clicking on error message - alertList.at(0).find("a.properties-link-text") - .simulate("click"); - let valuesCategory = wrapper.find("div.properties-category-container").at(1); // Values category - expect(valuesCategory.find("button.cds--accordion__heading").text()).to.equal("Values (2)"); + fireEvent.click(alertList[0]); + let valuesCategory = container.querySelectorAll("div.properties-category-container")[1]; // Values category + expect(valuesCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Values (2)"); // regenerate random number should decrease alert list - let valuesDiv = valuesCategory.find("li.properties-category-content.show"); // Values div + let valuesDiv = valuesCategory.querySelectorAll("li.properties-category-content.show"); // Values div expect(valuesDiv).to.have.length(1); - const generator = valuesDiv.find("button.properties-number-generator"); + const generator = valuesDiv[0].querySelectorAll("button.properties-number-generator"); expect(generator).to.have.length(2); - generator.at(0).simulate("click"); + fireEvent.click(generator[0]); - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - alertButton = alertCategory.find("button.cds--accordion__heading"); - expect(alertButton.text()).to.equal("Alerts (1)"); - alertButton.simulate("click"); + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + alertButton = alertCategory.querySelector("button.cds--accordion__heading"); + expect(alertButton.textContent).to.equal("Alerts (1)"); + fireEvent.click(alertButton); - alertList = alertCategory.find("a.properties-link-text"); + alertList = alertCategory.querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(1); - expect(alertList.at(0).text()).to.equal("You must enter a value for Integer."); - alertList.at(0).find("a.properties-link-text") - .simulate("click"); + expect(alertList[0].textContent).to.equal("You must enter a value for Integer."); + fireEvent.click(alertList[0]); // enter new integer value to remove all Alerts - valuesCategory = wrapper.find("div.properties-category-container").at(1); // Values category - expect(valuesCategory.find("button.cds--accordion__heading").text()).to.equal("Values (1)"); + valuesCategory = container.querySelectorAll("div.properties-category-container")[1]; // Values category + expect(valuesCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Values (1)"); - valuesDiv = valuesCategory.find("li.properties-category-content.show"); // Values category + valuesDiv = valuesCategory.querySelectorAll("li.properties-category-content.show"); // Values category expect(valuesDiv).to.have.length(1); - integerInput = valuesDiv.find("div[data-id='properties-number_int'] input"); + integerInput = valuesDiv[0].querySelectorAll("div[data-id='properties-number_int'] input"); expect(integerInput).to.have.length(1); - integerInput.simulate("change", { target: { value: "1" } }); + fireEvent.change(integerInput[0], { target: { value: "1" } }); - valuesCategory = wrapper.find("div.properties-category-container").at(0); // Values category - expect(valuesCategory.find("button.cds--accordion__heading").text()).to.equal("Values"); + valuesCategory = container.querySelectorAll("div.properties-category-container")[0]; // Values category + expect(valuesCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Values"); }); it("alerts should not show messages for hidden controls", () => { // open the conditions tabs - const conditionsCategory = wrapper.find("div.properties-category-container").at(1); // Conditions category - const conditionsButton = conditionsCategory.find("button.cds--accordion__heading"); - expect(conditionsButton.text()).to.equal("Conditions"); - conditionsButton.simulate("click"); + const { container } = wrapper; + const conditionsCategory = container.querySelectorAll("div.properties-category-container")[1]; // Conditions category + const conditionsButton = conditionsCategory.querySelector("button.cds--accordion__heading"); + expect(conditionsButton.textContent).to.equal("Conditions"); + fireEvent.click(conditionsButton); // unhide the number field - const checkboxWrapper = wrapper.find("div[data-id='properties-hide']"); - const checkbox = checkboxWrapper.find("input"); - expect(checkbox.getDOMNode().checked).to.equal(true); - checkbox.getDOMNode().checked = false; - checkbox.simulate("change"); + const checkboxWrapper = container.querySelector("div[data-id='properties-hide']"); + const checkbox = checkboxWrapper.querySelector("input"); + expect(checkbox.checked).to.equal(true); + checkbox.setAttribute("checked", false); + fireEvent.click(checkbox); // set the required field to empty to generate an error - const integerInput = wrapper.find("div[data-id='properties-number_hidden'] input"); + const integerInput = container.querySelectorAll("div[data-id='properties-number_hidden'] input"); expect(integerInput).to.have.length(1); - integerInput.simulate("change", { target: { value: "", validity: { badInput: false } } }); + integerInput[0].setAttribute("badInput", false); + fireEvent.change(integerInput[0], { target: { value: "" } }); // get alerts tabs - let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - const alertButton = alertCategory.find("button.cds--accordion__heading"); - expect(alertButton.text()).to.equal("Alerts (1)"); - alertButton.simulate("click"); + let alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + const alertButton = alertCategory.querySelector("button.cds--accordion__heading"); + expect(alertButton.textContent).to.equal("Alerts (1)"); + fireEvent.click(alertButton); // ensure that alert tab is open - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - let alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + let alertDiv = alertCategory.querySelectorAll("li.properties-category-content.show"); // Alerts div expect(alertDiv).to.have.length(1); - let alertList = alertDiv.find("a.properties-link-text"); + let alertList = alertDiv[0].querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(1); - expect(alertList.at(0).text()).to.equal("You must enter a value for Number Hidden."); + expect(alertList[0].textContent).to.equal("You must enter a value for Number Hidden."); // hide the number field - checkbox.getDOMNode().checked = true; - checkbox.simulate("change"); + checkbox.setAttribute("checked", true); + fireEvent.click(checkbox); // there should be no alerts for the hidden field - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div - alertList = alertDiv.find("a.properties-link-text"); + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + alertDiv = alertCategory.querySelector("li.properties-category-content"); // Alerts div + alertList = alertDiv.querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(0); }); }); describe("condition messages should add alerts tab for tables", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(structuretableParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(structuretableParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { @@ -148,127 +152,128 @@ describe("condition messages should add alerts tab for tables", () => { it("alerts should show messages for invalid fields on initial load", () => { // validate the Alerts tab has 2 warnings // get alerts tabs - let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - const alertButton = alertCategory.find("button.cds--accordion__heading"); - expect(alertButton.text()).to.equal("Alerts (2)"); - alertButton.simulate("click"); + const { container } = wrapper; + let alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + const alertButton = alertCategory.querySelector("button.cds--accordion__heading"); + expect(alertButton.textContent).to.equal("Alerts (2)"); + fireEvent.click(alertButton); // ensure that alert tab is open - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - let alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + let alertDiv = alertCategory.querySelectorAll("li.properties-category-content.show"); // Alerts div expect(alertDiv).to.have.length(1); - let alertList = alertDiv.find("a.properties-link-text"); + let alertList = alertDiv[0].querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(2); - expect(alertList.at(0).text()).to.equal("There are 2 warning cells. "); - expect(alertList.at(1).text()).to.equal("There are 2 warning cells. "); + expect(alertList[0].textContent).to.equal("There are 2 warning cells. "); + expect(alertList[1].textContent).to.equal("There are 2 warning cells. "); // Clear 1 alert // open the summary link for configure no header table - const summary = wrapper.find("div[data-id='properties-structuretableNoHeader-summary-panel']"); - const summaryButton = summary.find("button.properties-summary-link-button"); - summaryButton.simulate("click"); + const summary = container.querySelector("div[data-id='properties-structuretableNoHeader-summary-panel']"); + const summaryButton = summary.querySelector("button.properties-summary-link-button"); + fireEvent.click(summaryButton); - const tableWrapper = wrapper.find("div[data-id='properties-ft-structuretableNoHeader']"); + const tableWrapper = container.querySelector("div[data-id='properties-ft-structuretableNoHeader']"); // select first 2 rows in table - const tableData = tableUtils.getTableRows(tableWrapper); + const tableData = tableUtilsRTL.getTableRows(tableWrapper); expect(tableData).to.have.length(2); - tableUtils.selectCheckboxes(tableData, [0, 1]); + tableUtilsRTL.selectCheckboxes(tableData, [0, 1]); // ensure table toolbar has delete button and select it - const tableToolbar = wrapper.find("div.properties-table-toolbar"); - const deleteButton = tableToolbar.find("button.properties-action-delete"); + const tableToolbar = container.querySelector("div.properties-table-toolbar"); + const deleteButton = tableToolbar.querySelectorAll("button.properties-action-delete"); expect(deleteButton).to.have.length(1); - deleteButton.simulate("click"); // remove a row + fireEvent.click(deleteButton[0]); // remove a row // Save wide flyout - const okButton = wrapper.find(".properties-wf-content") - .find(".properties-modal-buttons") - .find("Button[className='properties-apply-button']"); - okButton.simulate("click"); + const okButton = container.querySelector(".properties-wf-content") + .querySelector(".properties-modal-buttons") + .querySelector("button.properties-apply-button"); + fireEvent.click(okButton); // validate the Alerts tab has only 1 warning - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + alertDiv = alertCategory.querySelectorAll("li.properties-category-content.show"); // Alerts div expect(alertDiv).to.have.length(1); - alertList = alertDiv.find("a.properties-link-text"); + alertList = alertDiv[0].querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(1); - expect(alertList.at(0).text()).to.equal("There are 2 warning cells. "); + expect(alertList[0].textContent).to.equal("There are 2 warning cells. "); }); it("alerts should not show messages for hidden table controls", () => { // open the conditions tabs - const conditionsCategory = wrapper.find("div.properties-category-container").at(5); // Conditions category - const conditionsButton = conditionsCategory.find("button.cds--accordion__heading"); - expect(conditionsButton.text()).to.equal("Conditions"); - conditionsButton.simulate("click"); + const { container } = wrapper; + const conditionsCategory = container.querySelectorAll("div.properties-category-container")[5]; // Conditions category + const conditionsButton = conditionsCategory.querySelector("button.cds--accordion__heading"); + expect(conditionsButton.textContent).to.equal("Conditions"); + fireEvent.click(conditionsButton); // open the summary link for hide tables - let summary = wrapper.find("div[data-id='properties-structuretableRenameFields-summary-panel']"); - let summaryButton = summary.find("button.properties-summary-link-button"); - summaryButton.simulate("click"); + let summary = container.querySelector("div[data-id='properties-structuretableRenameFields-summary-panel']"); + let summaryButton = summary.querySelector("button.properties-summary-link-button"); + fireEvent.click(summaryButton); // set the error condition in the table - let cellDropdown = wrapper.find("div[data-id='properties-structuretableRenameFields_0_3']"); + let cellDropdown = container.querySelector("div[data-id='properties-structuretableRenameFields_0_3']"); - let dropdown = cellDropdown.find("select"); - dropdown.simulate("change", { target: { value: "number" } }); - wrapper.update(); + let dropdown = cellDropdown.querySelector("select"); + fireEvent.change(dropdown, { target: { value: "number" } }); - cellDropdown = wrapper.find("div[data-id='properties-structuretableRenameFields_0_3']"); - dropdown = cellDropdown.find("select"); + cellDropdown = container.querySelector("div[data-id='properties-structuretableRenameFields_0_3']"); + dropdown = cellDropdown.querySelector("select"); // validate there is an error - cellDropdown = wrapper.find("div[data-id='properties-structuretableRenameFields_0_3']"); - const messageWrapper = cellDropdown.find("div.properties-validation-message"); + cellDropdown = container.querySelector("div[data-id='properties-structuretableRenameFields_0_3']"); + const messageWrapper = cellDropdown.querySelectorAll("div.properties-validation-message"); expect(messageWrapper).to.have.length(1); // Save the summary panel - summary = wrapper.find("div[data-id='properties-structuretableRenameFields-summary-panel']"); - let buttonDiv = summary.find("div.properties-modal-buttons"); + summary = container.querySelector("div[data-id='properties-structuretableRenameFields-summary-panel']"); + let buttonDiv = container.querySelectorAll("div.properties-modal-buttons"); expect(buttonDiv).to.have.length(1); - let applyButton = buttonDiv.find("button[data-id='properties-apply-button']"); - applyButton.simulate("click"); + let applyButton = buttonDiv[0].querySelector("button[data-id='properties-apply-button']"); + fireEvent.click(applyButton); // validate the Alerts tab has the error // get alerts tabs - let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - const alertButton = alertCategory.find("button.cds--accordion__heading"); - expect(alertButton.text()).to.equal("Alerts (3)"); - alertButton.simulate("click"); + let alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + const alertButton = alertCategory.querySelector("button.cds--accordion__heading"); + expect(alertButton.textContent).to.equal("Alerts (3)"); + fireEvent.click(alertButton); // ensure that alert tab is open - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - let alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + let alertDiv = alertCategory.querySelectorAll("li.properties-category-content.show"); // Alerts div expect(alertDiv).to.have.length(1); - let alertList = alertDiv.find("a.properties-link-text"); + let alertList = alertDiv[0].querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(3); - expect(alertList.at(0).text()).to.equal("The field cannot contain 'number'"); + expect(alertList[0].textContent).to.equal("The field cannot contain 'number'"); // open the summary link for the hide table - summary = wrapper.find("div[data-id='properties-structuretableRenameFields-summary-panel']"); - summaryButton = summary.find("button.properties-summary-link-button"); - summaryButton.simulate("click"); + summary = container.querySelector("div[data-id='properties-structuretableRenameFields-summary-panel']"); + summaryButton = summary.querySelector("button.properties-summary-link-button"); + fireEvent.click(summaryButton); // hide the table - const checkboxWrapper = wrapper.find("div[data-id='properties-showRenameFieldsTable']"); - const checkbox = checkboxWrapper.find("input"); - expect(checkbox.getDOMNode().checked).to.equal(true); - checkbox.getDOMNode().checked = false; - checkbox.simulate("change"); + const checkboxWrapper = container.querySelector("div[data-id='properties-showRenameFieldsTable']"); + const checkbox = checkboxWrapper.querySelector("input"); + expect(checkbox.checked).to.equal(true); + checkbox.setAttribute("checked", false); + fireEvent.click(checkbox); // Save the summary panel - summary = wrapper.find("div[data-id='properties-structuretableRenameFields-summary-panel']"); - buttonDiv = summary.find("div.properties-modal-buttons"); + summary = container.querySelector("div[data-id='properties-structuretableRenameFields-summary-panel']"); + buttonDiv = container.querySelectorAll("div.properties-modal-buttons"); expect(buttonDiv).to.have.length(1); - applyButton = buttonDiv.find("button[data-id='properties-apply-button']"); - applyButton.simulate("click"); + applyButton = buttonDiv[0].querySelector("button[data-id='properties-apply-button']"); + fireEvent.click(applyButton); // Verify the Error is cleared from Alerts tab - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div - alertList = alertDiv.find("a.properties-link-text"); + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + alertDiv = alertCategory.querySelector("li.properties-category-content.show"); // Alerts div + alertList = alertDiv.querySelectorAll("a.properties-link-text"); expect(alertList).to.have.length(2); - expect(alertList.at(0).text()).to.not.equal("The field cannot contain 'number'"); + expect(alertList[0].textContent).to.not.equal("The field cannot contain 'number'"); }); it("alerts should not show messages for hidden table cell controls", () => { @@ -283,14 +288,14 @@ describe("Show/hide Alerts tab based on showAlertsTab boolean in propertiesConfi // No "Alerts" tab. Also no messageCount next to Summary Panel Actions. const categoryLabels = ["Actions", "Conditions", "Summary Panel Actions"]; - const renderedObject = propertyUtils.flyoutEditorForm(actionParamDef, { showAlertsTab: false }); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(actionParamDef, { showAlertsTab: false }); const wrapper = renderedObject.wrapper; - - const allCategories = wrapper.find("div.properties-category-container"); + const { container } = wrapper; + const allCategories = container.querySelectorAll("div.properties-category-container"); expect(allCategories).to.have.length(3); allCategories.forEach((category, idx) => { - const categoryTitle = category.find("button.cds--accordion__heading").text(); + const categoryTitle = category.querySelector("button.cds--accordion__heading").textContent; expect(categoryTitle).to.equal(categoryLabels[idx]); }); }); @@ -299,14 +304,15 @@ describe("Show/hide Alerts tab based on showAlertsTab boolean in propertiesConfi // Shows "Alerts" tab and messageCount next to Summary Panel Actions. const categoryLabels = ["Alerts (1)", "Actions", "Conditions", "Summary Panel Actions (1)"]; - const renderedObject = propertyUtils.flyoutEditorForm(actionParamDef, { showAlertsTab: true }); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(actionParamDef, { showAlertsTab: true }); const wrapper = renderedObject.wrapper; + const { container } = wrapper; - const allCategories = wrapper.find("div.properties-category-container"); + const allCategories = container.querySelectorAll("div.properties-category-container"); expect(allCategories).to.have.length(4); allCategories.forEach((category, idx) => { - const categoryTitle = category.find("button.cds--accordion__heading").text(); + const categoryTitle = category.querySelector("button.cds--accordion__heading").textContent; expect(categoryTitle).to.equal(categoryLabels[idx]); }); }); @@ -315,14 +321,15 @@ describe("Show/hide Alerts tab based on showAlertsTab boolean in propertiesConfi // Shows "Alerts" tab and messageCount next to Summary Panel Actions. const categoryLabels = ["Alerts (1)", "Actions", "Conditions", "Summary Panel Actions (1)"]; - const renderedObject = propertyUtils.flyoutEditorForm(actionParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(actionParamDef); const wrapper = renderedObject.wrapper; + const { container } = wrapper; - const allCategories = wrapper.find("div.properties-category-container"); + const allCategories = container.querySelectorAll("div.properties-category-container"); expect(allCategories).to.have.length(4); allCategories.forEach((category, idx) => { - const categoryTitle = category.find("button.cds--accordion__heading").text(); + const categoryTitle = category.querySelector("button.cds--accordion__heading").textContent; expect(categoryTitle).to.equal(categoryLabels[idx]); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/conditions/allow-change-test.js b/canvas_modules/common-canvas/__tests__/common-properties/conditions/allow-change-test.js index 89750aa965..6559261582 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/conditions/allow-change-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/conditions/allow-change-test.js @@ -14,17 +14,18 @@ * limitations under the License. */ -import propertyUtils from "../../_utils_/property-utils"; -import tableUtils from "./../../_utils_/table-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; +import tableUtilsRTL from "./../../_utils_/table-utilsRTL"; import { expect } from "chai"; import structuretableParamDef from "../../test_resources/paramDefs/structuretable_paramDef.json"; +import { fireEvent } from "@testing-library/react"; describe("Condition allow_change test cases", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(structuretableParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(structuretableParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -34,13 +35,14 @@ describe("Condition allow_change test cases", () => { it("Test the not allow a change to a field.", () => { - let summaryPanel = propertyUtils.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); + const { container } = wrapper; + let summaryPanel = propertyUtilsRTL.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); // select the first row in the table - const tableRows = tableUtils.getTableRows(summaryPanel); + const tableRows = tableUtilsRTL.getTableRows(summaryPanel); expect(tableRows).to.have.length(4); - tableRows.at(0).simulate("click"); - summaryPanel = propertyUtils.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); + fireEvent.click(tableRows[0]); + summaryPanel = propertyUtilsRTL.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); const sportPropertyId = { name: "ST_mse_table", @@ -56,20 +58,22 @@ describe("Condition allow_change test cases", () => { expect(controller.getPropertyValue(textPropertyId)).to.equal("European"); // attempt to change the sport field to "Football" - const toggleWrapper = wrapper.find("div[data-id='properties-ST_mse_table_0_2']"); - const button = toggleWrapper.find("button"); - button.simulate("click"); + const toggleWrapper = container.querySelector("div[data-id='properties-ST_mse_table_0_2']"); + const button = toggleWrapper.querySelector("button"); + fireEvent.click(button); // change is not allowed. expect(controller.getPropertyValue(sportPropertyId)).to.equal("Soccer"); }); it("Test the allow a change to a field.", () => { - let summaryPanel = propertyUtils.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); + const { container } = wrapper; + let summaryPanel = propertyUtilsRTL.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); // select the first row in the table - const tableRows = tableUtils.getTableRows(summaryPanel); + const tableRows = tableUtilsRTL.getTableRows(summaryPanel); expect(tableRows).to.have.length(4); - tableRows.at(0).simulate("click"); - summaryPanel = propertyUtils.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); + fireEvent.click(tableRows[0]); + // tableRows.at(0).simulate("click"); + summaryPanel = propertyUtilsRTL.openSummaryPanel(wrapper, "ST_mse_table-summary-panel"); const sportPropertyId = { name: "ST_mse_table", @@ -85,9 +89,9 @@ describe("Condition allow_change test cases", () => { expect(controller.getPropertyValue(textPropertyId)).to.equal("Canadian"); // attempt to change the sport field to "Football" - const toggleWrapper = wrapper.find("div[data-id='properties-ST_mse_table_2_2']"); - const button = toggleWrapper.find("button"); - button.simulate("click"); + const toggleWrapper = container.querySelector("div[data-id='properties-ST_mse_table_2_2']"); + const button = toggleWrapper.querySelector("button"); + fireEvent.click(button); // change is allowed. expect(controller.getPropertyValue(sportPropertyId)).to.equal("Football"); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/conditions/condition-utils-test.js b/canvas_modules/common-canvas/__tests__/common-properties/conditions/condition-utils-test.js index b5ba438278..17a7fe3714 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/conditions/condition-utils-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/conditions/condition-utils-test.js @@ -16,15 +16,16 @@ import { expect } from "chai"; import { validateInput } from "./../../../src/common-properties/ui-conditions/conditions-utils.js"; -import propertyUtils from "./../../_utils_/property-utils"; +import propertyUtilsRTL from "./../../_utils_/property-utilsRTL"; import readOnlyParamDef from "./../../test_resources/paramDefs/readonly_paramDef.json"; +import { fireEvent } from "@testing-library/react"; describe("validateInput validates input and updates controller correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(readOnlyParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(readOnlyParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; controller.setErrorMessages({}); @@ -35,14 +36,14 @@ describe("validateInput validates input and updates controller correctly", () => }); it("validateInput will update controller error messages when multiple error messages are present in a validation set", () => { - const summaryPanelTable = propertyUtils.openSummaryPanel(wrapper, "readonly-table-summary"); + const summaryPanelTable = propertyUtilsRTL.openSummaryPanel(wrapper, "readonly-table-summary"); let messages = controller.getErrorMessages(); expect(JSON.stringify(messages)).to.equal(JSON.stringify({})); const propId = { name: "readonly_table_cond", row: 0, col: 0 }; const control = controller.getControl(propId); - const rowOneCheckbox = summaryPanelTable.find("input[type='checkbox']").at(5); - rowOneCheckbox.getDOMNode().checked = false; - rowOneCheckbox.simulate("change"); + const rowOneCheckbox = summaryPanelTable.querySelectorAll("input[type='checkbox']")[5]; + rowOneCheckbox.setAttribute("checked", false); + fireEvent.click(rowOneCheckbox); validateInput(propId, controller, control); let expected = { @@ -63,11 +64,11 @@ describe("validateInput validates input and updates controller correctly", () => }; messages = controller.getErrorMessages(); expect(JSON.stringify(messages.readonly_table_cond)).to.eql(JSON.stringify(expected)); - const rowTwoCheckbox = summaryPanelTable.find("input[type='checkbox']").at(7); - rowTwoCheckbox.getDOMNode().checked = true; - rowTwoCheckbox.simulate("change"); - rowTwoCheckbox.getDOMNode().checked = false; - rowTwoCheckbox.simulate("change"); + const rowTwoCheckbox = summaryPanelTable.querySelectorAll("input[type='checkbox']")[7]; + rowTwoCheckbox.setAttribute("checked", true); + fireEvent.click(rowTwoCheckbox); + rowTwoCheckbox.setAttribute("checked", false); + fireEvent.click(rowTwoCheckbox); validateInput(propId, controller, control); expected = { diff --git a/canvas_modules/common-canvas/__tests__/common-properties/conditions/conditional-default-test.js b/canvas_modules/common-canvas/__tests__/common-properties/conditions/conditional-default-test.js index cb9247e29e..210cb8bbe5 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/conditions/conditional-default-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/conditions/conditional-default-test.js @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import propertyUtils from "./../../_utils_/property-utils"; +import propertyUtilsRTL from "./../../_utils_/property-utilsRTL"; import defaultsParamDef from "./../../test_resources/paramDefs/defaults_paramDef.json"; import { expect } from "chai"; @@ -21,7 +21,7 @@ describe("Condition default_value test cases", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(defaultsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(defaultsParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -32,77 +32,85 @@ describe("Condition default_value test cases", () => { it("If default value is defined in current_parameters, use default value from current_parameters", () => { // current_parameters_default has default value defined in current_parameters and default_value condition. // Higher preference is given to the value in current_parameters - const field2 = wrapper.find("div[data-id='properties-current_parameters_default'] input"); + const { container } = wrapper; + const field2 = container.querySelectorAll("div[data-id='properties-current_parameters_default'] input"); expect(field2).to.have.length(1); - expect(field2.prop("value")).to.equal(defaultsParamDef.current_parameters.current_parameters_default); + expect(field2[0].value).to.equal(defaultsParamDef.current_parameters.current_parameters_default); }); it("If default value is defined in current_ui_parameters, use default value from current_ui_parameters", () => { // current_ui_parameters_default has default value defined in current_ui_parameters and default_value condition. // Higher preference is given to the value in current_ui_parameters - const uiField2 = wrapper.find("div[data-id='properties-current_ui_parameters_default'] input"); + const { container } = wrapper; + const uiField2 = container.querySelectorAll("div[data-id='properties-current_ui_parameters_default'] input"); expect(uiField2).to.have.length(1); - expect(uiField2.prop("value")).to.equal(defaultsParamDef.current_ui_parameters.current_ui_parameters_default); + expect(uiField2[0].value).to.equal(defaultsParamDef.current_ui_parameters.current_ui_parameters_default); }); it(`If default value is NOT defined in current_parameters and default_value condition is defined, use value from default_value condition if the condition evaluate to true`, () => { // conditional_default has default value defined in default_value condition // Verify "mode" is "Include" + const { container } = wrapper; expect(controller.getPropertyValue({ name: "mode" })).to.equal("Include"); // default_value condition evaluate to true when mode is Include. - const field1 = wrapper.find("div[data-id='properties-conditional_default'] textarea"); + const field1 = container.querySelectorAll("div[data-id='properties-conditional_default'] textarea"); expect(field1).to.have.length(1); const defaultValueConditions = defaultsParamDef.conditions.filter((cond) => cond.default_value.parameter_ref === "conditional_default"); - expect(field1.text()).to.equal(defaultValueConditions[0].default_value.value.join()); + expect(field1[0].textContent).to.equal(defaultValueConditions[0].default_value.value.join()); }); it(`If default value is NOT defined in current_parameters and default_value condition is defined, use default value from parameters if the condition evaluate to false`, () => { // default_value condition for ui_conditional_default evaluate to false // Verify "mode" is "Include" + const { container } = wrapper; expect(controller.getPropertyValue({ name: "mode" })).to.equal("Include"); // default_value condition evaluate to false because mode is NOT Discard - const uiField1 = wrapper.find("div[data-id='properties-ui_conditional_default'] textarea"); + const uiField1 = container.querySelectorAll("div[data-id='properties-ui_conditional_default'] textarea"); expect(uiField1).to.have.length(1); const uiParameterDefinition = defaultsParamDef.uihints.ui_parameters.filter((param) => param.id === "ui_conditional_default"); - expect(uiField1.text()).to.equal(uiParameterDefinition[0].default.join()); - expect(uiField1.text()).to.not.equal(defaultsParamDef.conditions[0].default_value.value.join()); + expect(uiField1[0].textContent).to.equal(uiParameterDefinition[0].default.join()); + expect(uiField1[0].textContent).to.not.equal(defaultsParamDef.conditions[0].default_value.value.join()); }); it("If default value is NOT defined in current_parameters and default_value condition, use default value from parameters", () => { // parameters_default has default value defined ONLY in parameters - const field3 = wrapper.find("div[data-id='properties-parameters_default'] input"); + const { container } = wrapper; + const field3 = container.querySelectorAll("div[data-id='properties-parameters_default'] input"); expect(field3).to.have.length(1); const parameterDefinition = defaultsParamDef.parameters.filter((param) => param.id === "parameters_default"); - expect(field3.prop("value")).to.equal(parameterDefinition[0].default); + expect(field3[0].value).to.equal(parameterDefinition[0].default); }); it("If default value is NOT defined in current_ui_parameters and default_value condition, use default value from ui_parameters", () => { // ui_parameters_default has default value defined ONLY in ui_parameters - const uiField3 = wrapper.find("div[data-id='properties-ui_parameters_default'] input"); + const { container } = wrapper; + const uiField3 = container.querySelectorAll("div[data-id='properties-ui_parameters_default'] input"); expect(uiField3).to.have.length(1); const uiParameterDefinition = defaultsParamDef.uihints.ui_parameters.filter((param) => param.id === "ui_parameters_default"); - expect(uiField3.prop("value")).to.equal(uiParameterDefinition[0].default); + expect(uiField3[0].value).to.equal(uiParameterDefinition[0].default); }); it("If multiple default_value conditions evaluate to true, only first one is used.", () => { // 2 default_value conditions evaluate to true for conditional_default control + const { container } = wrapper; const defaultValueConditions = defaultsParamDef.conditions.filter((cond) => cond.default_value.parameter_ref === "conditional_default"); expect(defaultValueConditions).to.have.length(2); - const field1 = wrapper.find("div[data-id='properties-conditional_default'] textarea"); + const field1 = container.querySelector("div[data-id='properties-conditional_default'] textarea"); // Verify value from 1st condition is used - expect(field1.text()).to.equal(defaultValueConditions[0].default_value.value.join()); + expect(field1.textContent).to.equal(defaultValueConditions[0].default_value.value.join()); // Verify value from 2nd condition is NOT used - expect(field1.text()).to.not.equal(defaultValueConditions[1].default_value.value.join()); + expect(field1.textContent).to.not.equal(defaultValueConditions[1].default_value.value.join()); }); it("If default value is NOT defined in current_parameters, default_value condition and parameters default, don't set any default value", () => { // no_default doesn't have any default value - const field4 = wrapper.find("div[data-id='properties-no_default'] input"); + const { container } = wrapper; + const field4 = container.querySelectorAll("div[data-id='properties-no_default'] input"); expect(field4).to.have.length(1); - expect(field4.prop("value")).to.equal(""); + expect(field4[0].value).to.equal(""); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/conditions/panel-conditions-test.js b/canvas_modules/common-canvas/__tests__/common-properties/conditions/panel-conditions-test.js index db1d21db73..e23011e2b7 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/conditions/panel-conditions-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/conditions/panel-conditions-test.js @@ -14,16 +14,18 @@ * limitations under the License. */ -import propertyUtils from "./../../_utils_/property-utils"; +import { fireEvent } from "@testing-library/react"; +import propertyUtilsRTL from "./../../_utils_/property-utilsRTL"; +import React from "react"; +import CommonProperties from "./../../../src/common-properties/common-properties.jsx"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; - import { expect } from "chai"; describe("nested panels visible and enabled conditions work correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -33,6 +35,7 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("top level panel should disable all child panels and controls", () => { + const { container } = wrapper; // ensure all are enabled expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -63,11 +66,11 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("enabled"); // disable level1 - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const disabledCheckbox = category.find("div[data-id='properties-disablePanelLevel1'] input"); - expect(disabledCheckbox.getDOMNode().checked).to.equal(false); - disabledCheckbox.getDOMNode().checked = true; - disabledCheckbox.simulate("change"); + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const disabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel1'] input"); + expect(disabledCheckbox.checked).to.equal(false); + disabledCheckbox.setAttribute("checked", true); + fireEvent.click(disabledCheckbox); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("disabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("disabled"); @@ -96,13 +99,14 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("top level panel should hide all child panels and controls", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const hiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel1'] input"); - expect(hiddenCheckbox.props().checked).to.equal(false); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const hiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel1'] input"); + expect(hiddenCheckbox.checked).to.equal(false); // hide level1 - hiddenCheckbox.getDOMNode().checked = true; - hiddenCheckbox.simulate("change"); + hiddenCheckbox.setAttribute("checked", true); + fireEvent.click(hiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("disabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -133,13 +137,14 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("mid level panel should disable all child panels and controls", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const disabledCheckbox = category.find("div[data-id='properties-disablePanelLevel2'] input"); - expect(disabledCheckbox.props().checked).to.equal(false); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const disabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel2'] input"); + expect(disabledCheckbox.checked).to.equal(false); // disable level2 - disabledCheckbox.getDOMNode().checked = true; - disabledCheckbox.simulate("change"); + disabledCheckbox.setAttribute("checked", true); + fireEvent.click(disabledCheckbox); // ensure level 1 controls are still enabled expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); @@ -172,13 +177,14 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("mid level panel should hide all child panels and controls", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const hiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel2'] input"); - expect(hiddenCheckbox.props().checked).to.equal(false); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const hiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + expect(hiddenCheckbox.checked).to.equal(false); // hide level2 - hiddenCheckbox.getDOMNode().checked = true; - hiddenCheckbox.simulate("change"); + hiddenCheckbox.setAttribute("checked", true); + fireEvent.click(hiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -210,13 +216,14 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("lower level panel should disable all child panels and controls", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const disabledCheckbox = category.find("div[data-id='properties-disablePanelLevel3'] input"); - expect(disabledCheckbox.props().checked).to.equal(false); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const disabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel3'] input"); + expect(disabledCheckbox.checked).to.equal(false); // disable level3 - disabledCheckbox.getDOMNode().checked = true; - disabledCheckbox.simulate("change"); + disabledCheckbox.setAttribute("checked", true); + fireEvent.click(disabledCheckbox); // ensure level1 and lavel2 controls are still enabled expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); @@ -250,13 +257,14 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("lower level panel should hide all child panels and controls", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const hiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel3'] input"); - expect(hiddenCheckbox.props().checked).to.equal(false); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const hiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel3'] input"); + expect(hiddenCheckbox.checked).to.equal(false); // hide level3 - hiddenCheckbox.getDOMNode().checked = true; - hiddenCheckbox.simulate("change"); + hiddenCheckbox.setAttribute("checked", true); + fireEvent.click(hiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -288,17 +296,18 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("lower, mid, and top level panel should disable all child panels and controls", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - let lvl1DisabledCheckbox = category.find("div[data-id='properties-disablePanelLevel1'] input"); - expect(lvl1DisabledCheckbox.props().checked).to.equal(false); - let lvl2DisabledCheckbox = category.find("div[data-id='properties-disablePanelLevel2'] input"); - expect(lvl2DisabledCheckbox.props().checked).to.equal(false); - let lvl3DisabledCheckbox = category.find("div[data-id='properties-disablePanelLevel3'] input"); - expect(lvl3DisabledCheckbox.props().checked).to.equal(false); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + let lvl1DisabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel1'] input"); + expect(lvl1DisabledCheckbox.checked).to.equal(false); + let lvl2DisabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel2'] input"); + expect(lvl2DisabledCheckbox.checked).to.equal(false); + let lvl3DisabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel3'] input"); + expect(lvl3DisabledCheckbox.checked).to.equal(false); // disable level3 - lvl3DisabledCheckbox.getDOMNode().checked = true; - lvl3DisabledCheckbox.simulate("change"); + lvl1DisabledCheckbox.setAttribute("checked", true); + fireEvent.click(lvl3DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -328,8 +337,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("disabled"); // disable level2 - lvl2DisabledCheckbox.getDOMNode().checked = true; - lvl2DisabledCheckbox.simulate("change"); + lvl2DisabledCheckbox.setAttribute("checked", true); + fireEvent.click(lvl2DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -359,8 +368,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("disabled"); // disable level1 - lvl1DisabledCheckbox.getDOMNode().checked = true; - lvl1DisabledCheckbox.simulate("change"); + lvl1DisabledCheckbox.setAttribute("checked", true); + fireEvent.click(lvl1DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("disabled"); @@ -389,17 +398,17 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level2buttons" })).to.equal("disabled"); expect(controller.getPanelState({ name: "level3control" })).to.equal("disabled"); - lvl1DisabledCheckbox = wrapper.find("div[data-id='properties-disablePanelLevel1'] input"); - lvl2DisabledCheckbox = wrapper.find("div[data-id='properties-disablePanelLevel2'] input"); - lvl3DisabledCheckbox = wrapper.find("div[data-id='properties-disablePanelLevel3'] input"); + lvl1DisabledCheckbox = container.querySelector("div[data-id='properties-disablePanelLevel1'] input"); + lvl2DisabledCheckbox = container.querySelector("div[data-id='properties-disablePanelLevel2'] input"); + lvl3DisabledCheckbox = container.querySelector("div[data-id='properties-disablePanelLevel3'] input"); - expect(lvl2DisabledCheckbox.props().checked).to.be.true; - expect(lvl3DisabledCheckbox.props().checked).to.be.true; + expect(lvl2DisabledCheckbox.checked).to.be.true; + expect(lvl3DisabledCheckbox.checked).to.be.true; - lvl1DisabledCheckbox.getDOMNode().checked = false; - lvl1DisabledCheckbox.simulate("change"); - lvl2DisabledCheckbox.getDOMNode().checked = false; - lvl2DisabledCheckbox.simulate("change"); + lvl1DisabledCheckbox.setAttribute("checked", false); + fireEvent.click(lvl1DisabledCheckbox); + lvl2DisabledCheckbox.setAttribute("checked", false); + fireEvent.click(lvl2DisabledCheckbox); // ensure low level still disabled after enabling level2 expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); @@ -431,17 +440,18 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("lower, mid, and top level panel should hide all child panels and controls", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - let lvl1HiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel1'] input"); - expect(lvl1HiddenCheckbox.props().checked).to.equal(false); - let lvl2HiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel2'] input"); - expect(lvl2HiddenCheckbox.props().checked).to.equal(false); - let lvl3HiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel3'] input"); - expect(lvl3HiddenCheckbox.props().checked).to.equal(false); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + let lvl1HiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel1'] input"); + expect(lvl1HiddenCheckbox.checked).to.equal(false); + let lvl2HiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + expect(lvl2HiddenCheckbox.checked).to.equal(false); + let lvl3HiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel3'] input"); + expect(lvl3HiddenCheckbox.checked).to.equal(false); // hide level3 - lvl3HiddenCheckbox.getDOMNode().checked = true; - lvl3HiddenCheckbox.simulate("change"); + lvl3HiddenCheckbox.setAttribute("checked", true); + fireEvent.click(lvl3HiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -471,8 +481,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // hide level2 - lvl2HiddenCheckbox.getDOMNode().checked = true; - lvl2HiddenCheckbox.simulate("change"); + lvl2HiddenCheckbox.setAttribute("checked", true); + fireEvent.click(lvl2HiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -502,8 +512,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // hide level1 - lvl1HiddenCheckbox.getDOMNode().checked = true; - lvl1HiddenCheckbox.simulate("change"); + lvl1HiddenCheckbox.setAttribute("checked", true); + fireEvent.click(lvl1HiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("disabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -532,19 +542,18 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level2buttons" })).to.equal("hidden"); expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); - lvl1HiddenCheckbox = wrapper.find("div[data-id='properties-hidePanelLevel1'] input"); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hidePanelLevel2'] input"); - lvl3HiddenCheckbox = wrapper.find("div[data-id='properties-hidePanelLevel3'] input"); - expect(lvl2HiddenCheckbox).to.have.length(0); // Hidden controls are not rendered - expect(lvl3HiddenCheckbox).to.have.length(0); // Hidden controls are not rendered + lvl1HiddenCheckbox = container.querySelector("div[data-id='properties-hidePanelLevel1'] input"); + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + lvl3HiddenCheckbox = container.querySelector("div[data-id='properties-hidePanelLevel3'] input"); + expect(lvl2HiddenCheckbox).to.not.exist; // Hidden controls are not rendered + expect(lvl3HiddenCheckbox).to.not.exist; // Hidden controls are not rendered // Unhide level 1 then level 2 - lvl1HiddenCheckbox.getDOMNode().checked = false; - lvl1HiddenCheckbox.simulate("change"); - wrapper.update(); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hidePanelLevel2'] input"); - lvl2HiddenCheckbox.getDOMNode().checked = false; - lvl2HiddenCheckbox.simulate("change"); + lvl1HiddenCheckbox.setAttribute("checked", false); + fireEvent.click(lvl1HiddenCheckbox); + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + lvl2HiddenCheckbox.setAttribute("checked", false); + fireEvent.click(lvl2HiddenCheckbox); // ensure lower level still hidden after enabling mid level @@ -577,19 +586,20 @@ describe("nested panels visible and enabled conditions work correctly", () => { }); it("disable hide and disable different levels of panels", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const checkboxes = category.find("input[type='checkbox']"); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const checkboxes = category.querySelectorAll("input[type='checkbox']"); expect(checkboxes).to.have.length(6); checkboxes.forEach((checkbox) => { - expect(checkbox.props().checked).to.equal(false); + expect(checkbox.checked).to.equal(false); }); - const lvl1DisabledCheckbox = category.find("div[data-id='properties-disablePanelLevel1'] input"); - let lvl2HiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel2'] input"); - let lvl3DisabledCheckbox = category.find("div[data-id='properties-disablePanelLevel3'] input"); + const lvl1DisabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel1'] input"); + let lvl2HiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + let lvl3DisabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel3'] input"); // disable level3 - lvl3DisabledCheckbox.getDOMNode().checked = true; - lvl3DisabledCheckbox.simulate("change"); + lvl3DisabledCheckbox.setAttribute("checked", true); + fireEvent.click(lvl3DisabledCheckbox); // ensure level1 and lavel2 controls are still enabled expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); @@ -620,8 +630,9 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("disabled"); // hide level2 - lvl2HiddenCheckbox.getDOMNode().checked = true; - lvl2HiddenCheckbox.simulate("change"); + lvl2HiddenCheckbox.setAttribute("checked", true); + fireEvent.click(lvl2HiddenCheckbox); + expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("disabled"); @@ -650,8 +661,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // should be hidden // disable level1 - lvl1DisabledCheckbox.getDOMNode().checked = true; - lvl1DisabledCheckbox.simulate("change"); + lvl1DisabledCheckbox.setAttribute("checked", true); + fireEvent.click(lvl1DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("disabled"); @@ -680,14 +691,14 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level2buttons" })).to.equal("disabled"); expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hidePanelLevel2'] input"); - lvl3DisabledCheckbox = wrapper.find("div[data-id='properties-disablePanelLevel3'] input"); - expect(lvl2HiddenCheckbox.props().checked).to.be.true; - expect(lvl3DisabledCheckbox).to.have.length(0); // Hidden controls are not rendered + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + lvl3DisabledCheckbox = container.querySelector("div[data-id='properties-disablePanelLevel3'] input"); + expect(lvl2HiddenCheckbox.checked).to.be.true; + expect(lvl3DisabledCheckbox).to.not.exist; // Hidden controls are not rendered // ensure mid level still hidden even when top level is enabled - lvl1DisabledCheckbox.getDOMNode().checked = false; - lvl1DisabledCheckbox.simulate("change"); + lvl1DisabledCheckbox.setAttribute("checked", false); + fireEvent.click(lvl1DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); @@ -716,14 +727,14 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level2buttons" })).to.equal("enabled"); expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hidePanelLevel2'] input"); - lvl3DisabledCheckbox = wrapper.find("div[data-id='properties-disablePanelLevel3'] input"); - expect(lvl2HiddenCheckbox.props().checked).to.be.true; - expect(lvl3DisabledCheckbox).to.have.length(0); // Hidden controls are not rendered + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + lvl3DisabledCheckbox = container.querySelector("div[data-id='properties-disablePanelLevel3'] input"); + expect(lvl2HiddenCheckbox.checked).to.be.true; + expect(lvl3DisabledCheckbox).to.not.exist; // Hidden controls are not rendered // ensure mid level is visible after enabling mid level - lvl2HiddenCheckbox.getDOMNode().checked = false; - lvl2HiddenCheckbox.simulate("change"); + lvl2HiddenCheckbox.setAttribute("checked", false); + fireEvent.click(lvl2HiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("enabled"); @@ -751,13 +762,13 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level2buttons" })).to.equal("enabled"); expect(controller.getPanelState({ name: "level3control" })).to.equal("disabled"); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hidePanelLevel2'] input"); - lvl3DisabledCheckbox = wrapper.find("div[data-id='properties-disablePanelLevel3'] input"); - expect(lvl3DisabledCheckbox.props().checked).to.be.true; + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hidePanelLevel2'] input"); + lvl3DisabledCheckbox = container.querySelector("div[data-id='properties-disablePanelLevel3'] input"); + expect(lvl3DisabledCheckbox.checked).to.be.true; // ensure all are enabled after enabling lower level - lvl3DisabledCheckbox.getDOMNode().checked = false; - lvl3DisabledCheckbox.simulate("change"); + lvl3DisabledCheckbox.setAttribute("checked", false); + fireEvent.click(lvl3DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("enabled"); @@ -788,17 +799,19 @@ describe("nested panels visible and enabled conditions work correctly", () => { // Skipping because "ensure mid level is enabled after enabling mid level" - this step isn't enabling mid level it.skip("hide disable and hide different levels of panels", () => { - const category = wrapper.find("div[data-id='properties-panels-in-panels']"); - const checkboxes = category.find("input[type='checkbox']"); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-panels-in-panels']"); + const checkboxes = category.querySelectorAll("input[type='checkbox']"); expect(checkboxes).to.have.length(6); - const lvl1HiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel1'] input"); - const lvl2DisabledCheckbox = category.find("div[data-id='properties-disablePanelLevel2'] input"); - const lvl3HiddenCheckbox = category.find("div[data-id='properties-hidePanelLevel3'] input"); + const lvl1HiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel1'] input"); + const lvl2DisabledCheckbox = category.querySelector("div[data-id='properties-disablePanelLevel2'] input"); + const lvl3HiddenCheckbox = category.querySelector("div[data-id='properties-hidePanelLevel3'] input"); // hide level3 - lvl3HiddenCheckbox.getDOMNode().checked = true; - lvl3HiddenCheckbox.simulate("change"); + lvl3HiddenCheckbox.setAttribute("checked", true); + fireEvent.click(lvl3HiddenCheckbox); + // lvl3HiddenCheckbox.simulate("change"); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("enabled"); @@ -827,8 +840,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // disable level2 - lvl2DisabledCheckbox.getDOMNode().checked = true; - lvl2DisabledCheckbox.simulate("change"); + lvl2DisabledCheckbox.setAttribute("checked", true); + fireEvent.click(lvl2DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("enabled"); @@ -857,8 +870,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // hide level1 - lvl1HiddenCheckbox.getDOMNode().checked = true; - lvl1HiddenCheckbox.simulate("change"); + lvl1HiddenCheckbox.setAttribute("checked", true); + fireEvent.click(lvl1HiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("disabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("hidden"); @@ -887,8 +900,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // ensure mid level still disabled even when top level is visible - lvl1HiddenCheckbox.getDOMNode().checked = false; - lvl1HiddenCheckbox.simulate("change"); + lvl1HiddenCheckbox.setAttribute("checked", false); + fireEvent.click(lvl1HiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("enabled"); @@ -917,8 +930,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // ensure mid level is enabled after enabling mid level - lvl2DisabledCheckbox.getDOMNode().checked = false; - lvl2DisabledCheckbox.simulate("change"); + lvl2DisabledCheckbox.setAttribute("checked", false); + fireEvent.click(lvl2DisabledCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("enabled"); @@ -947,8 +960,8 @@ describe("nested panels visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "level3control" })).to.equal("hidden"); // ensure all are visible after enabling lower level - lvl3HiddenCheckbox.getDOMNode().checked = false; - lvl3HiddenCheckbox.simulate("change"); + lvl3HiddenCheckbox.setAttribute("checked", false); + fireEvent.click(lvl3HiddenCheckbox); expect(controller.getControlState({ name: "disablePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hidePanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disablePanelLevel2" })).to.equal("enabled"); @@ -981,7 +994,7 @@ describe("complex nested panels visible and enabled conditions work correctly", let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -991,17 +1004,18 @@ describe("complex nested panels visible and enabled conditions work correctly", }); it("Init properties at disable hide and disable different levels of panels", () => { - const category = wrapper.find("div[data-id='properties-init-panels-in-panels']"); - const lvl1DisabledCheckbox = category.find("div[data-id='properties-disableInit1PanelLevel1'] input"); - let lvl2HiddenCheckbox = category.find("div[data-id='properties-hideInit1PanelLevel2'] input"); - let lvl3DisabledCheckbox = category.find("div[data-id='properties-disableInit1PanelLevel3'] input"); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-init-panels-in-panels']"); + const lvl1DisabledCheckbox = category.querySelector("div[data-id='properties-disableInit1PanelLevel1'] input"); + let lvl2HiddenCheckbox = category.querySelector("div[data-id='properties-hideInit1PanelLevel2'] input"); + let lvl3DisabledCheckbox = category.querySelectorAll("div[data-id='properties-disableInit1PanelLevel3'] input"); // the initial state at load is disable, hide disable. // verify that all conditions are at that state. - lvl1DisabledCheckbox.getDOMNode().checked = true; - lvl1DisabledCheckbox.simulate("change"); - lvl2HiddenCheckbox.getDOMNode().checked = true; - lvl2HiddenCheckbox.simulate("change"); + lvl1DisabledCheckbox.setAttribute("checked", true); + fireEvent.change(lvl1DisabledCheckbox); + lvl2HiddenCheckbox.setAttribute("checked", true); + fireEvent.change(lvl2HiddenCheckbox); expect(lvl3DisabledCheckbox).to.have.length(0); // Hidden controls are not rendered expect(controller.getControlState({ name: "disableInit1PanelLevel1" })).to.equal("enabled"); @@ -1026,14 +1040,14 @@ describe("complex nested panels visible and enabled conditions work correctly", expect(controller.getPanelState({ name: "init1level2buttons" })).to.equal("disabled"); expect(controller.getPanelState({ name: "init1level3control" })).to.equal("hidden"); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hideInit1PanelLevel2'] input"); - lvl3DisabledCheckbox = wrapper.find("div[data-id='properties-disableInit1PanelLevel3'] input"); - expect(lvl2HiddenCheckbox.props().checked).to.be.true; + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hideInit1PanelLevel2'] input"); + lvl3DisabledCheckbox = container.querySelectorAll("div[data-id='properties-disableInit1PanelLevel3'] input"); + expect(lvl2HiddenCheckbox.checked).to.be.true; expect(lvl3DisabledCheckbox).to.have.length(0); // Hidden controls are not rendered // ensure mid level still hidden even when top level is enabled - lvl1DisabledCheckbox.getDOMNode().checked = false; - lvl1DisabledCheckbox.simulate("change"); + lvl1DisabledCheckbox.setAttribute("checked", false); + fireEvent.click(lvl1DisabledCheckbox); expect(controller.getControlState({ name: "disableInit1PanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hideInit1PanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disableInit1PanelLevel2" })).to.equal("disabled"); @@ -1056,14 +1070,14 @@ describe("complex nested panels visible and enabled conditions work correctly", expect(controller.getPanelState({ name: "init1level2buttons" })).to.equal("enabled"); expect(controller.getPanelState({ name: "init1level3control" })).to.equal("hidden"); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hideInit1PanelLevel2'] input"); - lvl3DisabledCheckbox = wrapper.find("div[data-id='properties-disableInit1PanelLevel3'] input"); - expect(lvl2HiddenCheckbox.props().checked).to.be.true; + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hideInit1PanelLevel2'] input"); + lvl3DisabledCheckbox = container.querySelectorAll("div[data-id='properties-disableInit1PanelLevel3'] input"); + expect(lvl2HiddenCheckbox.checked).to.be.true; expect(lvl3DisabledCheckbox).to.have.length(0); // Hidden controls are not rendered // ensure mid level is visible after enabling mid level - lvl2HiddenCheckbox.getDOMNode().checked = false; - lvl2HiddenCheckbox.simulate("change"); + lvl2HiddenCheckbox.setAttribute("checked", false); + fireEvent.click(lvl2HiddenCheckbox); expect(controller.getControlState({ name: "disableInit1PanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hideInit1PanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disableInit1PanelLevel2" })).to.equal("enabled"); @@ -1086,13 +1100,13 @@ describe("complex nested panels visible and enabled conditions work correctly", expect(controller.getPanelState({ name: "init1level2buttons" })).to.equal("enabled"); expect(controller.getPanelState({ name: "init1level3control" })).to.equal("disabled"); - lvl2HiddenCheckbox = wrapper.find("div[data-id='properties-hideInit1PanelLevel2'] input"); - lvl3DisabledCheckbox = wrapper.find("div[data-id='properties-disableInit1PanelLevel3'] input"); - expect(lvl3DisabledCheckbox.props().checked).to.be.true; + lvl2HiddenCheckbox = container.querySelector("div[data-id='properties-hideInit1PanelLevel2'] input"); + lvl3DisabledCheckbox = container.querySelector("div[data-id='properties-disableInit1PanelLevel3'] input"); + expect(lvl3DisabledCheckbox.checked).to.be.true; // ensure all are enabled after enabling lower level - lvl3DisabledCheckbox.getDOMNode().checked = false; - lvl3DisabledCheckbox.simulate("change"); + lvl3DisabledCheckbox.setAttribute("checked", false); + fireEvent.click(lvl3DisabledCheckbox); expect(controller.getControlState({ name: "disableInit1PanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "hideInit1PanelLevel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "disableInit1PanelLevel2" })).to.equal("enabled"); @@ -1122,7 +1136,7 @@ describe("Primary panel conditions work correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -1132,11 +1146,27 @@ describe("Primary panel conditions work correctly", () => { }); it("Primary panel can be hidden", () => { - let textPanel = wrapper.find("div[data-id='properties-text-panels']"); + const { container } = wrapper; + const { rerender } = wrapper; + let textPanel = container.querySelectorAll("div[data-id='properties-text-panels']"); expect(textPanel).to.have.length(1); + controller.updatePropertyValue({ name: "hideTextPanels" }, true); - wrapper.update(); - textPanel = wrapper.find("div[data-id='properties-text-panels']"); + const rerendered = propertyUtilsRTL.flyoutEditorFormRerender(panelConditionsParamDef); + const { propertiesInfo, propertiesConfig, callbacks, customControls, customConditionOps } = rerendered; + rerender( +
+ +
+ ); + + textPanel = container.querySelectorAll("div[data-id='properties-text-panels']"); expect(textPanel).to.have.length(0); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/conditions/ui-conditions-test.js b/canvas_modules/common-canvas/__tests__/common-properties/conditions/ui-conditions-test.js index cd90036724..3cf8a6a5f4 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/conditions/ui-conditions-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/conditions/ui-conditions-test.js @@ -16,14 +16,14 @@ import { expect } from "chai"; import { validateInput } from "./../../../src/common-properties/ui-conditions/ui-conditions.js"; -import propertyUtils from "./../../_utils_/property-utils"; +import propertyUtilsRTL from "./../../_utils_/property-utilsRTL"; import structureeditorParamDef from "../../test_resources/paramDefs/structureeditor_paramDef.json"; describe("validateInput returns the correct boolean for the given condition", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(structureeditorParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(structureeditorParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; controller.setErrorMessages({}); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js index ebffc5f680..1f7ad13b07 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js @@ -15,21 +15,35 @@ */ import React from "react"; import { expect } from "chai"; +import { expect as expectJest } from "@jest/globals"; import Controller from "./../../../src/common-properties/properties-controller"; import Checkbox from "./../../../src/common-properties/controls/checkbox"; -import { mount } from "../../_utils_/mount-utils.js"; -import propertyUtils from "../../_utils_/property-utils"; +import { render } from "../../_utils_/mount-utils.js"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import checkboxParamDef from "../../test_resources/paramDefs/checkbox_paramDef.json"; +import { fireEvent } from "@testing-library/react"; const controller = new Controller(); const control = { name: "test-checkbox" }; -propertyUtils.setControls(controller, [control]); +propertyUtilsRTL.setControls(controller, [control]); const propertyId = { name: "test-checkbox" }; +const mockCheckbox = jest.fn(); +jest.mock("../../../src/common-properties/controls/checkbox", + () => (props) => mockCheckbox(props) +); + +mockCheckbox.mockImplementation((props) => { + const CheckboxComp = jest.requireActual( + "../../../src/common-properties/controls/checkbox", + ).default; + return ; +}); + describe("checkbox control tests", () => { beforeEach(() => { controller.setErrorMessages({}); @@ -39,7 +53,7 @@ describe("checkbox control tests", () => { ); }); it("checkbox props should have been defined", () => { - const wrapper = mount( + render( { /> ); - expect(wrapper.prop("control")).to.equal(control); - expect(wrapper.prop("controller")).to.equal(controller); - expect(wrapper.prop("propertyId")).to.equal(propertyId); + expectJest(mockCheckbox).toHaveBeenCalledWith({ + "store": controller.getStore(), + "controller": controller, + "control": control, + "propertyId": propertyId, + }); }); it("checkbox label and description are rendered correctly", () => { const controlWithLabel = { @@ -62,7 +79,7 @@ describe("checkbox control tests", () => { text: "checkbox description" } }; - const wrapper = mount( + const wrapper = render( { propertyId={{ name: "test-checkboxLabel" }} /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkboxLabel']"); - expect(checkboxWrapper.find(".properties-checkbox-label").text()).to.equal(controlWithLabel.label.text); - expect(checkboxWrapper.find("div.properties-tooltips span").text()).to.equal(controlWithLabel.description.text); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkboxLabel']"); + expect(checkboxWrapper.querySelector(".properties-checkbox-label").textContent).to.equal(controlWithLabel.label.text); + expect(wrapper.getByText("checkbox description").textContent).to.equal(controlWithLabel.description.text); }); it("checkbox updates correctly", () => { controller.setPropertyValues( { "test-checkbox": false } ); - const wrapper = mount( + const wrapper = render( { propertyId={propertyId} /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox']"); - const checkbox = checkboxWrapper.find("input"); - expect(checkbox.getDOMNode().checked).to.equal(false); - checkbox.getDOMNode().checked = true; - checkbox.simulate("change"); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkbox']"); + const checkbox = checkboxWrapper.querySelector("input"); + expect(checkbox.checked).to.equal(false); + checkbox.setAttribute("checked", true); + fireEvent.click(checkbox); expect(controller.getPropertyValue(propertyId)).to.equal(true); }); it("checkbox handles null correctly", () => { controller.setPropertyValues( { "test-checkbox": null } ); - const wrapper = mount( + const wrapper = render( { propertyId={propertyId} /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox']"); - const checkbox = checkboxWrapper.find("input"); - expect(checkbox.getDOMNode().checked).to.equal(false); - checkbox.getDOMNode().checked = true; - checkbox.simulate("change"); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkbox']"); + const checkbox = checkboxWrapper.querySelector("input"); + expect(checkbox.checked).to.equal(false); + checkbox.setAttribute("checked", true); + fireEvent.click(checkbox); expect(controller.getPropertyValue(propertyId)).to.equal(true); }); it("checkbox handles undefined correctly", () => { controller.setPropertyValues( { } ); - const wrapper = mount( + const wrapper = render( { propertyId={propertyId} /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox']"); - const checkbox = checkboxWrapper.find("input"); - expect(checkbox.getDOMNode().checked).to.equal(false); - checkbox.getDOMNode().checked = true; - checkbox.simulate("change"); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkbox']"); + const checkbox = checkboxWrapper.querySelector("input"); + expect(checkbox.checked).to.equal(false); + checkbox.setAttribute("checked", true); + fireEvent.click(checkbox); expect(controller.getPropertyValue(propertyId)).to.equal(true); }); it("checkbox renders when disabled", () => { controller.updateControlState(propertyId, "disabled"); - const wrapper = mount( + const wrapper = render( { propertyId={propertyId} /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox']"); - expect(checkboxWrapper.find("input").prop("disabled")).to.equal(true); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkbox']"); + expect(checkboxWrapper.querySelector("input").disabled).to.equal(true); }); it("checkbox renders when hidden", () => { controller.updateControlState(propertyId, "hidden"); - const wrapper = mount( + const wrapper = render( { propertyId={propertyId} /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox'] > div"); - expect(checkboxWrapper.hasClass("hide")).to.equal(true); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkbox'] > div"); + expect(checkboxWrapper.className.includes("hide")).to.equal(true); }); it("checkbox renders correctly in a table", () => { const controlWithLabel = { @@ -167,7 +190,7 @@ describe("checkbox control tests", () => { text: "checkbox description" } }; - const wrapper = mount( + const wrapper = render( { tableControl /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkboxLabel']"); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkboxLabel']"); // isn't actually visible. Visibility controlled by carbon component - expect(checkboxWrapper.find("label").text()).to.equal(controlWithLabel.label.text); - expect(checkboxWrapper.find("div.properties-tooltips text")).to.have.length(0); + expect(checkboxWrapper.querySelector("label").textContent).to.equal(controlWithLabel.label.text); + expect(checkboxWrapper.querySelectorAll("div.properties-tooltips text")).to.have.length(0); }); it("checkbox renders messages correctly", () => { controller.updateErrorMessage(propertyId, { @@ -187,7 +211,7 @@ describe("checkbox control tests", () => { type: "warning", text: "bad checkbox value" }); - const wrapper = mount( + const wrapper = render( { propertyId={propertyId} /> ); - const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox']"); - const messageWrapper = checkboxWrapper.find("div.properties-validation-message"); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-test-checkbox']"); + const messageWrapper = checkboxWrapper.querySelectorAll("div.properties-validation-message"); expect(messageWrapper).to.have.length(1); }); it("Checkbox helperText is rendered correctly", () => { @@ -204,7 +229,7 @@ describe("checkbox control tests", () => { controller.setPropertyValues( { } ); - const wrapper = mount( + const wrapper = render( { propertyId={propertyId} /> ); - const helpTextWrapper = wrapper.find("div[data-id='properties-test-checkbox']"); - expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText); + const { container } = wrapper; + const helpTextWrapper = container.querySelector("div[data-id='properties-test-checkbox']"); + expect(helpTextWrapper.querySelector("div.cds--form__helper-text").textContent).to.equal(control.helperText); }); it("Checkbox readonly is rendered correctly", () => { @@ -221,7 +247,7 @@ describe("checkbox control tests", () => { controller.setPropertyValues( { } ); - const wrapper = mount( + const wrapper = render( { readOnly /> ); - const readOnlyWrapper = wrapper.find("div[data-id='properties-test-checkbox']"); - expect(readOnlyWrapper.find("Checkbox").prop("readOnly")).to.equal(control.readOnly); + const { container } = wrapper; + const readOnlyWrapper = container.querySelector("div[data-id='properties-test-checkbox']"); + expect(readOnlyWrapper.querySelector("input").getAttribute("aria-readonly")).to.equal(control.readOnly.toString()); }); }); describe("checkbox classnames appear correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(checkboxParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(checkboxParamDef); wrapper = renderedObject.wrapper; }); it("checkbox should have custom classname defined", () => { - expect(wrapper.find(".checkbox-control-class")).to.have.length(1); + const { container } = wrapper; + expect(container.querySelectorAll(".checkbox-control-class")).to.have.length(1); }); it("checkbox should have custom classname defined in table cells", () => { - propertyUtils.openSummaryPanel(wrapper, "checkbox-table-summary"); - const tableControlDiv = wrapper.find("div[data-id='properties-checkbox-table-summary-ctrls']"); + const { container } = wrapper; + propertyUtilsRTL.openSummaryPanel(wrapper, "checkbox-table-summary"); + const tableControlDiv = container.querySelector("div[data-id='properties-checkbox-table-summary-ctrls']"); // There are 2 rows shown across 2 tables - expect(tableControlDiv.find(".table-checkbox-control-class")).to.have.length(2); + expect(tableControlDiv.querySelectorAll(".table-checkbox-control-class")).to.have.length(2); // From the 2 rows shown, each row has a checkbox on-panel and in subpanel - expect(tableControlDiv.find(".table-on-panel-checkbox-control-class")).to.have.length(2); - expect(tableControlDiv.find(".table-subpanel-checkbox-control-class")).to.have.length(2); + expect(tableControlDiv.querySelectorAll(".table-on-panel-checkbox-control-class")).to.have.length(2); + expect(tableControlDiv.querySelectorAll(".table-subpanel-checkbox-control-class")).to.have.length(2); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/code-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/code-test.js index 9828b6be03..b1c918d3fb 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/code-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/code-test.js @@ -16,7 +16,7 @@ // code is a subset of expression control. Most tests are under the expression control. -import propertyUtils from "../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import { expect } from "chai"; import ExpressionInfo from "../../test_resources/json/expression-function-list.json"; import CodeParamdef from "../../test_resources/paramDefs/code_paramDef.json"; @@ -35,19 +35,22 @@ describe("code control tests", () => { it("Code control doesn't render with validateLink", () => { propertiesInfo.expressionInfo = getCopy(ExpressionInfo.input); propertiesInfo.expressionInfo.validateLink = true; - const renderedObject = propertyUtils.flyoutEditorForm(CodeParamdef, propertiesConfig, null, propertiesInfo); - expect(renderedObject.wrapper.find("button.validateLink")).to.have.length(0); // no validation links should be shown for code controls + const renderedObject = propertyUtilsRTL.flyoutEditorForm(CodeParamdef, propertiesConfig, null, propertiesInfo); + const wrapper = renderedObject.wrapper; + const { container } = wrapper; + expect(container.querySelectorAll("button.validateLink")).to.have.length(0); // no validation links should be shown for code controls }); }); describe("code classnames appear correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(CodeParamdef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(CodeParamdef); wrapper = renderedObject.wrapper; }); it("code should have custom classname defined", () => { - expect(wrapper.find(".code-control-class")).to.have.length(1); + const { container } = wrapper; + expect(container.querySelectorAll(".code-control-class")).to.have.length(1); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js index 5f8f5c48fc..2bf53d8eca 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js @@ -14,16 +14,17 @@ * limitations under the License. */ -import propertyUtils from "../../_utils_/property-utils"; -import tableUtils from "./../../_utils_/table-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; +import tableUtilsRTL from "./../../_utils_/table-utilsRTL"; import customControlParamDef from "../../test_resources/paramDefs/custom-ctrl-op_paramDef.json"; import { expect } from "chai"; +import { fireEvent } from "@testing-library/react"; describe("custom control renders correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(customControlParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(customControlParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -33,67 +34,71 @@ describe("custom control renders correctly", () => { }); it("should show the correct custom controls", () => { - const customToggles = wrapper.find("div.custom-toggle"); + const { container } = wrapper; + const customToggles = container.querySelectorAll("div.custom-toggle"); expect(customToggles).to.have.length(3);// includes table toggles - const tableCustomToggles = tableUtils.getTableRows(wrapper.find("div[data-id='properties-structuretable']")); + const tableCustomToggles = tableUtilsRTL.getTableRows(container.querySelector("div[data-id='properties-structuretable']")); expect(tableCustomToggles).to.have.length(2); // This summary text comes from the custom control - const cellText = wrapper.find("span.properties-field-type div.text"); + const cellText = container.querySelectorAll("span.properties-field-type div.text"); expect(cellText).to.have.length(2); - expect(cellText.at(0).text()).to.equal("20-low"); - expect(cellText.at(1).text()).to.equal("50-high"); + expect(cellText[0].textContent).to.equal("20-low"); + expect(cellText[1].textContent).to.equal("50-high"); }); it("updating custom controls should work correctly", () => { - let tableToggle = wrapper.find("button#structuretable_1_1"); - tableToggle.simulate("click"); - const customToggle = wrapper.find("button#custom_toggle"); - customToggle.simulate("click"); + const { container } = wrapper; + let tableToggle = container.querySelector("button#structuretable_1_1"); + fireEvent.click(tableToggle); + const customToggle = container.querySelector("button#custom_toggle"); + fireEvent.click(customToggle); expect(controller.getPropertyValue({ name: "custom_toggle" })).to.equal(false); expect(controller.getPropertyValue({ name: "structuretable", row: 1, col: 1 })).to.equal(false); expect(controller.getPropertyValue({ name: "structuretable", row: 0, col: 1 })).to.equal(false); - tableToggle = wrapper.find("button#structuretable_0_1"); - tableToggle.simulate("click"); + tableToggle = container.querySelector("button#structuretable_0_1"); + fireEvent.click(tableToggle); expect(controller.getPropertyValue({ name: "structuretable", row: 0, col: 1 })).to.equal(true); }); it("validate custom table is rendered below standard table", () => { - let customTable = wrapper.find("div.custom-table"); + const { container } = wrapper; + let customTable = container.querySelectorAll("div.custom-table"); expect(customTable).to.have.length(0); - const tableData = tableUtils.getTableRows(wrapper); - tableUtils.selectCheckboxes(tableData, [0]); - customTable = wrapper.find("div.custom-table"); + const tableData = tableUtilsRTL.getTableRows(container); + tableUtilsRTL.selectCheckboxes(tableData, [0]); + customTable = container.querySelectorAll("div.custom-table"); expect(customTable).to.have.length(1); - const rows = customTable.find("tr"); + const rows = customTable[0].querySelectorAll("tr"); // table should have 1 data row and a header row expect(rows).to.have.length(2); }); it("validate changing toggle value (custom control) changes enum values", () => { + const { container } = wrapper; // select the first item - let dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); - const dropdownButton = dropdownWrapper.find("button"); - dropdownButton.simulate("click"); // open dropdown - dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); - let dropdownList = dropdownWrapper.find("li.cds--list-box__menu-item"); + let dropdownWrapper = container.querySelector("div[data-id='properties-colors']"); + const dropdownButton = dropdownWrapper.querySelector("button"); + fireEvent.click(dropdownButton); // open dropdown + dropdownWrapper = container.querySelector("div[data-id='properties-colors']"); + let dropdownList = dropdownWrapper.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(1); // should have 1 item. Before custom toggle changes - const customToggle = wrapper.find("div[data-id='properties-ci-custom_toggle']"); + const customToggle = container.querySelectorAll("div[data-id='properties-ci-custom_toggle']"); expect(customToggle).to.have.length(1); - const toggle = customToggle.find("button"); - toggle.simulate("click"); - dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); + const toggle = customToggle[0].querySelector("button"); + fireEvent.click(toggle); + // toggle.simulate("click"); + dropdownWrapper = container.querySelector("div[data-id='properties-colors']"); // select the first item - dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); - dropdownList = dropdownWrapper.find("li.cds--list-box__menu-item"); + dropdownWrapper = container.querySelector("div[data-id='properties-colors']"); + dropdownList = dropdownWrapper.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(3); // should have 3 items. Custom toggle control updates the values - toggle.simulate("click"); - + fireEvent.click(toggle); // select the first item - dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); - dropdownList = dropdownWrapper.find("li.cds--list-box__menu-item"); + dropdownWrapper = container.querySelector("div[data-id='properties-colors']"); + dropdownList = dropdownWrapper.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(2); // should have 2 items. Custom toggle control updates the values }); }); @@ -101,16 +106,18 @@ describe("custom control renders correctly", () => { describe("custom control classnames appear correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(customControlParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(customControlParamDef); wrapper = renderedObject.wrapper; }); it("custom control should have custom classname defined", () => { - expect(wrapper.find(".custom-control-class")).to.have.length(1); + const { container } = wrapper; + expect(container.querySelectorAll(".custom-control-class")).to.have.length(1); }); it("custom control should have custom classname defined in table cells", () => { - expect(wrapper.find(".table-custom-control-class")).to.have.length(2); - expect(wrapper.find(".table-on-panel-custom-control-class")).to.have.length(2); + const { container } = wrapper; + expect(container.querySelectorAll(".table-custom-control-class")).to.have.length(2); + expect(container.querySelectorAll(".table-on-panel-custom-control-class")).to.have.length(2); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/hidden-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/hidden-test.js index b4673efe6b..9699fddba2 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/hidden-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/hidden-test.js @@ -17,14 +17,15 @@ /* eslint no-sparse-arrays: "off"*/ import { expect } from "chai"; -import propertyUtils from "../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import hiddenParamDef from "../../test_resources/paramDefs/hidden_paramDef.json"; +import { fireEvent } from "@testing-library/react"; describe("hidden control works correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(hiddenParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(hiddenParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -34,29 +35,32 @@ describe("hidden control works correctly", () => { }); it("validate hidden control isn't shown", () => { + const { container } = wrapper; const hiddenPropertyId = { name: "hidden" }; - const hiddenControl = wrapper.find("div[data-id='properties-hidden']"); + const hiddenControl = container.querySelector("div[data-id='properties-hidden']"); expect(hiddenControl).not.to.be.undefined; // should still set/get value correctly expect(controller.getPropertyValue(hiddenPropertyId)).to.equal("hidden"); // expect control item for the textfield control, table in paramDef, and textfield control in table - expect(wrapper.find("div.properties-control-item")).to.have.length(3); + expect(container.querySelectorAll("div.properties-control-item")).to.have.length(3); }); it("validate hidden table control isn't shown", () => { - const hiddenControl = wrapper.find("div[data-id='properties-hidden_table_ctl']"); + const { container } = wrapper; + const hiddenControl = container.querySelector("div[data-id='properties-hidden_table_ctl']"); expect(hiddenControl).not.to.be.undefined; }); it("validate hidden table control isn't shown", () => { + const { container } = wrapper; const hiddenPropertyId = { name: "hidden_table" }; // validate only 1 cell value is visible - expect(wrapper.find("div.properties-table-cell-control")).to.have.length(1); + expect(container.querySelectorAll("div.properties-table-cell-control")).to.have.length(1); // validate only 1 header for textfield - expect(wrapper.find("div.properties-vt-column")).to.have.length(1); - wrapper.find("button.properties-add-fields-button").simulate("click"); - wrapper.find("div[data-id='properties-hidden_table_1_1'] input").simulate("change", { target: { value: "My new value" } }); + expect(container.querySelectorAll("div.properties-vt-column")).to.have.length(1); + fireEvent.click(container.querySelector("button.properties-add-fields-button")); + fireEvent.change(container.querySelector("div[data-id='properties-hidden_table_1_1'] input"), { target: { value: "My new value" } }); expect(controller.getPropertyValue(hiddenPropertyId)).to.eql([["Hopper", "Turing"], [, "My new value"]]); }); @@ -65,16 +69,18 @@ describe("hidden control works correctly", () => { describe("hidden classnames appear correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(hiddenParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(hiddenParamDef); wrapper = renderedObject.wrapper; }); it("hidden should have custom classname defined", () => { - expect(wrapper.find(".hidden-control-class")).to.have.length(1); + const { container } = wrapper; + expect(container.querySelectorAll(".hidden-control-class")).to.have.length(1); }); it("hidden should not have custom classname defined in table cells", () => { + const { container } = wrapper; // hidden controls are not rendered in table, classname should not be found - expect(wrapper.find(".table-hidden-control-class")).to.have.length(0); + expect(container.querySelectorAll(".table-hidden-control-class")).to.have.length(0); }); });