webviews/logging/test/log_view_actions.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 { State } from '../src/state';
import { FakeWebviewAPi, logDataForTest } from './util';
import chaiDom from 'chai-dom'; // not esm
import chai from 'chai'; // not esm
import { DONT_WRAP_LOGS, LogViewActions, WRAP_ACTIVE_ATTR, WRAP_LOGS } from '../components/log_view_actions';
import { LogList, WRAP_LOG_TEXT_ATTR } from '../components/log_list';

before(function () {
  chai.should();
  chai.use(chaiDom);
});

describe('LogViewActions', () => {
  let root: HTMLElement;
  let vscode: FakeWebviewAPi;
  let state: State;
  let logList: LogList;

  beforeEach(() => {
    root = document.createElement('div');
    document.body.appendChild(root);
    vscode = new FakeWebviewAPi();
    state = new State(vscode);
    logList = new LogList(state);
  });

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

  describe('#constructor', () => {
    it('crates log view actions buttons', () => {
      const logViewActions = new LogViewActions(logList, state);
      const el = logViewActions.element;
      el.children.length.should.equal(2);
      el.children[0].id.should.equal('clear');
    });

    it('takes state into account when creating the log wrap btn', () => {
      state.shouldWrapLogs = false;
      const logViewActions = new LogViewActions(logList, state);
      const wrapLogsButton = logViewActions.element.querySelector('#wrap-logs') as HTMLDivElement;
      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.false;
      wrapLogsButton.title.should.equal(WRAP_LOGS);
      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.false;
    });
  });

  describe('on clear button press', () => {
    it('reset the log list', () => {
      const logViewActions = new LogViewActions(logList, state);
      const el = logViewActions.element;
      const clearButton = el.querySelector('#clear') as HTMLDivElement;
      logList.addLog(logDataForTest('core/foo'));
      const logsList = logList.element;
      logsList.children.length.should.equal(2);
      clearButton.dispatchEvent(new MouseEvent('click'));
      logsList.children.length.should.equal(1);
    });
  });

  describe('on wrap logs button press', () => {
    it('sets a wrap-log-text attribute in the log list', () => {
      const logViewActions = new LogViewActions(logList, state);
      const el = logViewActions.element;
      const wrapLogsButton = el.querySelector('#wrap-logs') as HTMLDivElement;
      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.true;
      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.true;
      wrapLogsButton.title.should.equal(DONT_WRAP_LOGS);
      state.shouldWrapLogs.should.be.true;

      wrapLogsButton.dispatchEvent(new MouseEvent('click'));
      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.false;
      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.false;
      wrapLogsButton.title.should.equal(WRAP_LOGS);
      state.shouldWrapLogs.should.be.false;

      wrapLogsButton.dispatchEvent(new MouseEvent('click'));
      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.true;
      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.true;
      state.shouldWrapLogs.should.be.true;
    });
  });
});