@instructure/ui-avatar 8.39.1-snapshot-2 → 8.40.0

package/CHANGELOG.md

@@ -3,22 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.39.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.39.0...v8.39.1-snapshot-2) (2023-08-10)
+# [8.40.0](https://github.com/instructure/instructure-ui/compare/v8.39.0...v8.40.0) (2023-08-17)
 
 **Note:** Version bump only for package @instructure/ui-avatar
 
-
-
-
-
 # [8.39.0](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.39.0) (2023-07-21)
 
 **Note:** Version bump only for package @instructure/ui-avatar
 
-
-
-
-
 ## [8.38.1](https://github.com/instructure/instructure-ui/compare/v8.38.0...v8.38.1) (2023-06-13)
 
 **Note:** Version bump only for package @instructure/ui-avatar

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

@@ -0,0 +1,312 @@
+var _Avatar, _Avatar2, _Avatar3, _Avatar4, _Avatar5, _Avatar6, _svg, _Avatar7, _IconGroupLine, _IconGroupLine2, _Avatar11, _Avatar12, _Avatar13, _Avatar14, _Avatar15, _Avatar16, _Avatar17, _Avatar18, _Avatar19, _Avatar20, _Avatar21, _Avatar22;
+/*
+ * 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 { fireEvent, render, screen } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom/extend-expect';
+import Avatar from '../index';
+import { IconGroupLine } from '@instructure/ui-icons';
+describe('<Avatar />', () => {
+  describe('for a11y', () => {
+    it('should be accessible', async () => {
+      const _render = render(_Avatar || (_Avatar = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Jessica Jones"
+        }))),
+        container = _render.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('initials should have aria-hidden=true', async () => {
+      render(_Avatar2 || (_Avatar2 = /*#__PURE__*/React.createElement(Avatar, {
+        name: "Jessica Jones"
+      })));
+      const initials = screen.getByText('JJ');
+      expect(initials).toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+  describe('with the default props', () => {
+    it('should display as a circle', async () => {
+      const _render2 = render(_Avatar3 || (_Avatar3 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Avatar Name"
+        }))),
+        container = _render2.container;
+      const avatarImg = container.querySelector('span[name="Avatar Name"]');
+      expect(avatarImg).toHaveAttribute('shape', 'circle');
+    });
+    it('should render initials', async () => {
+      render(_Avatar4 || (_Avatar4 = /*#__PURE__*/React.createElement(Avatar, {
+        name: "Avatar Name"
+      })));
+      const avatarWithInitials = await screen.findByText('AN');
+      expect(avatarWithInitials).toBeVisible();
+    });
+    it('should have border and no box-shadow', async () => {
+      const _render3 = render(_Avatar5 || (_Avatar5 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Avatar Name"
+        }))),
+        container = _render3.container;
+      const element = container.querySelector('span');
+      expect(element).not.toHaveStyle('border-width: 0px');
+      const containerStyle = element && getComputedStyle(element);
+      expect(containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow).toBe('');
+    });
+    it('should display the initials in brand color', async () => {
+      render(_Avatar6 || (_Avatar6 = /*#__PURE__*/React.createElement(Avatar, {
+        name: "Jessica Jones"
+      })));
+      const initials = screen.getByText('JJ');
+      expect(getComputedStyle(initials).color).toBe('rgb(3, 116, 181)');
+    });
+    it('should return the underlying component', async () => {
+      const elementRef = jest.fn();
+      const _render4 = render( /*#__PURE__*/React.createElement(Avatar, {
+          name: "Avatar Name",
+          elementRef: elementRef
+        })),
+        container = _render4.container;
+      expect(elementRef).toHaveBeenCalledWith(container.firstChild);
+    });
+  });
+  describe('when the renderIcon prop is provided', () => {
+    it('should display an svg passed', async () => {
+      const SomeIcon = () => _svg || (_svg = /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("circle", {
+        cx: "25",
+        cy: "75",
+        r: "20"
+      })));
+      const _render5 = render( /*#__PURE__*/React.createElement(Avatar, {
+          name: "avatar name",
+          renderIcon: SomeIcon
+        }, "hello")),
+        container = _render5.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toBeInTheDocument();
+    });
+    it('should display an InstUI icon passed', async () => {
+      const _render6 = render(_Avatar7 || (_Avatar7 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "avatar name",
+          renderIcon: /*#__PURE__*/React.createElement(IconGroupLine, null)
+        }, "hello"))),
+        container = _render6.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toBeInTheDocument();
+    });
+    it('should display correctly when an icon renderer is passed', async () => {
+      const _render7 = render( /*#__PURE__*/React.createElement(Avatar, {
+          name: "Jessica Jones",
+          renderIcon: () => _IconGroupLine || (_IconGroupLine = /*#__PURE__*/React.createElement(IconGroupLine, null))
+        }, "Hello World")),
+        container = _render7.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toBeInTheDocument();
+    });
+  });
+  describe('when an image src url is provided', () => {
+    var _Avatar8, _Avatar9, _Avatar10;
+    // eslint-disable-next-line max-len
+    const src = 'data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw==';
+    it('should display the image url provided', async () => {
+      const _render8 = render(_Avatar8 || (_Avatar8 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "avatar name",
+          src: src
+        }))),
+        container = _render8.container;
+      const avatarImg = container.querySelector('img');
+      expect(avatarImg).toHaveAttribute('src', src);
+    });
+    it('should display the image even if an icon is provided', async () => {
+      const _render9 = render(_Avatar9 || (_Avatar9 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "avatar name",
+          src: src,
+          renderIcon: _IconGroupLine2 || (_IconGroupLine2 = /*#__PURE__*/React.createElement(IconGroupLine, null))
+        }))),
+        container = _render9.container;
+      const avatarImg = container.querySelector('img');
+      expect(avatarImg).toHaveAttribute('src', src);
+    });
+    it('should call onImageLoaded once the image loads', async () => {
+      const onImageLoaded = jest.fn();
+      const _render10 = render( /*#__PURE__*/React.createElement(Avatar, {
+          name: "Avatar Name",
+          onImageLoaded: onImageLoaded
+        })),
+        container = _render10.container;
+      const avatarImg = container.querySelector('img');
+      if (avatarImg) {
+        fireEvent.load(avatarImg);
+      }
+      expect(onImageLoaded).toHaveBeenCalled();
+    });
+    it('should have box-shadow instead of border', async () => {
+      const _render11 = render(_Avatar10 || (_Avatar10 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Avatar Name",
+          src: src
+        }))),
+        container = _render11.container;
+      const element = container.querySelector('span');
+      const avatarImg = container.querySelector('img');
+      if (avatarImg) {
+        fireEvent.load(avatarImg);
+      }
+      expect(element).toHaveStyle('border-width: 0px');
+      const containerStyle = element && window.getComputedStyle(element);
+      expect(containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow).not.toBe('');
+    });
+  });
+  describe('when shape is set to "rectangle"', () => {
+    it('should display as a rectangle', async () => {
+      const _render12 = render(_Avatar11 || (_Avatar11 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Avatar Name",
+          shape: "rectangle"
+        }))),
+        container = _render12.container;
+      const avatarImg = container.querySelector('span[name="Avatar Name"]');
+      expect(avatarImg).toHaveAttribute('shape', 'rectangle');
+    });
+  });
+  describe('when the color is set to "shamrock"', () => {
+    it('should display the initials in green (shamrock)', async () => {
+      render(_Avatar12 || (_Avatar12 = /*#__PURE__*/React.createElement(Avatar, {
+        name: "Jessica Jones",
+        color: "shamrock"
+      })));
+      const initials = screen.getByText('JJ');
+      expect(getComputedStyle(initials).color).toBe('rgb(11, 135, 75)');
+    });
+    it('should display the icon in green (shamrock)', async () => {
+      const _render13 = render(_Avatar13 || (_Avatar13 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Jessica Jones",
+          renderIcon: /*#__PURE__*/React.createElement(IconGroupLine, null),
+          color: "fire"
+        }, "Hello World"))),
+        container = _render13.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toHaveStyle({
+        fill: '#FC5E13'
+      });
+    });
+  });
+  describe('when "hasInverseColor" is set', () => {
+    describe('with initials', () => {
+      it('should display the background in the color', async () => {
+        render(_Avatar14 || (_Avatar14 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Jessica Jones",
+          color: "shamrock",
+          hasInverseColor: true
+        })));
+        const initials = screen.getByText('JJ');
+        expect(initials.parentNode).toHaveStyle({
+          backgroundColor: 'rgb(11, 135, 75)'
+        });
+      });
+      it('should display the initials in white', async () => {
+        render(_Avatar15 || (_Avatar15 = /*#__PURE__*/React.createElement(Avatar, {
+          name: "Jessica Jones",
+          color: "shamrock",
+          hasInverseColor: true
+        })));
+        const initials = screen.getByText('JJ');
+        expect(initials).toHaveStyle({
+          color: 'rgb(255, 255, 255)'
+        });
+      });
+    });
+    describe('with icon', () => {
+      it('should display the background in the color', async () => {
+        const _render14 = render(_Avatar16 || (_Avatar16 = /*#__PURE__*/React.createElement(Avatar, {
+            name: "Jessica Jones",
+            color: "shamrock",
+            hasInverseColor: true,
+            renderIcon: /*#__PURE__*/React.createElement(IconGroupLine, null)
+          }))),
+          container = _render14.container;
+        const element = container.querySelector('span');
+        expect(element).toHaveStyle({
+          backgroundColor: 'rgb(11, 135, 75)'
+        });
+      });
+      it('should display the icon in white', async () => {
+        const _render15 = render(_Avatar17 || (_Avatar17 = /*#__PURE__*/React.createElement(Avatar, {
+            name: "Jessica Jones",
+            renderIcon: /*#__PURE__*/React.createElement(IconGroupLine, null),
+            hasInverseColor: true,
+            color: "fire"
+          }, "Hello World"))),
+          container = _render15.container;
+        const avatarSvg = container.querySelector('svg');
+        expect(avatarSvg).toHaveStyle({
+          fill: '#FFFFFF'
+        });
+      });
+    });
+  });
+  describe('when the user name has no spaces', () => {
+    it('should render a single initial', async () => {
+      render(_Avatar18 || (_Avatar18 = /*#__PURE__*/React.createElement(Avatar, {
+        name: "Jessica"
+      })));
+      const initials = screen.getByText('J');
+      expect(initials).toBeInTheDocument();
+    });
+  });
+  describe('when the user name has leading spaces', () => {
+    it('should skip them', async () => {
+      render(_Avatar19 || (_Avatar19 = /*#__PURE__*/React.createElement(Avatar, {
+        name: " Jessica Jones"
+      })));
+      const initials = screen.getByText('JJ');
+      expect(initials).toBeInTheDocument();
+    });
+  });
+  describe('when the user name is empty', () => {
+    it('should render', async () => {
+      const _render16 = render(_Avatar20 || (_Avatar20 = /*#__PURE__*/React.createElement(Avatar, {
+          name: ""
+        }))),
+        container = _render16.container;
+      const initials = container.querySelector('[class$="-avatar__initials"]');
+      expect(initials).toBeInTheDocument();
+      expect(initials).toHaveTextContent('');
+    });
+  });
+  describe('when alt text is provided', () => {
+    it('should render the text as an aria-label attribute', async () => {
+      render(_Avatar21 || (_Avatar21 = /*#__PURE__*/React.createElement(Avatar, {
+        name: "Jessica Jones",
+        alt: "This is a test"
+      })));
+      const initials = screen.getByText('JJ');
+      expect(initials.parentNode).toHaveAttribute('aria-label', 'This is a test');
+    });
+    it('should set the role attribute to img', async () => {
+      render(_Avatar22 || (_Avatar22 = /*#__PURE__*/React.createElement(Avatar, {
+        name: "Jessica Jones",
+        alt: "This is a test"
+      })));
+      const initials = screen.getByText('JJ');
+      expect(initials.parentNode).toHaveAttribute('role', 'img');
+    });
+  });
+});

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

