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