import { expect } from 'chai' import React from 'react' import sinon from 'sinon' import { screen, render, fireEvent, waitFor } from '@testing-library/react' import fetchMock from 'fetch-mock' import FileTreeRoot from '../../../../../frontend/js/features/file-tree/components/file-tree-root' describe('', function () { const onSelect = sinon.stub() const onInit = sinon.stub() beforeEach(function () { global.requestAnimationFrame = sinon.stub() }) afterEach(function () { delete global.requestAnimationFrame fetchMock.restore() onSelect.reset() onInit.reset() global.localStorage.clear() }) it('renders', function () { const rootFolder = [ { _id: 'root-folder-id', docs: [{ _id: '456def', name: 'main.tex' }], folders: [], fileRefs: [], }, ] const { container } = render( true} refProviders={{}} reindexReferences={() => null} setRefProviderEnabled={() => null} setStartedFreeTrial={() => null} rootDocId="456def" onSelect={onSelect} onInit={onInit} isConnected /> ) screen.queryByRole('tree') screen.getByRole('treeitem') screen.getByRole('treeitem', { name: 'main.tex', selected: true }) expect(container.querySelector('.disconnected-overlay')).to.not.exist }) it('renders with invalid selected doc in local storage', async function () { global.localStorage.setItem( 'doc.open_id.123abc', JSON.stringify('not-a-valid-id') ) const rootFolder = [ { _id: 'root-folder-id', docs: [{ _id: '456def', name: 'main.tex' }], folders: [], fileRefs: [], }, ] render( true} refProviders={{}} reindexReferences={() => null} setRefProviderEnabled={() => null} setStartedFreeTrial={() => null} rootDocId="456def" onSelect={onSelect} onInit={onInit} isConnected /> ) // as a proxy to check that the invalid entity ha not been select we start // a delete and ensure the modal is displayed (the cancel button can be // selected) This is needed to make sure the test fail. const treeitemFile = screen.getByRole('treeitem', { name: 'main.tex' }) fireEvent.click(treeitemFile, { ctrlKey: true }) const deleteButton = screen.getByRole('menuitem', { name: 'Delete' }) fireEvent.click(deleteButton) await waitFor(() => screen.getByRole('button', { name: 'Cancel' })) }) it('renders disconnected overlay', function () { const rootFolder = [ { _id: 'root-folder-id', docs: [{ _id: '456def', name: 'main.tex' }], folders: [], fileRefs: [], }, ] const { container } = render( true} refProviders={{}} reindexReferences={() => null} setRefProviderEnabled={() => null} setStartedFreeTrial={() => null} /> ) expect(container.querySelector('.disconnected-overlay')).to.exist }) it('fire onSelect', function () { const rootFolder = [ { _id: 'root-folder-id', docs: [ { _id: '456def', name: 'main.tex' }, { _id: '789ghi', name: 'other.tex' }, ], folders: [], fileRefs: [], }, ] render( true} refProviders={{}} reindexReferences={() => null} setRefProviderEnabled={() => null} setStartedFreeTrial={() => null} onSelect={onSelect} onInit={onInit} isConnected /> ) sinon.assert.calledOnce(onSelect) sinon.assert.calledWithMatch(onSelect, [ sinon.match({ entity: { _id: '456def', name: 'main.tex', }, }), ]) onSelect.reset() screen.queryByRole('tree') const treeitem = screen.getByRole('treeitem', { name: 'other.tex' }) fireEvent.click(treeitem) sinon.assert.calledOnce(onSelect) sinon.assert.calledWithMatch(onSelect, [ sinon.match({ entity: { _id: '789ghi', name: 'other.tex', }, }), ]) }) it('listen to editor.openDoc', function () { const rootFolder = [ { _id: 'root-folder-id', docs: [ { _id: '456def', name: 'main.tex' }, { _id: '789ghi', name: 'other.tex' }, ], folders: [], fileRefs: [], }, ] render( true} refProviders={{}} reindexReferences={() => null} setRefProviderEnabled={() => null} setStartedFreeTrial={() => null} onSelect={onSelect} onInit={onInit} isConnected /> ) screen.getByRole('treeitem', { name: 'main.tex', selected: true }) // entities not found should be ignored window.dispatchEvent( new CustomEvent('editor.openDoc', { detail: 'not-an-id' }) ) screen.getByRole('treeitem', { name: 'main.tex', selected: true }) window.dispatchEvent( new CustomEvent('editor.openDoc', { detail: '789ghi' }) ) screen.getByRole('treeitem', { name: 'main.tex', selected: false }) screen.getByRole('treeitem', { name: 'other.tex', selected: true }) }) })