-
-
Notifications
You must be signed in to change notification settings - Fork 805
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: components/breadcrumb-item (#541)
* test: migrate skipped tests to the breadcrumb-item * test: when rendering a HTMLAnchorElement * test: add checks for classes. * test: uplift langauge and query selector to test label part * test: default button test * refactor: set default for rel on prop declaration.
- Loading branch information
1 parent
ded01cf
commit bc3e9c4
Showing
3 changed files
with
158 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,160 @@ | ||
import { expect, fixture, html, waitUntil } from '@open-wc/testing'; | ||
// import sinon from 'sinon'; | ||
import { expect, fixture, html } from '@open-wc/testing'; | ||
|
||
import '../../../dist/shoelace.js'; | ||
import type SlBreadcrumbItem from './breadcrumb-item'; | ||
|
||
describe('<sl-breadcrumb-item>', () => { | ||
it('should render a component', async () => { | ||
const el = await fixture(html` <sl-breadcrumb-item></sl-breadcrumb-item> `); | ||
let el: SlBreadcrumbItem; | ||
|
||
expect(el).to.exist; | ||
describe('when not provided a href attribute', async () => { | ||
before(async () => { | ||
el = await fixture<SlBreadcrumbItem>(html` <sl-breadcrumb-item>Home</sl-breadcrumb-item> `); | ||
}); | ||
|
||
it('should render a component that passes accessibility test', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should hide the seperator from screen readers', async () => { | ||
const separator: HTMLSpanElement = el.shadowRoot.querySelector('[part="separator"]'); | ||
expect(separator).attribute('aria-hidden', 'true'); | ||
}); | ||
|
||
it('should render a HTMLButtonElement as the part "label", with a set type "button"', () => { | ||
const button: HTMLButtonElement = el.shadowRoot.querySelector('[part="label"]'); | ||
expect(button).to.exist; | ||
expect(button).attribute('type', 'button'); | ||
}); | ||
}); | ||
|
||
describe('when provided a href attribute', async () => { | ||
describe('and no target', () => { | ||
before(async () => { | ||
el = await fixture<SlBreadcrumbItem>(html` | ||
<sl-breadcrumb-item href="https://jsonplaceholder.typicode.com/">Home</sl-breadcrumb-item> | ||
`); | ||
}); | ||
|
||
it('should render a component that passes accessibility test', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should render a HTMLAnchorElement as the part "label", with the supplied href value', () => { | ||
const hyperlink: HTMLAnchorElement = el.shadowRoot.querySelector('[part="label"]'); | ||
expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/'); | ||
}); | ||
}); | ||
|
||
describe('and target, without rel', () => { | ||
before(async () => { | ||
el = await fixture<SlBreadcrumbItem>(html` | ||
<sl-breadcrumb-item href="https://jsonplaceholder.typicode.com/" target="_blank">Help</sl-breadcrumb-item> | ||
`); | ||
}); | ||
|
||
it('should render a component that passes accessibility test', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
describe('should render a HTMLAnchorElement as the part "label"', () => { | ||
let hyperlink: HTMLAnchorElement; | ||
|
||
before(() => { | ||
hyperlink = el.shadowRoot.querySelector('[part="label"]'); | ||
}); | ||
|
||
it('should use the supplied href value, as the href attribute value', () => { | ||
expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/'); | ||
}); | ||
|
||
it('should default rel attribute to "noreferrer noopener"', () => { | ||
expect(hyperlink).attribute('rel', 'noreferrer noopener'); | ||
}); | ||
}); | ||
}); | ||
|
||
describe('and target, with rel', () => { | ||
before(async () => { | ||
el = await fixture<SlBreadcrumbItem>(html` | ||
<sl-breadcrumb-item href="https://jsonplaceholder.typicode.com/" target="_blank" rel="alternate" | ||
>Help</sl-breadcrumb-item | ||
> | ||
`); | ||
}); | ||
|
||
it('should render a component that passes accessibility test', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
describe('should render a HTMLAnchorElement', () => { | ||
let hyperlink: HTMLAnchorElement; | ||
|
||
before(() => { | ||
hyperlink = el.shadowRoot.querySelector('a'); | ||
}); | ||
|
||
it('should use the supplied href value, as the href attribute value', () => { | ||
expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/'); | ||
}); | ||
|
||
it('should use the supplied rel value, as the rel attribute value', () => { | ||
expect(hyperlink).attribute('rel', 'alternate'); | ||
}); | ||
}); | ||
}); | ||
}); | ||
|
||
describe('when provided an element in the slot "prefix" to support prefix icons', async () => { | ||
before(async () => { | ||
el = await fixture<SlBreadcrumbItem>(html` | ||
<sl-breadcrumb-item> | ||
<span class="prefix-example" slot="prefix">/</span> | ||
Home | ||
</sl-breadcrumb-item> | ||
`); | ||
}); | ||
|
||
it('should render a component that passes accessibility test', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should accept as an assigned child in the shadow root', () => { | ||
const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=prefix]'); | ||
const childNodes = slot.assignedNodes({ flatten: true }); | ||
|
||
expect(childNodes.length).to.eq(1); | ||
}); | ||
|
||
it('should append class "breadcrumb-item--has-prefix" to "base" part', () => { | ||
const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement; | ||
expect(part.classList.value).to.equal('breadcrumb-item breadcrumb-item--has-prefix'); | ||
}); | ||
}); | ||
|
||
describe('when provided an element in the slot "suffix" to support suffix icons', async () => { | ||
before(async () => { | ||
el = await fixture<SlBreadcrumbItem>(html` | ||
<sl-breadcrumb-item> | ||
<span class="prefix-example" slot="suffix">/</span> | ||
Security | ||
</sl-breadcrumb-item> | ||
`); | ||
}); | ||
|
||
it('should render a component that passes accessibility test', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should accept as an assigned child in the shadow root', () => { | ||
const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=suffix]'); | ||
const childNodes = slot.assignedNodes({ flatten: true }); | ||
|
||
expect(childNodes.length).to.eq(1); | ||
}); | ||
|
||
it('should append class "breadcrumb-item--has-suffix" to "base" part', () => { | ||
const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement; | ||
expect(part.classList.value).to.equal('breadcrumb-item breadcrumb-item--has-suffix'); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters