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';

before(() => {
  chai.should();
});

// TODO(fxbug.dev/110279): re-enable
describe.skip('LogHeader', () => {
  let state: State;
  let logHeader: LogHeader;
  let root: HTMLElement;

  beforeEach(() => {
    root = document.createElement('div');
    state = new State(new FakeWebviewAPi());
    logHeader = new LogHeader(state);
    document.body.appendChild(logHeader.element);
  });

  afterEach(() => {
    root.remove();
  });

  describe('#constructor', () => {
    it('creates header cells for table with resize div', () => {
      const headers = Object.keys(constant.LOGS_HEADERS);
      const el = logHeader.element as HTMLElement;
      el.children.length.should.equal(7);
      for (let i = 0; i < el.children.length; i++) {
        el.children[i].id.should.equal(headers[i]);
        if (i === el.children.length - 1) {
          el.children[i].innerHTML.should.equal('');
        } else {
          el.children[i].innerHTML.should.equal('<div class="column-resize"></div>');
        }
        // Check aria label and index.
        el.children[i].should.have.attr('ariaLabel');
        el.children[i].should.have.attr('ariaColIndex');
        el.children[i].ariaColIndex?.should.equal(i + 1);
      }
    });
  });

  describe('on mouse drag', () => {
    it('has the resizing class', () => {
      const monikerEl = logHeader.element.children[3] as HTMLElement;
      const monikerWidth = state.currentFields['moniker'].width;

      window.getComputedStyle(monikerEl).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.element.children[3] as HTMLElement;
      const monikerWidth = state.currentFields['moniker'].width;

      window.getComputedStyle(monikerEl).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('20px');
    });
  });

  describe('on mouse double click', () => {
    it('resizes column to stored size', () => {
      const monikerEl = logHeader.element.children[3] as HTMLElement;
      const monikerWidth = state.currentFields['moniker'].width;
      const testWidth = 200;

      window.getComputedStyle(monikerEl).width.should.equal(monikerWidth);
      logHeader.setMaxCellWidth('moniker', testWidth);
      monikerEl.children[0].dispatchEvent(new MouseEvent('dblclick'));
      window.getComputedStyle(monikerEl).width.should.equal(`${testWidth}px`);
    });
  });
});