From f7e8a7c9d101f3ca5227f30ce6e45bd4ced919cf Mon Sep 17 00:00:00 2001 From: Jerin George Date: Fri, 10 Jan 2025 22:22:35 +0530 Subject: [PATCH] #2296 Use React Testing Library for common-properties tests - Part 2-final-implementing Signed-off-by: Jerin George --- .../operators/colNotExists-test.js | 9 +- .../operators/custom-op-test.js | 11 +-- .../operators/dm-condition-operators-test.js | 95 ++++++++++--------- .../utils/property-utils-test.js | 15 ++- 4 files changed, 65 insertions(+), 65 deletions(-) diff --git a/canvas_modules/common-canvas/__tests__/common-properties/operators/colNotExists-test.js b/canvas_modules/common-canvas/__tests__/common-properties/operators/colNotExists-test.js index cc95374562..60a16ac1ac 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/operators/colNotExists-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/operators/colNotExists-test.js @@ -18,7 +18,8 @@ import { expect } from "chai"; import Controller from "../../../src/common-properties/properties-controller"; import dataset from "../../test_resources/json/deriveDatasetMetadata.json"; import structuretableParamDef from "../../test_resources/paramDefs/structuretable_paramDef.json"; -import propertyUtils from "../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; +import { cleanup } from "@testing-library/react"; describe("validating colNotExists operator works correctly", () => { const controller = new Controller(); @@ -41,16 +42,14 @@ describe("validating colNotExists operator works correctly", () => { }); describe("validating colNotExists operator works correctly in a table", () => { - let wrapper; let renderedController; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(structuretableParamDef); - wrapper = renderedObject.wrapper; + const renderedObject = propertyUtilsRTL.flyoutEditorForm(structuretableParamDef); renderedController = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("colNotExists works correctly when in a table cell", () => { diff --git a/canvas_modules/common-canvas/__tests__/common-properties/operators/custom-op-test.js b/canvas_modules/common-canvas/__tests__/common-properties/operators/custom-op-test.js index 7d2a56b44d..b57b33f163 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/operators/custom-op-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/operators/custom-op-test.js @@ -15,21 +15,20 @@ */ -import propertyUtils from "../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import { expect } from "chai"; import customControlParamDef from "../../test_resources/paramDefs/custom-ctrl-op_paramDef.json"; +import { cleanup } from "@testing-library/react"; describe("validating custom operators work correctly", () => { - var wrapper; - var controller; + let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(customControlParamDef); - wrapper = renderedObject.wrapper; + const renderedObject = propertyUtilsRTL.flyoutEditorForm(customControlParamDef); controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("custom_op_num parameter should have error when greater than 100 using a custom op", () => { const propertyId = { name: "custom_op_num" }; diff --git a/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js b/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js index 659975f42d..212a3c09cb 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js @@ -15,102 +15,105 @@ */ -import propertyUtils from "../../_utils_/property-utils"; +import propertyUtilsRTL from "../../_utils_/property-utilsRTL"; import { expect } from "chai"; import conditionOpParamDef from "../../test_resources/paramDefs/dmConditionOp_paramDef.json"; +import { cleanup, fireEvent } from "@testing-library/react"; -describe("dm condition operators work correctly", () => { - var wrapper; - var controller; +describe.only("dm condition operators work correctly", () => { + let wrapper; + let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(conditionOpParamDef); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(conditionOpParamDef); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("checkbox control become enabled if selected item has a dmType equal to string", () => { + const { container } = wrapper; expect(controller.getControlState({ name: "checkbox" })).to.equal("disabled"); - const dropDown = wrapper.find("div[data-id='properties-ctrl-dmTypeEqualList']"); - const dropdownButton = dropDown.find("button").at(0); - dropdownButton.simulate("click"); - const dropdownList = wrapper.find("li.cds--list-box__menu-item"); - dropdownList.at(3).simulate("click"); - wrapper.update(); + const dropDown = container.querySelector("div[data-id='properties-ctrl-dmTypeEqualList']"); + const dropdownButton = dropDown.querySelectorAll("button")[0]; + fireEvent.click(dropdownButton); + const dropdownList = container.querySelectorAll("li.cds--list-box__menu-item"); + fireEvent.click(dropdownList[3]); expect(dropdownList).to.be.length(14); expect(controller.getControlState({ name: "checkbox" })).to.equal("enabled"); - }); it("checkbox control become visible if selected item does not have a dmType equal to string", () => { + const { container } = wrapper; expect(controller.getControlState({ name: "checkbox1" })).to.equal("hidden"); - const dropDown = wrapper.find("div[data-id='properties-ctrl-dmTypeNotEqualList']"); - const dropdownButton = dropDown.find("button").at(0); - dropdownButton.simulate("click"); - const dropdownList = wrapper.find("li.cds--list-box__menu-item"); + const dropDown = container.querySelector("div[data-id='properties-ctrl-dmTypeNotEqualList']"); + const dropdownButton = dropDown.querySelectorAll("button")[0]; + fireEvent.click(dropdownButton); + const dropdownList = container.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); - dropdownList.at(1).simulate("click"); - wrapper.update(); + fireEvent.click(dropdownList[1]); expect(controller.getControlState({ name: "checkbox1" })).to.equal("visible"); }); it("checkbox control becomes enabled if selected item has a dmRole equal to input", () => { + const { container } = wrapper; expect(controller.getControlState({ name: "checkbox2" })).to.equal("disabled"); - const dropDown = wrapper.find("div[data-id='properties-ctrl-dmRoleEqualList']"); - const dropdownButton = dropDown.find("button").at(0); - dropdownButton.simulate("click"); - const dropdownList = wrapper.find("li.cds--list-box__menu-item"); + const dropDown = container.querySelector("div[data-id='properties-ctrl-dmRoleEqualList']"); + const dropdownButton = dropDown.querySelectorAll("button")[0]; + fireEvent.click(dropdownButton); + const dropdownList = container.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); - dropdownList.at(1).simulate("click"); - wrapper.update(); + fireEvent.click(dropdownList[1]); expect(controller.getControlState({ name: "checkbox2" })).to.equal("enabled"); }); it("checkbox control become visible if selected item does not have a dmRole equal to input", () => { + const { container } = wrapper; expect(controller.getControlState({ name: "checkbox3" })).to.equal("hidden"); - const dropDown = wrapper.find("div[data-id='properties-ctrl-dmRoleNotEqualList']"); - const dropdownButton = dropDown.find("button").at(0); - dropdownButton.simulate("click"); - const dropdownList = wrapper.find("li.cds--list-box__menu-item"); + const dropDown = container.querySelector("div[data-id='properties-ctrl-dmRoleNotEqualList']"); + const dropdownButton = dropDown.querySelectorAll("button")[0]; + fireEvent.click(dropdownButton); + const dropdownList = container.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); - dropdownList.at(2).simulate("click"); - wrapper.update(); + fireEvent.click(dropdownList[2]); expect(controller.getControlState({ name: "checkbox3" })).to.equal("visible"); }); // This works in the UI but errorMessages is not updated in test it.skip("selectColumn control becomes validated if selected item has a dmRole equal to discrete", () => { - const dropDown = wrapper.find("div[data-id='properties-dmMeasurementEqualList']"); - const dropdownButton = dropDown.find("button").at(0); - dropdownButton.simulate("click"); - const dropdownList = wrapper.find("li.cds--list-box__menu-item"); + const { container } = wrapper; + const dropDown = container.querySelector("div[data-id='properties-dmMeasurementEqualList']"); + const dropdownButton = dropDown.querySelectorAll("button")[0]; + fireEvent.click(dropdownButton); + const dropdownList = container.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); - dropdownList.at(0).simulate("click"); // Trigger Error Message + fireEvent.click(dropdownList[0]);// Trigger Error Message let errorMessages = controller.getErrorMessages(); expect(errorMessages).to.not.equal({}); expect(errorMessages.dmMeasurementEqualList.type).to.equal("error"); - dropdownButton.simulate("click"); - dropdownList.at(3).simulate("click"); // Fulfill Condition by selecting item with dmRole discrete + fireEvent.click(dropdownButton); + fireEvent.click(dropdownList[3]); // Fulfill Condition by selecting item with dmRole discrete errorMessages = controller.getErrorMessages(); - expect(controller.getErrorMessages()).to.deep.equal({}); + expect(errorMessages).to.deep.equal({}); }); // This works in the UI but errorMessages is not updated in test it.skip("selectColumn control become validated if selected item does not have a dmRole equal to discrete", () => { - const dropDown = wrapper.find("div[data-id='properties-dmMeasurementNotEqualList']"); - const dropdownButton = dropDown.find("button").at(0); - dropdownButton.simulate("click"); - const dropdownList = wrapper.find("li.cds--list-box__menu-item"); + const { container } = wrapper; + const dropDown = container.querySelector("div[data-id='properties-dmMeasurementNotEqualList']"); + const dropdownButton = dropDown.querySelectorAll("button")[0]; + fireEvent.click(dropdownButton); + const dropdownList = container.querySelectorAll("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); - dropdownList.at(3).simulate("click"); // Trigger Error Message by selecting item with dmRole discrete + fireEvent.click(dropdownList[3]); // Trigger Error Message by selecting item with dmRole discrete let errorMessages = controller.getErrorMessages(); expect(errorMessages).to.not.equal({}); expect(errorMessages.dmMeasurementNotEqualList.type).to.equal("error"); - dropdownButton.simulate("click"); - dropdownList.at(1).simulate("click"); // Fulfill Condition by selecting item with dmRole input + fireEvent.click(dropdownButton); + fireEvent.click(dropdownList[2]); // Fulfill Condition by selecting item with dmRole input errorMessages = controller.getErrorMessages(); expect(errorMessages).to.deep.equal({}); }); }); + diff --git a/canvas_modules/common-canvas/__tests__/common-properties/utils/property-utils-test.js b/canvas_modules/common-canvas/__tests__/common-properties/utils/property-utils-test.js index 039aff9eda..9299e8dc96 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/utils/property-utils-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/utils/property-utils-test.js @@ -17,11 +17,12 @@ import { expect } from "chai"; import { propertyOf } from "lodash"; import * as PropertyUtils from "./../../../src/common-properties/util/property-utils.js"; -import testUtils from "./../../_utils_/property-utils"; +import testUtils from "./../../_utils_/property-utilsRTL.js"; import Controller from "./../../../src/common-properties/properties-controller"; -import propertyUtils from "./../../_utils_/property-utils"; +import propertyUtilsRTL from "./../../_utils_/property-utilsRTL.js"; import structureTableParamDef from "./../../test_resources/paramDefs/structuretable_paramDef.json"; import convertValuesDataTypesParamDef from "./../../test_resources/paramDefs/convertValueDataTypes_paramDef.json"; +import { cleanup } from "@testing-library/react"; describe("dynamic text with expressions", () => { const controller = new Controller(); @@ -102,16 +103,14 @@ describe("dynamic text with expressions", () => { }); describe("getDMFieldIcon retrieves correct icon type for each measurement level ", () => { - var wrapper; - var controller; + let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(structureTableParamDef); - wrapper = renderedObject.wrapper; + const renderedObject = propertyUtilsRTL.flyoutEditorForm(structureTableParamDef); controller = renderedObject.controller; }); afterEach(() => { - wrapper.unmount(); + cleanup(); }); it("measure level of range should return measurement-scale icon", () => { @@ -369,7 +368,7 @@ describe("convertValueDataTypestests", () => { }); it("convertValueDataTypes correctly converts currentParameters data types when setting form", () => { - const renderedObject = propertyUtils.flyoutEditorForm(convertValuesDataTypesParamDef, { convertValueDataTypes: true }); + const renderedObject = propertyUtilsRTL.flyoutEditorForm(convertValuesDataTypesParamDef, { convertValueDataTypes: true }); const controller2 = renderedObject.controller; const expected = Object.assign({}, expectedValues);