import React from 'react' import { expect } from 'chai' import sinon from 'sinon' import { screen, render, fireEvent } from '@testing-library/react' import PreviewLogsPaneEntry from '../../../../../frontend/js/features/preview/components/preview-logs-pane-entry.js' describe('', function () { const level = 'error' it('renders a configurable aria-label', function () { const sampleAriaLabel = 'lorem ipsum dolor sit amet' render( ) screen.getByLabelText(sampleAriaLabel) }) describe('logs pane source location link', function () { const file = 'foo.tex' const line = 42 const column = 21 const onSourceLocationClick = sinon.stub() afterEach(function () { onSourceLocationClick.reset() }) it('renders both file and line', function () { render( ) screen.getByRole('button', { name: `Navigate to log position in source code: ${file}, ${line}`, }) }) it('renders only file when line information is not available', function () { render() screen.getByRole('button', { name: `Navigate to log position in source code: ${file}`, }) }) it('does not render when file information is not available', function () { render() expect( screen.queryByRole('button', { name: `Navigate to log position in source code: `, }) ).to.not.exist }) it('calls the callback with file, line and column on click', function () { render( ) const linkToSourceButton = screen.getByRole('button', { name: `Navigate to log position in source code: ${file}, ${line}`, }) fireEvent.click(linkToSourceButton) expect(onSourceLocationClick).to.be.calledOnce expect(onSourceLocationClick).to.be.calledWith({ file, line, column, }) }) }) describe('logs pane entry raw contents', function () { const rawContent = 'foo bar latex error stuff baz' // JSDom doesn't compute layout/sizing, so we need to simulate sizing for the elements // Here we are simulating that the content is bigger than the `collapsedSize`, so // the expand-collapse widget is used const originalScrollHeight = Object.getOwnPropertyDescriptor( HTMLElement.prototype, 'offsetHeight' ) const originalScrollWidth = Object.getOwnPropertyDescriptor( HTMLElement.prototype, 'offsetWidth' ) beforeEach(function () { Object.defineProperty(HTMLElement.prototype, 'scrollHeight', { configurable: true, value: 500, }) Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 500, }) }) afterEach(function () { Object.defineProperty( HTMLElement.prototype, 'scrollHeight', originalScrollHeight ) Object.defineProperty( HTMLElement.prototype, 'scrollWidth', originalScrollWidth ) }) it('renders collapsed contents by default', function () { render() screen.getByText(rawContent) screen.getByRole('button', { name: 'Expand', }) }) it('supports expanding contents', function () { render() screen.getByText(rawContent) const expandCollapseBtn = screen.getByRole('button', { name: 'Expand', }) fireEvent.click(expandCollapseBtn) screen.getByRole('button', { name: 'Collapse', }) }) it('should not render at all when there are no log contents', function () { const { container } = render() expect(container.querySelector('.log-entry-content')).to.not.exist }) }) describe('formatted content', function () { const rawContent = 'foo bar latex error stuff baz' const formattedContentText = 'foo bar baz' const formattedContent = <>{formattedContentText} const infoURL = 'www.overleaf.com/learn/latex' it('renders the hint', function () { render( ) screen.getByText(formattedContentText) }) it('renders the link to learn more', function () { render( ) screen.getByRole('link', { name: 'Learn more' }) }) it('does not render the link when it is not available', function () { render( ) expect(screen.queryByRole('link', { name: 'Learn more' })).to.not.exist }) }) })