Skip to content

Commit

Permalink
#2235 Rtl panel migration-Part1 (#2217)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jerinjk14
Jerinjk14 authored Nov 6, 2024
1 parent 71d1433 commit 5d17bcd
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 169 deletions.
84 changes: 50 additions & 34 deletions canvas_modules/common-canvas/__tests__/common-properties/panels/action-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,84 +13,100 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { fireEvent, waitFor, cleanup } from "@testing-library/react";
import { expect } from "chai";
import propertyUtils from "./../../_utils_/property-utils";
import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";

describe("action panel visible and enabled conditions work correctly", () => {
let wrapper;
let controller;
beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
wrapper = renderedObject.wrapper;
controller = renderedObject.controller;
});

afterEach(() => {
wrapper.unmount();
cleanup();
});

it("action panels should be hidden", () => {
const category = wrapper.find("div[data-id='properties-action-panels']");
const hiddenCheckbox = category.find("div[data-id='properties-actionHide'] input");
expect(hiddenCheckbox.props().checked).to.equal(false);
expect(wrapper.find("div.properties-action-panel .hide")).to.have.length(0);
const { container } = wrapper;
const category = container.querySelector("div[data-id='properties-action-panels']");
const hiddenCheckbox = category.querySelector("div[data-id='properties-actionHide'] input");
expect(hiddenCheckbox.checked).to.equal(false);
expect(container.querySelectorAll("div.properties-action-panel .hide")).to.have.length(0);

// hide action panel
hiddenCheckbox.getDOMNode().checked = true;
hiddenCheckbox.simulate("change");
fireEvent.click(hiddenCheckbox);

// action panel should be hidden "hidden"
expect(controller.getPanelState({ name: "action-buttons-panel" })).to.equal("hidden");
expect(wrapper.find("div.properties-action-panel.hide")).to.have.length(1);
expect(container.querySelectorAll("div.properties-action-panel.hide")).to.have.length(1);


});
it("action panels should be disabled", () => {
const category = wrapper.find("div[data-id='properties-action-panels']");
const disableCheckbox = category.find("div[data-id='properties-actionDisable'] input");
expect(disableCheckbox.props().checked).to.equal(false);
expect(wrapper.find("div[data-id='properties-action-buttons-panel']").prop("disabled")).to.equal(false);
it("action panels should be disabled", async() => {
const { container } = wrapper;
const category = container.querySelector("div[data-id='properties-action-panels']");
const disableCheckbox = category.querySelector("div[data-id='properties-actionDisable'] input");
expect(disableCheckbox.checked).to.equal(false);
const actionPanel = container.querySelector("div[data-id='properties-action-buttons-panel']");
expect(actionPanel.classList.contains("disabled")).to.equal(false);
// hide action panel
disableCheckbox.getDOMNode().checked = true;
disableCheckbox.simulate("change");

fireEvent.click(disableCheckbox);
expect(disableCheckbox.checked).to.equal(true);
// action panel should be hidden "hidden"
expect(controller.getPanelState({ name: "action-buttons-panel" })).to.equal("disabled");
expect(wrapper.find("div[data-id='properties-action-buttons-panel']").prop("disabled")).to.equal(true);
await waitFor(() => {
const actionPanelButton = container.querySelector("div[data-id='properties-action-buttons-panel']");
expect(controller.getPanelState({ name: "action-buttons-panel" })).to.equal("disabled");
expect(actionPanelButton.classList.contains("disabled"));
});

});
it("action panels should have label and description", () => {
const actionPanel = wrapper.find("div[data-id='properties-action-buttons-panel']");
const labelContainer = actionPanel.find(".properties-label-container");
it("action panels should have label and description", async() => {
const { getByText, container } = wrapper;
const actionPanel = container.querySelector("div[data-id='properties-action-buttons-panel']");
const labelContainer = actionPanel.querySelectorAll(".properties-label-container");
expect(labelContainer).to.have.length(1);
const label = labelContainer[0].querySelector("label.properties-control-label");
// Verify label
expect(labelContainer.find("label.properties-control-label").text()).to.equal("Action panel label");
expect(label.textContent).to.equal("Action panel label");

// Verify description in tooltip
const tooltip = labelContainer.find("div.tooltip-container");
const tooltip = labelContainer[0].querySelectorAll("div.tooltip-container");
expect(tooltip).to.have.length(1);
// tooltip icon
expect(tooltip.find("svg.canvas-state-icon-information-hollow")).to.have.length(1);
const tooltipIcon = tooltip[0].querySelectorAll("svg.canvas-state-icon-information-hollow");
expect(tooltipIcon).to.have.length(1);
// tooltip text
expect(tooltip.find("div.common-canvas-tooltip span").text()).to.equal("Action panel description");
const tooltipText = getByText(/Action Panel description/i);
expect(tooltipText).to.exist;

});
});

describe("action panel classNames applied correctly", () => {
let wrapper;
beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
wrapper = renderedObject.wrapper;
});

afterEach(() => {
wrapper.unmount();
cleanup();
});

it("action panel should have custom classname defined", () => {
const actionPanelWrapper = wrapper.find("div[data-id='properties-action-panels']");
expect(actionPanelWrapper.find(".action-buttons-panel-group-actionpanel-class")).to.have.length(1);
const { container } = wrapper;
const actionPanelWrapper = container.querySelector("div[data-id='properties-action-panels']");
expect(actionPanelWrapper.querySelectorAll(".action-buttons-panel-group-actionpanel-class")).to.have.length(1);
});

it("nested action panel should have custom classname defined", () => {
const panelsWrapper = wrapper.find("div[data-id='properties-panels-in-panels']");
expect(panelsWrapper.find(".disable-button-action-panel-group-actionpanel-class")).to.have.length(1);
const { container } = wrapper;
const panelsWrapper = container.querySelector("div[data-id='properties-panels-in-panels']");
expect(panelsWrapper.querySelectorAll(".disable-button-action-panel-group-actionpanel-class")).to.have.length(1);
});
});
65 changes: 39 additions & 26 deletions canvas_modules/common-canvas/__tests__/common-properties/panels/column-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,79 +13,92 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import propertyUtils from "./../../_utils_/property-utils";
import { cleanup, waitFor } from "@testing-library/react";
import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
import panelParamDef from "./../../test_resources/paramDefs/panel_paramDef.json";
import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";

import { expect } from "chai";

describe("column panel renders correctly", () => {
var wrapper;

beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef);
wrapper = renderedObject.wrapper;
});

afterEach(() => {
wrapper.unmount();

cleanup();
});

it("should have displayed the column panel with 2 sub panels", () => {
const columnPanel = wrapper.find("div[data-id='properties-panel-columns']");
const { container } = wrapper;
const columnPanel = container.querySelector("div[data-id='properties-panel-columns']");
expect(columnPanel).to.exist;
// should render 2 control panels
expect(columnPanel.find("div.properties-control-panel")).to.have.length(2);
const controlPanels = columnPanel.querySelectorAll("div.properties-control-panel");
expect(controlPanels.length).to.equal(2);
// each column adds a new `auto` to grid
expect(columnPanel.get(0).props.style).to.have.property("gridTemplateColumns", "1fr 1fr");
expect(columnPanel.style.gridTemplateColumns).to.equal("1fr 1fr");
});
});

describe("column panel visible and enabled conditions work correctly", () => {
let wrapper;
let controller;
beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
wrapper = renderedObject.wrapper;
controller = renderedObject.controller;
});

afterEach(() => {
wrapper.unmount();
cleanup();
});

it("column panel and controls should be disabled", () => {
let columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']");
expect(columnPanel.prop("disabled")).to.equal(false);
it("column panel and controls should be disabled", async() => {
const { container } = wrapper;
let columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']");
expect(columnPanel.hasAttribute("disabled")).to.equal(false);
// check initial state of enabled
controller.updatePropertyValue({ name: "colDisable" }, true);
wrapper.update();
columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']");
expect(columnPanel.prop("disabled")).to.equal(true);
await waitFor(() => {
columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']");
expect(columnPanel.hasAttribute("disabled")).to.equal(true);
});

});

it("column panel and controls should be hidden", () => {
let columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']");
expect(columnPanel.hasClass("hide")).to.equal(false);
it("column panel and controls should be hidden", async() => {
const { container } = wrapper;
let columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']");
expect(columnPanel).to.exist;
expect(columnPanel.classList.contains("hide")).to.equal(false);
controller.updatePropertyValue({ name: "colHide" }, true);
wrapper.update();
columnPanel = wrapper.find("div[data-id='properties-column-panels-cond']");
expect(columnPanel.hasClass("hide")).to.equal(true);
await waitFor(() => {
columnPanel = container.querySelector("div[data-id='properties-column-panels-cond']");
expect(columnPanel.classList.contains("hide")).to.equal(true);
});


});
});

describe("column panel classNames applied correctly", () => {
let wrapper;
beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
wrapper = renderedObject.wrapper;
});

afterEach(() => {
wrapper.unmount();
cleanup();
});

it("column panel should have custom classname defined", () => {
const columnPanelWrapper = wrapper.find("div[data-id='properties-column-panels']");
expect(columnPanelWrapper.find(".column-panels-cond-group-columnpanel-class")).to.have.length(1);
const { container } = wrapper;
const columnPanelWrapper = container.querySelector("div[data-id='properties-column-panels']");
expect(columnPanelWrapper.querySelectorAll(".column-panels-cond-group-columnpanel-class")).to.have.length(1);
});
});
62 changes: 36 additions & 26 deletions canvas_modules/common-canvas/__tests__/common-properties/panels/control-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,80 +14,90 @@
* limitations under the License.
*/

