Skip to content

Commit

Permalink
Merge branch 'christoshrousis-test/card' into next
Browse files Browse the repository at this point in the history
  • Loading branch information
claviska committed Oct 4, 2021
2 parents 37068c9 + 888ac2e commit ebd8464
Showing 1 changed file with 139 additions and 0 deletions.
139 changes: 139 additions & 0 deletions src/components/card/card.test.ts
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');
});
});
});

0 comments on commit ebd8464

Please sign in to comment.