@enact/limestone 1.3.0

package/ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js

@@ -0,0 +1,621 @@
+"use strict";
+
+var _pointer = require("@enact/spotlight/src/pointer");
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _ContextualPopupDecorator = require("../ContextualPopupDecorator");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var ContextualButton = (0, _ContextualPopupDecorator.ContextualPopupDecorator)(_Button["default"]);
+var keyDown = function keyDown(keyCode) {
+  return function (picker) {
+    return _react.fireEvent.keyDown(picker, {
+      keyCode: keyCode
+    });
+  };
+};
+var leftKeyDown = keyDown(37);
+describe('ContextualPopupDecorator Specs', function () {
+  beforeEach(function () {
+    global.Element.prototype.getBoundingClientRect = jest.fn(function () {
+      return {
+        width: 1800,
+        height: 1000,
+        top: 500,
+        left: 500,
+        bottom: 0,
+        right: 0
+      };
+    });
+  });
+  test('should emit onOpen event with type when opening', function () {
+    var handleOpen = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        onOpen: handleOpen,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var expected = 1;
+    var expectedType = {
+      type: 'onOpen'
+    };
+    var actual = handleOpen.mock.calls.length && handleOpen.mock.calls[0][0];
+    expect(handleOpen).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  });
+  test('should emit onClose event with type when clicking on contextual button', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualButton = _react.screen.getByRole('button');
+    yield user.click(contextualButton);
+    var expected = 1;
+    var expectedType = {
+      type: 'onClose'
+    };
+    var actual = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
+    expect(handleClose).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  }));
+  test('should render component into FloatingLayer if open', function () {
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = message;
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveTextContent(expected);
+  });
+  test('should not render into FloatingLayer if not open', function () {
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var popup = _react.screen.queryByText(message);
+    expect(popup).toBeNull();
+  });
+  test('should not close popup when clicking outside if noAutoDismiss is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      "data-testid": "outsideArea",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        noAutoDismiss: true,
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var outsideArea = _react.screen.getByTestId('outsideArea');
+    yield user.click(outsideArea);
+    expect(handleClose).not.toHaveBeenCalled();
+  }));
+  test('should have \'below\' className when direction is set to \'below\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "below",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'below';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'below center\' className when direction is set to \'below center\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "below center",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'below center';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'below left\' className when direction is set to \'below left\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "below left",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'below left';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'below right\' className when direction is set to \'below right\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "below right",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'below right';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'right bottom\' className when direction is set to \'right bottom\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "right bottom",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'right bottom';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'right middle\' className when direction is set to \'right middle\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "right middle",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'right middle';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'right top\' className when direction is set to \'right top\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "right top",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'right top';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'above\' className when direction is set to \'above\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "above",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'above';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'above center\' className when direction is set to \'above center\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "above center",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'above center';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'above left\' className when direction is set to \'above left\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "above left",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'above left';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'above right\' className when direction is set to \'above right\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "above right",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'above right';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'left bottom\' className when direction is set to \'left bottom\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "left bottom",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'left bottom';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'left middle\' className when direction is set to \'left middle\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "left middle",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'left middle';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have \'left top\' className when direction is set to \'left top\'', function () {
+    var handleClose = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var message = 'goodbye';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        direction: "left top",
+        onClose: handleClose,
+        open: true,
+        popupComponent: function popupComponent() {
+          return message;
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualPopup = _react.screen.getByRole('alert');
+    var expected = 'left top';
+    var actual = contextualPopup.children.item(0);
+    expect(actual).toHaveClass(expected);
+  });
+  test('should set pointerMode to be false when directional key is pressed', function () {
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        open: true,
+        popupComponent: function popupComponent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "first"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "second"
+            })]
+          });
+        },
+        children: "Hello"
+      })
+    }));
+    var contextualButton = _react.screen.getByRole('alert');
+    leftKeyDown(contextualButton);
+    var expected = false;
+    var pointerMode = (0, _pointer.getPointerMode)();
+    expect(pointerMode).toBe(expected);
+  });
+  test('should close popup if prop \'open\' is omitted on rerender', function () {
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+          open: true,
+          popupComponent: function popupComponent() {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                children: "first"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                children: "second"
+              })]
+            });
+          },
+          children: "Hello"
+        })
+      })),
+      rerender = _render.rerender;
+    var firstRender = _react.screen.getAllByRole('button').length;
+    var expectedFirst = 3;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        popupComponent: function popupComponent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "first"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "second"
+            })]
+          });
+        },
+        children: "Hello"
+      })
+    }));
+    var secondRender = _react.screen.getAllByRole('button').length;
+    var expectedSecond = 1;
+    expect(firstRender).toBe(expectedFirst);
+    expect(secondRender).toBe(expectedSecond);
+  });
+  test('should open popup if prop \'open\' is added on rerender', function () {
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+          popupComponent: function popupComponent() {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                children: "first"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                children: "second"
+              })]
+            });
+          },
+          children: "Hello"
+        })
+      })),
+      rerender = _render2.rerender;
+    var firstRender = _react.screen.getAllByRole('button').length;
+    var expectedFirst = 1;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        open: true,
+        popupComponent: function popupComponent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "first"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "second"
+            })]
+          });
+        },
+        children: "Hello"
+      })
+    }));
+    var secondRender = _react.screen.getAllByRole('button').length;
+    var expectedSecond = 3;
+    expect(firstRender).toBe(expectedFirst);
+    expect(secondRender).toBe(expectedSecond);
+  });
+  test('should capture \'onKeyDown\' event from outside of popup', function () {
+    var handleOnKeyDown = jest.fn();
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        onKeyDown: handleOnKeyDown,
+        open: true,
+        popupComponent: function popupComponent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "first"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "second"
+            })]
+          });
+        },
+        children: "Hello"
+      })
+    }));
+    var button = _react.screen.getAllByRole('button')[0];
+    leftKeyDown(button);
+    expect(handleOnKeyDown).toHaveBeenCalled();
+  });
+  test('should render floatingLayer according to prop \'scrimType\'', function () {
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+          scrimType: "holepunch",
+          open: true,
+          popupComponent: function popupComponent() {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                children: "Button"
+              })
+            });
+          },
+          children: "Hello"
+        })
+      })),
+      rerender = _render3.rerender;
+    var scrimDivFirst = _react.screen.getByRole('alert').previousElementSibling;
+    var expectedFirst = 'holePunchScrim';
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        scrimType: "transparent",
+        open: true,
+        popupComponent: function popupComponent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "Button"
+            })
+          });
+        },
+        children: "Hello"
+      })
+    }));
+    var scrimDivSecond = _react.screen.getByRole('alert').parentElement.previousElementSibling;
+    var expectedSecond = 'transparent';
+    expect(scrimDivFirst).toHaveClass(expectedFirst);
+    expect(scrimDivSecond).toHaveClass(expectedSecond);
+  });
+  test('should create and observe with `ResizeObserver` when the popup opened and disconnect when the popup closed', function () {
+    var originalObserver = global.ResizeObserver;
+    var MockObserverInstance = {
+      observe: jest.fn(),
+      disconnect: jest.fn()
+    };
+    global.ResizeObserver = jest.fn().mockImplementation(function () {
+      return MockObserverInstance;
+    });
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+          "data-testid": "contextualButton",
+          open: true,
+          popupComponent: function popupComponent() {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                children: "Button"
+              })
+            });
+          },
+          children: "Hello"
+        })
+      })),
+      rerender = _render4.rerender;
+    var contextualButton = _react.screen.getByTestId('contextualButton');
+    expect(contextualButton).toBeInTheDocument();
+    expect(MockObserverInstance.observe).toHaveBeenCalled();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        "data-testid": "contextualButton",
+        popupComponent: function popupComponent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              children: "Button"
+            })
+          });
+        },
+        children: "Hello"
+      })
+    }));
+    expect(MockObserverInstance.disconnect).toHaveBeenCalled();
+    global.ResizeObserver = originalObserver;
+  });
+});