webviews/logging/test/log_control.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 chaiDom from 'chai-dom'; // not esm
import chai from 'chai'; // not esm
import { LogControl, PARSE_ERROR_MSG_ID } from '../components/log_control';
import { SEARCH_PLACEHOLDER } from '../src/constants';
import { AndExpression, FilterExpression, Filter } from '../src/filter';

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

describe('LogControl', () => {
  let logControl: LogControl;

  beforeEach(() => {
    logControl = document.createElement('log-control') as LogControl;
    document.body.appendChild(logControl);
  });

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

  describe('#constructor', () => {
    it('crates an empty log control', async () => {
      await logControl.updateComplete;
      const searchBox = logControl.shadowRoot!.querySelector('#search') as HTMLInputElement;
      const error = logControl
        .shadowRoot!.querySelector(`#${PARSE_ERROR_MSG_ID}`) as HTMLParagraphElement;
      searchBox.value.should.be.empty;
      error.innerText.should.be.empty;
      searchBox.placeholder.should.equal(SEARCH_PLACEHOLDER);
    });

    it('uses the given value when creating a new log control', async () => {
      const filterText = 'moniker:core/foo severity:info';
      logControl.setAttribute('value', filterText);
      await logControl.updateComplete;
      const searchBox = logControl.shadowRoot!.querySelector('#search') as HTMLInputElement;
      searchBox.value.should.equal(filterText);
      searchBox.placeholder.should.equal(SEARCH_PLACEHOLDER);
    });
  });

  describe('on search box enter', () => {
    it('updates the state', async () => {
      const filterText = 'moniker:core/bar severity:info';
      logControl.setAttribute('value', filterText);
      await logControl.updateComplete;
      const promise = new Promise<{ filter: FilterExpression, text: String }>((resolve) => {
        logControl.addEventListener(LogControl.filterChangeEvent, (e) => {
          const event = e as CustomEvent;
          resolve(event.detail);
        });
      });
      const searchBox = logControl.shadowRoot!.querySelector('#search') as HTMLInputElement;
      searchBox.dispatchEvent(new KeyboardEvent('keypress', { 'key': 'Enter' }));
      const { filter, text } = await promise;
      filter.should.deep.equal(new AndExpression([
        new Filter({
          category: 'moniker',
          operator: 'contains',
          subCategory: undefined,
          value: 'core/bar',
        }),
        new Filter({
          category: 'severity',
          operator: 'contains',
          subCategory: undefined,
          value: 'info',
        })
      ]));
      text.should.deep.equal(filterText);

      const error = logControl
        .shadowRoot!.querySelector(`#${PARSE_ERROR_MSG_ID}`) as HTMLParagraphElement;
      error.innerText.should.be.empty;
    });

    it('displays parsing errors', async () => {
      await logControl.updateComplete;
      const searchBox = logControl
        .shadowRoot!.querySelector('#search') as HTMLInputElement;
      const error = logControl
        .shadowRoot!.querySelector(`#${PARSE_ERROR_MSG_ID}`) as HTMLParagraphElement;
      const filterText = 'moniker:';
      searchBox.value = filterText;
      error.innerText.should.be.empty;
      searchBox.dispatchEvent(new KeyboardEvent('keypress', { 'key': 'Enter' }));
      await logControl.updateComplete;
      error.innerText.startsWith('SyntaxError').should.be.true;
    });
  });
});