-
-
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.
Merge branch 'christoshrousis-test/card' into next
- Loading branch information
Showing
1 changed file
with
139 additions
and
0 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 |
---|---|---|
@@ -0,0 +1,139 @@ | ||
import { expect, fixture, html } from '@open-wc/testing'; | ||
|
||
import '../../../dist/shoelace.js'; | ||
import type SlCard from './card'; | ||
|
||
describe('<sl-card>', () => { | ||
let el: SlCard; | ||
|
||
describe('when provided no parameters', async () => { | ||
before(async () => { | ||
el = await fixture<SlCard>( | ||
html` <sl-card>This is just a basic card. No image, no header, and no footer. Just your content.</sl-card> ` | ||
); | ||
}); | ||
|
||
it('should render a component that passes accessibility test.', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should render the child content provided.', async () => { | ||
expect(el.innerText).to.eq('This is just a basic card. No image, no header, and no footer. Just your content.'); | ||
}); | ||
|
||
it('should contain the class card.', async () => { | ||
const card = el.shadowRoot.querySelector('.card') as HTMLElement; | ||
expect(card.classList.value.trim()).to.eq('card'); | ||
}); | ||
}); | ||
|
||
describe('when provided an element in the slot "header" to render a header', async () => { | ||
before(async () => { | ||
el = await fixture<SlCard>( | ||
html`<sl-card> | ||
<div slot="header">Header Title</div> | ||
This card has a header. You can put all sorts of things in it! | ||
</sl-card>` | ||
); | ||
}); | ||
|
||
it('should render a component that passes accessibility test.', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should render the child content provided.', async () => { | ||
expect(el.innerText).to.contain('This card has a header. You can put all sorts of things in it!'); | ||
}); | ||
|
||
it('render the header content provided.', async () => { | ||
const header = <HTMLDivElement>el.querySelector('div[slot=header]'); | ||
expect(header.innerText).eq('Header Title'); | ||
}); | ||
|
||
it('accept "header" as an assigned child in the shadow root.', async () => { | ||
const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=header]'); | ||
const childNodes = slot.assignedNodes({ flatten: true }); | ||
|
||
expect(childNodes.length).to.eq(1); | ||
}); | ||
|
||
it('should contain the class card--has-header.', async () => { | ||
const card = el.shadowRoot.querySelector('.card') as HTMLElement; | ||
expect(card.classList.value.trim()).to.eq('card card--has-header'); | ||
}); | ||
}); | ||
|
||
describe('when provided an element in the slot "footer" to render a footer', async () => { | ||
before(async () => { | ||
el = await fixture<SlCard>( | ||
html`<sl-card> | ||
This card has a footer. You can put all sorts of things in it! | ||
<div slot="footer">Footer Content</div> | ||
</sl-card>` | ||
); | ||
}); | ||
|
||
it('should render a component that passes accessibility test.', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should render the child content provided.', async () => { | ||
expect(el.innerText).to.contain('This card has a footer. You can put all sorts of things in it!'); | ||
}); | ||
|
||
it('render the footer content provided.', async () => { | ||
const footer = <HTMLDivElement>el.querySelector('div[slot=footer]'); | ||
expect(footer.innerText).eq('Footer Content'); | ||
}); | ||
|
||
it('accept "footer" as an assigned child in the shadow root.', async () => { | ||
const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=footer]'); | ||
const childNodes = slot.assignedNodes({ flatten: true }); | ||
|
||
expect(childNodes.length).to.eq(1); | ||
}); | ||
|
||
it('should contain the class card--has-footer.', async () => { | ||
const card = el.shadowRoot.querySelector('.card') as HTMLElement; | ||
expect(card.classList.value.trim()).to.eq('card card--has-footer'); | ||
}); | ||
}); | ||
|
||
describe('when provided an element in the slot "image" to render a image', async () => { | ||
before(async () => { | ||
el = await fixture<SlCard>( | ||
html`<sl-card> | ||
<img | ||
slot="image" | ||
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80" | ||
alt="A kitten walks towards camera on top of pallet." | ||
/> | ||
This is a kitten, but not just any kitten. This kitten likes walking along pallets. | ||
</sl-card>` | ||
); | ||
}); | ||
|
||
it('should render a component that passes accessibility test.', async () => { | ||
await expect(el).to.be.accessible(); | ||
}); | ||
|
||
it('should render the child content provided.', async () => { | ||
expect(el.innerText).to.contain( | ||
'This is a kitten, but not just any kitten. This kitten likes walking along pallets.' | ||
); | ||
}); | ||
|
||
it('accept "image" as an assigned child in the shadow root.', async () => { | ||
const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=image]'); | ||
const childNodes = slot.assignedNodes({ flatten: true }); | ||
|
||
expect(childNodes.length).to.eq(1); | ||
}); | ||
|
||
it('should contain the class card--has-image.', async () => { | ||
const card = el.shadowRoot.querySelector('.card') as HTMLElement; | ||
expect(card.classList.value.trim()).to.eq('card card--has-image'); | ||
}); | ||
}); | ||
}); |