diff --git a/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js b/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js index 987385ffdc..fe053f89f7 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js @@ -140,8 +140,7 @@ describe("CommonProperties renders correctly", () => { return ; }; - // disable until upgrade to React 19 - it.skip("all required props should have been defined", () => { + it("all required props should have been defined", () => { const propertiesConfig = { containerType: "Editing" }; render( diff --git a/canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js b/canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js index b3f1fc7ead..fbcccb6835 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js @@ -416,7 +416,7 @@ describe("field-picker-control renders correctly", () => { const { container } = wrapper; const searchContainer = container.querySelector("div.properties-ft-search-container"); - const input = searchContainer.querySelector("input[type='text']"); + const input = searchContainer.querySelector("input"); fireEvent.change(input, { target: { value: "Time" } }); expect(tableUtilsRTL.getTableRows(container)).to.have.length(2); // test case insensitive @@ -563,7 +563,7 @@ describe("field-picker-control with multi input schemas renders correctly", () = expect(tableRows.length).to.equal(30); const searchContainer = fieldpicker.querySelector("div.properties-ft-search-container"); - const input = searchContainer.querySelector("input[type='text']"); + const input = searchContainer.querySelector("input"); fireEvent.change(input, { target: { value: "Time" } }); fieldpicker = container.querySelector("div.properties-fp-table"); @@ -617,7 +617,7 @@ describe("field-picker-control with multi input schemas renders correctly", () = const { container } = wrapper; let fieldpicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-structuretableMultiInputSchema"); const searchContainer = fieldpicker.querySelector("div.properties-ft-search-container"); - const input = searchContainer.querySelector("input[type='text']"); + const input = searchContainer.querySelector("input"); fireEvent.change(input, { target: { value: "time" } }); clickFilter(wrapper, "time"); @@ -743,7 +743,7 @@ describe("field-picker-control with multi input schemas renders correctly", () = it("should be able to select the same field name from different schemas", () => { const { container } = wrapper; let fieldpicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-structuretableMultiInputSchema"); - const search = fieldpicker.querySelector("div.properties-ft-search-container").querySelector("input[type='text']"); + const search = fieldpicker.querySelector("div.properties-ft-search-container").querySelector("input"); fireEvent.change(search, { target: { value: "age" } }); fieldpicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-structuretableMultiInputSchema"); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js index 2b29a33cd5..f4b2c6c827 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js @@ -1,5 +1,5 @@ /* - * Copyright 2017-2023 Elyra Authors + * Copyright 2017-2025 Elyra Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -25,6 +25,7 @@ import Controller from "../../../src/common-properties/properties-controller"; import multiselectParamDef from "../../test_resources/paramDefs/multiselect_paramDef.json"; import { fireEvent, waitFor, cleanup } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; const mockMultiselect = jest.fn(); jest.mock("../../../src/common-properties/controls/multiselect", @@ -38,6 +39,8 @@ mockMultiselect.mockImplementation((props) => { return ; }); +const user = userEvent.setup({ delay: null }); + describe("multiselect renders correctly", () => { const propertyName = "test-multiselect"; @@ -114,7 +117,7 @@ describe("multiselect renders correctly", () => { expect(multiselectWrapper.querySelector("button > span").textContent).to.equal(emptyValueIndicator); }); - it("multiselect handles null correctly", () => { + it("multiselect handles null correctly", async() => { controller.setPropertyValues( { propertyName: null } ); @@ -136,12 +139,12 @@ describe("multiselect renders correctly", () => { multiselectWrapper = container.querySelector("div[data-id='properties-test-multiselect']"); const multiselectList = multiselectWrapper.querySelectorAll("li.cds--list-box__menu-item"); expect(multiselectList).to.be.length(4); - fireEvent.click(multiselectList[0]); + await user.click(multiselectList[0]); const expectedValue = [multiselectList[0].textContent]; expect(controller.getPropertyValue(propertyId)).to.eql(expectedValue); }); - it("multiselect handles undefined correctly", () => { + it("multiselect handles undefined correctly", async() => { controller.setPropertyValues( { } ); @@ -163,7 +166,7 @@ describe("multiselect renders correctly", () => { multiselectWrapper = container.querySelector("div[data-id='properties-test-multiselect']"); const multiselectList = multiselectWrapper.querySelectorAll("li.cds--list-box__menu-item"); expect(multiselectList).to.be.length(4); - fireEvent.click(multiselectList[0]); + await user.click(multiselectList[0]); const expectedValue = [multiselectList[0].textContent]; expect(controller.getPropertyValue(propertyId)).to.eql(expectedValue); }); @@ -288,7 +291,7 @@ describe("multiselect paramDef works correctly", () => { cleanup(); }); - it("multiselect placeholder custom label rendered correctly", () => { + it("multiselect placeholder custom label rendered correctly", async() => { const { container } = wrapper; let multiselectWrapper = container.querySelector("div[data-id='properties-multiselect_custom_labels']"); const expectedEmptyLabel = multiselectParamDef.resources["multiselect_custom_labels.multiselect.dropdown.empty.label"]; @@ -301,7 +304,7 @@ describe("multiselect paramDef works correctly", () => { multiselectWrapper = container.querySelector("div[data-id='properties-multiselect_custom_labels']"); const multiselectList = multiselectWrapper.querySelectorAll("li.cds--list-box__menu-item"); expect(multiselectList).to.have.length(6); - fireEvent.click(multiselectList[0]); + await user.click(multiselectList[0]); const expectedValue = [multiselectList[0].textContent]; expect(renderedController.getPropertyValue(propertyId)).to.eql(expectedValue); @@ -363,7 +366,7 @@ describe("multiselect paramDef works correctly", () => { expect(JSON.stringify(renderedController.getPropertyValue(propertyId02))).to.equal(JSON.stringify(expectedSubPanelValue)); }); - it("multiselect renders correctly in a table - onpanel", () => { + it("multiselect renders correctly in a table - onpanel", async() => { const { container } = wrapper; const propertyId11 = { name: "multiselect_table", row: 1, col: 1 }; propertyUtilsRTL.openSummaryPanel(wrapper, "multiselect-table-panel"); @@ -384,7 +387,7 @@ describe("multiselect paramDef works correctly", () => { const multiselectList = table.querySelectorAll("li.cds--list-box__menu-item"); expect(multiselectList).to.have.length(4); - fireEvent.click(multiselectList[0]); + await user.click(multiselectList[0]); const expectedValue = [multiselectList[0].textContent]; expect(renderedController.getPropertyValue(propertyId11)).to.eql(expectedValue); }); 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 60882d1031..b59a9cc6f9 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 @@ -1,5 +1,5 @@ /* - * Copyright 2017-2023 Elyra Authors + * Copyright 2017-2025 Elyra Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -58,7 +58,7 @@ describe("tearsheet tests", () => { 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; + expect(document.querySelectorAll("div.properties-tearsheet-panel.is-visible")).to.have.length(1); const closeButton = document.querySelector("button.cds--modal-close"); expect(closeButton).to.not.be.null; diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json index a386ea6334..1839269f44 100644 --- a/canvas_modules/common-canvas/package.json +++ b/canvas_modules/common-canvas/package.json @@ -45,76 +45,78 @@ "@tanstack/react-virtual": "^3.13.8", "d3": "7.9.0", "dagre": "^0.8.5", - "date-fns": "^2.28.0", - "immutable": "^4.0.0", + "date-fns": "^4.1.0", + "immutable": "^5.1.3", "jsonschema": "^1.4.0", "lodash": "^4.17.21", - "markdown-it": "^13.0.1", + "markdown-it": "^14.1.0", "prop-types": "^15.7.2", - "react-draggable": "^4.4.4", + "react-draggable": "^4.5.0", "react-inlinesvg": "^4.1.3", "react-portal": "^4.2.1", - "react-redux": "^8.1.3", + "react-redux": "^9.2.0", "react-virtualized": "9.22.6", "redux": "^5.0.1", "seedrandom": "^3.0.5", - "uuid": "^8.3.0" + "uuid": "^11.1.0" }, "devDependencies": { - "@babel/core": "7.25.2", + "@babel/core": "7.28.4", "@babel/plugin-proposal-class-properties": "7.18.6", - "@babel/plugin-proposal-export-default-from": "7.24.7", - "@babel/plugin-transform-runtime": "7.24.7", - "@babel/preset-env": "7.25.3", - "@babel/preset-react": "7.24.7", - "@carbon/react": "1.84.0", - "@rollup/plugin-babel": "5.3.0", - "@rollup/plugin-commonjs": "21.0.1", - "@rollup/plugin-json": "4.1.0", - "@rollup/plugin-node-resolve": "13.0.6", - "@rollup/plugin-url": "6.1.0", - "@testing-library/jest-dom": "5.17.0", - "@testing-library/react": "14.2.2", + "@babel/plugin-proposal-export-default-from": "7.27.1", + "@babel/plugin-transform-runtime": "7.28.3", + "@babel/preset-env": "7.28.3", + "@babel/preset-react": "7.27.1", + "@carbon/react": "1.92.1", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "28.0.6", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "16.0.2", + "@rollup/plugin-terser": "0.4.4", + "@rollup/plugin-url": "8.0.2", + "@testing-library/dom": "10.4.1", + "@testing-library/jest-dom": "6.9.1", + "@testing-library/react": "16.3.0", + "@testing-library/user-event": "14.6.1", "autoprefixer": "9.8.8", - "babel-jest": "26.3.0", + "babel-jest": "30.2.0", "babel-plugin-lodash": "3.3.4", "babel-plugin-transform-react-remove-prop-types": "0.4.24", - "chai": "4.2.0", + "chai": "6.2.0", "classnames": "2.5.1", "deep-freeze": "0.0.1", "eslint": "^7.32.0", "eslint-config-canvas": "file:../eslint-config-canvas", - "eslint-plugin-import": "2.25.3", + "eslint-plugin-import": "2.32.0", "eslint-plugin-react": "7.21.2", - "grunt": "1.5.3", - "grunt-contrib-clean": "2.0.0", + "grunt": "1.6.1", + "grunt-contrib-clean": "2.0.1", "grunt-contrib-sass": "2.0.0", "grunt-env": "1.0.1", "grunt-eslint": "23.0.0", "grunt-jsonlint": "2.1.3", "grunt-postcss": "0.9.0", "grunt-yamllint": "0.3.0", - "jest": "29.7.0", - "jest-environment-jsdom": "29.7.0", + "jest": "30.2.0", + "jest-environment-jsdom": "30.2.0", "jest-fetch-mock": "3.0.3", - "jest-fixed-jsdom": "0.0.9", - "jest-localstorage-mock": "2.4.3", - "react": "18.3.1", - "react-dom": "18.3.1", - "react-intl": "6.6.2", - "react-is": "18.3.1", - "react-test-renderer": "18.3.1", + "jest-fixed-jsdom": "0.0.10", + "jest-localstorage-mock": "2.4.26", + "react": "19.2.0", + "react-dom": "19.2.0", + "react-intl": "7.1.13", + "react-is": "19.2.0", + "react-test-renderer": "19.2.0", "reactable": "1.1.0", - "rollup": "2.79.2", + "rollup": "4.52.4", "rollup-plugin-auto-external": "2.0.0", - "rollup-plugin-scss": "3.0.0", - "rollup-plugin-terser": "7.0.2", - "rollup-plugin-visualizer": "5.5.2", + "rollup-plugin-scss": "4.0.1", + "rollup-plugin-visualizer": "6.0.4", "sass": "1.71.1", - "sinon": "9.0.3", + "sinon": "21.0.0", "stylelint": "13.13.1", - "tsd": "^0.31.2", - "url": "0.11.3" + "tsd": "^0.33.0", + "url": "0.11.4" }, "peerDependencies": { "@carbon/react": "^1.51.0", diff --git a/canvas_modules/common-canvas/rollup.config.js b/canvas_modules/common-canvas/rollup.config.js index 81486478b1..d36f10a76e 100644 --- a/canvas_modules/common-canvas/rollup.config.js +++ b/canvas_modules/common-canvas/rollup.config.js @@ -1,5 +1,5 @@ /* - * Copyright 2017-2023 Elyra Authors + * Copyright 2017-2025 Elyra Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,7 +20,7 @@ import commonjs from "@rollup/plugin-commonjs"; import json from "@rollup/plugin-json"; import resolve from "@rollup/plugin-node-resolve"; import scss from "rollup-plugin-scss"; -import { terser } from "rollup-plugin-terser"; +import terser from "@rollup/plugin-terser"; import url from "@rollup/plugin-url"; import { visualizer } from "rollup-plugin-visualizer"; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx index c384fd0677..1814248345 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx @@ -1,5 +1,5 @@ /* - * Copyright 2023 Elyra Authors + * Copyright 2023-2025 Elyra Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -140,6 +140,7 @@ class DatepickerRangeControl extends React.Component { return (
); return ( -
+
-
- - - - - - -
+ + } /> + } /> + } /> + } /> + } /> + } /> +
);