import propertyUtils from "./../../_utils_/property-utils";
import { cleanup, waitFor } from "@testing-library/react";
import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";

import "@testing-library/jest-dom";
import { expect } from "chai";

describe("control panel renders correctly", () => {
var wrapper;
beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
wrapper = renderedObject.wrapper;
});

afterEach(() => {
wrapper.unmount();
cleanup();
});

it("should have displayed the 1 control panel", () => {
const controlPanel = wrapper.find("div[data-id='properties-selectcolumn-values']");
const { container } = wrapper;
const controlPanel = container.querySelector("div[data-id='properties-selectcolumn-values']");
// should render 1 control panel
expect(controlPanel.find("div.properties-control-panel")).to.have.length(1);
const controlPanels = controlPanel.querySelectorAll("div.properties-control-panel");
expect(controlPanels).to.not.be.null;

});
});

describe("control panel visible and enabled conditions work correctly", () => {
let wrapper;
let controller;
beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
wrapper = renderedObject.wrapper;
controller = renderedObject.controller;

});

afterEach(() => {
wrapper.unmount();
cleanup();
});

it("control panel and controls should be disabled", () => {
let controlPanel = wrapper.find("div[data-id='properties-selectcolumn-values']");
expect(controlPanel.prop("disabled")).to.equal(false);
it("control panel and controls should be disabled", async() => {
const { container } = wrapper;
const controlPanel = container.querySelector("div[data-id='properties-selectcolumn-values']");
expect(controlPanel.classList.contains("disabled")).to.equal(false);
// check initial state of enabled
controller.updatePropertyValue({ name: "disableColumnSelectionPanel" }, true);
wrapper.update();
controlPanel = wrapper.find("div[data-id='properties-selectcolumn-values']");
expect(controlPanel.prop("disabled")).to.equal(true);
await waitFor(() => {
const updatedControlPanel = container.querySelector("div[data-id='properties-selectcolumn-values']");
expect(updatedControlPanel.hasAttribute("disabled")).to.equal(true);
});
});

it("control panel and controls should be hidden", () => {
let controlPanel = wrapper.find("div[data-id='properties-column-selection-panel']");
expect(controlPanel.hasClass("hide")).to.equal(false);
it("control panel and controls should be hidden", async() => {
const { container } = wrapper;
let controlPanel = container.querySelector("div[data-id='properties-column-selection-panel']");
expect(controlPanel.classList.contains("hide")).to.equal(false);
controller.updatePropertyValue({ name: "hideColumnSelectionPanel" }, true);
wrapper.update();
controlPanel = wrapper.find("div[data-id='properties-column-selection-panel']");
expect(controlPanel.hasClass("hide")).to.equal(true);
await waitFor(() => {
controlPanel = container.querySelector("div[data-id='properties-column-selection-panel']");
expect(controlPanel.classList.contains("hide")).to.equal(true);
});
});
});

describe("control panel classNames applied correctly", () => {
let wrapper;
beforeEach(() => {
const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
wrapper = renderedObject.wrapper;
});

afterEach(() => {
wrapper.unmount();
cleanup();
});

it("control panels should have custom classname defined", () => {
const { container } = wrapper;
// nested panel: controls
expect(wrapper.find(".textpanels-group-controls-class")).to.have.length(1);
expect(container.querySelectorAll(".textpanels-group-controls-class")).to.have.length(1);
// deeply nested panel: controls
expect(wrapper.find(".disable-button-control-panel-group-controls-class")).to.have.length(1);
expect(container.querySelectorAll(".disable-button-control-panel-group-controls-class")).to.have.length(1);
// nested panel without a type defined, will default to controls
propertyUtils.openSummaryPanel(wrapper, "structuretable-summary-panel2");
expect(wrapper.find(".structuretable-summary2-panel-category-group-controls-class")).to.have.length(1);
propertyUtilsRTL.openSummaryPanel(wrapper, "structuretable-summary-panel2");
expect(container.querySelectorAll(".structuretable-summary2-panel-category-group-controls-class")).to.have.length(1);
});
});
Loading

0 comments on commit 5d17bcd

Please sign in to comment.