@instructure/ui-modal 9.2.1-snapshot-0 → 9.2.1-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.2.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-0) (2024-07-09)
+## [9.2.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-2) (2024-07-10)
 
 **Note:** Version bump only for package @instructure/ui-modal
 

package/README.md

@@ -4,8 +4,8 @@ category: packages
 
 ## ui-modal
 
-[![npm][npm]][npm-url] 
-[![MIT License][license-badge]][license] 
+[![npm][npm]][npm-url]
+[![MIT License][license-badge]][license]
 [![Code of Conduct][coc-badge]][coc]
 
 A component for displaying content in a dialog overlay.

package/es/Modal/ModalBody/__new-tests__/ModalBody.test.js

@@ -25,6 +25,7 @@ var _ModalBody, _ModalBody2, _ModalBody3;
 
 import React from 'react';
 import { render } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { color2hex } from '@instructure/ui-color-utils';
 import { canvas } from '@instructure/ui-themes';
@@ -76,7 +77,7 @@ describe('<ModalBody />', () => {
     allProps.forEach(prop => {
       if (prop in allowedProps) {
         it(`should allow the '${prop}' prop`, () => {
-          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
           const props = {
             [prop]: allowedProps[prop]
           };
@@ -87,7 +88,7 @@ describe('<ModalBody />', () => {
       } else {
         it(`should NOT allow the '${prop}' prop`, () => {
           const expectedErrorMessage = `prop '${prop}' is not allowed.`;
-          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
           const props = {
             [prop]: 'NOT_ALLOWED_VALUE'
           };

package/es/Modal/__new-tests__/Modal.test.js

@@ -27,13 +27,32 @@ var _Modal, _Modal2, _Modal$Body, _Modal3, _Modal4, _Modal5, _Modal$Body2, _Moda
 
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { Modal } from '../index';
 describe('<Modal />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  const originalScroll = window.scroll;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
   afterEach(() => {
-    jest.clearAllMocks();
-    jest.restoreAllMocks();
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  beforeAll(() => {
+    // Mocking window.scroll to prevent test output pollution
+    Object.defineProperty(window, 'scroll', {
+      value: vi.fn(),
+      writable: true
+    });
+  });
+  afterAll(() => {
+    window.scroll = originalScroll;
   });
   it('should render nothing and have a node with no parent when closed', () => {
     const _render = render(_Modal || (_Modal = /*#__PURE__*/React.createElement(Modal, {
@@ -139,9 +158,9 @@ describe('<Modal />', () => {
     expect(dialog).toHaveAttribute('aria-label', 'Modal Dialog');
   });
   it('should use transition', async () => {
-    const onEnter = jest.fn();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
+    const onEnter = vi.fn();
+    const onEntering = vi.fn();
+    const onEntered = vi.fn();
     const _render8 = render( /*#__PURE__*/React.createElement(Modal, {
         open: true,
         onEnter: onEnter,
@@ -161,7 +180,7 @@ describe('<Modal />', () => {
     });
   });
   it('should support onOpen prop', async () => {
-    const onOpen = jest.fn();
+    const onOpen = vi.fn();
     const _render9 = render( /*#__PURE__*/React.createElement(Modal, {
         open: true,
         onOpen: onOpen,
@@ -176,7 +195,7 @@ describe('<Modal />', () => {
     });
   });
   it('should support onClose prop', async () => {
-    const onClose = jest.fn();
+    const onClose = vi.fn();
     const _render10 = render( /*#__PURE__*/React.createElement(Modal, {
         open: true,
         onClose: onClose,
@@ -198,7 +217,7 @@ describe('<Modal />', () => {
     });
   });
   it('should dismiss when overlay clicked by default', async () => {
-    const onDismiss = jest.fn();
+    const onDismiss = vi.fn();
     const _render11 = render( /*#__PURE__*/React.createElement(Modal, {
         open: true,
         onDismiss: onDismiss,
@@ -214,8 +233,8 @@ describe('<Modal />', () => {
     });
   });
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
-    const onDismiss = jest.fn();
-    const onClickOuter = jest.fn();
+    const onDismiss = vi.fn();
+    const onClickOuter = vi.fn();
     const _render12 = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
         "data-testid": "outer-element",
         onClick: onClickOuter
@@ -249,7 +268,6 @@ describe('<Modal />', () => {
   });
   describe('children validation', () => {
     it('should pass validation when children are valid', async () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const _render14 = render(_Modal7 || (_Modal7 = /*#__PURE__*/React.createElement(Modal, {
           open: true,
           label: "Modal Dialog",
@@ -258,11 +276,9 @@ describe('<Modal />', () => {
         findByRole = _render14.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
-      expect(consoleErrorSpy).not.toHaveBeenCalled();
-      consoleErrorSpy.mockRestore();
+      expect(consoleErrorMock).not.toHaveBeenCalled();
     });
     it('should not pass validation when children are invalid', async () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const _render15 = render(_Modal8 || (_Modal8 = /*#__PURE__*/React.createElement(Modal, {
           open: true,
           label: "Modal Dialog",
@@ -272,8 +288,7 @@ describe('<Modal />', () => {
       const dialog = await findByRole('dialog');
       const expectedErrorMessage = 'Expected children of Modal in one of the following formats:';
       expect(dialog).toBeInTheDocument();
-      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleErrorSpy.mockRestore();
+      expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should pass inverse variant to children when set', async () => {
       let headerRef = null;

package/lib/Modal/ModalBody/__new-tests__/ModalBody.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _uiColorUtils = require("@instructure/ui-color-utils");
 var _uiThemes = require("@instructure/ui-themes");
@@ -78,7 +79,7 @@ describe('<ModalBody />', () => {
     allProps.forEach(prop => {
       if (prop in allowedProps) {
         it(`should allow the '${prop}' prop`, () => {
-          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const consoleErrorSpy = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
           const props = {
             [prop]: allowedProps[prop]
           };
@@ -89,7 +90,7 @@ describe('<ModalBody />', () => {
       } else {
         it(`should NOT allow the '${prop}' prop`, () => {
           const expectedErrorMessage = `prop '${prop}' is not allowed.`;
-          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const consoleErrorSpy = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
           const props = {
             [prop]: 'NOT_ALLOWED_VALUE'
           };

package/lib/Modal/__new-tests__/Modal.test.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
@@ -33,9 +34,27 @@ var _Modal, _Modal2, _Modal$Body, _Modal3, _Modal4, _Modal5, _Modal$Body2, _Moda
  * SOFTWARE.
  */
 describe('<Modal />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  const originalScroll = window.scroll;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
   afterEach(() => {
-    jest.clearAllMocks();
-    jest.restoreAllMocks();
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  beforeAll(() => {
+    // Mocking window.scroll to prevent test output pollution
+    Object.defineProperty(window, 'scroll', {
+      value: _vitest.vi.fn(),
+      writable: true
+    });
+  });
+  afterAll(() => {
+    window.scroll = originalScroll;
   });
   it('should render nothing and have a node with no parent when closed', () => {
     const _render = (0, _react2.render)(_Modal || (_Modal = /*#__PURE__*/_react.default.createElement(_index.Modal, {
@@ -141,9 +160,9 @@ describe('<Modal />', () => {
     expect(dialog).toHaveAttribute('aria-label', 'Modal Dialog');
   });
   it('should use transition', async () => {
-    const onEnter = jest.fn();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
+    const onEnter = _vitest.vi.fn();
+    const onEntering = _vitest.vi.fn();
+    const onEntered = _vitest.vi.fn();
     const _render8 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Modal, {
         open: true,
         onEnter: onEnter,
@@ -163,7 +182,7 @@ describe('<Modal />', () => {
     });
   });
   it('should support onOpen prop', async () => {
-    const onOpen = jest.fn();
+    const onOpen = _vitest.vi.fn();
     const _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Modal, {
         open: true,
         onOpen: onOpen,
@@ -178,7 +197,7 @@ describe('<Modal />', () => {
     });
   });
   it('should support onClose prop', async () => {
-    const onClose = jest.fn();
+    const onClose = _vitest.vi.fn();
     const _render10 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Modal, {
         open: true,
         onClose: onClose,
@@ -200,7 +219,7 @@ describe('<Modal />', () => {
     });
   });
   it('should dismiss when overlay clicked by default', async () => {
-    const onDismiss = jest.fn();
+    const onDismiss = _vitest.vi.fn();
     const _render11 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Modal, {
         open: true,
         onDismiss: onDismiss,
@@ -216,8 +235,8 @@ describe('<Modal />', () => {
     });
   });
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
-    const onDismiss = jest.fn();
-    const onClickOuter = jest.fn();
+    const onDismiss = _vitest.vi.fn();
+    const onClickOuter = _vitest.vi.fn();
     const _render12 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
         "data-testid": "outer-element",
         onClick: onClickOuter
@@ -251,7 +270,6 @@ describe('<Modal />', () => {
   });
   describe('children validation', () => {
     it('should pass validation when children are valid', async () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const _render14 = (0, _react2.render)(_Modal7 || (_Modal7 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
           open: true,
           label: "Modal Dialog",
@@ -260,11 +278,9 @@ describe('<Modal />', () => {
         findByRole = _render14.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
-      expect(consoleErrorSpy).not.toHaveBeenCalled();
-      consoleErrorSpy.mockRestore();
+      expect(consoleErrorMock).not.toHaveBeenCalled();
     });
     it('should not pass validation when children are invalid', async () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const _render15 = (0, _react2.render)(_Modal8 || (_Modal8 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
           open: true,
           label: "Modal Dialog",
@@ -274,8 +290,7 @@ describe('<Modal />', () => {
       const dialog = await findByRole('dialog');
       const expectedErrorMessage = 'Expected children of Modal in one of the following formats:';
       expect(dialog).toBeInTheDocument();
-      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleErrorSpy.mockRestore();
+      expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should pass inverse variant to children when set', async () => {
       let headerRef = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "9.2.1-snapshot-0",
+  "version": "9.2.1-snapshot-2",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,33 +24,34 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.2.1-snapshot-0",
-    "@instructure/emotion": "9.2.1-snapshot-0",
-    "@instructure/shared-types": "9.2.1-snapshot-0",
-    "@instructure/ui-buttons": "9.2.1-snapshot-0",
-    "@instructure/ui-dialog": "9.2.1-snapshot-0",
-    "@instructure/ui-dom-utils": "9.2.1-snapshot-0",
-    "@instructure/ui-motion": "9.2.1-snapshot-0",
-    "@instructure/ui-overlays": "9.2.1-snapshot-0",
-    "@instructure/ui-portal": "9.2.1-snapshot-0",
-    "@instructure/ui-prop-types": "9.2.1-snapshot-0",
-    "@instructure/ui-react-utils": "9.2.1-snapshot-0",
-    "@instructure/ui-testable": "9.2.1-snapshot-0",
-    "@instructure/ui-utils": "9.2.1-snapshot-0",
-    "@instructure/ui-view": "9.2.1-snapshot-0",
+    "@instructure/console": "9.2.1-snapshot-2",
+    "@instructure/emotion": "9.2.1-snapshot-2",
+    "@instructure/shared-types": "9.2.1-snapshot-2",
+    "@instructure/ui-buttons": "9.2.1-snapshot-2",
+    "@instructure/ui-dialog": "9.2.1-snapshot-2",
+    "@instructure/ui-dom-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-motion": "9.2.1-snapshot-2",
+    "@instructure/ui-overlays": "9.2.1-snapshot-2",
+    "@instructure/ui-portal": "9.2.1-snapshot-2",
+    "@instructure/ui-prop-types": "9.2.1-snapshot-2",
+    "@instructure/ui-react-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-testable": "9.2.1-snapshot-2",
+    "@instructure/ui-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-view": "9.2.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.2.1-snapshot-0",
-    "@instructure/ui-color-utils": "9.2.1-snapshot-0",
-    "@instructure/ui-position": "9.2.1-snapshot-0",
-    "@instructure/ui-themes": "9.2.1-snapshot-0",
+    "@instructure/ui-babel-preset": "9.2.1-snapshot-2",
+    "@instructure/ui-color-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-position": "9.2.1-snapshot-2",
+    "@instructure/ui-themes": "9.2.1-snapshot-2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2"
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "publishConfig": {
     "access": "public"

package/src/Modal/ModalBody/__new-tests__/ModalBody.test.tsx

@@ -25,6 +25,7 @@
 import React from 'react'
 
 import { render } from '@testing-library/react'
+import { vi } from 'vitest'
 import '@testing-library/jest-dom'
 
 import { color2hex } from '@instructure/ui-color-utils'
@@ -85,7 +86,7 @@ describe('<ModalBody />', () => {
     allProps.forEach((prop) => {
       if (prop in allowedProps) {
         it(`should allow the '${prop}' prop`, () => {
-          const consoleErrorSpy = jest
+          const consoleErrorSpy = vi
             .spyOn(console, 'error')
             .mockImplementation(() => {})
           const props = { [prop]: allowedProps[prop] }
@@ -98,7 +99,7 @@ describe('<ModalBody />', () => {
       } else {
         it(`should NOT allow the '${prop}' prop`, () => {
           const expectedErrorMessage = `prop '${prop}' is not allowed.`
-          const consoleErrorSpy = jest
+          const consoleErrorSpy = vi
             .spyOn(console, 'error')
             .mockImplementation(() => {})
 

package/src/Modal/__new-tests__/Modal.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { render, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -31,9 +32,35 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from '../index'
 import type { ModalProps } from '../props'
 
 describe('<Modal />', () => {
+  let consoleWarningMock: ReturnType<typeof vi.spyOn>
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
+  const originalScroll = window.scroll
+
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as any
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as any
+  })
+
   afterEach(() => {
-    jest.clearAllMocks()
-    jest.restoreAllMocks()
+    consoleWarningMock.mockRestore()
+    consoleErrorMock.mockRestore()
+  })
+
+  beforeAll(() => {
+    // Mocking window.scroll to prevent test output pollution
+    Object.defineProperty(window, 'scroll', {
+      value: vi.fn(),
+      writable: true
+    })
+  })
+
+  afterAll(() => {
+    window.scroll = originalScroll
   })
 
   it('should render nothing and have a node with no parent when closed', () => {
@@ -154,9 +181,9 @@ describe('<Modal />', () => {
   })
 
   it('should use transition', async () => {
-    const onEnter = jest.fn()
-    const onEntering = jest.fn()
-    const onEntered = jest.fn()
+    const onEnter = vi.fn()
+    const onEntering = vi.fn()
+    const onEntered = vi.fn()
 
     const { findByRole } = render(
       <Modal
@@ -183,7 +210,7 @@ describe('<Modal />', () => {
   })
 
   it('should support onOpen prop', async () => {
-    const onOpen = jest.fn()
+    const onOpen = vi.fn()
     const { findByRole } = render(
       <Modal
         open
@@ -204,7 +231,7 @@ describe('<Modal />', () => {
   })
 
   it('should support onClose prop', async () => {
-    const onClose = jest.fn()
+    const onClose = vi.fn()
 
     const { findByRole, rerender } = render(
       <Modal
@@ -237,7 +264,7 @@ describe('<Modal />', () => {
   })
 
   it('should dismiss when overlay clicked by default', async () => {
-    const onDismiss = jest.fn()
+    const onDismiss = vi.fn()
     const { findByText } = render(
       <Modal
         open
@@ -259,8 +286,8 @@ describe('<Modal />', () => {
   })
 
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
-    const onDismiss = jest.fn()
-    const onClickOuter = jest.fn()
+    const onDismiss = vi.fn()
+    const onClickOuter = vi.fn()
 
     const { findByRole, getByTestId } = render(
       <div>
@@ -308,10 +335,6 @@ describe('<Modal />', () => {
 
   describe('children validation', () => {
     it('should pass validation when children are valid', async () => {
-      const consoleErrorSpy = jest
-        .spyOn(console, 'error')
-        .mockImplementation(() => {})
-
       const { findByRole } = render(
         <Modal open label="Modal Dialog" shouldReturnFocus={false}>
           <Modal.Header>Hello World</Modal.Header>
@@ -324,16 +347,10 @@ describe('<Modal />', () => {
       const dialog = await findByRole('dialog')
 
       expect(dialog).toBeInTheDocument()
-      expect(consoleErrorSpy).not.toHaveBeenCalled()
-
-      consoleErrorSpy.mockRestore()
+      expect(consoleErrorMock).not.toHaveBeenCalled()
     })
 
     it('should not pass validation when children are invalid', async () => {
-      const consoleErrorSpy = jest
-        .spyOn(console, 'error')
-        .mockImplementation(() => {})
-
       const { findByRole } = render(
         <Modal open label="Modal Dialog" shouldReturnFocus={false}>
           <Modal.Body>Foo Bar Baz</Modal.Body>
@@ -348,14 +365,12 @@ describe('<Modal />', () => {
         'Expected children of Modal in one of the following formats:'
 
       expect(dialog).toBeInTheDocument()
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
+      expect(consoleErrorMock).toHaveBeenCalledWith(
         expect.any(String),
         expect.any(String),
         expect.stringContaining(expectedErrorMessage),
         expect.any(String)
       )
-
-      consoleErrorSpy.mockRestore()
     })
 
     it('should pass inverse variant to children when set', async () => {