diff --git a/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js b/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js index edda34ec89..e8dbfe636f 100644 --- a/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js +++ b/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js @@ -97,7 +97,15 @@ function getTableHeaderRows(container) { } function getTableRows(container) { - const rows = within(container).getAllByRole("row"); + if (!container) { + return []; + } + let rows; + try { + rows = within(container).getAllByRole("row"); + } catch (error) { + rows = Array.from(container.querySelectorAll(".properties-data-row")); + } const res = []; for (let i = 0; i < rows.length; i++) { if (rows[i].outerHTML.includes("properties-data-row")) { diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js index b4ef8e32ab..9a56521650 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js @@ -15,73 +15,96 @@ */ import { expect } from "chai"; - -import propertyUtils from "./../../_utils_/property-utils"; -import tableUtils from "./../../_utils_/table-utils"; +import { within } from "@testing-library/react"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; +import tableUtilsRTL from "../../_utils_/table-utilsRTL"; import columnSelectionPanel from "./../../test_resources/paramDefs/columnSelectionPanel_multiInput_paramDef.json"; import panelParamDef from "./../../test_resources/paramDefs/panel_paramDef.json"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; +import { cleanup, fireEvent } from "@testing-library/react"; describe("selectcolumn and selectcolumns controls work in columnSelection panel", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should show correct values from selectcolumn controls", () => { - const panel1 = wrapper.find("div[data-id='properties-field1_panel']"); - expect(panel1.find("span.cds--list-box__label").text()).to.equal("age"); + const { container } = wrapper; + const panel1 = container.querySelector("div[data-id='properties-field1_panel']"); + const label1 = panel1.querySelector("span.cds--list-box__label"); + expect(label1.textContent).to.equal("age"); + const dropdownButton = panel1.querySelector("button.cds--list-box__field"); + expect(dropdownButton).to.not.be.null; + fireEvent.click(dropdownButton); + const dropdown1 = panel1.querySelectorAll("ul.cds--list-box__menu li"); + expect(dropdown1).to.not.be.null; + const actualOptions = Array.from(dropdown1).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); const expectedOptions = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "age", value: "age" }, { label: "Na", value: "Na" }, { label: "drug", value: "drug" } ]; - const actualOptions = panel1.find("Dropdown").prop("items"); expect(actualOptions).to.eql(expectedOptions); - - const panel2 = wrapper.find("div[data-id='properties-field2_panel']"); - expect(panel2.find("span.cds--list-box__label").text()).to.equal("BP"); + const panel2 = container.querySelector("div[data-id='properties-field2_panel']"); + const label2 = panel2.querySelector("span.cds--list-box__label"); + expect(label2.textContent).to.equal("BP"); const expectedOptions2 = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "BP", value: "BP" }, { label: "Na", value: "Na" }, { label: "drug", value: "drug" } ]; - const actualOptions2 = panel2.find("Dropdown").prop("items"); + const dropdownButton2 = panel2.querySelector("button.cds--list-box__field"); + expect(dropdownButton2).to.not.be.null; + fireEvent.click(dropdownButton2); + const dropdown2 = panel2.querySelectorAll("ul.cds--list-box__menu li"); + const actualOptions2 = Array.from(dropdown2).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); expect(actualOptions2).to.eql(expectedOptions2); }); it("should show correct values from selectcolumn and selectcolumns controls", () => { - let panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - expect(panel1.find("span.cds--list-box__label").text()).to.equal("..."); + const { container } = wrapper; + let panel1 = container.querySelector("div[data-id='properties-selectcolumn']"); + const label1 = panel1.querySelector("span.cds--list-box__label"); + expect(label1.textContent).to.equal("..."); const expectedOptions = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "age", value: "age" }, { label: "BP", value: "BP" }, { label: "Na", value: "Na" }, { label: "drug", value: "drug" } ]; - const actualOptions = panel1.find("Dropdown").prop("items"); + const dropdownButton = panel1.querySelector("button.cds--list-box__field"); + expect(dropdownButton).to.not.be.null; + fireEvent.click(dropdownButton); + const dropdown = panel1.querySelectorAll("ul.cds--list-box__menu li"); + const actualOptions = Array.from(dropdown).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); expect(actualOptions).to.eql(expectedOptions); // open the dropdown - const dropdownButton = panel1.find("button"); - dropdownButton.simulate("click"); - panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - const dropdownList = panel1.find("li.cds--list-box__menu-item"); - expect(dropdownList).to.be.length(5); + expect(dropdown.length).to.equal(5); // select age - dropdownList.at(1).simulate("click"); - panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - const fieldPicker = tableUtils.openFieldPickerForEmptyTable(wrapper, "properties-ctrl-selectcolumns"); - tableUtils.fieldPicker(fieldPicker, ["BP"], ["BP", "Na", "drug"]); - const panel2 = wrapper.find("div[data-id='properties-selectcolumns']"); - const rows = tableUtils.getTableRows(panel2); + fireEvent.click(dropdown[1]); + panel1 = container.querySelector("div[data-id='properties-selectcolumn']"); + const fieldPicker = tableUtilsRTL.openFieldPickerForEmptyTable(container, "properties-ctrl-selectcolumns"); + tableUtilsRTL.fieldPicker(fieldPicker, ["BP"], ["BP", "Na", "drug"]); + const panel2 = container.querySelector("div[data-id='properties-selectcolumns']"); + const rows = tableUtilsRTL.getTableRows(panel2); expect(rows).to.have.length(1); }); }); @@ -90,21 +113,22 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(columnSelectionPanel); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(columnSelectionPanel); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should show correct values from selectcolumn controls with multi schema input", () => { - let panel1 = wrapper.find("div[data-id='properties-field1_panel']"); - expect(panel1.find("span.cds--list-box__label").text()).to.equal("0.Age"); - + const { container } = wrapper; + let panel1 = container.querySelector("div[data-id='properties-field1_panel']"); + const label1 = panel1.querySelector("span.cds--list-box__label"); + expect(label1.textContent).to.equal("0.Age"); let expectedSelectColumn1Options = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "0.Age", value: "0.Age" }, { label: "0.Sex", value: "0.Sex" }, { label: "0.Drug", value: "0.Drug" }, @@ -118,14 +142,21 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel { label: "2.drug2", value: "2.drug2" }, { label: "2.drug3", value: "2.drug3" } ]; - let actualOptions = panel1.find("Dropdown").prop("items"); - expect(actualOptions).to.eql(expectedSelectColumn1Options); - - let panel2 = wrapper.find("div[data-id='properties-field2_panel']"); - expect(panel2.find("span.cds--list-box__label").text()).to.equal("0.BP"); + let dropdownButton = panel1.querySelector("button.cds--list-box__field"); + expect(dropdownButton).to.not.be.null; + fireEvent.click(dropdownButton); + let actualOptions1 = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); + expect(actualOptions1).to.eql(expectedSelectColumn1Options); + + let panel2 = container.querySelector("div[data-id='properties-field2_panel']"); + const label2 = panel2.querySelector("span.cds--list-box__label"); + expect(label2.textContent).to.equal("0.BP"); let expectedSelectColumn2Options = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "0.Sex", value: "0.Sex" }, { label: "0.BP", value: "0.BP" }, { label: "0.Drug", value: "0.Drug" }, @@ -139,18 +170,22 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel { label: "2.drug2", value: "2.drug2" }, { label: "2.drug3", value: "2.drug3" } ]; - let actualOptions2 = panel2.find("Dropdown").prop("items"); + const dropdownButton2 = panel2.querySelector("button.cds--list-box__field"); + expect(dropdownButton2).to.not.be.null; + fireEvent.click(dropdownButton2); + let actualOptions2 = Array.from(panel2.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); expect(actualOptions2).to.eql(expectedSelectColumn2Options); // open the dropdown - const dropdownButton = panel1.find("button"); - dropdownButton.simulate("click"); - panel1 = wrapper.find("div[data-id='properties-field1_panel']"); - const dropdownList = panel1.find("li.cds--list-box__menu-item"); + panel1 = container.querySelector("div[data-id='properties-field1_panel']"); + const dropdownList = panel1.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(13); // select data.drug2 - dropdownList.at(8).simulate("click"); + fireEvent.click(dropdownList[8]); expectedSelectColumn1Options = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "0.Age", value: "0.Age" }, { label: "0.Sex", value: "0.Sex" }, { label: "0.Drug", value: "0.Drug" }, @@ -164,12 +199,18 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel { label: "2.drug2", value: "2.drug2" }, { label: "2.drug3", value: "2.drug3" } ]; - panel1 = wrapper.find("div[data-id='properties-field1_panel']"); - actualOptions = panel1.find("Dropdown").prop("items"); - expect(actualOptions).to.eql(expectedSelectColumn1Options); + dropdownButton = panel1.querySelector("button.cds--list-box__field"); + expect(dropdownButton).to.not.be.null; + fireEvent.click(dropdownButton); + panel1 = container.querySelector("div[data-id='properties-field1_panel']"); + actualOptions1 = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); + expect(actualOptions1).to.eql(expectedSelectColumn1Options); expectedSelectColumn2Options = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "0.Age", value: "0.Age" }, { label: "0.Sex", value: "0.Sex" }, { label: "0.BP", value: "0.BP" }, @@ -183,14 +224,19 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel { label: "2.drug2", value: "2.drug2" }, { label: "2.drug3", value: "2.drug3" } ]; - panel2 = wrapper.find("div[data-id='properties-field2_panel']"); - actualOptions2 = panel2.find("Dropdown").prop("items"); + panel2 = container.querySelector("div[data-id='properties-field2_panel']"); + actualOptions2 = Array.from(panel2.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); expect(actualOptions2).to.eql(expectedSelectColumn2Options); }); it("should show correct values from selectcolumn and selectcolumns controls with multi schema input", () => { - let panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - expect(panel1.find("span.cds--list-box__label").text()).to.equal("..."); + const { container } = wrapper; + let panel1 = container.querySelector("div[data-id='properties-selectcolumn']"); + const label1 = panel1.querySelector("span.cds--list-box__label"); + expect(label1.textContent).to.equal("..."); const fieldTable = [ { "name": "Age", "schema": "0" }, @@ -207,26 +253,36 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel { "name": "drug2", "schema": "2" }, { "name": "drug3", "schema": "2" } ]; - let actualOptions = panel1.find("Dropdown").prop("items"); + let dropdownButton = panel1.querySelector("button.cds--list-box__field"); + expect(dropdownButton).to.not.be.null; + fireEvent.click(dropdownButton); + let actualOptions = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); expect(actualOptions.length).to.equal(fieldTable.length + 1); // +1 for "..." - const fieldPicker = tableUtils.openFieldPickerForEmptyTable(wrapper, "properties-ctrl-selectcolumns"); - tableUtils.fieldPicker(fieldPicker, ["0.drug2", "2.drug2"], fieldTable); + const fieldPicker = tableUtilsRTL.openFieldPickerForEmptyTable(container, "properties-ctrl-selectcolumns"); + tableUtilsRTL.fieldPicker(fieldPicker, ["0.drug2", "2.drug2"], fieldTable); // open the dropdown - const dropdownButton = panel1.find("button"); - dropdownButton.simulate("click"); - panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - const dropdownList = panel1.find("li.cds--list-box__menu-item"); + panel1 = container.querySelector("div[data-id='properties-selectcolumn']"); + const dropdownList = panel1.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(12); // select data.Age - dropdownList.at(5).simulate("click"); - panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - actualOptions = panel1.find("Dropdown").prop("items"); + fireEvent.click(dropdownList[5]); + panel1 = container.querySelector("div[data-id='properties-selectcolumn']"); + dropdownButton = panel1.querySelector("button.cds--list-box__field"); + expect(dropdownButton).to.not.be.null; + fireEvent.click(dropdownButton); + actualOptions = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({ + label: item.textContent.trim(), + value: item.getAttribute("data-value") || item.textContent.trim() + })); expect(actualOptions.length).to.equal(fieldTable.length - 1); const expectedOptions = [ - { label: "...", value: "" }, + { label: "...", value: "..." }, { label: "0.Age", value: "0.Age" }, { label: "0.Sex", value: "0.Sex" }, { label: "0.BP", value: "0.BP" }, @@ -239,24 +295,24 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel { label: "2.drug", value: "2.drug" }, { label: "2.drug3", value: "2.drug3" } ]; - expect(actualOptions).to.have.deep.members(expectedOptions); + expect(actualOptions).to.deep.equal(expectedOptions); }); it("should show correct values from selectcolumns controls with multi schema input", () => { - const selectColumnsTable2 = wrapper.find("div[data-id='properties-ft-selectcolumns2']"); - expect(selectColumnsTable2).to.have.length(1); + const { container } = wrapper; + const selectColumnsTable2 = container.querySelector("div[data-id='properties-ft-selectcolumns2']"); + expect(selectColumnsTable2).to.exist; // selectColumnsTable3 is an empty table. It shows empty table text and Add columns button - const selectColumnsTable3 = wrapper.find("div[data-id='properties-ctrl-selectcolumns3']"); - expect(selectColumnsTable3).to.have.length(1); + const selectColumnsTable3 = container.querySelectorAll("div[data-id='properties-ctrl-selectcolumns3']"); + expect(selectColumnsTable3).to.exist; - const table2Rows = tableUtils.getTableRows(selectColumnsTable2); + const table2Rows = tableUtilsRTL.getTableRows(selectColumnsTable2); expect(table2Rows).to.have.length(3); const table2Initial = ["0.Age", "0.Drug", "2.Age"]; - for (let idx = 0; idx < table2Rows.length; idx++) { - expect(table2Rows.at(idx).find(".properties-field-type") - .text()).to.equal(table2Initial[idx]); - } + table2Rows.forEach((row, idx) => { + expect(row.querySelector(".properties-field-type").textContent).to.equal(table2Initial[idx]); + }); const fieldTable = [ { "name": "Sex", "schema": "0" }, @@ -294,9 +350,9 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel { "link_ref": "2", "field_name": "drug2" }, { "link_ref": "2", "field_name": "drug3" } ]; - const fieldPicker = tableUtils.openFieldPickerForEmptyTable(wrapper, "properties-ctrl-selectcolumns3"); - tableUtils.fieldPicker(fieldPicker, selectcolumns3, fieldTable); - expect(controller.getPropertyValue({ name: "selectcolumns3" })).to.have.deep.members(selectcolumns3A); + const fieldPicker = tableUtilsRTL.openFieldPickerForEmptyTable(container, "properties-ctrl-selectcolumns3"); + tableUtilsRTL.fieldPicker(fieldPicker, selectcolumns3, fieldTable); + expect(controller.getPropertyValue({ name: "selectcolumns3" })).to.deep.equal(selectcolumns3A); // Verify field picker from selectcolumns2 gets the correct fields const fieldTable2Input = [ @@ -334,12 +390,14 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel "origName": "Age" } ]; - expect(controller.getFilteredDatasetMetadata({ name: "selectcolumns2" })).to.have.deep.members(fieldTable2Input); + expect(controller.getFilteredDatasetMetadata({ name: "selectcolumns2" })).to.deep.equal(fieldTable2Input); }); it("should handle improply defined string fields as strings", () => { - const panel1 = wrapper.find("div[data-id='properties-BADVAR1']"); - expect(panel1.find("span.cds--list-box__label").text()).to.equal("0.Age"); + const { container } = wrapper; + const panel1 = container.querySelector("div[data-id='properties-BADVAR1']"); + const label1 = panel1.querySelector("span.cds--list-box__label"); + expect(label1.textContent).to.equal("0.Age"); }); }); @@ -347,58 +405,59 @@ describe("column selection 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("controls in column selection panel should be disabled", () => { // by default it is enabled - const checkboxWrapper = wrapper.find("div[data-id='properties-disableColumnSelectionPanel']"); - const disabledCheckbox = checkboxWrapper.find("input"); - expect(disabledCheckbox.getDOMNode().checked).to.equal(false); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-disableColumnSelectionPanel']"); + const disabledCheckbox = checkboxWrapper.querySelector("input"); + expect(disabledCheckbox).to.have.property("checked", false); expect(controller.getPanelState({ name: "selectcolumn-values" })).to.equal("enabled"); expect(controller.getControlState({ name: "field1_panel" })).to.equal("enabled"); expect(controller.getControlState({ name: "field2_panel" })).to.equal("enabled"); - // disable the controls - disabledCheckbox.getDOMNode().checked = true; - disabledCheckbox.simulate("change"); + fireEvent.click(disabledCheckbox); expect(controller.getPanelState({ name: "selectcolumn-values" })).to.equal("disabled"); expect(controller.getControlState({ name: "field1_panel" })).to.equal("disabled"); expect(controller.getControlState({ name: "field2_panel" })).to.equal("disabled"); - // check that the controls are disabled. - const panel = wrapper.find("div[data-id='properties-disable-selectcolumn-values']"); - const disabledPanel = panel.find("div.properties-control-panel").at(1); - const disabledItems = disabledPanel.find("div.properties-control-item"); + const panel = container.querySelector("div[data-id='properties-disable-selectcolumn-values']"); + const disabledPanel = panel.querySelector("div.properties-control-panel"); + const disabledItems = disabledPanel.querySelectorAll("div.properties-control-item"); expect(disabledItems).to.have.length(2); - expect(disabledItems.at(0).prop("disabled")).to.be.true; - expect(disabledItems.at(1).prop("disabled")).to.be.true; + expect(disabledItems[0].hasAttribute("disabled")).to.be.true; + expect(disabledItems[1].hasAttribute("disabled")).to.be.true; }); it("controls in column selection panel should be hidden", () => { - const checkboxWrapper = wrapper.find("div[data-id='properties-hideColumnSelectionPanel']"); - const hiddenCheckbox = checkboxWrapper.find("input"); - expect(hiddenCheckbox.getDOMNode().checked).to.equal(false); - + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-hideColumnSelectionPanel']"); + const hiddenCheckbox = checkboxWrapper.querySelector("input"); + expect(hiddenCheckbox.checked).to.equal(false); expect(controller.getPanelState({ name: "column-selection-panel" })).to.equal("visible"); // hide the controls - hiddenCheckbox.getDOMNode().checked = true; - hiddenCheckbox.simulate("change"); + fireEvent.click(hiddenCheckbox); expect(controller.getPanelState({ name: "column-selection-panel" })).to.equal("hidden"); expect(controller.getControlState({ name: "selectcolumn" })).to.equal("hidden"); expect(controller.getControlState({ name: "selectcolumns" })).to.equal("hidden"); // check that the controls are hidden. - const panel = wrapper.find("div[data-id='properties-hide-column-selection-panel']"); - const hiddenPanel = panel.find("div.properties-control-panel").at(1); - const hiddenItems = hiddenPanel.find("div.properties-control-item"); + const panel = container.querySelector("div[data-id='properties-hide-column-selection-panel']"); + expect(panel).to.exist; + const hiddenPanel = panel.querySelectorAll("div.properties-control-panel"); + expect(hiddenPanel.length).to.be.greaterThan(0); + const hiddenPanel1 = hiddenPanel[0]; + expect(hiddenPanel1).to.exist; + const hiddenItems = within(hiddenPanel1).queryAllByRole("div", { name: /properties-control-item/i }); expect(hiddenItems).to.have.length(0); }); }); @@ -406,22 +465,25 @@ describe("column selection panel visible and enabled conditions work correctly", describe("column selection 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 selection panel should have custom classname defined", () => { - const columnSelectionWrapper = wrapper.find("div[data-id='properties-column-selections']"); - expect(columnSelectionWrapper.find(".selectcolumn-values-group-columnselection-class")).to.have.length(1); - expect(columnSelectionWrapper.find(".column-selection-panel-group-columnselection-class")).to.have.length(1); + const { container } = wrapper; + const columnSelectionWrapper = container.querySelector("div[data-id='properties-column-selections']"); + expect(columnSelectionWrapper.querySelectorAll(".selectcolumn-values-group-columnselection-class")).to.have.length(1); + expect(columnSelectionWrapper.querySelectorAll(".column-selection-panel-group-columnselection-class")).to.have.length(1); }); it("column selection panel in a structuretable should have custom classname defined", () => { - propertyUtils.openSummaryPanel(wrapper, "structuretable-summary-panel1"); - expect(wrapper.find(".column-selection-panel-group-columnselection-class")).to.have.length(1); + const { container } = wrapper; + propertyUtilsRTL.openSummaryPanel(wrapper, "structuretable-summary-panel1"); + expect(container.querySelectorAll(".column-selection-panel-group-columnselection-class")).to.have.length(1); }); }); + diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js index 4a4159025d..43e76d6abd 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js @@ -18,7 +18,8 @@ import React from "react"; import { expect } from "chai"; -import propertyUtils from "./../../_utils_/property-utils"; +import { cleanup } from "@testing-library/react"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import panelParamDef from "./../../test_resources/paramDefs/panel_paramDef.json"; import customPanelParamDef from "./../../test_resources/paramDefs/CustomPanel_paramDef.json"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; @@ -28,13 +29,14 @@ import AddtlCmptsTest from "./../../_utils_/custom-components/AddtlCmptsTest.jsx // possibly move these under each panel describe("empty panels render correctly", () => { - const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef); const wrapper = renderedObject.wrapper; - it("should render each panel", () => { - const panelContainer = wrapper.find("div[data-id='properties-empty-panels-container']"); - expect(panelContainer).to.have.length(1); - expect(panelContainer.children()).to.have.length(10); + const { container } = wrapper; + const panelContainer = container.querySelector("div[data-id='properties-empty-panels-container']"); + expect(panelContainer).to.exist; + const children = panelContainer.children; + expect(children.length).to.equal(7); // Receiving 7 childrens as per RTL children method }); }); @@ -42,107 +44,120 @@ describe("additional components are rendered correctly", () => { it("when additional components are added to a tab group, it should be rendered at the same level as the other controls", () => { const propertiesInfo = { additionalComponents: { "toggle-panel": } }; const propertiesConfig = { rightFlyout: true }; - const renderedObject = propertyUtils.flyoutEditorForm(customPanelParamDef, propertiesConfig, null, propertiesInfo); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(customPanelParamDef, propertiesConfig, null, propertiesInfo); const wrapper = renderedObject.wrapper; - const customPanel = wrapper.find(".properties-custom-container"); - expect(customPanel).to.have.length(1); - const togglePanelContainer = customPanel.find(".properties-category-container").at(0); - const togglePanelContent = togglePanelContainer.find(".cds--accordion__content"); - expect(togglePanelContent.children()).to.have.length(2); // Default Component & Additional Component - + const { container } = wrapper; + const customPanel = container.querySelector(".properties-custom-container"); + expect(customPanel).to.exist; + const togglePanelContainer = customPanel.querySelector(".properties-category-container"); + expect(togglePanelContainer).to.exist; + const togglePanelContent = togglePanelContainer.querySelector(".cds--accordion__content"); + expect(togglePanelContent).to.exist; + const children = togglePanelContent.children; + expect(children).to.have.length(2); // Default Component & Additional Component*/ }); }); describe("group 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("group panels should have custom classname defined", () => { + const { container } = wrapper; // top level group panels - expect(wrapper.find(".text-panels-group-panels-class")).to.have.length(1); + expect(container.querySelectorAll(".text-panels-group-panels-class")).to.have.length(1); // double nested panels - expect(wrapper.find(".level1-group-panels-class")).to.have.length(1); + expect(container.querySelectorAll(".level1-group-panels-class")).to.have.length(1); // deeply nested group panels - expect(wrapper.find(".level3-group-panels-class")).to.have.length(1); + expect(container.querySelectorAll(".level3-group-panels-class")).to.have.length(1); }); }); describe("nested panels render correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(nestedPanelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(nestedPanelParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("Text panels should be nested when nested_panel is set to true", () => { + const { container } = wrapper; // Default text panel - const defaultTextPanel = wrapper.find(".default-textpanel-class"); - expect(defaultTextPanel.hasClass("properties-control-nested-panel")).to.equal(false); + const defaultTextPanel = container.querySelector(".default-textpanel-class"); + expect(defaultTextPanel.classList.contains("properties-control-nested-panel")).to.equal(false); // Nested text panel - const nestedTextPanel = wrapper.find(".nested-textpanel-class"); - expect(nestedTextPanel.hasClass("properties-control-nested-panel")).to.equal(true); + const nestedTextPanel = container.querySelector(".nested-textpanel-class"); + expect(nestedTextPanel.classList.contains("properties-control-nested-panel")).to.equal(true); }); it("Column selection panels should be nested when nested_panel is set to true", () => { + const { container } = wrapper; // Default columnSelection panel - const defaultColumnSelectionPanel = wrapper.find(".default-columnselection-class"); - expect(defaultColumnSelectionPanel.hasClass("properties-control-nested-panel")).to.equal(false); + const defaultColumnSelectionPanel = container.querySelector(".default-columnselection-class"); + expect(defaultColumnSelectionPanel.classList.contains("properties-control-nested-panel")).to.equal(false); // Nested columnSelection panel - const nestedColumnSelectionPanel = wrapper.find(".nested-columnselection-class"); - expect(nestedColumnSelectionPanel.hasClass("properties-control-nested-panel")).to.equal(true); + const nestedColumnSelectionPanel = container.querySelector(".nested-columnselection-class"); + expect(nestedColumnSelectionPanel.classList.contains("properties-control-nested-panel")).to.equal(true); + }); it("Summary panels should be nested when nested_panel is set to true", () => { + const { container } = wrapper; // Default summary panel - const defaultSummaryPanel = wrapper.find(".default-summarypanel-class"); - expect(defaultSummaryPanel.hasClass("properties-control-nested-panel")).to.equal(false); + const defaultSummaryPanel = container.querySelector(".default-summarypanel-class"); + expect(defaultSummaryPanel.classList.contains("properties-control-nested-panel")).to.equal(false); // Nested summary panel - const nestedSummaryPanel = wrapper.find(".nested-summarypanel-class"); - expect(nestedSummaryPanel.hasClass("properties-control-nested-panel")).to.equal(true); + const nestedSummaryPanel = container.querySelector(".nested-summarypanel-class"); + expect(nestedSummaryPanel.classList.contains("properties-control-nested-panel")).to.equal(true); + }); it("Twisty panels should be nested when nested_panel is set to true", () => { + const { container } = wrapper; // Default twisty panel - const defaultTwistyPanel = wrapper.find(".default-twistypanel-class"); - expect(defaultTwistyPanel.hasClass("properties-control-nested-panel")).to.equal(false); + const defaultTwistyPanel = container.querySelector(".default-twistypanel-class"); + expect(defaultTwistyPanel.classList.contains("properties-control-nested-panel")).to.equal(false); // Nested twisty panel - const nestedTwistyPanel = wrapper.find(".nested-twistypanel-class"); - expect(nestedTwistyPanel.hasClass("properties-control-nested-panel")).to.equal(true); + const nestedTwistyPanel = container.querySelector(".nested-twistypanel-class"); + expect(nestedTwistyPanel.classList.contains("properties-control-nested-panel")).to.equal(true); }); it("Action panels should be nested when nested_panel is set to true", () => { + const { container } = wrapper; // Default action panel - const defaultActionPanel = wrapper.find(".default-actionpanel-class"); - expect(defaultActionPanel.hasClass("properties-control-nested-panel")).to.equal(false); + const defaultActionPanel = container.querySelector(".default-actionpanel-class"); + expect(defaultActionPanel.classList.contains("properties-control-nested-panel")).to.be.equal(false); // Nested action panel - const nestedActionPanel = wrapper.find(".nested-actionpanel-class"); - expect(nestedActionPanel.hasClass("properties-control-nested-panel")).to.equal(true); + const nestedAction = container.querySelector(".nested-actionpanel-class"); + expect(nestedAction.classList.contains("properties-control-nested-panel")).to.equal(true); }); it("Column panels should be nested when nested_panel is set to true", () => { // Default column panel - const defaultColumnPanel = wrapper.find(".default-columnpanel-class"); - expect(defaultColumnPanel.hasClass("properties-control-nested-panel")).to.equal(false); + const { container } = wrapper; + const defaultColumnPanel = container.querySelector(".default-columnpanel-class"); + expect(defaultColumnPanel.classList.contains("properties-control-nested-panel")).to.equal(false); // Nested column panel - const nestedColumnPanel = wrapper.find(".nested-columnpanel-class"); - expect(nestedColumnPanel.hasClass("properties-control-nested-panel")).to.equal(true); + const nestedColumnPanel = container.querySelector(".nested-columnpanel-class"); + expect(nestedColumnPanel.classList.contains("properties-control-nested-panel")).to.equal(true); + }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js index 08199f1126..2ad946c7b5 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js @@ -14,68 +14,76 @@ * limitations under the License. */ -import propertyUtils from "./../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import { expect } from "chai"; import PANEL_SELECTOR_PARAM_DEF from "./../../test_resources/paramDefs/panelSelector_paramDef.json"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; +import { cleanup, fireEvent, waitFor } from "@testing-library/react"; describe("'panel selector insert' renders correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(PANEL_SELECTOR_PARAM_DEF); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(PANEL_SELECTOR_PARAM_DEF); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); - it("it should have 3 text panels", () => { + it("it should have 3 text panels", async() => { + // Properties should have 3 text panels description - const descriptions = wrapper.find("div[data-id='properties-fruit-color2'] .panel-description"); + const { container } = wrapper; + const descriptions = container.querySelectorAll("div[data-id='properties-fruit-color2'] .panel-description"); expect(descriptions).to.have.length(3); // Check the descriptions are as expected. - expect(descriptions.at(0).text()).to.equal("Apples ripen six to 10 times faster at room temperature than if they are refrigerated."); - expect(descriptions.at(1).text()).to.equal("Blueberries freeze in just 4 minutes."); - expect(descriptions.at(2).text()).to.equal("Lemons are a hybrid between a sour orange and a citron."); + expect(descriptions[0].textContent).to.equal("Apples ripen six to 10 times faster at room temperature than if they are refrigerated."); + expect(descriptions[1].textContent).to.equal("Blueberries freeze in just 4 minutes."); + expect(descriptions[2].textContent).to.equal("Lemons are a hybrid between a sour orange and a citron."); // Check that the red(0) text panel is enabled and blue (1) and yellow (2) // text panels are disabled. - var redState = controller.getPanelState({ "name": "red2" }); + let redState = controller.getPanelState({ "name": "red2" }); expect(redState).to.equal("enabled"); - var blueState = controller.getPanelState({ "name": "blue2" }); + let blueState = controller.getPanelState({ "name": "blue2" }); expect(blueState).to.equal("disabled"); - var yellowState = controller.getPanelState({ "name": "yellow2" }); + let yellowState = controller.getPanelState({ "name": "yellow2" }); expect(yellowState).to.equal("disabled"); // Simulate a click on blue (1) radio button - const input = wrapper.find("div[data-id='properties-fruit-color2']"); - expect(input).to.have.length(1); - const radios = input.find("input[type='radio']"); - expect(radios).to.have.length(3); + const input = container.querySelector("div[data-id='properties-fruit-color2']"); + expect(input).to.exist; + const radios = input.querySelectorAll("input[type='radio']"); + expect(radios.length).to.equal(3); - const radioBlue = radios.find("input[value='blue2']"); - radioBlue.simulate("change", { target: { checked: true, value: "blue2" } }); + const radioBlue = radios[1]; + fireEvent.click(radioBlue); // Check that the blue (1) text panel is enabled and red (0) and yellow (2) // text panels are disabled. - redState = controller.getPanelState({ "name": "red2" }); - expect(redState).to.equal("disabled"); - blueState = controller.getPanelState({ "name": "blue2" }); - expect(blueState).to.equal("enabled"); - yellowState = controller.getPanelState({ "name": "yellow2" }); - expect(yellowState).to.equal("disabled"); + await waitFor(() => { + redState = controller.getPanelState({ "name": "red2" }); + expect(redState).to.equal("disabled"); + blueState = controller.getPanelState({ "name": "blue2" }); + expect(blueState).to.equal("enabled"); + yellowState = controller.getPanelState({ "name": "yellow2" }); + expect(yellowState).to.equal("disabled"); + }); + + }); it("panel selector and controls should be disabled", () => { // disabled - const checkboxWrapper = wrapper.find("div[data-id='properties-disablePanelSelector']"); - const disabledCheckbox = checkboxWrapper.find("input"); - expect(disabledCheckbox.props().checked).to.equal(true); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-disablePanelSelector']"); + const disabledCheckbox = checkboxWrapper.querySelector("input"); + expect(disabledCheckbox.checked).to.equal(true); expect(controller.getControlState({ name: "fruit-color11" })).to.equal("disabled"); expect(controller.getControlState({ name: "number" })).to.equal("disabled"); @@ -84,37 +92,34 @@ describe("'panel selector insert' renders correctly", () => { expect(controller.getPanelState({ name: "dynamicTextSum" })).to.equal("disabled"); // enable - const node = disabledCheckbox.getDOMNode(); - node.checked = false; - disabledCheckbox.simulate("change"); + fireEvent.click(disabledCheckbox); expect(controller.getControlState({ name: "fruit-color11" })).to.equal("enabled"); expect(controller.getControlState({ name: "number" })).to.equal("enabled"); expect(controller.getPanelState({ name: "panel-selector-fields11" })).to.equal("enabled"); expect(controller.getPanelState({ name: "dynamicTextPercent" })).to.equal("enabled"); expect(controller.getPanelState({ name: "dynamicTextSum" })).to.equal("enabled"); + + }); it("panel selector and controls should be hidden", () => { // hidden - const checkboxWrapper = wrapper.find("div[data-id='properties-hidePanelSelector']"); - const hiddenCheckbox = checkboxWrapper.find("input"); - expect(hiddenCheckbox.props().checked).to.equal(true); - - expect(controller.getControlState({ name: "fruit-color21" })).to.equal("hidden"); - expect(controller.getPanelState({ name: "panel-selector-fields21" })).to.equal("hidden"); + const { container } = wrapper; + const checkboxWrapper = container.querySelector("div[data-id='properties-hidePanelSelector']"); + const hiddenCheckbox = checkboxWrapper.querySelector("input"); + expect(hiddenCheckbox.checked).to.equal(true); // visible - hiddenCheckbox.getDOMNode().checked = false; - hiddenCheckbox.simulate("change"); + fireEvent.click(hiddenCheckbox); expect(controller.getControlState({ name: "fruit-color21" })).to.equal("visible"); expect(controller.getPanelState({ name: "panel-selector-fields21" })).to.equal("visible"); - }); - it("all panels for selected type should be enabled", () => { + }); + it("all panels for selected type should be enabled", async() => { expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("red3"); expect(controller.getPanelState({ name: "red3" })).to.equal("enabled"); expect(controller.getPanelState({ name: "blue3" })).to.equal("disabled"); @@ -127,29 +132,30 @@ describe("'panel selector insert' renders correctly", () => { expect(controller.getControlState({ name: "blueberry-size" })).to.equal("disabled"); // change selection - const input = wrapper.find("div[data-id='properties-fruit-color3']"); - expect(input).to.have.length(1); - const radios = input.find("input[type='radio']"); + const { container } = wrapper; + const input = container.querySelector("div[data-id='properties-fruit-color3']"); + expect(input).to.be.exist; + const radios = input.querySelectorAll("input[type='radio']"); expect(radios).to.have.length(6); - const radioBlue = radios.find("input[value='blue3']"); - radioBlue.simulate("change", { target: { checked: true, value: "blue3" } }); - - expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("blue3"); - expect(controller.getPanelState({ name: "red3" })).to.equal("disabled"); - expect(controller.getPanelState({ name: "blue3" })).to.equal("enabled"); - expect(controller.getPanelState({ name: "yellow3" })).to.equal("disabled"); - expect(controller.getPanelState({ name: "apple-text" })).to.equal("disabled"); - expect(controller.getPanelState({ name: "apple-types-ctl" })).to.equal("disabled"); - expect(controller.getControlState({ name: "apple-types" })).to.equal("disabled"); - expect(controller.getPanelState({ name: "blue-text" })).to.equal("enabled"); - expect(controller.getPanelState({ name: "blueberry-size-ctl" })).to.equal("enabled"); - expect(controller.getControlState({ name: "blueberry-size" })).to.equal("enabled"); - + const radioBlue = container.querySelector("input[value='blue3']"); + expect(radioBlue).to.be.exist; + fireEvent.click(radioBlue); + await waitFor(() => { + expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("blue3"); + expect(controller.getPanelState({ name: "red3" })).to.equal("disabled"); + expect(controller.getPanelState({ name: "blue3" })).to.equal("enabled"); + expect(controller.getPanelState({ name: "yellow3" })).to.equal("disabled"); + expect(controller.getPanelState({ name: "apple-text" })).to.equal("disabled"); + expect(controller.getPanelState({ name: "apple-types-ctl" })).to.equal("disabled"); + expect(controller.getControlState({ name: "apple-types" })).to.equal("disabled"); + expect(controller.getPanelState({ name: "blue-text" })).to.equal("enabled"); + expect(controller.getPanelState({ name: "blueberry-size-ctl" })).to.equal("enabled"); + expect(controller.getControlState({ name: "blueberry-size" })).to.equal("enabled"); + }); // change selection - const radioYellow = radios.find("input[value='yellow3']"); - radioYellow.simulate("change", { target: { checked: true, value: "yellow3" } }); - + const radioYellow = container.querySelector("input[value='yellow3']"); + fireEvent.click(radioYellow); expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("yellow3"); expect(controller.getPanelState({ name: "red3" })).to.equal("disabled"); expect(controller.getPanelState({ name: "blue3" })).to.equal("disabled"); @@ -160,23 +166,23 @@ describe("'panel selector insert' renders correctly", () => { expect(controller.getPanelState({ name: "blue-text" })).to.equal("disabled"); expect(controller.getPanelState({ name: "blueberry-size-ctl" })).to.equal("disabled"); expect(controller.getControlState({ name: "blueberry-size" })).to.equal("disabled"); - }); }); describe("text 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("selector panel should have custom classname defined", () => { - const panelSelectorWrapper = wrapper.find("div[data-id='properties-panel-selector2']"); - expect(panelSelectorWrapper.find(".panel-selector2-group-panelselector-class")).to.have.length(1); + const { container } = wrapper; + const panelSelectorWrapper = container.querySelector("div[data-id='properties-panel-selector2']"); + expect(panelSelectorWrapper.querySelectorAll(".panel-selector2-group-panelselector-class")).to.have.length(1); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js index bd28e6b29c..2be71c9919 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js @@ -14,26 +14,27 @@ * limitations under the License. */ -import propertyUtils from "./../../_utils_/property-utils"; +import { cleanup, waitFor } from "@testing-library/react"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import tabParamDef from "./../../test_resources/paramDefs/tab_paramDef.json"; - import { expect } from "chai"; describe("subtabs renders correctly", () => { var wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(tabParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should have displayed the 4 tabs created with 6 nested subtabs", () => { - const tabContainer = wrapper.find("div[data-id='properties-Primary'] div.properties-sub-tab-container"); + const { container } = wrapper; + const tabContainer = container.querySelector("div[data-id='properties-Primary'] div.properties-sub-tab-container"); // should render 1 control panel - expect(tabContainer.find("button.properties-subtab")).to.have.length(10); + expect(tabContainer.querySelectorAll("button.properties-subtab")).to.have.length(10); }); }); @@ -41,40 +42,46 @@ describe("subtabs visible and enabled conditions work correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef, { categoryView: "tabs" }); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(tabParamDef, { categoryView: "tabs" }); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); - it("subtabs and controls should be disabled", () => { - let subTab = wrapper.find("button[data-id='properties-fruit-subtab']"); + it("subtabs and controls should be disabled", async() => { + const { container } = wrapper; + let subTab = container.querySelector("button[data-id='properties-fruit-subtab']"); // check initial state of enabled - expect(subTab.prop("aria-disabled")).to.equal(false); + expect(subTab.getAttribute("aria-disabled")).to.equal("false"); controller.updatePropertyValue({ name: "disable" }, true); - wrapper.update(); - subTab = wrapper.find("button[data-id='properties-fruit-subtab']"); - expect(subTab.prop("aria-disabled")).to.equal(true); + await waitFor(() => { + subTab = container.querySelector("button[data-id='properties-fruit-subtab']"); + expect(subTab.getAttribute("aria-disabled")).to.equal("true"); + }); }); - it("subtabs and controls should be hidden", () => { - let subTab = wrapper.find("button[data-id='properties-table-subtab']"); + it("subtabs and controls should be hidden", async() => { + const { container } = wrapper; + let subTab = container.querySelectorAll("button[data-id='properties-table-subtab']"); expect(subTab).to.have.length(1); controller.updatePropertyValue({ name: "hide" }, true); - wrapper.update(); - subTab = wrapper.find("button[data-id='properties-table-subtab']"); - expect(subTab).to.have.length(0); + await waitFor(() => { + subTab = container.querySelectorAll("button[data-id='properties-table-subtab']"); + expect(subTab).to.have.length(0); + }); + }); - it("hidden and non hidden tabs display correctly", () => { - let primaryTabs = wrapper.find(".properties-primaryTabs"); - let tab1 = primaryTabs.find("button[title='Tab Test']"); - let tab2 = primaryTabs.find("button[title='Tab Test2']"); - let tab3 = primaryTabs.find("button[title='Tab Test3']"); - let tab4 = primaryTabs.find("button[title='Tab Test4']"); + it("hidden and non hidden tabs display correctly", async() => { + const { container } = wrapper; + let primaryTabs = container.querySelector(".properties-primaryTabs"); + let tab1 = primaryTabs.querySelectorAll("button[title='Tab Test']"); + let tab2 = primaryTabs.querySelectorAll("button[title='Tab Test2']"); + let tab3 = primaryTabs.querySelectorAll("button[title='Tab Test3']"); + let tab4 = primaryTabs.querySelectorAll("button[title='Tab Test4']"); expect(tab1).to.have.length(1); expect(tab2).to.have.length(1); expect(tab3).to.have.length(1); @@ -82,65 +89,69 @@ describe("subtabs visible and enabled conditions work correctly", () => { controller.updatePropertyValue({ name: "hideTab1" }, true); controller.updatePropertyValue({ name: "hideTab4" }, true); - wrapper.update(); - primaryTabs = wrapper.find(".properties-primaryTabs"); - tab1 = primaryTabs.find("button[title='Tab Test']"); - tab2 = primaryTabs.find("button[title='Tab Test2']"); - tab3 = primaryTabs.find("button[title='Tab Test3']"); - tab4 = primaryTabs.find("button[title='Tab Test4']"); + await waitFor(() => { + primaryTabs = container.querySelector(".properties-primaryTabs"); + tab1 = primaryTabs.querySelectorAll("button[title='Tab Test']"); + tab2 = primaryTabs.querySelectorAll("button[title='Tab Test2']"); + tab3 = primaryTabs.querySelectorAll("button[title='Tab Test3']"); + tab4 = primaryTabs.querySelectorAll("button[title='Tab Test4']"); + + expect(tab1).to.have.length(0); + expect(tab2).to.have.length(1); + expect(tab3).to.have.length(1); + expect(tab4).to.have.length(0); + }); - expect(tab1).to.have.length(0); - expect(tab2).to.have.length(1); - expect(tab3).to.have.length(1); - expect(tab4).to.have.length(0); }); }); describe("subtabs classNames applied correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(tabParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("subtab container should have custom classname defined", () => { - const mainTab = wrapper.find("div.maintab-panel-class"); - expect(mainTab.find("div.subtab-panel-class")).to.have.length(1); + const { container } = wrapper; + const mainTab = container.querySelector("div.maintab-panel-class"); + expect(mainTab.querySelectorAll("div.subtab-panel-class")).to.have.length(1); }); it("subtabs should have custom classname defined", () => { - const subTabs = wrapper.find("div.properties-sub-tab-container").at(0); - expect(subTabs.find(".range-fields-subtab-control-class")).to.have.length(1); - expect(subTabs.find(".table-subtab-control-class")).to.have.length(1); - expect(subTabs.find(".fruit-subtab-control-class")).to.have.length(1); + const { container } = wrapper; + const subTabs = container.querySelector("div.properties-sub-tab-container"); + expect(subTabs.querySelectorAll(".range-fields-subtab-control-class")).to.have.length(1); + expect(subTabs.querySelectorAll(".table-subtab-control-class")).to.have.length(1); + expect(subTabs.querySelectorAll(".fruit-subtab-control-class")).to.have.length(1); }); }); describe("subtabs renders correctly in a Tearsheet container", () => { - let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef, { rightFlyout: false, containerType: "Tearsheet" }); - wrapper = renderedObject.wrapper; + propertyUtilsRTL.flyoutEditorForm(tabParamDef, { rightFlyout: false, containerType: "Tearsheet" }); }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should have rendered subtabs with leftnav classnames", () => { - const primaryTabs = wrapper.find("div.properties-primary-tab-panel.tearsheet-container"); + const primaryTabs = document.querySelectorAll("div.properties-primary-tab-panel.tearsheet-container"); expect(primaryTabs).to.have.length(5); - const primaryTab = primaryTabs.at(2); // Tab Test2 - expect(primaryTab.find("div.properties-sub-tab-container.vertical.properties-leftnav-container")).to.have.length(1); + const primaryTab = primaryTabs[2]; // Tab Test2 + expect(primaryTab.querySelectorAll("div.properties-sub-tab-container.vertical.properties-leftnav-container")).to.have.length(1); - const leftNav = primaryTab.find("div.properties-subtabs.properties-leftnav-subtabs"); - expect(leftNav).to.have.length(1); - expect(leftNav.find("button.properties-leftnav-subtab-item")).to.have.length(3); + const leftNav = primaryTab.querySelector("div.properties-subtabs.properties-leftnav-subtabs"); + expect(leftNav).to.not.be.null; + expect(leftNav.querySelectorAll("button.properties-leftnav-subtab-item")).to.have.length(3); }); }); + + diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js index 2e0d1bfcab..2c96464d6d 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js @@ -14,76 +14,76 @@ * 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 summarypanelParamDef from "./../../test_resources/paramDefs/summarypanel_paramDef.json"; import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json"; import { expect } from "chai"; +import { cleanup, waitFor, fireEvent } from "@testing-library/react"; describe("summary renders correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(summarypanelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(summarypanelParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should have displayed the initial values in the summary", () => { - const summaries = wrapper.find("div.properties-summary-values"); + const { container } = wrapper; + const summaries = container.querySelectorAll("div.properties-summary-values"); expect(summaries).to.have.length(3); // all summary tables including table in wideflyout - const sortSummary = wrapper.find("div[data-id='properties-structuretableSortOrder-summary-panel']"); - const sortSummaryRows = sortSummary.find("tr.properties-summary-row"); + const sortSummary = container.querySelector("div[data-id='properties-structuretableSortOrder-summary-panel']"); + const sortSummaryRows = sortSummary.querySelectorAll("tr.properties-summary-row"); expect(sortSummaryRows).to.have.length(1); - const sortRow1 = sortSummaryRows.at(0).find("td.properties-summary-row-data") - .at(0); - - expect(sortRow1.find("span").at(0) - .text() - .trim()).to.equal("Cholesterol"); + const sortRow1 = sortSummaryRows[0].querySelector("td.properties-summary-row-data"); + const sortRow1Span = sortRow1.querySelector("span"); + expect(sortRow1Span.textContent.trim()).to.equal("Cholesterol"); // validate tooltip content is correct - expect(sortRow1.find("div.properties-tooltips div") - .at(0) - .text() - .trim()).to.equal("Cholesterol"); + const tooltip = sortRow1.querySelector("div.properties-truncated-tooltip"); + expect(tooltip.textContent.trim()).to.equal("Cholesterol"); + }); it("should open fieldpicker when type unknown", () => { - const sortSummary = wrapper.find("div[data-id='properties-structuretableSortOrder-summary-panel']"); - const summaryButton = sortSummary.find("button.properties-summary-link-button"); - summaryButton.simulate("click"); - const fieldPickerWrapper = tableUtils.openFieldPicker(wrapper, "properties-structuretableSortOrder"); - tableUtils.fieldPicker(fieldPickerWrapper, ["Age"], ["Age", "Sex", "BP", "Cholesterol", "Na", "K", "Drug"]); + const { container } = wrapper; + const sortSummary = container.querySelector("div[data-id='properties-structuretableSortOrder-summary-panel']"); + const summaryButton = sortSummary.querySelector("button.properties-summary-link-button"); + fireEvent.click(summaryButton); + const fieldPickerWrapper = tableUtilsRTL.openFieldPicker(container, "properties-structuretableSortOrder"); + tableUtilsRTL.fieldPicker(fieldPickerWrapper, ["Age"], ["Age", "Sex", "BP", "Cholesterol", "Na", "K", "Drug"]); }); }); describe("summary panel renders correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(summarypanelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(summarypanelParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should have displayed placeholder in summary panel for more then 10 fields", () => { - const summaries = wrapper.find("div[data-id='properties-Derive-Node'] .properties-summary-values"); - const summaryRows = summaries.at(1).find("tr.properties-summary-row"); // Table Input + const { container } = wrapper; + const summaries = container.querySelectorAll("div[data-id='properties-Derive-Node'] .properties-summary-values"); + const summaryRows = summaries[1].querySelectorAll("tr.properties-summary-row"); // Table Input expect(summaryRows).to.have.length(0); - const summaryPlaceholder = summaries.at(1).find("div.properties-summary-table span"); - expect(summaryPlaceholder).to.have.length(1); - expect(summaryPlaceholder.text()).to.equal("More than ten fields..."); + const summaryPlaceholder = summaries[1].querySelector("div.properties-summary-table span"); + expect(summaryPlaceholder).to.exist; + expect(summaryPlaceholder.textContent).to.equal("More than ten fields..."); }); it("should have a summary panel in a summary panel", () => { - const wideflyout = propertyUtils.openSummaryPanel(wrapper, "structuretableSortOrder-summary-panel"); - const summaryButton = wideflyout.find("button.properties-summary-link-button"); - expect(summaryButton).to.have.length(1); - const summaryData = wideflyout.find("tr.properties-summary-row"); + const wideflyout = propertyUtilsRTL.openSummaryPanel(wrapper, "structuretableSortOrder-summary-panel"); + const summaryButton = wideflyout.querySelectorAll("button.properties-summary-link-button"); + expect(summaryButton).to.have.lengthOf(1); + const summaryData = wideflyout.querySelectorAll("tr.properties-summary-row"); expect(summaryData).to.have.length(1); }); }); @@ -91,150 +91,158 @@ describe("summary panel renders correctly", () => { describe("summary panel renders error/warning status correctly", () => { let wrapper; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(summarypanelParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(summarypanelParamDef); wrapper = renderedObject.wrapper; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should show warning message in summary when removing rows", () => { - let wideflyout = propertyUtils.openSummaryPanel(wrapper, "Derive-Node"); - tableUtils.clickTableRows(wideflyout, [0]); + let wideflyout = propertyUtilsRTL.openSummaryPanel(wrapper, "Derive-Node"); + tableUtilsRTL.clickTableRows(wideflyout, [0]); // ensure table toolbar has Delete button and click it - wideflyout = wrapper.find("div.properties-wf-content.show"); - let tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']"); - let deleteButtons = tableWrapper.find("button.delete-button"); + const { container } = wrapper; + wideflyout = container.querySelector("div.properties-wf-content.show"); + let tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']"); + let deleteButtons = tableWrapper.querySelectorAll("button.delete-button"); expect(deleteButtons).to.have.length(2); - deleteButtons.at(0).simulate("click"); + fireEvent.click(deleteButtons[0]); // remove second row - tableUtils.clickTableRows(wideflyout, [0]); - wideflyout = wrapper.find("div.properties-wf-content.show"); - tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']"); - deleteButtons = tableWrapper.find("button.delete-button"); + tableUtilsRTL.clickTableRows(wideflyout, [0]); + wideflyout = container.querySelector("div.properties-wf-content.show"); + tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']"); + deleteButtons = tableWrapper.querySelectorAll("button.delete-button"); expect(deleteButtons).to.have.length(1); - deleteButtons.at(0).simulate("click"); - + fireEvent.click(deleteButtons[0]); // close fly-out - wideflyout.find("button.properties-apply-button").simulate("click"); + const propertyButton = wideflyout.querySelector("button.properties-apply-button"); + fireEvent.click(propertyButton); // check that Alerts tab is added - const 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"); - const alertList = alertCategory.find("div.properties-link-text-container.warning"); + const 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); + const alertList = alertCategory.querySelectorAll("div.properties-link-text-container.warning"); expect(alertList).to.have.length(1); - const warningMsg = alertList.at(0).find("a.properties-link-text"); - expect(warningMsg.text()).to.equal("Expression cell table cannot be empty"); + const warningMsg = alertList[0].querySelector("a.properties-link-text"); + expect(warningMsg.textContent).to.equal("Expression cell table cannot be empty"); // click on the link should open up structure list table category - warningMsg.simulate("click"); - expect(wrapper.find("li.properties-category-content.show")).to.have.length(1); + fireEvent.click(warningMsg); + expect(container.querySelectorAll("li.properties-category-content.show")).to.have.length(1); // check that warning icon is shown in summary - let tableCategory = wrapper.find("div[data-id='properties-Derive-Node']"); - let summary = tableCategory.find("div.properties-summary-link-container"); - expect(summary.find("svg.warning")).to.have.length(1); + let tableCategory = container.querySelector("div[data-id='properties-Derive-Node']"); + let summary = tableCategory.querySelector("div.properties-summary-link-container"); + expect(summary.querySelectorAll("svg.warning")).to.have.length(1); // add row back in tables - tableCategory.find("button.properties-summary-link-button").simulate("click"); - wideflyout = wrapper.find("div.properties-wf-content.show"); - wideflyout.find("button.properties-empty-table-button").simulate("click"); + const summaryLinkButton = tableCategory.querySelector("button.properties-summary-link-button"); + fireEvent.click(summaryLinkButton); + wideflyout = container.querySelector("div.properties-wf-content.show"); + const emptyTableButton = wideflyout.querySelector("button.properties-empty-table-button"); + fireEvent.click(emptyTableButton); // close fly-out - wideflyout.find("button.properties-apply-button").simulate("click"); - + const applyButton = wideflyout.querySelector("button.properties-apply-button"); + fireEvent.click(applyButton); // ensure warning message and alerts tab are gone - tableCategory = wrapper.find("div[data-id='properties-Derive-Node']"); - summary = tableCategory.find("div.properties-summary-link-container"); - expect(summary.find("svg.warning")).to.have.length(0); + tableCategory = container.querySelector("div[data-id='properties-Derive-Node']"); + summary = tableCategory.querySelector("div.properties-summary-link-container"); + expect(summary.querySelectorAll("svg.warning")).to.have.length(0); }); - it("should show error icon in summary when both error and warning messages exist", () => { - let wideflyout = propertyUtils.openSummaryPanel(wrapper, "Derive-Node"); - tableUtils.clickTableRows(wideflyout, [0]); + it("should show error icon in summary when both error and warning messages exist", async() => { + let wideflyout = propertyUtilsRTL.openSummaryPanel(wrapper, "Derive-Node"); + tableUtilsRTL.clickTableRows(wideflyout, [0]); - wideflyout = wrapper.find("div.properties-wf-content.show"); + const { container } = wrapper; + wideflyout = container.querySelector("div.properties-wf-content.show"); // ensure table toolbar has Delete button and click it - let tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']"); - let deleteButtons = tableWrapper.find("button.delete-button"); - deleteButtons.at(0).simulate("click"); + let tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']"); + let deleteButtons = tableWrapper.querySelectorAll("button.delete-button"); + fireEvent.click(deleteButtons[0]); // remove second row - tableUtils.clickTableRows(wideflyout, [0]); - wideflyout = wrapper.find("div.properties-wf-content.show"); - tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']"); - deleteButtons = tableWrapper.find("button.delete-button"); - deleteButtons.at(0).simulate("click"); - + tableUtilsRTL.clickTableRows(wideflyout, [0]); + wideflyout = container.querySelector("div.properties-wf-content.show"); + tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']"); + deleteButtons = tableWrapper.querySelectorAll("button.delete-button"); + fireEvent.click(deleteButtons[0]); // check that all rows were removed - wideflyout = wrapper.find("div.properties-wf-content.show"); - expect(tableUtils.getTableRows(wideflyout.find("div[data-id='properties-expressionCellTable']"))).to.have.length(0); + wideflyout = container.querySelector("div.properties-wf-content.show"); + expect(tableUtilsRTL.getTableRows(wideflyout.querySelector("div[data-id='properties-expressionCellTable']"))).to.have.length(0); + + wideflyout = container.querySelector("div.properties-wf-content.show"); + expect(tableUtilsRTL.getTableRows(wideflyout.querySelector("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(11); - wideflyout = wrapper.find("div.properties-wf-content.show"); - expect(tableUtils.getTableRows(wideflyout.find("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(11); // remove all rows from Table Input table - const tableInputBodyData = wideflyout.find("div[data-id='properties-ft-structurelisteditorTableInput']"); + const tableInputBodyData = wideflyout.querySelector("div[data-id='properties-ft-structurelisteditorTableInput']"); summarypanelParamDef.current_parameters.structurelisteditorTableInput.forEach((value) => { - tableUtils.selectCheckboxes(tableInputBodyData, [0]); - const tableInputRemoveButton = wrapper.find("div[data-id='properties-ft-structurelisteditorTableInput']") - .find("div.properties-table-toolbar") - .find("button.properties-action-delete"); + tableUtilsRTL.selectCheckboxes(tableInputBodyData, [0]); + const tableToolbar = wideflyout.querySelector("div.properties-table-toolbar"); + const tableInputRemoveButton = tableToolbar.querySelectorAll("button.properties-action-delete"); expect(tableInputRemoveButton).to.have.length(1); - - tableInputRemoveButton.simulate("click"); + fireEvent.click(tableInputRemoveButton[0]); }); // check that all rows were removed - wideflyout = wrapper.find("div.properties-wf-content.show"); - expect(tableUtils.getTableRows(wideflyout.find("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(0); + wideflyout = container.querySelector("div.properties-wf-content.show"); + expect(tableUtilsRTL.getTableRows(wideflyout.querySelector("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(0); // close fly-out - wideflyout.find("button.properties-apply-button").simulate("click"); + const PropApplyButton = wideflyout.querySelector("button.properties-apply-button"); + fireEvent.click(PropApplyButton); // check that Alerts tab is added and that is shows error message before warning message - let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - expect(alertCategory.find("button.cds--accordion__heading").text()).to.equal("Alerts (2)"); - let alertList = alertCategory.find("div.properties-link-text-container"); + let alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + expect(alertCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Alerts (2)"); + let alertList = alertCategory.querySelectorAll("div.properties-link-text-container"); expect(alertList).to.have.length(2); - const errorWrapper = alertCategory.find("div.properties-link-text-container.error"); - expect(errorWrapper).to.have.length(1); - expect(errorWrapper.find("a.properties-link-text").text()).to.equal("Structure list editor table cannot be empty"); - let warningWrapper = alertCategory.find("div.properties-link-text-container.warning"); - expect(warningWrapper).to.have.length(1); - expect(warningWrapper.find("a.properties-link-text").text()).to.equal("Expression cell table cannot be empty"); + const errorWrapper = alertCategory.querySelector("div.properties-link-text-container.error"); + expect(errorWrapper).to.not.be.null; + expect(errorWrapper.querySelector("a.properties-link-text").textContent).to.equal("Structure list editor table cannot be empty"); + let warningWrapper = alertCategory.querySelector("div.properties-link-text-container.warning"); + expect(warningWrapper).to.not.be.null; + expect(warningWrapper.querySelector("a.properties-link-text").textContent).to.equal("Expression cell table cannot be empty"); // check that summary icon is an error icon - let tableCategory = wrapper.find("div.properties-category-container").at(1); // Structure list table category - expect(tableCategory.find("button.cds--accordion__heading").text()).to.equal("Structure List Table (2)"); - let summary = tableCategory.find("div.properties-summary-link-container"); - expect(summary.find("svg.error")).to.have.length(1); + let tableCategory = container.querySelectorAll("div.properties-category-container")[1]; // Structure list table category + expect(tableCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Structure List Table (2)"); + let summary = tableCategory.querySelector("div.properties-summary-link-container"); + expect(summary.querySelectorAll("svg.error")).to.have.length(1); // add row back into Table Input table - tableCategory.find("button.properties-summary-link-button").simulate("click"); - wideflyout = wrapper.find("div.properties-wf-content.show"); + const summaryLinkButton = tableCategory.querySelector("button.properties-summary-link-button"); + fireEvent.click(summaryLinkButton); + wideflyout = container.querySelector("div.properties-wf-content.show"); + + const emptyTabButton = wideflyout.querySelectorAll("button.properties-empty-table-button")[1]; + fireEvent.click(emptyTabButton); - wideflyout.find("button.properties-empty-table-button").at(1) - .simulate("click"); // close fly-out - wideflyout.find("button.properties-apply-button").simulate("click"); + const propApplyButton = wideflyout.querySelector("button.properties-apply-button"); + fireEvent.click(propApplyButton); // check that Alerts tab is added and that is shows error message before warning message - alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category - expect(alertCategory.find("button.cds--accordion__heading").text()).to.equal("Alerts (1)"); - alertList = alertCategory.find("div.properties-link-text-container"); + alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category + expect(alertCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Alerts (1)"); + alertList = alertCategory.querySelectorAll("div.properties-link-text-container"); expect(alertList).to.have.length(1); - warningWrapper = alertCategory.find("div.properties-link-text-container.warning"); - expect(warningWrapper).to.have.length(1); - expect(warningWrapper.find("a.properties-link-text").text()).to.equal("Expression cell table cannot be empty"); + warningWrapper = alertCategory.querySelector("div.properties-link-text-container.warning"); + expect(warningWrapper).to.not.be.null; + expect(warningWrapper.querySelector("a.properties-link-text").textContent).to.equal("Expression cell table cannot be empty"); + // check that summary icon is an error icon - tableCategory = wrapper.find("div.properties-category-container").at(1); // Structure list table category - expect(tableCategory.find("button.cds--accordion__heading").text()).to.equal("Structure List Table (1)"); - summary = tableCategory.find("div.properties-summary-link-container"); - expect(summary.find("svg.warning")).to.have.length(1); + tableCategory = container.querySelectorAll("div.properties-category-container")[1]; // Structure list table category + expect(tableCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Structure List Table (1)"); + summary = tableCategory.querySelector("div.properties-summary-link-container"); + expect(summary.querySelectorAll("svg.warning")).to.have.length(1); + }); }); @@ -242,63 +250,71 @@ describe("summary 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("summary panel link should be disabled and table should be gone", () => { - let firstSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel1']"); - expect(firstSummary.props().disabled).to.be.false; - expect(firstSummary.find("div.properties-summary-values")).to.have.length(2); + it("summary panel link should be disabled and table should be gone", async() => { + const { container } = wrapper; + let firstSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel1']"); + expect(firstSummary.hasAttribute("disabled")).to.equal(false); + const summaryValue = firstSummary.querySelectorAll("div.properties-summary-values"); + expect(summaryValue.length).to.equal(2); expect(controller.getPanelState({ name: "structuretable-summary-panel1" })).to.equal("enabled"); expect(controller.getControlState({ name: "structuretable_summary1" })).to.equal("enabled"); expect(controller.getControlState({ name: "structuretable_summary2" })).to.equal("enabled"); controller.updatePropertyValue({ name: "enableSummary" }, false); - wrapper.update(); - firstSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel1']"); - expect(firstSummary.props().disabled).to.be.true; - expect(controller.getPanelState({ name: "structuretable-summary-panel1" })).to.equal("disabled"); - expect(controller.getControlState({ name: "structuretable_summary1" })).to.equal("disabled"); - expect(controller.getControlState({ name: "structuretable_summary2" })).to.equal("disabled"); - expect(firstSummary.find("div.properties-summary-values")).to.have.length(0); + await waitFor(() => { + firstSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel1']"); + expect(firstSummary.hasAttribute("disabled")).to.be.true; + expect(controller.getPanelState({ name: "structuretable-summary-panel1" })).to.equal("disabled"); + expect(controller.getControlState({ name: "structuretable_summary1" })).to.equal("disabled"); + expect(controller.getControlState({ name: "structuretable_summary2" })).to.equal("disabled"); + const propSummaryValue = firstSummary.querySelectorAll("div.properties-summary-values"); + expect(propSummaryValue.length).to.equal(0); + }); }); - it("summary panel link should be hidden", () => { - let secondSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel2']"); - const link = secondSummary.find("button.properties-summary-link-button"); + it("summary panel link should be hidden", async() => { + const { container } = wrapper; + let secondSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel2']"); + const link = secondSummary.querySelectorAll("button.properties-summary-link-button"); expect(link).to.have.length(1); expect(controller.getPanelState({ name: "structuretable-summary-panel2" })).to.equal("visible"); - expect(secondSummary.find("div.properties-summary-values")).to.have.length(1); + expect(secondSummary.querySelectorAll("div.properties-summary-values")).to.have.length(1); controller.updatePropertyValue({ name: "hideSummary" }, true); - wrapper.update(); - expect(controller.getPanelState({ name: "structuretable-summary-panel2" })).to.equal("hidden"); - expect(controller.getControlState({ name: "structuretable_summary3" })).to.equal("hidden"); - secondSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel2']"); - expect(secondSummary.find("div.properties-summary-values")).to.have.length(0); + await waitFor(() => { + expect(controller.getPanelState({ name: "structuretable-summary-panel2" })).to.equal("hidden"); + expect(controller.getControlState({ name: "structuretable_summary3" })).to.equal("hidden"); + secondSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel2']"); + expect(secondSummary.querySelectorAll("div.properties-summary-values")).to.have.length(0); + }); }); }); describe("summary 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("summary panel should have custom classname defined", () => { - const summaryContainer = wrapper.find("div[data-id='properties-summary_panel_category']"); - expect(summaryContainer.find(".structuretable-summary-panel1-category-group-summarypanel-class")).to.have.length(1); + const { container } = wrapper; + const summaryContainer = container.querySelector("div[data-id='properties-summary_panel_category']"); + expect(summaryContainer.querySelectorAll(".structuretable-summary-panel1-category-group-summarypanel-class")).to.have.lengthOf(1); }); }); + diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js index 76a40f15ea..ee69169548 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js @@ -16,66 +16,77 @@ // Test suite for generic tearsheet testing import React from "react"; -import propertyUtils from "./../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import { expect } from "chai"; -import { mountWithIntl } from "../../_utils_/intl-utils"; +import { renderWithIntl } from "../../_utils_/intl-utils"; import TearSheet from "./../../../src/common-properties/panels/tearsheet"; import codeParamDef from "./../../test_resources/paramDefs/code_paramDef.json"; import Sinon from "sinon"; +import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react"; describe("tearsheet tests", () => { - let wrapper; let controller; + let renderedObject; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(codeParamDef); - wrapper = renderedObject.wrapper; + renderedObject = propertyUtilsRTL.flyoutEditorForm(codeParamDef); controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("should be have only one tearsheet rendered", () => { - expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1); + expect(document.querySelectorAll("div.properties-tearsheet-panel")).to.have.length(1); }); - it("should be visible from the controller method", () => { + it("should be visible from the controller method", async() => { controller.setActiveTearsheet("tearsheet1"); - wrapper.update(); - expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(1); + await waitFor(() => { + const tearsheetpanel = document.querySelector("div.properties-tearsheet-panel.is-visible"); + expect(tearsheetpanel).to.not.be.null; + }); }); - it("should have title and description set", () => { + it("should have title and description set", async() => { controller.setActiveTearsheet("tearsheet1"); - wrapper.update(); - expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h2").text()).to.equal("Python"); - expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header p").text()).to.equal("Your change is automatically saved."); + await waitFor(() => { + expect(document.querySelector("div.properties-tearsheet-panel .properties-tearsheet-header h2").textContent).to.equal("Python"); + expect(document.querySelector("div.properties-tearsheet-panel .properties-tearsheet-header p").textContent).to.equal("Your change is automatically saved."); + }); }); - it("should be hidden but not removed from DOM on the tearsheet close button", () => { + it("should be hidden but not removed from DOM on the tearsheet close button", async() => { controller.setActiveTearsheet("tearsheet1"); - wrapper.update(); - wrapper.find("div.properties-tearsheet-panel button.cds--modal-close").simulate("click"); - wrapper.update(); - expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(0); - expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1); - expect(controller.getActiveTearsheet()).to.equal(null); + await waitFor(() => { + const buttonModalClose = document.querySelector("div.properties-tearsheet-panel"); + expect(buttonModalClose).to.not.be.null; + expect(buttonModalClose.classList.contains("is-visible")).to.be.false; + + const closeButton = document.querySelector("button.cds--modal-close"); + expect(closeButton).to.not.be.null; + fireEvent.click(closeButton); + expect(document.querySelectorAll("div.properties-tearsheet-panel.is-visible")).to.have.length(0); + expect(document.querySelectorAll("div.properties-tearsheet-panel")).to.have.length(1); + expect(controller.getActiveTearsheet()).to.equal(null); + }); + }); - it("should show tearsheet content which is previously hidden", () => { - expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1); - expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(0); - expect(wrapper.find("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.have.length(0); - wrapper.update(); + it("should show tearsheet content which is previously hidden", async() => { + expect(document.querySelectorAll("div.properties-tearsheet-panel")).to.have.length(1); + expect(document.querySelectorAll("div.properties-tearsheet-panel.is-visible")).to.have.length(0); + expect(document.querySelectorAll("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.have.length(0); controller.updatePropertyValue({ name: "hide" }, false); - wrapper.update(); - wrapper.find("div[data-id='properties-ctrl-code_rows'] button.maximize").simulate("click"); - wrapper.update(); - expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(1); - expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h2").text()).to.equal("Python 2"); - expect(wrapper.find("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.have.length(1); + await waitFor(() => { + const maximizeButton = document.querySelector("div[data-id='properties-ctrl-code_rows']"); + const btnClick = maximizeButton.querySelector("button.maximize"); + fireEvent.click(btnClick); + expect(document.querySelector("div.properties-tearsheet-panel.is-visible")).to.not.be.null; + expect(document.querySelector("div.properties-tearsheet-panel .properties-tearsheet-header h2").textContent).to.equal("Python 2"); + expect(document.querySelector("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.not.be.null; + }); }); }); describe("Tearsheet renders correctly", () => { it("should not display buttons in tearsheet if showPropertiesButtons is false", () => { - const wrapper = mountWithIntl( { showPropertiesButtons={false} applyOnBlur />); - const tearsheet = wrapper.find("div.properties-tearsheet-panel"); - expect(tearsheet).to.have.length(1); - expect(tearsheet.find("div.properties-tearsheet-header")).to.have.length(1); - expect(tearsheet.find("div.properties-tearsheet-header > h2").text()).to.equal("test title"); - expect(tearsheet.find("div.properties-tearsheet-body")).to.have.length(1); - expect(tearsheet.find("div.properties-tearsheet-body").text()).to.equal("test content"); - expect(tearsheet.find("div.properties-tearsheet-body.with-buttons")).to.have.length(0); - expect(tearsheet.find("div.properties-modal-buttons")).to.have.length(0); + const { container } = wrapper; + const tearsheet = container.getElementsByClassName("properties-tearsheet-panel"); + expect(tearsheet).to.not.be.null; + const header = screen.getByText("test title", { selector: "h2" }); + expect(header).to.exist; + expect(header.tagName).to.equal("H2"); - // Verify close button is visible - expect(tearsheet.find("div.properties-tearsheet-header.hide-close-button")).to.have.length(0); + const body = screen.getByText("test content"); + expect(body).to.exist; + expect(container.querySelectorAll("div.properties-tearsheet-body.with-buttons")).to.have.length(0); + expect(container.querySelectorAll("div.properties-modal-buttons")).to.have.length(0); }); it("should display buttons in tearsheet if showPropertiesButtons is true and applyOnBlur is false", () => { - const wrapper = mountWithIntl( { cancelHandler={Sinon.spy()} showPropertiesButtons />); - const tearsheet = wrapper.find("div.properties-tearsheet-panel"); - expect(tearsheet).to.have.length(1); - expect(tearsheet.find("div.properties-tearsheet-body.with-buttons")).to.have.length(1); - expect(tearsheet.find("div.properties-modal-buttons")).to.have.length(1); + const { container } = wrapper; + const tearsheet = container.querySelectorAll("properties-tearsheet-panel"); + expect(tearsheet).to.not.be.null; + expect(container.querySelectorAll("div.properties-tearsheet-body.with-buttons")).to.not.be.null; + expect(container.querySelectorAll("div.properties-modal-buttons")).to.not.be.null; + // Verify close button is not visible - expect(tearsheet.find("div.properties-tearsheet-header.hide-close-button")).to.have.length(1); + expect(container.querySelectorAll("div.properties-tearsheet-header.hide-close-button")).to.not.be.null; }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js index aeeeeaebf2..7c8599328e 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js @@ -15,61 +15,83 @@ */ import { expect } from "chai"; -import propertyUtils from "./../../_utils_/property-utils"; +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 { cleanup, fireEvent, waitFor } from "@testing-library/react"; describe("textPanel render correctly", () => { - const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef); - const wrapper = renderedObject.wrapper; + let renderedObject; + let wrapper; + + beforeEach(() => { + renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef); + wrapper = renderedObject.wrapper; + }); + + afterEach(() => { + cleanup(); + }); it("should have displayed correct number of textPanel elements", () => { - const panel = wrapper.find("div[data-id='properties-text-panels']"); - const staticText = panel.find("div.properties-text-panel"); + const { container } = wrapper; + const panel = container.querySelector("div[data-id='properties-text-panels']"); + const staticText = panel.querySelectorAll("div.properties-text-panel"); expect(staticText).to.have.length(5); - const labels = panel.find("div.panel-label"); + const labels = panel.querySelectorAll("div.panel-label"); expect(labels).to.have.length(5); // 3 on_panel descriptions - const descriptions = panel.find("div.panel-description"); + const descriptions = panel.querySelectorAll("div.panel-description"); expect(descriptions).to.have.length(3); // 1 tooltip description - const tooltipDescription = panel.find("div.properties-text-panel").find("div.properties-label-container"); + const tooltipDescription = panel.querySelectorAll("div.properties-text-panel div.properties-label-container"); expect(tooltipDescription).to.have.length(1); }); it("should have displayed correct text in textPanel elements", () => { - let panel = wrapper.find("div[data-id='properties-text-panels']"); - const labels = panel.find("div.panel-label"); - expect(labels.at(0).text()).to.equal("Oranges"); - let descriptions = panel.find("div.panel-description"); - expect(descriptions.at(0).text()).to.equal("An orange tree can grow to reach 30 feet and live for over a hundred years."); - expect(descriptions.at(1).text()).to.equal("Percent: 9.090909 with 6 decimals. Percent: 9.09 with 2 decimals"); - expect(descriptions.at(2).text()).to.equal("Sum: 22 with (number, number). Sum: 24 with (number, 2, number)"); - const input = panel.find("[type='number']"); - input.simulate("change", { target: { value: 0.52, validity: { badInput: false } } }); - panel = wrapper.find("div[data-id='properties-text-panels']"); - descriptions = panel.find("div.panel-description"); - expect(descriptions.at(1).text()).to.equal("Percent: 192.307692 with 6 decimals. Percent: 192.31 with 2 decimals"); - expect(descriptions.at(2).text()).to.equal("Sum: 1.04 with (number, number). Sum: 3.04 with (number, 2, number)"); + const { container } = wrapper; + let panel = container.querySelector("div[data-id='properties-text-panels']"); + const labels = panel.querySelectorAll("div.panel-label"); + expect(labels[0].textContent).to.equal("Oranges"); + let descriptions = panel.querySelectorAll("div.panel-description"); + expect(descriptions[0].textContent).to.equal("An orange tree can grow to reach 30 feet and live for over a hundred years."); + expect(descriptions[1].textContent).to.equal("Percent: 9.090909 with 6 decimals. Percent: 9.09 with 2 decimals"); + expect(descriptions[2].textContent).to.equal("Sum: 22 with (number, number). Sum: 24 with (number, 2, number)"); + const input = panel.querySelector("[type='number']"); + expect(input.tagName.toLowerCase()).to.equal("input"); + fireEvent.change(input, { target: { value: 0.52, } }); // validity has only getter function + panel = container.querySelector("div[data-id='properties-text-panels']"); + descriptions = panel.querySelectorAll("div.panel-description"); + expect(descriptions[1].textContent).to.equal("Percent: 192.307692 with 6 decimals. Percent: 192.31 with 2 decimals"); + expect(descriptions[2].textContent).to.equal("Sum: 1.04 with (number, number). Sum: 3.04 with (number, 2, number)"); }); it("should not show a description when one isn't provided", () => { - const panel = wrapper.find("div[data-id='properties-text-panels']"); - const textPanel = panel.find("div.properties-text-panel").at(4); // panel without description - expect(textPanel.find("div.panel-label").text()).to.equal("This panel shouldn't have a description"); - expect(textPanel.find("div.panel-description")).to.have.length(0); + const { container } = wrapper; + const panel = container.querySelector("div[data-id='properties-text-panels']"); + const textPanel = panel.querySelectorAll("div.properties-text-panel")[4]; // panel without description + expect(textPanel.querySelector("div.panel-label").textContent).to.equal("This panel shouldn't have a description"); + const panelDescription = textPanel.querySelectorAll("div.panel-description"); + expect(panelDescription).to.have.length(0); }); - it("should have displayed textPanel description in tooltip", () => { - const panel = wrapper.find("div[data-id='properties-text-panels']"); - const textPanel = panel.find("div.properties-text-panel").at(1); // panel with description in tooltip - expect(textPanel.find("div.panel-label").text()).to.equal("Avocados"); - expect(textPanel.find("div.properties-label-container")).to.have.length(1); + it("should have displayed textPanel description in tooltip", async() => { + const { container } = wrapper; + const textPanel = container.querySelectorAll(".properties-text-panel")[1]; // panel with description in tooltip + const textLabel = textPanel.querySelector(".panel-label"); + expect(textLabel.textContent).to.equal("Avocados"); + const labelContainer = textPanel.querySelectorAll(".properties-label-container"); + expect(labelContainer).to.have.length(1); // Show description in tooltip - const tooltipTrigger = textPanel.find(".tooltip-trigger"); - const tooltipId = tooltipTrigger.props()["aria-labelledby"]; - tooltipTrigger.simulate("click"); - const textPanelTooltip = wrapper.find(`div[data-id='${tooltipId}']`); - expect(textPanelTooltip.props()).to.have.property("aria-hidden", false); - expect(textPanelTooltip.text()).to.equal("An avocado tree can range from 15 to 30 feet tall."); - + const tooltipTrigger = textPanel.querySelector(".tooltip-trigger"); + expect(tooltipTrigger).to.not.be.null; + const tooltipId = tooltipTrigger.getAttribute("aria-labelledby"); + expect(tooltipId).to.not.be.null; + fireEvent.click(tooltipTrigger); + await waitFor(() => { + const textPanelTooltip = document.querySelector(`div[data-id='${tooltipId}']`); + expect(textPanelTooltip).to.not.be.null; + const ariaHidden = textPanelTooltip.getAttribute("aria-hidden"); + expect(ariaHidden).to.equal("false"); + expect(textPanelTooltip.textContent).to.equal("An avocado tree can range from 15 to 30 feet tall."); + }); }); }); @@ -78,15 +100,16 @@ describe("text panel visible and enabled conditions work correctly", () => { let panels; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef); wrapper = renderedObject.wrapper; - const textPanelcategory = wrapper.find("div.properties-category-container").at(2); // TEXT PANEL category - panels = textPanelcategory.find("div.properties-text-panel"); + const { container } = wrapper; + const textPanelcategory = container.querySelectorAll("div.properties-category-container")[2]; // TEXT PANEL category + panels = textPanelcategory.querySelectorAll("div.properties-text-panel"); controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("text panel should be disabled", () => { @@ -108,20 +131,22 @@ describe("text panel classNames applied correctly", () => { let wrapper; let panels; 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", () => { - panels = wrapper.find("div.properties-text-panel"); - expect(panels.find(".orange-panel-group-textpanel-class")).to.have.length(1); + const { container } = wrapper; + panels = container.querySelectorAll("div.properties-text-panel"); + expect(panels[0].className.includes("orange-panel-group-textpanel-class")).to.equal(true); // textPanel within a panelSelector - expect(panels.find(".panel-selector-fields1-red1-group-textpanel-class")).to.have.length(1); + expect(panels[4].className.includes("panel-selector-fields1-red1-group-textpanel-class")).to.equal(true); // deeply nested textpanel group - expect(panels.find(".level3-group-textpanel-class")).to.have.length(1); + expect(panels[9].className.includes("level3-group-textpanel-class")).to.equal(true); }); }); +