| // Copyright 2022 The Fuchsia Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| import chai from 'chai'; // not esm |
| import * as constant from '../src/constants'; |
| import { State } from '../src/state'; |
| import { LogHeader } from '../components/log_header'; |
| import {FakeWebviewAPi} from './util'; |
| import {LogList} from '../components/log_list'; |
| |
| before(() => { |
| chai.should(); |
| }); |
| |
| describe('LogHeader', () => { |
| let state: State; |
| let logHeader: LogHeader; |
| let logList: LogList; |
| let root: HTMLElement; |
| |
| beforeEach(async () => { |
| root = document.createElement('div'); |
| document.body.appendChild(root); |
| state = new State(new FakeWebviewAPi()); |
| logList = new LogList(state); |
| root.appendChild(logList.element); |
| logHeader = logList.element.children[0] as LogHeader; |
| await logHeader.updateComplete; |
| }); |
| |
| afterEach(() => { |
| root.remove(); |
| }); |
| |
| describe('#constructor', () => { |
| it('creates header cells for table with resize div', () => { |
| const headers = Object.keys(constant.LOGS_HEADERS); |
| logHeader.children.length.should.equal(7); |
| for (let i = 0; i < logHeader.children.length; i++) { |
| logHeader.children[i].id.should.equal(headers[i]); |
| if (i === logHeader.children.length - 1) { |
| logHeader.children[i].children.length.should.equal(0); |
| } else { |
| logHeader.children[i].children[0].outerHTML.should.equal('<div class="column-resize"></div>'); |
| } |
| // Check aria label and index. |
| logHeader.children[i].should.have.attr('aria-label'); |
| logHeader.children[i].should.have.attr('aria-colindex'); |
| logHeader.children[i].ariaColIndex?.should.equal(`${i + 1}`); |
| } |
| }); |
| }); |
| |
| describe('on mouse drag', () => { |
| it('has the resizing class', () => { |
| const monikerEl = logHeader.children[3] as HTMLElement; |
| const monikerWidth = state.currentFields['moniker'].width; |
| monikerEl.style.width.should.equal(monikerWidth); |
| monikerEl.children[0].classList.contains('resizing').should.equal(false); |
| monikerEl.children[0].dispatchEvent(new MouseEvent('mousedown')); |
| monikerEl.children[0].classList.contains('resizing').should.equal(true); |
| }); |
| |
| it('resizes based on mouse move', () => { |
| const monikerEl = logHeader.children[3] as HTMLElement; |
| const monikerWidth = state.currentFields['moniker'].width; |
| const monikerWidthOnPage = monikerEl.clientWidth; |
| |
| monikerEl.style.width.should.equal(monikerWidth); |
| monikerEl.children[0].dispatchEvent(new MouseEvent('mousedown', { clientX: 0 })); |
| document.dispatchEvent(new MouseEvent('mousemove', { clientX: 20 })); |
| window.getComputedStyle(monikerEl).width.should.equal(`${monikerWidthOnPage + 20}px`); |
| }); |
| }); |
| |
| describe('on mouse double click', () => { |
| it('resizes column to stored size', () => { |
| const monikerEl = logHeader.children[3] as HTMLElement; |
| const monikerWidth = state.currentFields['moniker'].width; |
| const testWidth = 200; |
| |
| monikerEl.style.width.should.equal(monikerWidth); |
| logHeader.setMaxCellWidth('moniker', testWidth); |
| monikerEl.children[0].dispatchEvent(new MouseEvent('dblclick')); |
| window.getComputedStyle(monikerEl).width.should.equal(`${testWidth}px`); |
| }); |
| }); |
| }); |