| import './index'; |
| import { expect } from 'chai'; |
| import { AppSk } from './app-sk'; |
| import { setUpElementUnderTest } from '../test_util'; |
| |
| describe('app-sk', () => { |
| const newInstance = setUpElementUnderTest<AppSk>('app-sk'); |
| |
| describe('creation', () => { |
| it('adds a hamburger button to the header', () => { |
| const appSk = newInstance((el) => el.innerHTML = ` |
| <header></header> |
| <aside></aside> |
| <main></main> |
| <footer></footer> |
| `); |
| const header = appSk.querySelector('header')!; |
| expect(header.children).to.have.length(1); |
| expect(header.firstElementChild?.tagName).to.equal('BUTTON'); |
| }); |
| |
| it('handles there being no header', () => { |
| const appSk = newInstance(); |
| expect(appSk.children).to.be.empty; |
| }); |
| |
| it('handles there being no sidebar', () => { |
| const appSk = newInstance((el) => el.innerHTML = '<header></header>'); |
| expect(appSk.children).to.have.length(1); |
| const header = appSk.querySelector('header')!; |
| expect(header.children).to.be.empty; |
| }); |
| }); |
| |
| describe('sidebar', () => { |
| it('should toggle', () => { |
| const appSk = newInstance((el) => el.innerHTML = ` |
| <header></header> |
| <aside></aside> |
| `); |
| const header = appSk.querySelector('header')!; |
| const sidebar = appSk.querySelector('aside')!; |
| const btn = header?.firstElementChild as HTMLButtonElement; |
| expect(sidebar.classList.contains('shown')).to.be.false; |
| btn.click(); |
| expect(sidebar.classList.contains('shown')).to.be.true; |
| btn.click(); |
| expect(sidebar.classList.contains('shown')).to.be.false; |
| }); |
| }); |
| }); |