@pingux/astro 2.33.0-alpha.10 → 2.33.0-alpha.11

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.test.js

@@ -6,6 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _react2 = require("@emotion/react");
 var testTimeZoneJuba = 'Africa/Juba';
 var testTimeZoneApia = 'Pacific/Apia';
@@ -76,4 +77,11 @@ test('shows custom empty search state text when no items are found', function ()
   var input = _testWrapper.screen.queryByRole('combobox');
   _userEvent["default"].type(input, 'awdasrf213');
   expect(_testWrapper.screen.getByText(testEmptyText)).toBeInTheDocument();
+});
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_index.TimeZonePicker, (0, _extends2["default"])({}, defaultProps, props));
+  }
 });

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.test.js

@@ -16,8 +16,8 @@ var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _react2 = require("@emotion/react");
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context3; _forEachInstanceProperty(_context3 = ["next", "throw", "return"]).call(_context3, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context4; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context4 = this.tryEntries).call(_context4, resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 var getComponent = function getComponent() {
@@ -25,8 +25,12 @@ var getComponent = function getComponent() {
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.TooltipTrigger, props, (0, _react2.jsx)(_index.Button, props.buttonProps, "Mock Button"), (0, _react2.jsx)(_index.Tooltip, null, "Tooltip Content")));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-(0, _testAxe["default"])(getComponent);
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_index.TooltipTrigger, props, (0, _react2.jsx)(_index.Button, null, "Mock Button"), (0, _react2.jsx)(_index.Tooltip, null, "Tooltip Content"));
+  }
+});
 test('tooltip doesnt show by default and is rendered when trigger is hovered', function () {
   getComponent();
   var button = _testWrapper.screen.getByRole('button');

package/lib/cjs/utils/testUtils/universalComponentTest.d.ts

@@ -1,5 +1,4 @@
-export declare const universalComponentTests: ({ renderComponent, props, rules }: {
+export declare const universalComponentTests: ({ renderComponent, rules }: {
     renderComponent: any;
-    props: any;
     rules?: {} | undefined;
 }) => Promise<void>;

package/lib/cjs/utils/testUtils/universalComponentTest.js

@@ -44,20 +44,22 @@ var ComponentWithRef = function ComponentWithRef(_ref) {
 };
 var universalComponentTests = /*#__PURE__*/function () {
   var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
-    var renderComponent, props, _ref2$rules, rules;
+    var renderComponent, _ref2$rules, rules;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          renderComponent = _ref2.renderComponent, props = _ref2.props, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
+          renderComponent = _ref2.renderComponent, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
           test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             var _render, container, results;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
                   jest.useRealTimers();
-                  _render = (0, _react2.render)(renderComponent(props)), container = _render.container;
+                  _render = (0, _react2.render)(renderComponent()), container = _render.container;
                   _context.next = 4;
-                  return (0, _jestAxe.axe)(container, rules);
+                  return (0, _jestAxe.axe)(container, {
+                    rules: rules
+                  });
                 case 4:
                   results = _context.sent;
                   expect(results).toHaveNoViolations();

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -15,14 +15,21 @@ import React from 'react';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import { Box, Link, OverlayPanel, Text, TextField } from '../../index';
-import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import AccordionGridGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
   'data-testid': testId
 };
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(AccordionGridGroup, props);
+  }
+});
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
@@ -64,14 +71,6 @@ var getComponentWithTextFields = function getComponentWithTextFields() {
     label: "label 2"
   })))));
 };
-axeTest(getComponent, {
-  // landmark-unique rule conflicts with react-aria role definition
-  rules: {
-    'landmark-unique': {
-      enabled: false
-    }
-  }
-});
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -5,8 +5,8 @@ import React from 'react';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import { Box, Button, Menu, OverlayPanel, PopoverMenu, TextField } from '../../index';
-import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import Text from '../Text';
 import AccordionGroup from '.';
@@ -15,6 +15,13 @@ var testId = 'test-accordion';
 var defaultProps = {
   'data-testid': testId
 };
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(AccordionGroup, props);
+  }
+});
 var items = [{
   key: 'identityProvider',
   label: 'some label1',
@@ -147,16 +154,6 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     "data-id": "connection-configuration-custom-form"
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "other text1"), ___EmotionJSX(Text, null, "another text1")))))));
 };