@@ -0,0 +1,315 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom/extend-expect");
+var _index = _interopRequireDefault(require("../index"));
+var _IconGroupLine3 = require("@instructure/ui-icons/lib/IconGroupLine.js");
+var _Avatar, _Avatar2, _Avatar3, _Avatar4, _Avatar5, _Avatar6, _svg, _Avatar7, _IconGroupLine, _IconGroupLine2, _Avatar11, _Avatar12, _Avatar13, _Avatar14, _Avatar15, _Avatar16, _Avatar17, _Avatar18, _Avatar19, _Avatar20, _Avatar21, _Avatar22;
+/*
+ * 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('<Avatar />', () => {
+  describe('for a11y', () => {
+    it('should be accessible', async () => {
+      const _render = (0, _react2.render)(_Avatar || (_Avatar = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Jessica Jones"
+        }))),
+        container = _render.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('initials should have aria-hidden=true', async () => {
+      (0, _react2.render)(_Avatar2 || (_Avatar2 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "Jessica Jones"
+      })));
+      const initials = _react2.screen.getByText('JJ');
+      expect(initials).toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+  describe('with the default props', () => {
+    it('should display as a circle', async () => {
+      const _render2 = (0, _react2.render)(_Avatar3 || (_Avatar3 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Avatar Name"
+        }))),
+        container = _render2.container;
+      const avatarImg = container.querySelector('span[name="Avatar Name"]');
+      expect(avatarImg).toHaveAttribute('shape', 'circle');
+    });
+    it('should render initials', async () => {
+      (0, _react2.render)(_Avatar4 || (_Avatar4 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "Avatar Name"
+      })));
+      const avatarWithInitials = await _react2.screen.findByText('AN');
+      expect(avatarWithInitials).toBeVisible();
+    });
+    it('should have border and no box-shadow', async () => {
+      const _render3 = (0, _react2.render)(_Avatar5 || (_Avatar5 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Avatar Name"
+        }))),
+        container = _render3.container;
+      const element = container.querySelector('span');
+      expect(element).not.toHaveStyle('border-width: 0px');
+      const containerStyle = element && getComputedStyle(element);
+      expect(containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow).toBe('');
+    });
+    it('should display the initials in brand color', async () => {
+      (0, _react2.render)(_Avatar6 || (_Avatar6 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "Jessica Jones"
+      })));
+      const initials = _react2.screen.getByText('JJ');
+      expect(getComputedStyle(initials).color).toBe('rgb(3, 116, 181)');
+    });
+    it('should return the underlying component', async () => {
+      const elementRef = jest.fn();
+      const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Avatar Name",
+          elementRef: elementRef
+        })),
+        container = _render4.container;
+      expect(elementRef).toHaveBeenCalledWith(container.firstChild);
+    });
+  });
+  describe('when the renderIcon prop is provided', () => {
+    it('should display an svg passed', async () => {
+      const SomeIcon = () => _svg || (_svg = /*#__PURE__*/_react.default.createElement("svg", null, /*#__PURE__*/_react.default.createElement("circle", {
+        cx: "25",
+        cy: "75",
+        r: "20"
+      })));
+      const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "avatar name",
+          renderIcon: SomeIcon
+        }, "hello")),
+        container = _render5.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toBeInTheDocument();
+    });
+    it('should display an InstUI icon passed', async () => {
+      const _render6 = (0, _react2.render)(_Avatar7 || (_Avatar7 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "avatar name",
+          renderIcon: /*#__PURE__*/_react.default.createElement(_IconGroupLine3.IconGroupLine, null)
+        }, "hello"))),
+        container = _render6.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toBeInTheDocument();
+    });
+    it('should display correctly when an icon renderer is passed', async () => {
+      const _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Jessica Jones",
+          renderIcon: () => _IconGroupLine || (_IconGroupLine = /*#__PURE__*/_react.default.createElement(_IconGroupLine3.IconGroupLine, null))
+        }, "Hello World")),
+        container = _render7.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toBeInTheDocument();
+    });
+  });
+  describe('when an image src url is provided', () => {
+    var _Avatar8, _Avatar9, _Avatar10;
+    // eslint-disable-next-line max-len
+    const src = 'data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw==';
+    it('should display the image url provided', async () => {
+      const _render8 = (0, _react2.render)(_Avatar8 || (_Avatar8 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "avatar name",
+          src: src
+        }))),
+        container = _render8.container;
+      const avatarImg = container.querySelector('img');
+      expect(avatarImg).toHaveAttribute('src', src);
+    });
+    it('should display the image even if an icon is provided', async () => {
+      const _render9 = (0, _react2.render)(_Avatar9 || (_Avatar9 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "avatar name",
+          src: src,
+          renderIcon: _IconGroupLine2 || (_IconGroupLine2 = /*#__PURE__*/_react.default.createElement(_IconGroupLine3.IconGroupLine, null))
+        }))),
+        container = _render9.container;
+      const avatarImg = container.querySelector('img');
+      expect(avatarImg).toHaveAttribute('src', src);
+    });
+    it('should call onImageLoaded once the image loads', async () => {
+      const onImageLoaded = jest.fn();
+      const _render10 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Avatar Name",
+          onImageLoaded: onImageLoaded
+        })),
+        container = _render10.container;
+      const avatarImg = container.querySelector('img');
+      if (avatarImg) {
+        _react2.fireEvent.load(avatarImg);
+      }
+      expect(onImageLoaded).toHaveBeenCalled();
+    });
+    it('should have box-shadow instead of border', async () => {
+      const _render11 = (0, _react2.render)(_Avatar10 || (_Avatar10 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Avatar Name",
+          src: src
+        }))),
+        container = _render11.container;
+      const element = container.querySelector('span');
+      const avatarImg = container.querySelector('img');
+      if (avatarImg) {
+        _react2.fireEvent.load(avatarImg);
+      }
+      expect(element).toHaveStyle('border-width: 0px');
+      const containerStyle = element && window.getComputedStyle(element);
+      expect(containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow).not.toBe('');
+    });
+  });
+  describe('when shape is set to "rectangle"', () => {
+    it('should display as a rectangle', async () => {
+      const _render12 = (0, _react2.render)(_Avatar11 || (_Avatar11 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Avatar Name",
+          shape: "rectangle"
+        }))),
+        container = _render12.container;
+      const avatarImg = container.querySelector('span[name="Avatar Name"]');
+      expect(avatarImg).toHaveAttribute('shape', 'rectangle');
+    });
+  });
+  describe('when the color is set to "shamrock"', () => {
+    it('should display the initials in green (shamrock)', async () => {
+      (0, _react2.render)(_Avatar12 || (_Avatar12 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "Jessica Jones",
+        color: "shamrock"
+      })));
+      const initials = _react2.screen.getByText('JJ');
+      expect(getComputedStyle(initials).color).toBe('rgb(11, 135, 75)');
+    });
+    it('should display the icon in green (shamrock)', async () => {
+      const _render13 = (0, _react2.render)(_Avatar13 || (_Avatar13 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Jessica Jones",
+          renderIcon: /*#__PURE__*/_react.default.createElement(_IconGroupLine3.IconGroupLine, null),
+          color: "fire"
+        }, "Hello World"))),
+        container = _render13.container;
+      const avatarSvg = container.querySelector('svg');
+      expect(avatarSvg).toHaveStyle({
+        fill: '#FC5E13'
+      });
+    });
+  });
+  describe('when "hasInverseColor" is set', () => {
+    describe('with initials', () => {
+      it('should display the background in the color', async () => {
+        (0, _react2.render)(_Avatar14 || (_Avatar14 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Jessica Jones",
+          color: "shamrock",
+          hasInverseColor: true
+        })));
+        const initials = _react2.screen.getByText('JJ');
+        expect(initials.parentNode).toHaveStyle({
+          backgroundColor: 'rgb(11, 135, 75)'
+        });
+      });
+      it('should display the initials in white', async () => {
+        (0, _react2.render)(_Avatar15 || (_Avatar15 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: "Jessica Jones",
+          color: "shamrock",
+          hasInverseColor: true
+        })));
+        const initials = _react2.screen.getByText('JJ');
+        expect(initials).toHaveStyle({
+          color: 'rgb(255, 255, 255)'
+        });
+      });
+    });
+    describe('with icon', () => {
+      it('should display the background in the color', async () => {
+        const _render14 = (0, _react2.render)(_Avatar16 || (_Avatar16 = /*#__PURE__*/_react.default.createElement(_index.default, {
+            name: "Jessica Jones",
+            color: "shamrock",
+            hasInverseColor: true,
+            renderIcon: /*#__PURE__*/_react.default.createElement(_IconGroupLine3.IconGroupLine, null)
+          }))),
+          container = _render14.container;
+        const element = container.querySelector('span');
+        expect(element).toHaveStyle({
+          backgroundColor: 'rgb(11, 135, 75)'
+        });
+      });
+      it('should display the icon in white', async () => {
+        const _render15 = (0, _react2.render)(_Avatar17 || (_Avatar17 = /*#__PURE__*/_react.default.createElement(_index.default, {
+            name: "Jessica Jones",
+            renderIcon: /*#__PURE__*/_react.default.createElement(_IconGroupLine3.IconGroupLine, null),
+            hasInverseColor: true,
+            color: "fire"
+          }, "Hello World"))),
+          container = _render15.container;
+        const avatarSvg = container.querySelector('svg');
+        expect(avatarSvg).toHaveStyle({
+          fill: '#FFFFFF'
+        });
+      });
+    });
+  });
+  describe('when the user name has no spaces', () => {
+    it('should render a single initial', async () => {
+      (0, _react2.render)(_Avatar18 || (_Avatar18 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "Jessica"
+      })));
+      const initials = _react2.screen.getByText('J');
+      expect(initials).toBeInTheDocument();
+    });
+  });
+  describe('when the user name has leading spaces', () => {
+    it('should skip them', async () => {
+      (0, _react2.render)(_Avatar19 || (_Avatar19 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: " Jessica Jones"
+      })));
+      const initials = _react2.screen.getByText('JJ');
+      expect(initials).toBeInTheDocument();
+    });
+  });
+  describe('when the user name is empty', () => {
+    it('should render', async () => {
+      const _render16 = (0, _react2.render)(_Avatar20 || (_Avatar20 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          name: ""
+        }))),
+        container = _render16.container;
+      const initials = container.querySelector('[class$="-avatar__initials"]');
+      expect(initials).toBeInTheDocument();
+      expect(initials).toHaveTextContent('');
+    });
+  });
+  describe('when alt text is provided', () => {
+    it('should render the text as an aria-label attribute', async () => {
+      (0, _react2.render)(_Avatar21 || (_Avatar21 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "Jessica Jones",
+        alt: "This is a test"
+      })));
+      const initials = _react2.screen.getByText('JJ');
+      expect(initials.parentNode).toHaveAttribute('aria-label', 'This is a test');
+    });
+    it('should set the role attribute to img', async () => {
+      (0, _react2.render)(_Avatar22 || (_Avatar22 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "Jessica Jones",
+        alt: "This is a test"
+      })));
+      const initials = _react2.screen.getByText('JJ');
+      expect(initials.parentNode).toHaveAttribute('role', 'img');
+    });
+  });
+});