webviews/logging/test/log_header.test.ts

// 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';
import { LogField } from '../src/fields';

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);
    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 messaage are set to percentages in first session.
      for (let i = 0; i < logHeader.children.length - 1; i++) {
        let header = logHeader.children[i].id as LogField;
        let colWidth = Math.round(logHeader.children[i].clientWidth / logHeader.clientWidth * 100);
        state.currentFields[header].width.should.equal(`${colWidth}%`);
      }
    });
  });

  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`);
    });
  });
});