-
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent, {
-  // landmark-unique rule conflicts with react-aria role definition
-  rules: {
-    'landmark-unique': {
-      enabled: false
-    }
-  }
-});
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({

package/lib/components/ArrayField/ArrayField.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import { mergeProps, useLabel } from 'react-aria';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
@@ -26,7 +26,7 @@ import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ArrayField = function ArrayField(props) {
+var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
   var addButtonLabel = props.addButtonLabel,
     defaultValue = props.defaultValue,
@@ -119,7 +119,9 @@ var ArrayField = function ArrayField(props) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  return ___EmotionJSX(Box, nonAriaProps, ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
+  return ___EmotionJSX(Box, _extends({}, nonAriaProps, {
+    ref: ref
+  }), ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
     children: label
   }))), ___EmotionJSX(Box, _extends({
     as: "ul",
@@ -150,7 +152,7 @@ var ArrayField = function ArrayField(props) {
     variant: "label",
     color: "active"
   }, addButtonLabel)));
-};
+});
 ArrayField.propTypes = _objectSpread(_objectSpread({
   /** Label for add button */
   addButtonLabel: PropTypes.string,

package/lib/components/ArrayField/ArrayField.test.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import TextField from '../TextField';
 import ArrayField from './ArrayField';
 import ArrayFieldDeleteButton from './ArrayFieldDeleteButton';
@@ -20,13 +21,12 @@ var defaultData = [{
   value: 'World'
 }];
 var defaultProps = {
-  defaultValue: defaultData
+  defaultValue: defaultData,
+  label: 'test-label'
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ArrayField, _extends({
-    label: "test-label"
-  }, defaultProps, props)));
+  return render(___EmotionJSX(ArrayField, _extends({}, defaultProps, props)));
 };
 var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
   return ___EmotionJSX(TextField, _extends({
@@ -46,6 +46,15 @@ var renderField = function renderField(id, value, onFieldValueChange, onFieldDel
     }
   }, otherFieldProps));
 };
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ArrayField, _extends({
+      renderField: renderField
+    }, defaultProps, props));
+  }
+});
 test('displays multiple text fields', function () {
   var onChange = jest.fn();
   getComponent({

package/lib/components/Avatar/Avatar.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { faker } from '@faker-js/faker';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Avatar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var defaultProps = {
@@ -12,9 +12,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Avatar, _extends({}, defaultProps, props)));
 };
-
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Avatar, _extends({}, defaultProps, props));
+  }
+});
 test('an avatar is rendered', function () {
   getComponent();
   var img = screen.getByRole('img');

package/lib/components/Badge/Badge.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Earth from '@pingux/mdi-react/EarthIcon';
 import { render, screen } from '@testing-library/react';
 import { Badge, Button, Icon } from '../..';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
 var defaultProps = {
@@ -15,8 +15,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Badge, _extends({}, defaultProps, props)));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Badge, props);
+  }
+});
 test('renders Badge component', function () {
   getComponent();
   var badge = screen.getByTestId(testId);

package/lib/components/Box/Box.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { render, screen } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Box from '.';
 
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
@@ -24,9 +24,12 @@ var getComponent = function getComponent() {
     value: emotionCache
   }, ___EmotionJSX(Box, _extends({}, defaultProps, props))));
 };
-
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Box, props);
+  }
+});
 test('default box', function () {
   getComponent();
   var box = screen.getByTestId(testId);

package/lib/components/Bracket/Bracket.js

@@ -28,7 +28,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
   }, []);
   return ___EmotionJSX(Box, _extends({
     variant: "bracket.base"
-  }, others), !isLast && ___EmotionJSX(Box, {
+  }, others, {
+    ref: bracketRef
+  }), !isLast && ___EmotionJSX(Box, {
     width: 15,
     sx: {
       position: 'absolute',

package/lib/components/Bracket/Bracket.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Bracket from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-bracket';
@@ -13,8 +13,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Bracket, _extends({}, defaultProps, props)));
 };
 
-// // Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Bracket, props);
+  }
+});
 test('default bracket', function () {
   getComponent();
   var bracket = screen.getByTestId(testId);

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -6,8 +6,8 @@ import { Item } from 'react-stately';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Breadcrumbs from './Breadcrumbs';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-breadcrumbs';
@@ -31,8 +31,12 @@ var getComponent = function getComponent() {
   })));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Breadcrumbs, mergeProps(defaultProps, props), ___EmotionJSX(Item, null, testItemsArr[0]));
