@instructure/ui-alerts 10.2.1 → 10.2.2-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.2.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-1) (2024-09-03)
+
+**Note:** Version bump only for package @instructure/ui-alerts
+
+
+
+
+
 ## [10.2.1](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1) (2024-08-30)
 
 **Note:** Version bump only for package @instructure/ui-alerts

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

@@ -0,0 +1,213 @@
+var _Alert, _Alert2, _div, _Alert4, _Alert5;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { Alert } from '../index';
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import AlertExamples from '../__examples__/Alert.examples';
+describe('<Alert />', () => {
+  let srdiv;
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(async () => {
+    // Mocking console to prevent test output pollution and expect
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+    srdiv = document.createElement('div');
+    srdiv.id = '_alertLiveRegion';
+    srdiv.setAttribute('role', 'alert');
+    srdiv.setAttribute('aria-live', 'assertive');
+    srdiv.setAttribute('aria-relevant', 'additions text');
+    srdiv.setAttribute('aria-atomic', 'false');
+    document.body.appendChild(srdiv);
+  });
+  afterEach(async () => {
+    var _srdiv, _srdiv$parentNode;
+    (_srdiv = srdiv) === null || _srdiv === void 0 ? void 0 : (_srdiv$parentNode = _srdiv.parentNode) === null || _srdiv$parentNode === void 0 ? void 0 : _srdiv$parentNode.removeChild(srdiv);
+    srdiv = null;
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    render(_Alert || (_Alert = /*#__PURE__*/React.createElement(Alert, {
+      variant: "success"
+    }, "Success: Sample alert text.")));
+    const text = screen.getByText('Success: Sample alert text.');
+    expect(text).toBeInTheDocument();
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(Alert, AlertExamples);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render = render(component.content),
+          container = _render.container;
+        const axeCheck = await runAxeCheck(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
+  it('should not render the Close button when `renderCloseButtonLabel` is not provided', async () => {
+    render(_Alert2 || (_Alert2 = /*#__PURE__*/React.createElement(Alert, {
+      variant: "success"
+    }, "Success: Sample alert text.")));
+    const closeButton = screen.queryByRole('button');
+    expect(closeButton).not.toBeInTheDocument();
+  });
+  it('should call `onDismiss` when the close button is clicked with renderCloseButtonLabel', async () => {
+    const onDismiss = vi.fn();
+    render( /*#__PURE__*/React.createElement(Alert, {
+      variant: "success",
+      renderCloseButtonLabel: _div || (_div = /*#__PURE__*/React.createElement("div", null, "Close")),
+      onDismiss: onDismiss
+    }, "Success: Sample alert text."));
+    const closeButton = screen.getByRole('button');
+    userEvent.click(closeButton);
+    await waitFor(() => {
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+  const iconComponentsVariants = {
+    error: 'IconNo',
+    info: 'IconInfoBorderless',
+    success: 'IconCheckMark',
+    warning: 'IconWarningBorderless'
+  };
+  Object.entries(iconComponentsVariants).forEach(([variant, iconComponent]) => {
+    var _Alert3;
+    it(`"${variant}" variant should have icon "${iconComponent}".`, async () => {
+      const _render2 = render(_Alert3 || (_Alert3 = /*#__PURE__*/React.createElement(Alert, {
+          variant: variant,
+          transition: "none"
+        }, "Success: Sample alert text."))),
+        container = _render2.container;
+      const icon = container.querySelector('svg[class$="-svgIcon"]');
+      expect(icon).toHaveAttribute('name', iconComponent);
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = render(_Alert4 || (_Alert4 = /*#__PURE__*/React.createElement(Alert, {
+        variant: "success",
+        transition: "none"
+      }, "Success: Sample alert text."))),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should add alert text to aria live region, when present', async () => {
+    const liveRegion = document.getElementById('_alertLiveRegion');
+    render( /*#__PURE__*/React.createElement(Alert, {
+      variant: "success",
+      transition: "none",
+      liveRegion: () => liveRegion,
+      liveRegionPoliteness: "polite"
+    }, "Success: Sample alert text."));
+    expect(liveRegion).toHaveTextContent('Success: Sample alert text.');
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+  });
+  describe('with `screenReaderOnly', () => {
+    it('should not render anything when using `liveRegion`', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      const _render4 = render( /*#__PURE__*/React.createElement(Alert, {
+          variant: "success",
+          liveRegion: () => liveRegion,
+          screenReaderOnly: true
+        }, "Success: Sample alert text. asdsfds")),
+        container = _render4.container;
+      expect(container.children.length).toBe(0);
+      expect(liveRegion.children.length).toBe(1);
+    });
+    it('should warn if `liveRegion` is not defined', async () => {
+      const consoleWarningSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const warning = "Warning: [Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.";
+      render(_Alert5 || (_Alert5 = /*#__PURE__*/React.createElement(Alert, {
+        variant: "success",
+        screenReaderOnly: true
+      }, "Success: Sample alert text.")));
+      await waitFor(() => {
+        expect(consoleWarningSpy.mock.calls[0][0]).toEqual(expect.stringContaining(warning));
+      });
+    });
+    it('should set aria-atomic to the aria live region when isLiveRegionAtomic is present', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      render( /*#__PURE__*/React.createElement(Alert, {
+        variant: "success",
+        transition: "none",
+        liveRegion: () => liveRegion,
+        liveRegionPoliteness: "polite",
+        isLiveRegionAtomic: true
+      }, "Success: Sample alert text."));
+      expect(liveRegion).toHaveTextContent('Success: Sample alert text.');
+      expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+    });
+    it('should close when told to, with transition', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      const _render5 = render( /*#__PURE__*/React.createElement(Alert, {
+          variant: "success",
+          liveRegion: () => liveRegion
+        }, "Success: Sample alert text.")),
+        rerender = _render5.rerender;
+      expect(liveRegion.children.length).toBe(1);
+
+      //set open to false
+      rerender( /*#__PURE__*/React.createElement(Alert, {
+        variant: "success",
+        open: false,
+        liveRegion: () => liveRegion
+      }, "Success: Sample alert text."));
+      await waitFor(() => {
+        expect(liveRegion.children.length).toBe(0);
+      });
+    });
+    it('should close when told to, without transition', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      const _render6 = render( /*#__PURE__*/React.createElement(Alert, {
+          variant: "success",
+          transition: "none",
+          liveRegion: () => liveRegion
+        }, "Success: Sample alert text.")),
+        rerender = _render6.rerender,
+        container = _render6.container;
+      expect(liveRegion.children.length).toBe(1);
+
+      //set open to false
+      rerender( /*#__PURE__*/React.createElement(Alert, {
+        open: false,
+        variant: "success",
+        transition: "none",
+        liveRegion: () => liveRegion
+      }, "Success: Sample alert text."));
+      await waitFor(() => {
+        expect(container).not.toHaveTextContent('Success: Sample alert text.');
+        expect(liveRegion.children.length).toBe(0);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _index = require("../index");
+var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
+var _Alert6 = _interopRequireDefault(require("../__examples__/Alert.examples"));
+var _Alert, _Alert2, _div, _Alert4, _Alert5;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// eslint-disable-next-line no-restricted-imports
+describe('<Alert />', () => {
+  let srdiv;
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(async () => {
+    // Mocking console to prevent test output pollution and expect
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+    srdiv = document.createElement('div');
+    srdiv.id = '_alertLiveRegion';
+    srdiv.setAttribute('role', 'alert');
+    srdiv.setAttribute('aria-live', 'assertive');
+    srdiv.setAttribute('aria-relevant', 'additions text');
+    srdiv.setAttribute('aria-atomic', 'false');
+    document.body.appendChild(srdiv);
+  });
+  afterEach(async () => {
+    var _srdiv, _srdiv$parentNode;
+    (_srdiv = srdiv) === null || _srdiv === void 0 ? void 0 : (_srdiv$parentNode = _srdiv.parentNode) === null || _srdiv$parentNode === void 0 ? void 0 : _srdiv$parentNode.removeChild(srdiv);
+    srdiv = null;
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    (0, _react2.render)(_Alert || (_Alert = /*#__PURE__*/_react.default.createElement(_index.Alert, {
+      variant: "success"
+    }, "Success: Sample alert text.")));
+    const text = _react2.screen.getByText('Success: Sample alert text.');
+    expect(text).toBeInTheDocument();
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.Alert, _Alert6.default);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render = (0, _react2.render)(component.content),
+          container = _render.container;
+        const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
+  it('should not render the Close button when `renderCloseButtonLabel` is not provided', async () => {
+    (0, _react2.render)(_Alert2 || (_Alert2 = /*#__PURE__*/_react.default.createElement(_index.Alert, {
+      variant: "success"
+    }, "Success: Sample alert text.")));
+    const closeButton = _react2.screen.queryByRole('button');
+    expect(closeButton).not.toBeInTheDocument();
+  });
+  it('should call `onDismiss` when the close button is clicked with renderCloseButtonLabel', async () => {
+    const onDismiss = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+      variant: "success",
+      renderCloseButtonLabel: _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, "Close")),
+      onDismiss: onDismiss
+    }, "Success: Sample alert text."));
+    const closeButton = _react2.screen.getByRole('button');
+    _userEvent.default.click(closeButton);
+    await (0, _react2.waitFor)(() => {
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+  const iconComponentsVariants = {
+    error: 'IconNo',
+    info: 'IconInfoBorderless',
+    success: 'IconCheckMark',
+    warning: 'IconWarningBorderless'
+  };
+  Object.entries(iconComponentsVariants).forEach(([variant, iconComponent]) => {
+    var _Alert3;
+    it(`"${variant}" variant should have icon "${iconComponent}".`, async () => {
+      const _render2 = (0, _react2.render)(_Alert3 || (_Alert3 = /*#__PURE__*/_react.default.createElement(_index.Alert, {
+          variant: variant,
+          transition: "none"
+        }, "Success: Sample alert text."))),
+        container = _render2.container;
+      const icon = container.querySelector('svg[class$="-svgIcon"]');
+      expect(icon).toHaveAttribute('name', iconComponent);
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = (0, _react2.render)(_Alert4 || (_Alert4 = /*#__PURE__*/_react.default.createElement(_index.Alert, {
+        variant: "success",
+        transition: "none"
+      }, "Success: Sample alert text."))),
+      container = _render3.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should add alert text to aria live region, when present', async () => {
+    const liveRegion = document.getElementById('_alertLiveRegion');
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+      variant: "success",
+      transition: "none",
+      liveRegion: () => liveRegion,
+      liveRegionPoliteness: "polite"
+    }, "Success: Sample alert text."));
+    expect(liveRegion).toHaveTextContent('Success: Sample alert text.');
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+  });
+  describe('with `screenReaderOnly', () => {
+    it('should not render anything when using `liveRegion`', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+          variant: "success",
+          liveRegion: () => liveRegion,
+          screenReaderOnly: true
+        }, "Success: Sample alert text. asdsfds")),
+        container = _render4.container;
+      expect(container.children.length).toBe(0);
+      expect(liveRegion.children.length).toBe(1);
+    });
+    it('should warn if `liveRegion` is not defined', async () => {
+      const consoleWarningSpy = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+      const warning = "Warning: [Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.";
+      (0, _react2.render)(_Alert5 || (_Alert5 = /*#__PURE__*/_react.default.createElement(_index.Alert, {
+        variant: "success",
+        screenReaderOnly: true
+      }, "Success: Sample alert text.")));
+      await (0, _react2.waitFor)(() => {
+        expect(consoleWarningSpy.mock.calls[0][0]).toEqual(expect.stringContaining(warning));
+      });
+    });
+    it('should set aria-atomic to the aria live region when isLiveRegionAtomic is present', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+        variant: "success",
+        transition: "none",
+        liveRegion: () => liveRegion,
+        liveRegionPoliteness: "polite",
+        isLiveRegionAtomic: true
+      }, "Success: Sample alert text."));
+      expect(liveRegion).toHaveTextContent('Success: Sample alert text.');
+      expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+    });
+    it('should close when told to, with transition', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+          variant: "success",
+          liveRegion: () => liveRegion
+        }, "Success: Sample alert text.")),
+        rerender = _render5.rerender;
+      expect(liveRegion.children.length).toBe(1);
+
+      //set open to false
+      rerender( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+        variant: "success",
+        open: false,
+        liveRegion: () => liveRegion
+      }, "Success: Sample alert text."));
+      await (0, _react2.waitFor)(() => {
+        expect(liveRegion.children.length).toBe(0);
+      });
+    });
+    it('should close when told to, without transition', async () => {
+      const liveRegion = document.getElementById('_alertLiveRegion');
+      const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+          variant: "success",
+          transition: "none",
+          liveRegion: () => liveRegion
+        }, "Success: Sample alert text.")),
+        rerender = _render6.rerender,
+        container = _render6.container;
+      expect(liveRegion.children.length).toBe(1);
+
+      //set open to false
+      rerender( /*#__PURE__*/_react.default.createElement(_index.Alert, {
+        open: false,
+        variant: "success",
+        transition: "none",
+        liveRegion: () => liveRegion
+      }, "Success: Sample alert text."));
+      await (0, _react2.waitFor)(() => {
+        expect(container).not.toHaveTextContent('Success: Sample alert text.');
+        expect(liveRegion.children.length).toBe(0);
+      });
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "10.2.1",
+  "version": "10.2.2-snapshot-1",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,22 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.1",
-    "@instructure/ui-color-utils": "10.2.1",
-    "@instructure/ui-test-utils": "10.2.1"
+    "@instructure/ui-axe-check": "10.2.2-snapshot-1",
+    "@instructure/ui-babel-preset": "10.2.2-snapshot-1",
+    "@instructure/ui-color-utils": "10.2.2-snapshot-1",
+    "@instructure/ui-scripts": "10.2.2-snapshot-1",
+    "@instructure/ui-test-utils": "10.2.2-snapshot-1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^2.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.1",
-    "@instructure/emotion": "10.2.1",
-    "@instructure/shared-types": "10.2.1",
-    "@instructure/ui-a11y-content": "10.2.1",
-    "@instructure/ui-buttons": "10.2.1",
-    "@instructure/ui-icons": "10.2.1",
-    "@instructure/ui-motion": "10.2.1",
-    "@instructure/ui-react-utils": "10.2.1",
-    "@instructure/ui-themes": "10.2.1",
-    "@instructure/ui-view": "10.2.1",
+    "@instructure/console": "10.2.2-snapshot-1",
+    "@instructure/emotion": "10.2.2-snapshot-1",
+    "@instructure/shared-types": "10.2.2-snapshot-1",
+    "@instructure/ui-a11y-content": "10.2.2-snapshot-1",
+    "@instructure/ui-buttons": "10.2.2-snapshot-1",
+    "@instructure/ui-icons": "10.2.2-snapshot-1",
+    "@instructure/ui-motion": "10.2.2-snapshot-1",
+    "@instructure/ui-react-utils": "10.2.2-snapshot-1",
+    "@instructure/ui-themes": "10.2.2-snapshot-1",
+    "@instructure/ui-view": "10.2.2-snapshot-1",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },