@instructure/ui-view 8.53.3-snapshot-20 → 8.53.3-snapshot-23

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.
 
-## [8.53.3-snapshot-20](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-20) (2024-03-20)
+## [8.53.3-snapshot-23](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-23) (2024-03-20)
 
 **Note:** Version bump only for package @instructure/ui-view
 

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

@@ -0,0 +1,44 @@
+var _ContextView, _ContextView2;
+/*
+ * 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 } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ContextView } from '../index';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+describe('<ContextView />', () => {
+  it('should render', () => {
+    const _render = render(_ContextView || (_ContextView = /*#__PURE__*/React.createElement(ContextView, null))),
+      container = _render.container;
+    const contextView = container.querySelector("span[class$='-contextView']");
+    expect(contextView).toBeInTheDocument();
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = render(_ContextView2 || (_ContextView2 = /*#__PURE__*/React.createElement(ContextView, null))),
+      container = _render2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

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

@@ -0,0 +1,190 @@
+var _View, _View2, _h, _h2, _h3, _h4, _h5, _View3, _View4, _View5, _View6, _View7, _View8, _View9, _View10;
+/*
+ * 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 } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { View } from '../../index';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+describe('<View />', () => {
+  it('should render', () => {
+    const _render = render(_View || (_View = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render.container;
+    const view = container.querySelector("span[class$='-view']");
+    expect(view).toBeInTheDocument();
+    expect(view).toHaveTextContent('View Content');
+  });
+  it('should render children', () => {
+    render(_View2 || (_View2 = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+    const viewContent = screen.getByText('View Content');
+    expect(viewContent).toBeInTheDocument();
+    expect(viewContent.tagName).toBe('H1');
+  });
+  it('should pass whitelisted style attributes', () => {
+    const styleProps = {
+      top: '160px',
+      left: '5px',
+      minWidth: '20px',
+      minHeight: '208px',
+      position: 'absolute',
+      transform: 'translate(30px, 15px)',
+      overflow: 'hidden',
+      display: 'block',
+      pointerEvents: 'none'
+    };
+    const _render2 = render( /*#__PURE__*/React.createElement(View, {
+        style: {
+          ...styleProps
+        }
+      }, _h || (_h = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render2.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['top']).toEqual('160px');
+    expect(styles['left']).toEqual('5px');
+    expect(styles['minWidth']).toEqual('20px');
+    expect(styles['minHeight']).toEqual('208px');
+    expect(styles['position']).toEqual('absolute');
+    expect(styles['transform']).toEqual('translate(30px, 15px)');
+    expect(styles['overflow']).toEqual('hidden');
+    expect(styles['display']).toEqual('block');
+    expect(styles['pointerEvents']).toEqual('none');
+  });
+  it('should pass flex style', () => {
+    const _render3 = render( /*#__PURE__*/React.createElement(View, {
+        style: {
+          flexBasis: '200px'
+        }
+      }, _h2 || (_h2 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render3.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['flexBasis']).toEqual('200px');
+  });
+  it('should pass className', () => {
+    const className = 'fooBarBaz';
+    const _render4 = render( /*#__PURE__*/React.createElement(View, {
+        className: className
+      }, _h3 || (_h3 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render4.container;
+    const view = container.querySelector("span[class$='-view']");
+    expect(view.classList.contains(className));
+  });
+  it('should provide an elementRef', () => {
+    const elementRef = jest.fn();
+    const _render5 = render( /*#__PURE__*/React.createElement(View, {
+        elementRef: elementRef
+      }, _h4 || (_h4 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render5.container;
+    const view = container.querySelector("span[class$='-view']");
+    expect(elementRef).toHaveBeenCalledWith(view);
+  });
+  it('should pass cursor', () => {
+    const cursor = 'cell';
+    const _render6 = render( /*#__PURE__*/React.createElement(View, {
+        cursor: cursor
+      }, _h5 || (_h5 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render6.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['cursor']).toEqual(cursor);
+  });
+  it('should set overflow', () => {
+    const _render7 = render(_View3 || (_View3 = /*#__PURE__*/React.createElement(View, {
+        overflowX: "hidden",
+        overflowY: "auto"
+      }, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render7.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles.overflowX).toEqual('hidden');
+    expect(styles.overflowY).toEqual('auto');
+  });
+  it('should set CSS position', () => {
+    const _render8 = render(_View4 || (_View4 = /*#__PURE__*/React.createElement(View, {
+        position: "fixed"
+      }, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render8.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles.position).toEqual('fixed');
+  });
+  it('should set inline offset (top, bottom, left, right)', () => {
+    const _render9 = render(_View5 || (_View5 = /*#__PURE__*/React.createElement(View, {
+        insetBlockStart: "0",
+        insetBlockEnd: "20px",
+        insetInlineStart: "2px",
+        insetInlineEnd: "3px"
+      }, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render9.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['top']).toEqual('0px');
+    expect(styles['bottom']).toEqual('20px');
+    expect(styles['left']).toEqual('2px');
+    expect(styles['right']).toEqual('3px');
+  });
+  it('should override default max-width', () => {
+    const _render10 = render(_View6 || (_View6 = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+      container = _render10.container,
+      rerender = _render10.rerender;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles.maxWidth).toEqual('100%');
+    rerender(_View7 || (_View7 = /*#__PURE__*/React.createElement(View, {
+      maxWidth: "200px"
+    }, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+    const newStyles = getComputedStyle(view);
+    expect(newStyles.maxWidth).toEqual('200px');
+  });
+  describe('withFocusOutline', () => {
+    it('should warn when withFocusOutline is true without position=relative', () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      render(_View8 || (_View8 = /*#__PURE__*/React.createElement(View, {
+        withFocusOutline: true
+      }, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+      const expectedErrorMessage = 'Warning: [View] the focus outline will only show if the `position` prop is `relative`.';
+      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+      consoleErrorSpy.mockRestore();
+    });
+    it('should warn when withFocusOutline is `true`, display is set to `inline`, and focusPosition is set to `offset`', () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      render(_View9 || (_View9 = /*#__PURE__*/React.createElement(View, {
+        withFocusOutline: true,
+        display: "inline",
+        focusPosition: "offset"
+      }, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+      const expectedErrorMessage = 'Warning: [View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.';
+      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+      consoleErrorSpy.mockRestore();
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render11 = render(_View10 || (_View10 = /*#__PURE__*/React.createElement(View, null, "View Content"))),
+      container = _render11.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _ContextView, _ContextView2;
+/*
+ * 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.
+ */
+describe('<ContextView />', () => {
+  it('should render', () => {
+    const _render = (0, _react2.render)(_ContextView || (_ContextView = /*#__PURE__*/_react.default.createElement(_index.ContextView, null))),
+      container = _render.container;
+    const contextView = container.querySelector("span[class$='-contextView']");
+    expect(contextView).toBeInTheDocument();
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = (0, _react2.render)(_ContextView2 || (_ContextView2 = /*#__PURE__*/_react.default.createElement(_index.ContextView, null))),
+      container = _render2.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

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

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _index = require("../../index");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _View, _View2, _h, _h2, _h3, _h4, _h5, _View3, _View4, _View5, _View6, _View7, _View8, _View9, _View10;
+/*
+ * 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.
+ */
+describe('<View />', () => {
+  it('should render', () => {
+    const _render = (0, _react2.render)(_View || (_View = /*#__PURE__*/_react.default.createElement(_index.View, null, /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render.container;
+    const view = container.querySelector("span[class$='-view']");
+    expect(view).toBeInTheDocument();
+    expect(view).toHaveTextContent('View Content');
+  });
+  it('should render children', () => {
+    (0, _react2.render)(_View2 || (_View2 = /*#__PURE__*/_react.default.createElement(_index.View, null, /*#__PURE__*/_react.default.createElement("h1", null, "View Content"))));
+    const viewContent = _react2.screen.getByText('View Content');
+    expect(viewContent).toBeInTheDocument();
+    expect(viewContent.tagName).toBe('H1');
+  });
+  it('should pass whitelisted style attributes', () => {
+    const styleProps = {
+      top: '160px',
+      left: '5px',
+      minWidth: '20px',
+      minHeight: '208px',
+      position: 'absolute',
+      transform: 'translate(30px, 15px)',
+      overflow: 'hidden',
+      display: 'block',
+      pointerEvents: 'none'
+    };
+    const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.View, {
+        style: {
+          ...styleProps
+        }
+      }, _h || (_h = /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render2.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['top']).toEqual('160px');
+    expect(styles['left']).toEqual('5px');
+    expect(styles['minWidth']).toEqual('20px');
+    expect(styles['minHeight']).toEqual('208px');
+    expect(styles['position']).toEqual('absolute');
+    expect(styles['transform']).toEqual('translate(30px, 15px)');
+    expect(styles['overflow']).toEqual('hidden');
+    expect(styles['display']).toEqual('block');
+    expect(styles['pointerEvents']).toEqual('none');
+  });
+  it('should pass flex style', () => {
+    const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.View, {
+        style: {
+          flexBasis: '200px'
+        }
+      }, _h2 || (_h2 = /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render3.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['flexBasis']).toEqual('200px');
+  });
+  it('should pass className', () => {
+    const className = 'fooBarBaz';
+    const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.View, {
+        className: className
+      }, _h3 || (_h3 = /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render4.container;
+    const view = container.querySelector("span[class$='-view']");
+    expect(view.classList.contains(className));
+  });
+  it('should provide an elementRef', () => {
+    const elementRef = jest.fn();
+    const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.View, {
+        elementRef: elementRef
+      }, _h4 || (_h4 = /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render5.container;
+    const view = container.querySelector("span[class$='-view']");
+    expect(elementRef).toHaveBeenCalledWith(view);
+  });
+  it('should pass cursor', () => {
+    const cursor = 'cell';
+    const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.View, {
+        cursor: cursor
+      }, _h5 || (_h5 = /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render6.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['cursor']).toEqual(cursor);
+  });
+  it('should set overflow', () => {
+    const _render7 = (0, _react2.render)(_View3 || (_View3 = /*#__PURE__*/_react.default.createElement(_index.View, {
+        overflowX: "hidden",
+        overflowY: "auto"
+      }, /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render7.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles.overflowX).toEqual('hidden');
+    expect(styles.overflowY).toEqual('auto');
+  });
+  it('should set CSS position', () => {
+    const _render8 = (0, _react2.render)(_View4 || (_View4 = /*#__PURE__*/_react.default.createElement(_index.View, {
+        position: "fixed"
+      }, /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render8.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles.position).toEqual('fixed');
+  });
+  it('should set inline offset (top, bottom, left, right)', () => {
+    const _render9 = (0, _react2.render)(_View5 || (_View5 = /*#__PURE__*/_react.default.createElement(_index.View, {
+        insetBlockStart: "0",
+        insetBlockEnd: "20px",
+        insetInlineStart: "2px",
+        insetInlineEnd: "3px"
+      }, /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render9.container;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles['top']).toEqual('0px');
+    expect(styles['bottom']).toEqual('20px');
+    expect(styles['left']).toEqual('2px');
+    expect(styles['right']).toEqual('3px');
+  });
+  it('should override default max-width', () => {
+    const _render10 = (0, _react2.render)(_View6 || (_View6 = /*#__PURE__*/_react.default.createElement(_index.View, null, /*#__PURE__*/_react.default.createElement("h1", null, "View Content")))),
+      container = _render10.container,
+      rerender = _render10.rerender;
+    const view = container.querySelector("span[class$='-view']");
+    const styles = getComputedStyle(view);
+    expect(styles.maxWidth).toEqual('100%');
+    rerender(_View7 || (_View7 = /*#__PURE__*/_react.default.createElement(_index.View, {
+      maxWidth: "200px"
+    }, /*#__PURE__*/_react.default.createElement("h1", null, "View Content"))));
+    const newStyles = getComputedStyle(view);
+    expect(newStyles.maxWidth).toEqual('200px');
+  });
+  describe('withFocusOutline', () => {
+    it('should warn when withFocusOutline is true without position=relative', () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      (0, _react2.render)(_View8 || (_View8 = /*#__PURE__*/_react.default.createElement(_index.View, {
+        withFocusOutline: true
+      }, /*#__PURE__*/_react.default.createElement("h1", null, "View Content"))));
+      const expectedErrorMessage = 'Warning: [View] the focus outline will only show if the `position` prop is `relative`.';
+      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+      consoleErrorSpy.mockRestore();
+    });
+    it('should warn when withFocusOutline is `true`, display is set to `inline`, and focusPosition is set to `offset`', () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      (0, _react2.render)(_View9 || (_View9 = /*#__PURE__*/_react.default.createElement(_index.View, {
+        withFocusOutline: true,
+        display: "inline",
+        focusPosition: "offset"
+      }, /*#__PURE__*/_react.default.createElement("h1", null, "View Content"))));
+      const expectedErrorMessage = 'Warning: [View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.';
+      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+      consoleErrorSpy.mockRestore();
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render11 = (0, _react2.render)(_View10 || (_View10 = /*#__PURE__*/_react.default.createElement(_index.View, null, "View Content"))),
+      container = _render11.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-view",
-  "version": "8.53.3-snapshot-20",
+  "version": "8.53.3-snapshot-23",
   "description": "A component for basic styles including spacing, sizing, borders, display, positioning, and focus states.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.53.3-snapshot-20",
-    "@instructure/emotion": "8.53.3-snapshot-20",
-    "@instructure/shared-types": "8.53.3-snapshot-20",
-    "@instructure/ui-color-utils": "8.53.3-snapshot-20",
-    "@instructure/ui-dom-utils": "8.53.3-snapshot-20",
-    "@instructure/ui-i18n": "8.53.3-snapshot-20",
-    "@instructure/ui-position": "8.53.3-snapshot-20",
-    "@instructure/ui-prop-types": "8.53.3-snapshot-20",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-20",
+    "@instructure/console": "8.53.3-snapshot-23",
+    "@instructure/emotion": "8.53.3-snapshot-23",
+    "@instructure/shared-types": "8.53.3-snapshot-23",
+    "@instructure/ui-color-utils": "8.53.3-snapshot-23",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-23",
+    "@instructure/ui-i18n": "8.53.3-snapshot-23",
+    "@instructure/ui-position": "8.53.3-snapshot-23",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-23",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-23",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.3-snapshot-20",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-20",
-    "@instructure/ui-themes": "8.53.3-snapshot-20"
+    "@instructure/ui-axe-check": "8.53.3-snapshot-23",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-23",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-23",
+    "@instructure/ui-themes": "8.53.3-snapshot-23",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

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

@@ -0,0 +1,47 @@
+/*
+ * 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 } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { ContextView } from '../index'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+
+describe('<ContextView />', () => {
+  it('should render', () => {
+    const { container } = render(<ContextView />)
+
+    const contextView = container.querySelector("span[class$='-contextView']")
+    expect(contextView).toBeInTheDocument()
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(<ContextView />)
+
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+  })
+})