From 5d17bcddc8bb5d2575a97d1eb23f970dc16bef14 Mon Sep 17 00:00:00 2001 From: Jerinjk14 Date: Thu, 7 Nov 2024 01:00:11 +0530 Subject: [PATCH] #2235 Rtl panel migration-Part1 (#2217) --- .../common-properties/panels/action-test.js | 84 +++++---- .../common-properties/panels/column-test.js | 65 ++++--- .../common-properties/panels/control-test.js | 62 ++++--- .../common-properties/panels/twisty-test.js | 170 +++++++++--------- 4 files changed, 212 insertions(+), 169 deletions(-) diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/action-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/action-test.js index 0c67b2cd7d..eb082a0516 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/action-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/action-test.js @@ -13,84 +13,100 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { fireEvent, waitFor, cleanup } from "@testing-library/react"; import { expect } from "chai"; -import propertyUtils from "./../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; describe("action panel 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; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("action panels should be hidden", () => { - const category = wrapper.find("div[data-id='properties-action-panels']"); - const hiddenCheckbox = category.find("div[data-id='properties-actionHide'] input"); - expect(hiddenCheckbox.props().checked).to.equal(false); - expect(wrapper.find("div.properties-action-panel .hide")).to.have.length(0); + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-action-panels']"); + const hiddenCheckbox = category.querySelector("div[data-id='properties-actionHide'] input"); + expect(hiddenCheckbox.checked).to.equal(false); + expect(container.querySelectorAll("div.properties-action-panel .hide")).to.have.length(0); + // hide action panel - hiddenCheckbox.getDOMNode().checked = true; - hiddenCheckbox.simulate("change"); + fireEvent.click(hiddenCheckbox); + // action panel should be hidden "hidden" expect(controller.getPanelState({ name: "action-buttons-panel" })).to.equal("hidden"); - expect(wrapper.find("div.properties-action-panel.hide")).to.have.length(1); + expect(container.querySelectorAll("div.properties-action-panel.hide")).to.have.length(1); + + }); - it("action panels should be disabled", () => { - const category = wrapper.find("div[data-id='properties-action-panels']"); - const disableCheckbox = category.find("div[data-id='properties-actionDisable'] input"); - expect(disableCheckbox.props().checked).to.equal(false); - expect(wrapper.find("div[data-id='properties-action-buttons-panel']").prop("disabled")).to.equal(false); + it("action panels should be disabled", async() => { + const { container } = wrapper; + const category = container.querySelector("div[data-id='properties-action-panels']"); + const disableCheckbox = category.querySelector("div[data-id='properties-actionDisable'] input"); + expect(disableCheckbox.checked).to.equal(false); + const actionPanel = container.querySelector("div[data-id='properties-action-buttons-panel']"); + expect(actionPanel.classList.contains("disabled")).to.equal(false); // hide action panel - disableCheckbox.getDOMNode().checked = true; - disableCheckbox.simulate("change"); - + fireEvent.click(disableCheckbox); + expect(disableCheckbox.checked).to.equal(true); // action panel should be hidden "hidden" - expect(controller.getPanelState({ name: "action-buttons-panel" })).to.equal("disabled"); - expect(wrapper.find("div[data-id='properties-action-buttons-panel']").prop("disabled")).to.equal(true); + await waitFor(() => { + const actionPanelButton = container.querySelector("div[data-id='properties-action-buttons-panel']"); + expect(controller.getPanelState({ name: "action-buttons-panel" })).to.equal("disabled"); + expect(actionPanelButton.classList.contains("disabled")); + }); + }); - it("action panels should have label and description", () => { - const actionPanel = wrapper.find("div[data-id='properties-action-buttons-panel']"); - const labelContainer = actionPanel.find(".properties-label-container"); + it("action panels should have label and description", async() => { + const { getByText, container } = wrapper; + const actionPanel = container.querySelector("div[data-id='properties-action-buttons-panel']"); + const labelContainer = actionPanel.querySelectorAll(".properties-label-container"); expect(labelContainer).to.have.length(1); + const label = labelContainer[0].querySelector("label.properties-control-label"); // Verify label - expect(labelContainer.find("label.properties-control-label").text()).to.equal("Action panel label"); + expect(label.textContent).to.equal("Action panel label"); // Verify description in tooltip - const tooltip = labelContainer.find("div.tooltip-container"); + const tooltip = labelContainer[0].querySelectorAll("div.tooltip-container"); expect(tooltip).to.have.length(1); // tooltip icon - expect(tooltip.find("svg.canvas-state-icon-information-hollow")).to.have.length(1); + const tooltipIcon = tooltip[0].querySelectorAll("svg.canvas-state-icon-information-hollow"); + expect(tooltipIcon).to.have.length(1); // tooltip text - expect(tooltip.find("div.common-canvas-tooltip span").text()).to.equal("Action panel description"); + const tooltipText = getByText(/Action Panel description/i); + expect(tooltipText).to.exist; + }); }); describe("action panel classNames applied correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("action panel should have custom classname defined", () => { - const actionPanelWrapper = wrapper.find("div[data-id='properties-action-panels']"); - expect(actionPanelWrapper.find(".action-buttons-panel-group-actionpanel-class")).to.have.length(1); + const { container } = wrapper; + const actionPanelWrapper = container.querySelector("div[data-id='properties-action-panels']"); + expect(actionPanelWrapper.querySelectorAll(".action-buttons-panel-group-actionpanel-class")).to.have.length(1); }); it("nested action panel should have custom classname defined", () => { - const panelsWrapper = wrapper.find("div[data-id='properties-panels-in-panels']"); - expect(panelsWrapper.find(".disable-button-action-panel-group-actionpanel-class")).to.have.length(1); + const { container } = wrapper; + const panelsWrapper = container.querySelector("div[data-id='properties-panels-in-panels']"); + expect(panelsWrapper.querySelectorAll(".disable-button-action-panel-group-actionpanel-class")).to.have.length(1); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/column-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/column-test.js index c8ed5d9f0d..91b01d78ef 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/column-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/column-test.js @@ -13,30 +13,34 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import propertyUtils from "./../../_utils_/property-utils"; +import { cleanup, waitFor } from "@testing-library/react"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import panelParamDef from "./../../test_resources/paramDefs/panel_paramDef.json"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; - import { expect } from "chai"; describe("column panel renders correctly", () => { var wrapper; + beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + + cleanup(); }); it("should have displayed the column panel with 2 sub panels", () => { - const columnPanel = wrapper.find("div[data-id='properties-panel-columns']"); + const { container } = wrapper; + const columnPanel = container.querySelector("div[data-id='properties-panel-columns']"); + expect(columnPanel).to.exist; // should render 2 control panels - expect(columnPanel.find("div.properties-control-panel")).to.have.length(2); + const controlPanels = columnPanel.querySelectorAll("div.properties-control-panel"); + expect(controlPanels.length).to.equal(2); // each column adds a new `auto` to grid - expect(columnPanel.get(0).props.style).to.have.property("gridTemplateColumns", "1fr 1fr"); + expect(columnPanel.style.gridTemplateColumns).to.equal("1fr 1fr"); }); }); @@ -44,48 +48,57 @@ describe("column panel 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; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); - it("column panel and controls should be disabled", () => { - let columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']"); - expect(columnPanel.prop("disabled")).to.equal(false); + it("column panel and controls should be disabled", async() => { + const { container } = wrapper; + let columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']"); + expect(columnPanel.hasAttribute("disabled")).to.equal(false); // check initial state of enabled controller.updatePropertyValue({ name: "colDisable" }, true); - wrapper.update(); - columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']"); - expect(columnPanel.prop("disabled")).to.equal(true); + await waitFor(() => { + columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']"); + expect(columnPanel.hasAttribute("disabled")).to.equal(true); + }); + }); - it("column panel and controls should be hidden", () => { - let columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']"); - expect(columnPanel.hasClass("hide")).to.equal(false); + it("column panel and controls should be hidden", async() => { + const { container } = wrapper; + let columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']"); + expect(columnPanel).to.exist; + expect(columnPanel.classList.contains("hide")).to.equal(false); controller.updatePropertyValue({ name: "colHide" }, true); - wrapper.update(); - columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']"); - expect(columnPanel.hasClass("hide")).to.equal(true); + await waitFor(() => { + columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']"); + expect(columnPanel.classList.contains("hide")).to.equal(true); + }); + + }); }); describe("column panel classNames applied correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("column panel should have custom classname defined", () => { - const columnPanelWrapper = wrapper.find("div[data-id='properties-column-panels']"); - expect(columnPanelWrapper.find(".column-panels-cond-group-columnpanel-class")).to.have.length(1); + const { container } = wrapper; + const columnPanelWrapper = container.querySelector("div[data-id='properties-column-panels']"); + expect(columnPanelWrapper.querySelectorAll(".column-panels-cond-group-columnpanel-class")).to.have.length(1); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/control-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/control-test.js index 914b594348..b954c0d93e 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/control-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/control-test.js @@ -14,26 +14,30 @@ * limitations under the License. */ -import propertyUtils from "./../../_utils_/property-utils"; +import { cleanup, waitFor } from "@testing-library/react"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; - +import "@testing-library/jest-dom"; import { expect } from "chai"; describe("control panel renders correctly", () => { var wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should have displayed the 1 control panel", () => { - const controlPanel = wrapper.find("div[data-id='properties-selectcolumn-values']"); + const { container } = wrapper; + const controlPanel = container.querySelector("div[data-id='properties-selectcolumn-values']"); // should render 1 control panel - expect(controlPanel.find("div.properties-control-panel")).to.have.length(1); + const controlPanels = controlPanel.querySelectorAll("div.properties-control-panel"); + expect(controlPanels).to.not.be.null; + }); }); @@ -41,53 +45,59 @@ describe("control panel 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; + }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); - it("control panel and controls should be disabled", () => { - let controlPanel = wrapper.find("div[data-id='properties-selectcolumn-values']"); - expect(controlPanel.prop("disabled")).to.equal(false); + it("control panel and controls should be disabled", async() => { + const { container } = wrapper; + const controlPanel = container.querySelector("div[data-id='properties-selectcolumn-values']"); + expect(controlPanel.classList.contains("disabled")).to.equal(false); // check initial state of enabled controller.updatePropertyValue({ name: "disableColumnSelectionPanel" }, true); - wrapper.update(); - controlPanel = wrapper.find("div[data-id='properties-selectcolumn-values']"); - expect(controlPanel.prop("disabled")).to.equal(true); + await waitFor(() => { + const updatedControlPanel = container.querySelector("div[data-id='properties-selectcolumn-values']"); + expect(updatedControlPanel.hasAttribute("disabled")).to.equal(true); + }); }); - it("control panel and controls should be hidden", () => { - let controlPanel = wrapper.find("div[data-id='properties-column-selection-panel']"); - expect(controlPanel.hasClass("hide")).to.equal(false); + it("control panel and controls should be hidden", async() => { + const { container } = wrapper; + let controlPanel = container.querySelector("div[data-id='properties-column-selection-panel']"); + expect(controlPanel.classList.contains("hide")).to.equal(false); controller.updatePropertyValue({ name: "hideColumnSelectionPanel" }, true); - wrapper.update(); - controlPanel = wrapper.find("div[data-id='properties-column-selection-panel']"); - expect(controlPanel.hasClass("hide")).to.equal(true); + await waitFor(() => { + controlPanel = container.querySelector("div[data-id='properties-column-selection-panel']"); + expect(controlPanel.classList.contains("hide")).to.equal(true); + }); }); }); describe("control panel classNames applied correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("control panels should have custom classname defined", () => { + const { container } = wrapper; // nested panel: controls - expect(wrapper.find(".textpanels-group-controls-class")).to.have.length(1); + expect(container.querySelectorAll(".textpanels-group-controls-class")).to.have.length(1); // deeply nested panel: controls - expect(wrapper.find(".disable-button-control-panel-group-controls-class")).to.have.length(1); + expect(container.querySelectorAll(".disable-button-control-panel-group-controls-class")).to.have.length(1); // nested panel without a type defined, will default to controls - propertyUtils.openSummaryPanel(wrapper, "structuretable-summary-panel2"); - expect(wrapper.find(".structuretable-summary2-panel-category-group-controls-class")).to.have.length(1); + propertyUtilsRTL.openSummaryPanel(wrapper, "structuretable-summary-panel2"); + expect(container.querySelectorAll(".structuretable-summary2-panel-category-group-controls-class")).to.have.length(1); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js index 448eec793c..b6de9f90d5 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js @@ -13,43 +13,44 @@ * 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 twistypanelParamDef from "./../../test_resources/paramDefs/twistyPanel_paramDef.json"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; - import { expect } from "chai"; +import { cleanup, fireEvent, waitFor } from "@testing-library/react"; describe("twisty panel renders correctly", () => { var wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(twistypanelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(twistypanelParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should have displayed the twisty panel with first panel closed and 2nd panel open", () => { - const twisty = wrapper.find("div[data-id='properties-TwistyPanel1']"); - expect(twisty.find("li.cds--accordion__item")).to.have.length(1); - expect(twisty.find("li.cds--accordion__item--active")).to.have.length(0); - - const tableTwisty = wrapper.find("div[data-id='properties-TableTwisty']"); - expect(tableTwisty.find("li.cds--accordion__item")).to.have.length(1); - expect(tableTwisty.find("li.cds--accordion__item--active")).to.have.length(1); + const { container } = wrapper; + const twisty = container.querySelector("div[data-id='properties-TwistyPanel1']"); + expect(twisty.querySelectorAll("li.cds--accordion__item")).to.have.length(1); + expect(twisty.querySelectorAll("li.cds--accordion__item--active")).to.have.length(0); + + const tableTwisty = container.querySelector("div[data-id='properties-TableTwisty']"); + expect(tableTwisty.querySelectorAll("li.cds--accordion__item")).to.have.length(1); + expect(tableTwisty.querySelectorAll("li.cds--accordion__item--active")).to.have.length(1); }); it("should expand content when twisty panel link clicked", () => { - let twisty = wrapper.find("div[data-id='properties-TwistyPanel1']"); - expect(twisty.find("li.cds--accordion__item")).to.have.length(1); - expect(twisty.find("li.cds--accordion__item--active")).to.have.length(0); - const twistyButton = twisty.find("button.cds--accordion__heading"); - twistyButton.simulate("click"); - twisty = wrapper.find("div[data-id='properties-TwistyPanel1']"); - expect(twisty.find("li.cds--accordion__item")).to.have.length(1); - expect(twisty.find("li.cds--accordion__item--active")).to.have.length(1); + const { container } = wrapper; + let twisty = container.querySelector("div[data-id='properties-TwistyPanel1']"); + expect(twisty.querySelectorAll("li.cds--accordion__item")).to.have.length(1); + expect(twisty.querySelectorAll("li.cds--accordion__item--active")).to.have.length(0); + const twistyButton = twisty.querySelector("button.cds--accordion__heading"); + fireEvent.click(twistyButton); + twisty = container.querySelector("div[data-id='properties-TwistyPanel1']"); + expect(twisty.querySelectorAll("li.cds--accordion__item")).to.have.length(1); + expect(twisty.querySelectorAll("li.cds--accordion__item--active")).to.have.length(1); }); }); @@ -57,121 +58,124 @@ describe("twisty panel 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; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); - it("twisty panel and controls should be disabled", () => { - const disableTwisty = wrapper.find("div[data-id='properties-disableTwistyPanel']"); - const disabledCheckbox = disableTwisty.find("input[type='checkbox']"); - let twistyPanel = wrapper.find("div[data-id='properties-twisty-panel1']"); + it("twisty panel and controls should be disabled", async() => { + const { container } = wrapper; + const disableTwisty = container.querySelector("div[data-id='properties-disableTwistyPanel']"); + const disabledCheckbox = disableTwisty.querySelector("input[type='checkbox']"); + let twistyPanel = container.querySelector("div[data-id='properties-twisty-panel1']"); // check initial state of enabled - expect(disabledCheckbox.getDOMNode().checked).to.equal(false); + expect(disabledCheckbox.checked).to.equal(false); expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "numberfield1" })).to.equal("enabled"); expect(controller.getControlState({ name: "numberfield2" })).to.equal("enabled"); // disable the panel and confirm - disabledCheckbox.getDOMNode().checked = true; - disabledCheckbox.simulate("change"); - twistyPanel = wrapper.find("div[data-id='properties-twisty-panel1']"); - expect(controller.getPropertyValue({ name: "disableTwistyPanel" })).to.equal(true); - expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("disabled"); - expect(controller.getControlState({ name: "numberfield1" })).to.equal("disabled"); - expect(controller.getControlState({ name: "numberfield2" })).to.equal("disabled"); - expect(twistyPanel.find("li.cds--accordion__item--disabled")).to.have.length(1); - - - // can also disable a twisty that is opened - // enable and open the twistypanel - disabledCheckbox.getDOMNode().checked = false; - disabledCheckbox.simulate("change"); - twistyPanel = wrapper.find("div[data-id='properties-twisty-panel1']"); - twistyPanel.find("button") - .at(0) - .simulate("click"); - twistyPanel = wrapper.find("div[data-id='properties-twisty-panel1']"); - expect(twistyPanel.find("li.cds--accordion__item")).to.have.length(1); - expect(twistyPanel.find("li.cds--accordion__item--active")).to.have.length(1); - - const numberfields = twistyPanel.find("input[type='number']"); + fireEvent.click(disabledCheckbox); + await waitFor(() => { + disabledCheckbox.checked = true; + twistyPanel = container.querySelector("div[data-id='properties-twisty-panel1']"); + expect(controller.getPropertyValue({ name: "disableTwistyPanel" })).to.equal(true); + expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("disabled"); + expect(controller.getControlState({ name: "numberfield1" })).to.equal("disabled"); + expect(controller.getControlState({ name: "numberfield2" })).to.equal("disabled"); + expect(twistyPanel.querySelectorAll("li.cds--accordion__item--disabled")).to.have.length(1); + }); + + fireEvent.click(disabledCheckbox); + await waitFor(() => { + disabledCheckbox.checked = false; + twistyPanel = container.querySelector("div[data-id='properties-twisty-panel1']"); + const button = twistyPanel.querySelectorAll("button")[0]; + fireEvent.click(button); + }); + + await waitFor(() => { + twistyPanel = container.querySelector("div[data-id='properties-twisty-panel1']"); + expect(twistyPanel.querySelectorAll("li.cds--accordion__item")).to.have.length(1); + expect(twistyPanel.querySelectorAll("li.cds--accordion__item--active")).to.have.length(1); + }); + + const numberfields = twistyPanel.querySelectorAll("input[type='number']"); expect(numberfields).to.have.length(2); expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "numberfield1" })).to.equal("enabled"); expect(controller.getControlState({ name: "numberfield2" })).to.equal("enabled"); // disable the open twisty disableTwistyPanel - disabledCheckbox.getDOMNode().checked = true; - disabledCheckbox.simulate("change"); - twistyPanel = wrapper.find("div[data-id='properties-twisty-panel1']"); - expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("disabled"); - expect(controller.getControlState({ name: "numberfield1" })).to.equal("disabled"); - expect(controller.getControlState({ name: "numberfield2" })).to.equal("disabled"); - expect(twistyPanel.find("li.cds--accordion__item--disabled")).to.have.length(1); + fireEvent.click(disabledCheckbox); + await waitFor(() => { + disabledCheckbox.checked = true; + twistyPanel = container.querySelector("div[data-id='properties-twisty-panel1']"); + expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("disabled"); + expect(controller.getControlState({ name: "numberfield1" })).to.equal("disabled"); + expect(controller.getControlState({ name: "numberfield2" })).to.equal("disabled"); + expect(twistyPanel.querySelectorAll("li.cds--accordion__item--disabled")).to.have.length(1); + }); }); it("twisty panel and controls should be hidden", () => { - const hiddenTwisty = wrapper.find("div[data-id='properties-hideTwistyPanel']"); - const hiddenCheckbox = hiddenTwisty.find("input[type='checkbox']"); - let twistyPanel = wrapper.find("div[data-id='properties-twisty-panel2']"); - + const { container } = wrapper; + const hiddenTwisty = container.querySelector("div[data-id='properties-hideTwistyPanel']"); + const hiddenCheckbox = hiddenTwisty.querySelector("input[type='checkbox']"); + let twistyPanel = container.querySelector("div[data-id='properties-twisty-panel2']"); // check initial state of enabled - expect(hiddenCheckbox.getDOMNode().checked).to.equal(false); + expect(hiddenCheckbox.checked).to.equal(false); expect(controller.getPanelState({ name: "twisty-panel2" })).to.equal("visible"); // hide the panel and confirm - hiddenCheckbox.getDOMNode().checked = true; - hiddenCheckbox.simulate("change"); - twistyPanel = wrapper.find("div[data-id='properties-twisty-panel2']"); + fireEvent.click(hiddenCheckbox); + twistyPanel = container.querySelector("div[data-id='properties-twisty-panel2']"); expect(controller.getPanelState({ name: "twisty-panel2" })).to.equal("hidden"); expect(controller.getControlState({ name: "numberfield3" })).to.equal("hidden"); - expect(twistyPanel.hasClass("hide")).to.equal(true); + expect(twistyPanel.classList.contains("hide")).to.equal(true); // can also hide a twisty that is opened // make panel visible and confirm - hiddenCheckbox.getDOMNode().checked = false; - hiddenCheckbox.simulate("change"); - twistyPanel.find("button") - .at(0) - .simulate("click"); - twistyPanel = wrapper.find("div[data-id='properties-twisty-panel2']"); - expect(twistyPanel.find("li.cds--accordion__item")).to.have.length(1); - expect(twistyPanel.find("li.cds--accordion__item--active")).to.have.length(1); - const numberfield = twistyPanel.find("input[type='number']"); + fireEvent.click(hiddenCheckbox); + const button = twistyPanel.querySelectorAll("button")[0]; + fireEvent.click(button); + twistyPanel = container.querySelector("div[data-id='properties-twisty-panel2']"); + expect(twistyPanel.querySelectorAll("li.cds--accordion__item")).to.have.length(1); + expect(twistyPanel.querySelectorAll("li.cds--accordion__item--active")).to.have.length(1); + const numberfield = twistyPanel.querySelectorAll("input[type='number']"); expect(numberfield).to.have.length(1); expect(controller.getPanelState({ name: "twisty-panel2" })).to.equal("visible"); expect(controller.getControlState({ name: "numberfield3" })).to.equal("visible"); // hide the panel and confirm - hiddenCheckbox.getDOMNode().checked = true; - hiddenCheckbox.simulate("change"); - twistyPanel = wrapper.find("div[data-id='properties-twisty-panel2']"); + fireEvent.click(hiddenCheckbox); + twistyPanel = container.querySelector("div[data-id='properties-twisty-panel2']"); expect(controller.getPanelState({ name: "twisty-panel2" })).to.equal("hidden"); expect(controller.getControlState({ name: "numberfield3" })).to.equal("hidden"); - expect(twistyPanel.hasClass("hide")).to.equal(true); + expect(twistyPanel.classList.contains("hide")).to.equal(true); }); }); describe("twisty panel classNames applied correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("text panel should have custom classname defined", () => { - const twistyPanelcategory = wrapper.find("div.properties-category-container").at(6); // TWISTY PANEL category - expect(twistyPanelcategory.find(".twisty-panel1-group-twistypanel-class")).to.have.length(1); + const { container } = wrapper; + const twistyPanelcategory = container.querySelectorAll("div.properties-category-container")[6]; // TWISTY PANEL category + expect(twistyPanelcategory.querySelectorAll(".twisty-panel1-group-twistypanel-class")).to.have.length(1); }); });