Skip to content

Commit

Permalink
#2271 Use React Testing Library for common-properties tests - Part 2-… (
Browse files Browse the repository at this point in the history 
#2272)
  • Loading branch information
@Jerinjk14
Jerinjk14 authored Dec 16, 2024
1 parent 2c41ad5 commit b364e52
Show file tree
Hide file tree
Showing 8 changed files with 676 additions and 520 deletions.
10 changes: 9 additions & 1 deletion canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")) {
Expand Down
288 changes: 175 additions & 113 deletions canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js
View file

Large diffs are not rendered by default.

103 changes: 59 additions & 44 deletions canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -28,121 +29,135 @@ 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
});
});

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": <AddtlCmptsTest /> } };
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);

});
});
Loading

0 comments on commit b364e52

Please sign in to comment.