Jest test not running successfully #2057

caritaou · 2024-07-10T22:27:20Z

ref 3821

The Jest test are not running successfully even though nothing has changed in our code. Failures are in properties tests. I assume this is another case of the latest release of Carbon breaking the tests.

Summary of all failing tests
 FAIL  __tests__/common-properties/conditions/shared-fields-test.js (11.084 s)
  ● Condition dmSharedFields test cases › Test the available fields.

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      21 | 	const tableWrapper = wrapper.find("div[data-id=\"" + dataIdName + "\"]");
      22 | 	const addFieldsButtons = tableWrapper.find("button.properties-add-fields-button"); // field picker buttons
    > 23 | 	addFieldsButtons.at(0).simulate("click"); // open filter picker
         | 	                       ^
      24 | 	return wrapper.find("div.properties-fp-table");
      25 | }
      26 |

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.simulate (node_modules/enzyme/src/ReactWrapper.js:665:17)
      at Object.openFieldPicker (__tests__/_utils_/table-utils.js:23:25)
      at Object.<anonymous> (__tests__/common-properties/conditions/shared-fields-test.js:36:32)

  ● Condition dmSharedFields test cases › Test allow a change to a field to filter another field's choices.

    Expected value   2
    Received:
      0
    
    Message:
      expected {} to have a length of 2 but got 0

      67 | 	it("Test allow a change to a field to filter another field's choices.", () => {
      68 | 		let selectedFields = tableUtils.getTableRows(wrapper.find("div[data-id='properties-input_fields']"));
    > 69 | 		expect(selectedFields).to.have.length(2); // Age and Cholesterol already selected
         | 		                               ^
      70 | 		// Select another field `BP` in the selectColumns control
      71 | 		const fieldPicker = tableUtils.openFieldPicker(wrapper, "properties-ft-input_fields");
      72 | 		tableUtils.fieldPicker(fieldPicker, ["BP"], ["Age", "BP", "Cholesterol"]);

      at Object.<anonymous> (__tests__/common-properties/conditions/shared-fields-test.js:69:34)

  ● Condition dmSharedFields test cases › Shares fields between dmSharedFields and columnSelection panel

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      21 | 	const tableWrapper = wrapper.find("div[data-id=\"" + dataIdName + "\"]");
      22 | 	const addFieldsButtons = tableWrapper.find("button.properties-add-fields-button"); // field picker buttons
    > 23 | 	addFieldsButtons.at(0).simulate("click"); // open filter picker
         | 	                       ^
      24 | 	return wrapper.find("div.properties-fp-table");
      25 | }
      26 |

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.simulate (node_modules/enzyme/src/ReactWrapper.js:665:17)
      at Object.openFieldPicker (__tests__/_utils_/table-utils.js:23:25)
      at Object.<anonymous> (__tests__/common-properties/conditions/shared-fields-test.js:87:34)

 FAIL  __tests__/common-properties/components/flexibletable-test.js (12.986 s)
  ● FlexibleTable renders correctly › Empty `FlexibleTable` uses place_holder_text from uiHints

    Expected value   1
    Received:
      0
    
    Message:
      expected {} to have a length of 1 but got 0

      359 | 		// Terms table is an empty table using place_holder_text default value
      360 | 		const termsTable = wrapper.find("div[data-id='properties-ctrl-emeansUI']");
    > 361 | 		expect(termsTable).to.have.length(1);
          | 		                           ^
      362 | 		const emptyTableDiv = termsTable.find("div.properties-ft-empty-table");
      363 | 		expect(emptyTableDiv).to.have.length(1);
      364 | 		expect(emptyTableDiv.text()).to.equal("No terms added");

      at Object.<anonymous> (__tests__/common-properties/components/flexibletable-test.js:361:30)

 FAIL  __tests__/common-properties/components/editor-form-test.js (14.698 s)
  ● tabs and subtabs should be rendered correctly › validate subtabs work correctly

    Expected value   1
    Received:
      0
    
    Message:
      expected {} to have a length of 1 but got 0

      36 | 		let category = wrapper.find("div[data-id='properties-Primary2']");
      37 | 		const subTabsContainer = category.find("div.properties-subtabs");
    > 38 | 		expect(subTabsContainer).to.have.length(1);
         | 		                                 ^
      39 | 		const subTabs = subTabsContainer.find("button.cds--tabs__nav-link");
      40 | 		expect(subTabs).to.have.length(3);
      41 | 		subTabs.at(2).simulate("click");

      at Object.<anonymous> (__tests__/common-properties/components/editor-form-test.js:38:36)

  ● Right flyout category views › For custom container in right flyout, when categoryView=tabs categories should be displayed as tabs

    Method “props” is meant to be run on 1 node. 0 found instead.

      130 | 		wrapper = renderedObject.wrapper;
      131 | 		const editorForm = wrapper.find(".properties-editor-form");
    > 132 | 		expect(editorForm.prop("className").includes("right-flyout-tabs-view")).to.equal(true);
          | 		                  ^
      133 | 		// Verify primary tabs
      134 | 		const primaryTabs = editorForm.find("button[role='tab']");
      135 | 		expect(primaryTabs).to.have.length(3);

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.props (node_modules/enzyme/src/ReactWrapper.js:710:17)
      at ReactWrapper.prop (node_modules/enzyme/src/ReactWrapper.js:827:17)
      at Object.<anonymous> (__tests__/common-properties/components/editor-form-test.js:132:21)

 FAIL  __tests__/common-properties/panels/subtabs-test.js (19.25 s)
  ● subtabs renders correctly › should have displayed the 4 tabs created with 6 nested subtabs

    Expected value   10
    Received:
      0
    
    Message:
      expected {} to have a length of 10 but got 0

      34 | 		const tabContainer = wrapper.find("div[data-id='properties-Primary'] div.properties-sub-tab-container");
      35 | 		// should render 1 control panel
    > 36 | 		expect(tabContainer.find("button.properties-subtab")).to.have.length(10);
         | 		                                                              ^
      37 | 	});
      38 | });
      39 |

      at Object.<anonymous> (__tests__/common-properties/panels/subtabs-test.js:36:65)

  ● subtabs visible and enabled conditions work correctly › subtabs and controls should be disabled

    Method “props” is meant to be run on 1 node. 0 found instead.

      54 | 		let subTab = wrapper.find("button[data-id='properties-fruit-subtab']");
      55 | 		// check initial state of enabled
    > 56 | 		expect(subTab.prop("aria-disabled")).to.equal(false);
         | 		              ^
      57 | 		controller.updatePropertyValue({ name: "disable" }, true);
      58 | 		wrapper.update();
      59 | 		subTab = wrapper.find("button[data-id='properties-fruit-subtab']");

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.props (node_modules/enzyme/src/ReactWrapper.js:710:17)
      at ReactWrapper.prop (node_modules/enzyme/src/ReactWrapper.js:827:17)
      at Object.<anonymous> (__tests__/common-properties/panels/subtabs-test.js:56:17)

  ● subtabs visible and enabled conditions work correctly › subtabs and controls should be hidden

    Expected value   1
    Received:
      0
    
    Message:
      expected {} to have a length of 1 but got 0

      63 | 	it("subtabs and controls should be hidden", () => {
      64 | 		let subTab = wrapper.find("button[data-id='properties-table-subtab']");
    > 65 | 		expect(subTab).to.have.length(1);
         | 		                       ^
      66 | 		controller.updatePropertyValue({ name: "hide" }, true);
      67 | 		wrapper.update();
      68 | 		subTab = wrapper.find("button[data-id='properties-table-subtab']");

      at Object.<anonymous> (__tests__/common-properties/panels/subtabs-test.js:65:26)

  ● subtabs visible and enabled conditions work correctly › hidden and non hidden tabs display correctly

    Expected value   1
    Received:
      0
    
    Message:
      expected {} to have a length of 1 but got 0

      76 | 		let tab3 = primaryTabs.find("button[title='Tab Test3']");
      77 | 		let tab4 = primaryTabs.find("button[title='Tab Test4']");
    > 78 | 		expect(tab1).to.have.length(1);
         | 		                     ^
      79 | 		expect(tab2).to.have.length(1);
      80 | 		expect(tab3).to.have.length(1);
      81 | 		expect(tab4).to.have.length(1);

      at Object.<anonymous> (__tests__/common-properties/panels/subtabs-test.js:78:24)

  ● subtabs classNames applied correctly › subtab container should have custom classname defined

    Expected value   1
    Received:
      0
    
    Message:
      expected {} to have a length of 1 but got 0

      111 | 	it("subtab container should have custom classname defined", () => {
      112 | 		const mainTab = wrapper.find("div.maintab-panel-class");
    > 113 | 		expect(mainTab.find("div.subtab-panel-class")).to.have.length(1);
          | 		                                                       ^
      114 | 	});
      115 |
      116 | 	it("subtabs should have custom classname defined", () => {

      at Object.<anonymous> (__tests__/common-properties/panels/subtabs-test.js:113:58)

  ● subtabs classNames applied correctly › subtabs should have custom classname defined

    Expected value   1
    Received:
      0
    
    Message:
      expected {} to have a length of 1 but got 0

      116 | 	it("subtabs should have custom classname defined", () => {
      117 | 		const subTabs = wrapper.find("div.properties-sub-tab-container").at(0);
    > 118 | 		expect(subTabs.find(".range-fields-subtab-control-class")).to.have.length(1);
          | 		                                                                   ^
      119 | 		expect(subTabs.find(".table-subtab-control-class")).to.have.length(1);
      120 | 		expect(subTabs.find(".fruit-subtab-control-class")).to.have.length(1);
      121 | 	});

      at Object.<anonymous> (__tests__/common-properties/panels/subtabs-test.js:118:70)

 FAIL  __tests__/common-properties/properties-controller-test.js (37.126 s)
  ● Properties Controller setTopLevelActiveGroup › should set the top level active group id in properties controller

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      2431 | 		// Select Condition in accordion
      2432 | 		const conditionsCategory = wrapper.find("div.properties-category-container").at(2);
    > 2433 | 		conditionsCategory.find("button.cds--accordion__heading").simulate("click");
           | 		                                                          ^
      2434 | 		topLevelActiveGroupId = controller.getTopLevelActiveGroupId();
      2435 | 		expect(topLevelActiveGroupId).to.equal("Primary2");
      2436 | 	});

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.simulate (node_modules/enzyme/src/ReactWrapper.js:665:17)
      at Object.<anonymous> (__tests__/common-properties/properties-controller-test.js:2433:61)


Test Suites: 5 failed, 119 passed, 124 total
Tests:       13 failed, 4 skipped, 1490 passed, 1507 total
Snapshots:   0 total
Time:        81.976 s
Ran all test suites.

The text was updated successfully, but these errors were encountered:

caritaou · 2024-07-10T22:27:40Z

All the failed test cases are related to Carbon Tabs. The parameterDef is not able to be rendered by CommonProperties in the tests, resulting in the error panel being shown:

<div className="properties-right-flyout">
      <ForwardRef propertiesInfo={{...}} propertiesConfig={{...}} callbacks={{...}} customControls={{...}} customConditionOps={{...}}>
        <injectIntl(CommonProperties) propertiesInfo={{...}} propertiesConfig={{...}} callbacks={{...}} customControls={{...}} customConditionOps={{...}} forwardedRef={{...}}>
          <CommonProperties propertiesInfo={{...}} propertiesConfig={{...}} callbacks={{...}} customControls={{...}} customConditionOps={{...}} forwardedRef={{...}} intl={{...}} light={true}>
            <aside aria-label="Error in properties" role="complementary" className="properties-wrapper properties-right-flyout properties-small">
              <div className="properties-flyout-error-container">
                <div className="properties-error-heading">
                  <ValidationMessage messageInfo={{...}}>
                    <div className="properties-validation-message error">
                      <span>
                        Oops, the pane didn&#39;t load.
                      </span>
                    </div>
                  </ValidationMessage>
                </div>
                <br />
                <br />
                <div className="properties-error-content">
                  Click Revert to go back to the previous screen or click Close to exit the pane. Then try your operation again.
                  <br />
                  If the problem persists, contact support.
                </div>
              </div>

The test then fails because the Tabs are not able to get the offsetHeight

  console.error
    Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'offsetHeight')]
        at reportException (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
        at invokeEventListeners (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
        at invokeGuardedCallback (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
        at reportUncaughtErrorInDEV (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:22838:5)
        at captureCommitPhaseError (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:27126:5) TypeError: Cannot read properties of undefined (reading 'offsetHeight')
        at isEllipsisActive (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:591:34)
        at handler (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:621:7)
        at /Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:623:5
...

  console.error
    The above error occurred in the <ForwardRef(Tab)> component:

        at Tab (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:560:5)
        at div
        at div
        at TabList (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:203:5)
        at Tabs (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:83:5)
        at div
        at Subtabs (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.jsx:27:21)
        at div
        at div
        at li
        at AccordionItem (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Accordion/AccordionItem.js:37:5)
        at div
        at div
        at ul
        at AccordionProvider (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Accordion/AccordionProvider.js:23:5)
        at Accordion (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Accordion/Accordion.js:27:5)
        at div
        at EditorForm (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx:49:21)
        at ConnectFunction (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-redux/lib/components/connectAdvanced.js:235:41)
        at div
        at aside
        at Provider (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-redux/lib/components/Provider.js:21:20)
        at PropertiesMain (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx:48:21)
        at injectIntl(PropertiesMain)
        at CommonProperties (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/common-properties.jsx:31:21)
        at injectIntl(CommonProperties)
        at div
        at RootFinder (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@wojtekmaj/enzyme-adapter-utils/src/RootFinder.jsx:4:32)
        at IntlProvider (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-intl/src/components/provider.js:33:47)
        at WrapperComponent (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@wojtekmaj/enzyme-adapter-utils/src/createMountWrapper.jsx:46:26)

Printing the ID that Tabs is looking for:

    function handler() {
      console.log("!!! id=" + id);
      const elementTabId = document.getElementById(`${id}`);
      console.log("!!! elementTabId=" + elementTabId);
      const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
      isEllipsisActive(newElement);
    }

returns

id=ccs-:r13:-tab-0
elementTabId=null

caritaou · 2024-07-10T22:28:11Z

All the failed tests are being rendered within a right flyout. If we change it to { rightFlyout: false, containerType: "Tearsheet"} then the tests pass

caritaou · 2024-07-10T22:29:27Z

After adding if statement around Tabs to check if element exists, all unit tests passed
node_modules/@carbon/react/lib/components/Tabs/Tabs.js

Opened Carbon issue to get fixed: carbon-design-system/carbon#16944

Signed-off-by: Carita Ou <[email protected]>

caritaou · 2024-07-15T17:25:54Z

Carbon issue carbon-design-system/carbon#16948

Signed-off-by: Carita Ou <[email protected]>

Signed-off-by: Carita Ou <[email protected]> Signed-off-by: Matt Howard <[email protected]>

caritaou added the Properties label Jul 10, 2024

caritaou self-assigned this Jul 10, 2024

caritaou mentioned this issue Jul 10, 2024

[Bug]: Unit tests around Tabs are failing with Cannot read properties of undefined (reading 'offsetHeight')] carbon-design-system/carbon#16944

Closed

2 tasks

caritaou added a commit to caritaou/canvas that referenced this issue Jul 11, 2024

elyra-ai#2057 Workaround unit test failures related to Carbon Tabs

aa641ee

Signed-off-by: Carita Ou <[email protected]>

caritaou mentioned this issue Jul 11, 2024

#2057 Workaround unit test failures related to Carbon Tabs #2058

Closed

caritaou added a commit to caritaou/canvas that referenced this issue Jul 12, 2024

elyra-ai#2057 Downgrade Carbon

d966566

Signed-off-by: Carita Ou <[email protected]>

caritaou mentioned this issue Jul 12, 2024

#2057 Downgrade Carbon #2059

Merged

caritaou added a commit to caritaou/canvas that referenced this issue Jul 12, 2024

elyra-ai#2057 Downgrade Carbon

7d216a6

Signed-off-by: Carita Ou <[email protected]>

tomlyn pushed a commit that referenced this issue Jul 16, 2024

#2057 Downgrade Carbon (#2059)

9a4b48d

Signed-off-by: Carita Ou <[email protected]>

caritaou closed this as completed Jul 16, 2024

matthoward366 pushed a commit to matthoward366/canvas that referenced this issue Aug 5, 2024

elyra-ai#2057 Downgrade Carbon (elyra-ai#2059)

c707800

Signed-off-by: Carita Ou <[email protected]> Signed-off-by: Matt Howard <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jest test not running successfully #2057

Jest test not running successfully #2057

caritaou commented Jul 10, 2024

caritaou commented Jul 10, 2024

caritaou commented Jul 10, 2024

caritaou commented Jul 10, 2024

caritaou commented Jul 15, 2024

Jest test not running successfully #2057

Jest test not running successfully #2057

Comments

caritaou commented Jul 10, 2024

caritaou commented Jul 10, 2024

caritaou commented Jul 10, 2024

caritaou commented Jul 10, 2024

caritaou commented Jul 15, 2024