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 chai from 'chai'; // not esm
import chaiDom from 'chai-dom'; // not esm
import { DONT_WRAP_LOGS, LogViewActions, PAUSE_STREAMING_LOGS, RESUME_STREAMING_LOGS, WRAP_LOGS } from '../components/log_view_actions';

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

describe('LogViewActions', () => {
  let logViewActions: LogViewActions;

  beforeEach(() => {
    logViewActions = document.createElement('log-view-actions') as LogViewActions;
    document.body.appendChild(logViewActions);
  });

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

  describe('#constructor', () => {
    it('crates log view actions buttons', async () => {
      await logViewActions.updateComplete;
      logViewActions.shadowRoot!.children.length.should.equal(3);
      logViewActions.shadowRoot!.children[0].id.should.equal('play-pause');
      logViewActions.shadowRoot!.children[1].id.should.equal('clear');
      logViewActions.shadowRoot!.children[2].id.should.equal('wrap-logs');
    });

    it('correctly initializes the log-wrap btn', async () => {
      let logViewActions = new LogViewActions({ wrappingLogs: false });
      document.body.appendChild(logViewActions);
      await logViewActions.updateComplete;
      let wrapLogsButton = logViewActions.shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
      logViewActions.wrappingLogs.should.be.false;
      wrapLogsButton.title.should.equal(WRAP_LOGS);
      logViewActions.remove();

      logViewActions = new LogViewActions({ wrappingLogs: true });
      document.body.appendChild(logViewActions);
      await logViewActions.updateComplete;
      wrapLogsButton = logViewActions.shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
      logViewActions.wrappingLogs.should.be.true;
      wrapLogsButton.title.should.equal(DONT_WRAP_LOGS);
    });

    it('correctly initializes the play-pause btn', async () => {
      let logViewActions = new LogViewActions({ playActive: true });
      document.body.appendChild(logViewActions);
      await logViewActions.updateComplete;
      let playPauseButton = logViewActions.shadowRoot!.querySelector('#play-pause') as HTMLDivElement;
      logViewActions.playActive.should.be.true;
      playPauseButton.title.should.equal(PAUSE_STREAMING_LOGS);
      playPauseButton.classList.contains('codicon-debug-pause').should.be.true;
      logViewActions.remove();

      logViewActions = new LogViewActions({ playActive: false });
      document.body.appendChild(logViewActions);
      await logViewActions.updateComplete;
      playPauseButton = logViewActions.shadowRoot!.querySelector('#play-pause') as HTMLDivElement;
      logViewActions.playActive.should.be.false;
      playPauseButton.title.should.equal(RESUME_STREAMING_LOGS);
      playPauseButton.classList.contains('codicon-play').should.be.true;
    });
  });

  describe('on clear button press', () => {
    it('emits clear requested event', async () => {
      await logViewActions.updateComplete;
      const clearButton = logViewActions.shadowRoot!.querySelector('#clear') as HTMLDivElement;
      const promise = new Promise<{}>((resolve) => {
        logViewActions.addEventListener(LogViewActions.clearRequestedEvent, (e) => {
          resolve({});
        });
      });
      clearButton.click();
      await promise;
    });
  });

  describe('on wrap logs button press', () => {
    it('emits log wrapping event and updates itself', async () => {
      await logViewActions.updateComplete;
      const wrapLogsButton = logViewActions
        .shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
      let promise = new Promise<{ wrapLogs: boolean }>((resolve) => {
        logViewActions.addEventListener(LogViewActions.wrapLogsChangeEvent, (e) => {
          const event = e as CustomEvent;
          resolve(event.detail);
        });
      });
      wrapLogsButton.click();

      let payload = await promise;
      payload.wrapLogs.should.be.true;
      await logViewActions.updateComplete;
      logViewActions.wrappingLogs.should.be.true;
      wrapLogsButton.title.should.equal(DONT_WRAP_LOGS);

      // Clicking again should toggle the state.

      promise = new Promise<{ wrapLogs: boolean }>((resolve) => {
        logViewActions.addEventListener(LogViewActions.wrapLogsChangeEvent, (e) => {
          const event = e as CustomEvent;
          resolve(event.detail);
        });
      });
      wrapLogsButton.click();

      payload = await promise;
      payload.wrapLogs.should.be.false;
      await logViewActions.updateComplete;
      logViewActions.wrappingLogs.should.be.false;
      wrapLogsButton.title.should.equal(WRAP_LOGS);
    });
  });

  describe('on play/pause button press', () => {
    it('emits a play-pause-change event and updates itself', async () => {
      await logViewActions.updateComplete;
      const playPauseButton = logViewActions
        .shadowRoot!.querySelector('#play-pause') as HTMLDivElement;
      let promise = new Promise<{ playActive: boolean }>((resolve) => {
        logViewActions.addEventListener(LogViewActions.playPauseChangeEvent, (e) => {
          const event = e as CustomEvent;
          resolve(event.detail);
        });
      });
      playPauseButton.click();

      let payload = await promise;
      payload.playActive.should.be.true;
      await logViewActions.updateComplete;
      logViewActions.playActive.should.be.true;
      playPauseButton.title.should.equal(PAUSE_STREAMING_LOGS);
      playPauseButton.classList.contains('codicon-debug-pause').should.be.true;
      playPauseButton.classList.contains('codicon-play').should.be.false;

      // Clicking again should toggle the state.

      promise = new Promise<{ playActive: boolean }>((resolve) => {
        logViewActions.addEventListener(LogViewActions.playPauseChangeEvent, (e) => {
          const event = e as CustomEvent;
          resolve(event.detail);
        });
      });
      playPauseButton.click();

      payload = await promise;
      payload.playActive.should.be.false;
      await logViewActions.updateComplete;
      playPauseButton.title.should.equal(RESUME_STREAMING_LOGS);
      playPauseButton.classList.contains('codicon-play').should.be.true;
      playPauseButton.classList.contains('codicon-pause').should.be.false;
    });
  });
});