Skip to content

Commit

Permalink
test: restructure and simplify side-nav-item unit tests (#5973)
Browse files Browse the repository at this point in the history
  • Loading branch information
@web-padawan
web-padawan committed Jun 13, 2023
1 parent 2e2b2f0 commit a66992c
Showing 1 changed file with 110 additions and 142 deletions.
252 changes: 110 additions & 142 deletions packages/side-nav/test/side-nav-item.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,14 @@ import '../enable.js';
import '../vaadin-side-nav-item.js';

describe('side-nav-item', () => {
let sideNavItem;

beforeEach(() => {
sideNavItem = fixtureSync('<vaadin-side-nav-item>Label</vaadin-side-nav-item>');
});

it('should have a correct localName', () => {
expect(sideNavItem.localName).to.be.equal('vaadin-side-nav-item');
});

it('should have the correct label', () => {
expect(sideNavItem.textContent).to.be.equal('Label');
});
let item;

describe('custom element definition', () => {
let tagName;

beforeEach(() => {
tagName = sideNavItem.tagName.toLowerCase();
item = fixtureSync('<vaadin-side-nav-item>Label</vaadin-side-nav-item>');
tagName = item.tagName.toLowerCase();
});

it('should be defined in custom element registry', () => {
Expand All @@ -34,165 +23,144 @@ describe('side-nav-item', () => {
expect(customElements.get(tagName).is).to.equal(tagName);
});
});
});

describe('expand', () => {
describe('passive item with children', () => {
let passiveItemWithChildren;

describe('active', () => {
beforeEach(async () => {
passiveItemWithChildren = fixtureSync(`
<vaadin-side-nav-item path="/another-path">
<vaadin-side-nav-item slot="children">Child 1</vaadin-side-nav-item>
<vaadin-side-nav-item slot="children">Child 2</vaadin-side-nav-item>
</vaadin-side-nav-item>`);
await nextRender(passiveItemWithChildren);
});

it('should not be expanded', () => {
expect(passiveItemWithChildren.expanded).to.be.false;
item = fixtureSync(`<vaadin-side-nav-item path=""></vaadin-side-nav-item>`);
await nextRender();
});

it('should have a toggle button', async () => {
expect(passiveItemWithChildren._button).to.be.ok;
it('should set active property to true for matching path', () => {
expect(item.active).to.be.true;
});

it('should expand when toggle button is clicked', () => {
passiveItemWithChildren._button.click();
expect(passiveItemWithChildren.expanded).to.be.true;
it('should reflect active property to attribute', () => {
expect(item.hasAttribute('active')).to.be.true;
});

it('should collapse when toggle button is clicked', () => {
passiveItemWithChildren._button.click();
passiveItemWithChildren._button.click();
expect(passiveItemWithChildren.expanded).to.be.false;
});

it('should dispatch expanded-changed event when expanded changes', async () => {
const spy = sinon.spy();
passiveItemWithChildren.addEventListener('expanded-changed', spy);
passiveItemWithChildren._button.click();
await nextRender(passiveItemWithChildren);
expect(spy.calledOnce).to.be.true;
it('should disallow changing active property to false', async () => {
item.active = false;
await item.updateComplete;
expect(item.active).to.be.true;
});
});

describe('active item with children', () => {
let activeItemWithChildren;

describe('inactive', () => {
beforeEach(async () => {
activeItemWithChildren = fixtureSync(`
<vaadin-side-nav-item path="">
<vaadin-side-nav-item slot="children">Child 1</vaadin-side-nav-item>
<vaadin-side-nav-item slot="children">Child 2</vaadin-side-nav-item>
</vaadin-side-nav-item>`);
await nextRender(activeItemWithChildren);
});

it('should be expanded', () => {
expect(activeItemWithChildren.expanded).to.be.true;
});

it('should have a toggle button', async () => {
expect(activeItemWithChildren._button).to.be.ok;
item = fixtureSync(`<vaadin-side-nav-item path="/another-path"></vaadin-side-nav-item>`);
await nextRender();
});

it('should collapse when toggle button is clicked', () => {
activeItemWithChildren._button.click();
expect(activeItemWithChildren.expanded).to.be.false;
});

it('should expand when toggle button is clicked', () => {
activeItemWithChildren._button.click();
activeItemWithChildren._button.click();
expect(activeItemWithChildren.expanded).to.be.true;
});
});

describe('item without children', () => {
let itemWithoutChildren;

beforeEach(() => {
itemWithoutChildren = fixtureSync('<vaadin-side-nav-item></vaadin-side-nav-item>');
it('should set active property to false when path does not match', () => {
expect(item.active).to.be.false;
});

it('should not have a toggle button', () => {
expect(itemWithoutChildren._button).to.be.not.ok;
it('should not set active attribute when active is set to false', () => {
expect(item.hasAttribute('active')).to.be.false;
});
});
});

describe('active', () => {
describe('read-only', () => {
it('should retain active state', () => {
const activeItem = fixtureSync(`<vaadin-side-nav-item path=""></vaadin-side-nav-item>`);
activeItem.active = false;
expect(activeItem.active).to.be.true;
describe('expanded', () => {
let toggle;

describe('inactive item with children', () => {
beforeEach(async () => {
item = fixtureSync(`
<vaadin-side-nav-item path="/another-path">
<vaadin-side-nav-item slot="children">Child 1</vaadin-side-nav-item>
<vaadin-side-nav-item slot="children">Child 2</vaadin-side-nav-item>
</vaadin-side-nav-item>
`);
await nextRender();
toggle = item.shadowRoot.querySelector('button');
});

it('should set expanded property to false by default', () => {
expect(item.expanded).to.be.false;
});

it('should expand item on first toggle button click', () => {
toggle.click();
expect(item.expanded).to.be.true;
});

it('should collapse item on subsequent toggle button click', () => {
toggle.click();
toggle.click();
expect(item.expanded).to.be.false;
});

it('should dispatch expanded-changed event when expanded changes', async () => {
const spy = sinon.spy();
item.addEventListener('expanded-changed', spy);
toggle.click();
await item.updateComplete;
expect(spy.calledOnce).to.be.true;
});
});

describe('active item with children', () => {
let item;

beforeEach(async () => {
item = fixtureSync(`
<vaadin-side-nav-item path="">
<vaadin-side-nav-item slot="children">Child 1</vaadin-side-nav-item>
<vaadin-side-nav-item slot="children">Child 2</vaadin-side-nav-item>
</vaadin-side-nav-item>
`);
await nextRender();
toggle = item.shadowRoot.querySelector('button');
});

it('should set expanded property to true by default', () => {
expect(item.expanded).to.be.true;
});

it('should collapse item on first toggle button click', () => {
toggle.click();
expect(item.expanded).to.be.false;
});

it('should expand item on subsequent toggle button click', () => {
toggle.click();
toggle.click();
expect(item.expanded).to.be.true;
});
});
});

describe('passive item', () => {
let passiveItem;

beforeEach(() => {
passiveItem = fixtureSync(`<vaadin-side-nav-item path="/another-path"></vaadin-side-nav-item>`);
});
describe('navigation', () => {
let anchor, toggle;

it('should not be expanded', () => {
expect(passiveItem.expanded).to.be.false;
beforeEach(async () => {
item = fixtureSync('<vaadin-side-nav-item></vaadin-side-nav-item>');
await nextRender();
anchor = item.shadowRoot.querySelector('a');
toggle = item.shadowRoot.querySelector('button');
});

it('should not be active', () => {
expect(passiveItem.active).to.be.false;
it('should not set anchor href attribute when no path is set', () => {
expect(anchor.getAttribute('href')).to.be.not.ok;
});
});

describe('active item', () => {
let activeItem;

beforeEach(() => {
activeItem = fixtureSync(`<vaadin-side-nav-item path=""></vaadin-side-nav-item>`);
it('should set empty href to the anchor when path is empty string', async () => {
item.path = '';
await nextRender();
expect(anchor.getAttribute('href')).to.be.empty;
});

it('should be expanded', () => {
expect(activeItem.expanded).to.be.true;
it('should set correct anchor attribute when non-empty path is set', async () => {
item.path = '/path';
await nextRender();
expect(anchor.getAttribute('href')).to.be.ok;
});

it('should be active', () => {
expect(activeItem.active).to.be.true;
it('should not trigger navigation when toggle button is clicked', async () => {
const spy = sinon.spy();
anchor.addEventListener('click', spy);
toggle.click();
expect(spy.called).to.be.false;
});
});
});

describe('navigation', () => {
let anchor, item;

beforeEach(async () => {
item = fixtureSync('<vaadin-side-nav-item></vaadin-side-nav-item>');
await nextRender(item);
anchor = item.shadowRoot.querySelector('a');
});

it('item without path should not contain href in anchor', () => {
expect(anchor.getAttribute('href')).to.be.not.ok;
});

it('item with empty path should contain empty href in anchor', async () => {
item.path = '';
await nextRender(item);
expect(anchor.getAttribute('href')).to.be.empty;
});

it('item with path should contain href in anchor', async () => {
item.path = '/path';
await nextRender(item);
expect(anchor.getAttribute('href')).to.be.ok;
});

it('should not trigger navigation when toggle button is clicked', async () => {
const spy = sinon.spy();
anchor.addEventListener('click', spy);
item._button.click();
expect(spy.called).to.be.false;
});
});

0 comments on commit a66992c

Please sign in to comment.