@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
129 lines (126 loc) • 7.37 kB
JavaScript
/**
* Copyright IBM Corp. 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { vi, describe, it, expect } from 'vitest';
import { fixture, html } from '@open-wc/testing';
import './user-avatar.js';
import { prefix } from '../../globals/settings.js';
/**
* Copyright IBM Corp. 2024, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
vi.mock('./_story-assets/headshot.jpg', () => 'mock-image-path');
const blockClass = `${prefix}--user-avatar`;
const defaultProps = {
tooltipText: 'TW, Thomas J. Watson user profile',
name: 'Thomas J. Watson',
backgroundColor: 'order-1-cyan',
};
const template = (props = defaultProps) => html `
<c4p-user-avatar
tooltip-text=${props.tooltipText}
name=${props.name}
background-color=${props.backgroundColor}
size=${props.size}
image=${props.image}
imageDescription=${props.imageDescription}
>
</c4p-user-avatar>
`;
const iconTemplate = (props = defaultProps) => html `
<c4p-user-avatar
tooltip-text=${props.tooltipText}
name=${props.name}
background-color=${props.backgroundColor}
size=${props.size}
image=${props.image}
imageDescription=${props.imageDescription}
>
<svg slot="rendericon" data-test-id="mock-icon" viewBox="0 0 32 32">
<circle cx="16" cy="10" r="6"></circle>
<path d="M16 18C10 18 4 22 4 26V28H28V26C28 22 22 18 16 18Z"></path>
</svg>
</c4p-user-avatar>
`;
describe('c4p-user-avatar', () => {
it('should render a user avatar', async () => {
const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
expect(userAvatar).toBeDefined();
});
it('should return a circle with background color', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
expect(userAvatar).toBeDefined();
expect(userAvatar.getAttribute('background-color')).toBe('order-1-cyan');
const bgClass = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}--order-1-cyan`)) === null || _b === void 0 ? void 0 : _b[0];
expect(bgClass).toBeDefined();
});
it('should return a circle with updated background color', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { backgroundColor: 'order-3-green' })));
expect(userAvatar).toBeDefined();
expect(userAvatar.getAttribute('background-color')).toBe('order-3-green');
const bgClass = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}--order-3-green`)) === null || _b === void 0 ? void 0 : _b[0];
expect(bgClass).toBeDefined();
});
it('applies className to the containing node', async () => {
const customClass = 'test';
const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
userAvatar.classList.add(customClass);
expect(userAvatar.getAttribute('class')).to.include(customClass);
});
it('should return appropriately size circle based on size prop', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { size: 'md' })));
const hasSizeClass = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}--md`)) === null || _b === void 0 ? void 0 : _b[0];
// expect the element is present
expect(hasSizeClass).toBeDefined();
});
it('should render the initials when passed the name prop', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
const initials = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
expect(initials).to.exist;
expect(initials === null || initials === void 0 ? void 0 : initials.textContent).to.equal('TW');
});
it('should render the initials when simply passing two names to the name prop', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { name: 'DN' })));
const initials = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
expect(initials).to.exist;
expect(initials === null || initials === void 0 ? void 0 : initials.textContent).to.equal('DN');
});
it('should render a tooltip if the tooltipText is supplied', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
const tooltipElement = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}__tooltip`)) === null || _b === void 0 ? void 0 : _b[0];
expect(tooltipElement).to.exist;
});
it('should render a tooltip if the tooltipText is supplied', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { tooltipText: '' })));
const tooltipElement = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${blockClass}__tooltip`)) === null || _b === void 0 ? void 0 : _b[0];
expect(tooltipElement).to.not.exist;
});
it('should return an icon for the avatar image', async () => {
var _a;
const userAvatar = await fixture(iconTemplate(Object.assign(Object.assign({}, defaultProps), { size: 'md' })));
const renderedSVG = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="rendericon"]');
expect(renderedSVG).to.exist;
const assignedNodes = renderedSVG.assignedNodes({ flatten: true });
const svg = assignedNodes.find((node) => node.nodeName.toLowerCase() === 'svg');
expect(svg).to.exist;
});
it('should render image for the avatar image', async () => {
var _a, _b;
const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { image: 'mock-image-path', imageDescription: 'test alt text' })));
const imagePath = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img')) === null || _b === void 0 ? void 0 : _b.getAttribute('src');
expect(typeof imagePath).toBe('string');
});
});
//# sourceMappingURL=user-avatar.test.js.map