+  }
+});
 test('default breadcrumbs', function () {
   getComponent();
   expect(screen.getByTestId(testId)).toBeInTheDocument();

package/lib/components/ButtonBar/ButtonBar.js

@@ -1,19 +1,20 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["align", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ButtonBar = function ButtonBar(props) {
+var ButtonBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var align = props.align,
     children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     isRow: true,
     variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
   }, others), children);
-};
+});
 ButtonBar.propTypes = {
   /** Justifies the component's children. */
   align: PropTypes.oneOf(['left', 'right'])

package/lib/components/ButtonBar/ButtonBar.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Button, ButtonBar } from '../../index';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-ButtonBar';
 var defaultProps = {
@@ -26,13 +26,23 @@ var getComponent = function getComponent() {
 };
 var getComponentCustomChildren = function getComponentCustomChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props), ___EmotionJSX("button", null, "custom text"), ___EmotionJSX("button", null, "Also custom text")));
+  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props), ___EmotionJSX("button", {
+    type: "button"
+  }, "custom text"), ___EmotionJSX("button", {
+    type: "button"
+  }, "Also custom text")));
 };
 var getComponentTextChildren = function getComponentTextChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ButtonBar, props, "custom text"));
 };
-axeTest(getComponent);
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ButtonBar, props);
+  }
+});
 afterEach(function () {
   jest.resetAllMocks();
 });

package/lib/components/Callout/Callout.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "status"];
 var _calloutProps;
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -45,11 +45,12 @@ var defaultIconProps = {
  or give warnings of unexpected events.
  */
 
-var Callout = function Callout(_ref) {
+var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     status = _ref.status,
     others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
@@ -59,7 +60,7 @@ var Callout = function Callout(_ref) {
     status: status,
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
-};
+});
 Callout.propTypes = _objectSpread({}, statusPropTypes);
 Callout.defaultProps = _objectSpread({}, statusDefaultProp);
 Callout.displayName = 'Callout';

package/lib/components/Callout/Callout.test.js

@@ -4,11 +4,19 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { noticeIcons } from '../Icon/NoticeIcon';
 import Callout, { CALLOUT_TEST_ID } from './Callout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_TEXT = 'test text';
 var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Callout, props);
+  }
+});
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Callout, props, TEST_TEXT));

package/lib/components/Card/Card.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Button from '../Button';
 import Card from './Card';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -15,9 +15,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Card, _extends({}, defaultProps, props)));
 };
-
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Card, props);
+  }
+});
 test('renders Card component', function () {
   getComponent();
   var separator = screen.getByTestId(testId);

package/lib/components/Checkbox/Checkbox.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Checkbox from './Checkbox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var getComponent = function getComponent() {
@@ -8,9 +8,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Checkbox, props));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent, {
-  // Checkbox with label provided by CheckboxField
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Checkbox, props);
+  },
+  // Checkbox label is provided by CheckboxField
   rules: {
     'label': {
       enabled: false

package/lib/components/CodeView/CodeView.js

@@ -94,6 +94,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     }, mergeProps(focusProps, hoverProps, others)), content);
   }
   return ___EmotionJSX(CopyText, {
+    ref: ref,
     mode: "link",
     textToCopy: children,
     tooltipProps: {

package/lib/components/CodeView/CodeView.test.js

@@ -24,8 +24,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { CodeView } from '../..';
-import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-code-sample';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
@@ -52,8 +52,12 @@ afterEach(function () {
   global.document.execCommand = originalExecCommand;
 });
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CodeView, props, textValue);
+  }
+});
 test('renders component in the default state', function () {
   getComponent();
   var container = screen.getByTestId(testId);

package/lib/components/CollapsiblePanel/CollapsiblePanel.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import CollapsiblePanel from './CollapsiblePanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'collapsible-panel-item';
@@ -43,15 +43,10 @@ afterAll(function () {
   jest.restoreAllMocks();
 });
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent, {
-  rules: {
-    'aria-required-children': {
-      enabled: false
-    },
-    'aria-required-parent': {
-      enabled: false
-    }
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CollapsiblePanel, _extends({}, defaultProps, props));
   }
 });
 test('default CollapsiblePanel', function () {