| // 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 { LogField } from '../src/fields'; |
| import {LogHeader} from '../components/log_header'; |
| import {LogList} from '../components/log_list'; |
| import {LogViewOptions} from '../src/fields'; |
| |
| const logOptions: LogViewOptions = { |
| columnFormatter: (_fieldName, text) => text, |
| showControls: true |
| }; |
| |
| 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(); |
| logList = new LogList(state.currentFields, state.shouldWrapLogs, |
| state.setHeaderWidth.bind(state), state.currentFilter, logOptions); |
| root.appendChild(logList); |
| await logList.updateComplete; |
| logHeader = logList.shadowRoot!.children[0] as LogHeader; |
| }); |
| |
| 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}`); |
| } |
| }); |
| |
| it('maintains header size state in session', () => { |
| // Headers except for message are set to percentages in first session. |
| let lastWidth = logHeader.clientWidth; |
| for (let i = 0; i < logHeader.children.length - 1; i++) { |
| let header = logHeader.children[i].id as LogField; |
| let stateWidth = parseInt(state.currentFields[header].width) * logHeader.clientWidth / 100; |
| logHeader.children[i].clientWidth.should.equal(Math.round(stateWidth)); |
| lastWidth -= Math.round(stateWidth); |
| } |
| logHeader.children[logHeader.children.length - 1].clientWidth.should |
| .equal(Math.round(lastWidth)); |
| }); |
| |
| }); |
| |
| describe('on mouse drag', () => { |
| it('has the resizing class', () => { |
| const monikerEl = logHeader.children[3] as HTMLElement; |
| 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; |
| monikerEl.style.width = '100px'; |
| const monikerWidthOnPage = monikerEl.clientWidth; |
| |
| monikerEl.style.width.should.equal(`${monikerWidthOnPage}px`); |
| 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 = 100; |
| const testWidth = 200; |
| |
| monikerEl.style.width = '100px'; |
| monikerEl.style.width.should.equal(`${monikerWidth}px`); |
| logHeader.setMaxCellWidth('moniker', testWidth); |
| monikerEl.children[0].dispatchEvent(new MouseEvent('dblclick')); |
| window.getComputedStyle(monikerEl).width.should.equal(`${testWidth}px`); |
| }); |
| }); |
| }); |