js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix avatar tests

Browse Source
This commit is contained in:
Cory LaViska
2025-01-02 13:23:59 -05:00
parent d84d78cab5
commit c35ec9cbce
2 changed files with 8 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/avatar/avatar.test.ts
View File

@@ -3,8 +3,6 @@ import { html } from 'lit';
import { fixtures } from '../../internal/test/fixture.js';
import type WaAvatar from './avatar.js';
// The default avatar background just misses AA contrast, but the next step up is way too dark. Since avatars aren't
// used to display text, we're going to relax this rule.
const ignoredRules = ['color-contrast'];
describe('<wa-avatar>', () => {
@@ -22,9 +20,7 @@ describe('<wa-avatar>', () => {
});
it('should default to circle styling', () => {
const part = el.shadowRoot!.querySelector('[part~="base"]')!;
expect(el.getAttribute('shape')).to.eq('circle');
expect(part.classList.value.trim()).to.eq('avatar avatar--circle');
});
});
@@ -36,25 +32,12 @@ describe('<wa-avatar>', () => {
});
it('should pass accessibility tests', async () => {
/**
* The image element itself is ancillary, because it's parent container contains the
* aria-label which dictates what "wa-avatar" is. This also implies that label text will
* resolve to "" when not provided and ignored by readers. This is why we use alt="" on
* the image element to pass accessibility.
* https://html.spec.whatwg.org/multipage/images.html#ancillary-images
*/
await expect(el).to.be.accessible({ ignoredRules });
});
it('renders "image" part, with src and a role of presentation', () => {
it('renders "image" part with src and proper aria-label', () => {
const part = el.shadowRoot!.querySelector('[part~="image"]')!;
expect(part.getAttribute('src')).to.eq(image);
});
it('renders the label attribute in the "base" part', () => {
const part = el.shadowRoot!.querySelector('[part~="base"]')!;
expect(part.getAttribute('aria-label')).to.eq(label);
});
});
@@ -69,50 +52,10 @@ describe('<wa-avatar>', () => {
await expect(el).to.be.accessible({ ignoredRules });
});
it('renders "initials" part, with initials as the text node', () => {
it('renders "initials" part with initials and proper aria-label', () => {
const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
expect(part.innerText).to.eq(initials);
});
});
describe('when image is present, the initials or icon part should not render', () => {
const initials = 'SL';
const image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const label = 'Small transparent square';
beforeEach(async () => {
el = await fixture<WaAvatar>(
html`<wa-avatar image="${image}" label="${label}" initials="${initials}"></wa-avatar>`,
);
});
it('should pass accessibility tests', async () => {
/**
* The image element itself is ancillary, because it's parent container contains the
* aria-label which dictates what "wa-avatar" is. This also implies that label text will
* resolve to "" when not provided and ignored by readers. This is why we use alt="" on
* the image element to pass accessibility.
* https://html.spec.whatwg.org/multipage/images.html#ancillary-images
*/
await expect(el).to.be.accessible({ ignoredRules });
});
it('renders "image" part, with src and a role of presentation', () => {
const part = el.shadowRoot!.querySelector('[part~="image"]')!;
expect(part.getAttribute('src')).to.eq(image);
});
it('should not render the initials part', () => {
const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
expect(part).to.not.exist;
});
it('should not render the icon part', () => {
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=icon]')!;
expect(slot).to.not.exist;
expect(part.getAttribute('aria-label')).to.eq('Avatar');
});
});
@@ -126,11 +69,8 @@ describe('<wa-avatar>', () => {
await expect(el).to.be.accessible({ ignoredRules });
});
it('appends the appropriate class on the "base" part', () => {
const part = el.shadowRoot!.querySelector('[part~="base"]')!;
it('reflects the shape attribute', () => {
expect(el.getAttribute('shape')).to.eq(shape);
expect(part.classList.value.trim()).to.eq(`avatar avatar--${shape}`);
});
});
});
@@ -149,11 +89,8 @@ describe('<wa-avatar>', () => {
it('should accept as an assigned child in the shadow root', () => {
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=icon]')!;
const childNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];
expect(childNodes.length).to.eq(1);
const span = childNodes[0];
expect(span.innerHTML).to.eq('random content');
expect(childNodes[0].innerHTML).to.eq('random content');
});
});
@@ -161,11 +98,9 @@ describe('<wa-avatar>', () => {
el = await fixture<WaAvatar>(html`<wa-avatar></wa-avatar>`);
el.image = 'bad_image';
await aTimeout(0);
await el.updateComplete;
await waitUntil(() => el.shadowRoot!.querySelector('img') === null);
expect(el.shadowRoot!.querySelector('img')).to.be.null;
await waitUntil(() => el.shadowRoot?.querySelector('img') === null);
expect(el.shadowRoot?.querySelector('img')).to.be.null;
});
it('should show a valid image after being passed an invalid image initially', async () => {
@@ -173,7 +108,6 @@ describe('<wa-avatar>', () => {
await aTimeout(0);
await el.updateComplete;
// await waitUntil(() => el.shadowRoot!.querySelector('img') === null);
expect(el.shadowRoot!.querySelector('img')).to.be.null;
el.image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

2
src/components/avatar/avatar.ts
View File

@@ -66,7 +66,7 @@ export default class WaAvatar extends WebAwesomeElement {
class="image"
src="${this.image}"
loading="${this.loading}"
alt=""
role="img"
aria-label=${this.label}
@error="${this.handleImageLoadError}"
/>