mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-14 06:03:45 +01:00
Merge pull request #32406 from overleaf/mj-tabs-tests
[web] Add cypress tests for tabs GitOrigin-RevId: f48b579ffa97f4ca5c9ae73025413e7b3a7c9ca3
This commit is contained in:
Mathias Jakobsen
committed by
Copybot
Copybot
parent
9c96a0dedb
commit
cc16f15816
@@ -0,0 +1,814 @@
|
||||
import React, { FC, useEffect, useRef } from 'react'
|
||||
import { EditorProviders } from '../../../helpers/editor-providers'
|
||||
import { TabsContainer } from '../../../../../frontend/js/features/source-editor/components/tabs/tabs-container'
|
||||
import {
|
||||
FileTreeDocumentFindResult,
|
||||
FileTreeFileRefFindResult,
|
||||
} from '@/features/ide-react/types/file-tree'
|
||||
import {
|
||||
EditorManager,
|
||||
EditorManagerContext,
|
||||
} from '@/features/ide-react/context/editor-manager-context'
|
||||
import { TAB_TRANSFER_TYPE } from '@/features/ide-react/context/tabs-context'
|
||||
import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
|
||||
|
||||
const DOC_IDS = {
|
||||
main: 'doc-main-id',
|
||||
intro: 'doc-intro-id',
|
||||
appendix: 'doc-appendix-id',
|
||||
bibFile: 'file-bib-id',
|
||||
introA: 'doc-main-a',
|
||||
introB: 'doc-main-b',
|
||||
}
|
||||
|
||||
const FOLDER_IDS = {
|
||||
chapterA: 'folder-chapter-a',
|
||||
chapterB: 'folder-chapter-b',
|
||||
}
|
||||
|
||||
const DOC_NAMES: Record<string, string> = {
|
||||
[DOC_IDS.main]: 'main.tex',
|
||||
[DOC_IDS.intro]: 'intro.tex',
|
||||
[DOC_IDS.appendix]: 'appendix.tex',
|
||||
[DOC_IDS.bibFile]: 'refs.bib',
|
||||
[DOC_IDS.introA]: 'intro.tex',
|
||||
[DOC_IDS.introB]: 'intro.tex',
|
||||
}
|
||||
|
||||
function makeRootFolder(
|
||||
docs: { _id: string; name: string }[] = [],
|
||||
folders: any[] = [],
|
||||
fileRefs: { _id: string; name: string }[] = []
|
||||
) {
|
||||
return [
|
||||
{
|
||||
_id: 'root-folder-id',
|
||||
name: 'rootFolder',
|
||||
docs,
|
||||
folders,
|
||||
fileRefs,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const defaultDocs = [
|
||||
{ _id: DOC_IDS.main, name: 'main.tex' },
|
||||
{ _id: DOC_IDS.intro, name: 'intro.tex' },
|
||||
{ _id: DOC_IDS.appendix, name: 'appendix.tex' },
|
||||
]
|
||||
|
||||
const defaultRootFolder = makeRootFolder(defaultDocs)
|
||||
|
||||
function makeDocEntity(
|
||||
id: string,
|
||||
name: string,
|
||||
path: string[] = ['root-folder-id']
|
||||
): FileTreeDocumentFindResult {
|
||||
return {
|
||||
type: 'doc',
|
||||
entity: { _id: id, name },
|
||||
parent: [],
|
||||
parentFolderId: path[path.length - 1],
|
||||
path,
|
||||
index: 0,
|
||||
}
|
||||
}
|
||||
|
||||
function makeFileRefEntity(
|
||||
id: string,
|
||||
name: string
|
||||
): FileTreeFileRefFindResult {
|
||||
return {
|
||||
type: 'fileRef',
|
||||
entity: {
|
||||
_id: id,
|
||||
name,
|
||||
linkedFileData: undefined,
|
||||
created: new Date().toISOString(),
|
||||
hash: 'abc123',
|
||||
},
|
||||
parent: [],
|
||||
parentFolderId: 'root-folder-id',
|
||||
path: ['root-folder-id'],
|
||||
index: 0,
|
||||
}
|
||||
}
|
||||
|
||||
function makeEditorManagerProvider() {
|
||||
const EditorManagerProvider: FC<React.PropsWithChildren> = ({ children }) => {
|
||||
const value = {
|
||||
getEditorType: () => null,
|
||||
getCurrentDocValue: () => null,
|
||||
getCurrentDocumentId: () => null,
|
||||
setIgnoringExternalUpdates: () => {},
|
||||
openDocWithId: cy.stub().as('openDocWithId').resolves(),
|
||||
openDoc: cy.stub().as('openDoc').resolves(),
|
||||
openDocs: { awaitBufferedOps: cy.stub().resolves() } as any,
|
||||
openFileWithId: cy.stub().as('openFileWithId'),
|
||||
openInitialDoc: cy.stub().resolves(),
|
||||
isLoading: false,
|
||||
jumpToLine: () => {},
|
||||
debugTimers: { current: {} },
|
||||
} as unknown as EditorManager
|
||||
|
||||
return (
|
||||
<EditorManagerContext.Provider value={value}>
|
||||
{children}
|
||||
</EditorManagerContext.Provider>
|
||||
)
|
||||
}
|
||||
return EditorManagerProvider
|
||||
}
|
||||
|
||||
// Rendered inside the provider tree to call handleFileTreeSelect() when a
|
||||
// custom DOM event fires. Also triggers handleFileTreeInit() on mount.
|
||||
function FileSelectionDriver({
|
||||
autoSelectEntity,
|
||||
}: {
|
||||
autoSelectEntity?: FileTreeDocumentFindResult | FileTreeFileRefFindResult
|
||||
} = {}) {
|
||||
const { handleFileTreeSelect, handleFileTreeInit } = useFileTreeOpenContext()
|
||||
const initDone = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!initDone.current) {
|
||||
initDone.current = true
|
||||
handleFileTreeInit()
|
||||
if (autoSelectEntity) {
|
||||
handleFileTreeSelect([autoSelectEntity])
|
||||
}
|
||||
}
|
||||
}, [handleFileTreeInit, handleFileTreeSelect, autoSelectEntity])
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const { detail } = e as CustomEvent
|
||||
handleFileTreeSelect([detail])
|
||||
}
|
||||
document.addEventListener('test:selectEntity', handler)
|
||||
return () => {
|
||||
document.removeEventListener('test:selectEntity', handler)
|
||||
}
|
||||
}, [handleFileTreeSelect])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
// Dispatch a custom event to select an entity (simulates file-tree click).
|
||||
// Must be wrapped in cy.then() so it runs in the Cypress command queue.
|
||||
function selectEntity(
|
||||
entity: FileTreeDocumentFindResult | FileTreeFileRefFindResult
|
||||
) {
|
||||
document.dispatchEvent(
|
||||
new CustomEvent('test:selectEntity', { detail: entity })
|
||||
)
|
||||
}
|
||||
|
||||
function selectDoc(id: string, path?: string[]) {
|
||||
selectEntity(makeDocEntity(id, DOC_NAMES[id], path))
|
||||
}
|
||||
|
||||
function enableEditorTabs() {
|
||||
cy.window().then(win => {
|
||||
win.metaAttributesCache.set('ol-splitTestVariants', {
|
||||
'editor-tabs': 'enabled',
|
||||
})
|
||||
win.metaAttributesCache.set('ol-labsExperiments', ['editor-tabs'])
|
||||
})
|
||||
}
|
||||
|
||||
describe('File Tabs', function () {
|
||||
function mountTabs(options?: { rootFolder?: any }) {
|
||||
const rootFolder = options?.rootFolder ?? defaultRootFolder
|
||||
cy.mount(
|
||||
<EditorProviders
|
||||
rootFolder={rootFolder as any}
|
||||
rootDocId={DOC_IDS.main}
|
||||
providers={{
|
||||
EditorManagerProvider: makeEditorManagerProvider(),
|
||||
}}
|
||||
>
|
||||
<FileSelectionDriver />
|
||||
<TabsContainer />
|
||||
</EditorProviders>
|
||||
)
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
|
||||
cy.interceptEvents()
|
||||
cy.interceptTutorials()
|
||||
cy.interceptCompile()
|
||||
enableEditorTabs()
|
||||
|
||||
// Clear persisted tab state from localStorage
|
||||
cy.window().then(win => {
|
||||
Object.keys(win.localStorage).forEach(key => {
|
||||
if (key.startsWith('open-tabs:')) {
|
||||
win.localStorage.removeItem(key)
|
||||
}
|
||||
})
|
||||
})
|
||||
cy.window().then(win => {
|
||||
win.metaAttributesCache.set('ol-user', { id: 'user1' })
|
||||
})
|
||||
|
||||
mountTabs()
|
||||
})
|
||||
|
||||
describe('Initial file selection', function () {
|
||||
it('automatically creates a tab for the initially opened file', function () {
|
||||
// Re-mount with auto-selection of the root doc to simulate
|
||||
// the file tree opening the initial document on startup
|
||||
cy.mount(
|
||||
<EditorProviders
|
||||
rootFolder={defaultRootFolder as any}
|
||||
rootDocId={DOC_IDS.main}
|
||||
providers={{
|
||||
EditorManagerProvider: makeEditorManagerProvider(),
|
||||
}}
|
||||
>
|
||||
<FileSelectionDriver
|
||||
autoSelectEntity={makeDocEntity(
|
||||
DOC_IDS.intro,
|
||||
DOC_NAMES[DOC_IDS.intro]
|
||||
)}
|
||||
/>
|
||||
<TabsContainer />
|
||||
</EditorProviders>
|
||||
)
|
||||
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should('exist')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Tab display', function () {
|
||||
it('displays a tab when a file is selected', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
})
|
||||
|
||||
it('marks the selected tab as active', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ })
|
||||
.should('have.attr', 'aria-selected', 'true')
|
||||
.and('have.class', 'tab-selected')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Opening tabs on file change', function () {
|
||||
it('opens a new tab when a different file is selected', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
|
||||
// Make main permanent (keypress) so selecting another file doesn't replace it
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Select another file
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should('exist')
|
||||
})
|
||||
|
||||
it('does not duplicate a tab when the same file is selected again', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.findAllByRole('tab').should('have.length', 1)
|
||||
|
||||
// Select the same file again
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
|
||||
cy.findAllByRole('tab').should('have.length', 1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Temporary tabs', function () {
|
||||
it('opens a newly selected file as a temporary tab', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
// The first tab is temporary until a keypress
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should(
|
||||
'have.class',
|
||||
'tab-temporary'
|
||||
)
|
||||
})
|
||||
|
||||
it('makes a temporary tab permanent when a key is pressed', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should(
|
||||
'have.class',
|
||||
'tab-temporary'
|
||||
)
|
||||
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should(
|
||||
'not.have.class',
|
||||
'tab-temporary'
|
||||
)
|
||||
})
|
||||
|
||||
it('replaces a temporary tab when selecting yet another file', function () {
|
||||
// Open main (temporary)
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
|
||||
// Make main permanent
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Open intro (temporary)
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should(
|
||||
'have.class',
|
||||
'tab-temporary'
|
||||
)
|
||||
|
||||
// Open appendix — should replace temporary intro
|
||||
cy.then(() => selectDoc(DOC_IDS.appendix))
|
||||
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should('not.exist')
|
||||
cy.findByRole('tab', { name: /appendix\.tex/ }).should('exist')
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
})
|
||||
|
||||
it('makes a temporary tab permanent on double-click', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should(
|
||||
'have.class',
|
||||
'tab-temporary'
|
||||
)
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).dblclick()
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should(
|
||||
'not.have.class',
|
||||
'tab-temporary'
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Closing tabs', function () {
|
||||
it('closes a tab via the close button', function () {
|
||||
// Open main (permanent)
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Open intro (permanent)
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findAllByRole('tab').should('have.length', 2)
|
||||
|
||||
// Close intro
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).within(() => {
|
||||
cy.findByRole('button', { name: 'Close tab' }).click()
|
||||
})
|
||||
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should('not.exist')
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
})
|
||||
|
||||
it('cannot close the last remaining tab', function () {
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.findAllByRole('tab').should('have.length', 1)
|
||||
|
||||
// Attempt to close the only tab
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).within(() => {
|
||||
cy.findByRole('button', { name: 'Close tab' }).click()
|
||||
})
|
||||
|
||||
// Tab must still exist
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
cy.findAllByRole('tab').should('have.length', 1)
|
||||
})
|
||||
|
||||
it('switches to an adjacent tab when closing the currently active tab', function () {
|
||||
// Open three permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.appendix))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findAllByRole('tab').should('have.length', 3)
|
||||
|
||||
// Close the currently selected tab (appendix — the last one selected)
|
||||
cy.findByRole('tab', { name: /appendix\.tex/ }).within(() => {
|
||||
cy.findByRole('button', { name: 'Close tab' }).click()
|
||||
})
|
||||
|
||||
cy.findByRole('tab', { name: /appendix\.tex/ }).should('not.exist')
|
||||
|
||||
// The context should have tried to open an adjacent tab
|
||||
cy.get('@openDocWithId').should('have.been.calledWith', DOC_IDS.intro)
|
||||
})
|
||||
|
||||
it('closes a tab on middle-click', function () {
|
||||
// Open two permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findAllByRole('tab').should('have.length', 2)
|
||||
|
||||
// Middle-click intro tab
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).trigger('mouseup', {
|
||||
button: 1,
|
||||
})
|
||||
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should('not.exist')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Tab interaction', function () {
|
||||
it('calls openDocWithId when clicking a non-selected doc tab', function () {
|
||||
// Open two permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Click main tab
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).click()
|
||||
|
||||
cy.get('@openDocWithId').should('have.been.calledWith', DOC_IDS.main)
|
||||
})
|
||||
|
||||
it('calls openFileWithId when clicking a non-selected fileRef tab', function () {
|
||||
const rootFolder = makeRootFolder(
|
||||
[{ _id: DOC_IDS.main, name: 'main.tex' }],
|
||||
[],
|
||||
[{ _id: DOC_IDS.bibFile, name: 'refs.bib' }]
|
||||
)
|
||||
|
||||
mountTabs({ rootFolder })
|
||||
|
||||
// Open main doc (permanent)
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Open fileRef (permanent)
|
||||
cy.then(() =>
|
||||
selectEntity(makeFileRefEntity(DOC_IDS.bibFile, 'refs.bib'))
|
||||
)
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Switch back to main so refs.bib is no longer selected
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).click()
|
||||
|
||||
// Click the fileRef tab
|
||||
cy.findByRole('tab', { name: /refs\.bib/ }).click()
|
||||
|
||||
cy.get('@openFileWithId').should('have.been.calledWith', DOC_IDS.bibFile)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Drag and drop', function () {
|
||||
it('reorders tabs by dragging to the right of another tab', function () {
|
||||
// Open three permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.appendix))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findAllByRole('tab').should('have.length', 3)
|
||||
|
||||
// Verify initial order
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'main.tex')
|
||||
cy.findAllByRole('tab').eq(1).should('contain.text', 'intro.tex')
|
||||
cy.findAllByRole('tab').eq(2).should('contain.text', 'appendix.tex')
|
||||
|
||||
// Drag main to the right of appendix
|
||||
const dataTransfer = new DataTransfer()
|
||||
dataTransfer.setData(TAB_TRANSFER_TYPE, DOC_IDS.main)
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).trigger('dragstart', {
|
||||
dataTransfer,
|
||||
})
|
||||
|
||||
cy.findByRole('tab', { name: /appendix\.tex/ }).then($el => {
|
||||
const rect = $el[0].getBoundingClientRect()
|
||||
cy.wrap($el).trigger('dragover', {
|
||||
dataTransfer,
|
||||
clientX: rect.left + rect.width * 0.75,
|
||||
})
|
||||
cy.wrap($el).trigger('drop', {
|
||||
dataTransfer,
|
||||
clientX: rect.left + rect.width * 0.75,
|
||||
})
|
||||
})
|
||||
|
||||
// Expected order after move: intro, appendix, main
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'intro.tex')
|
||||
cy.findAllByRole('tab').eq(1).should('contain.text', 'appendix.tex')
|
||||
cy.findAllByRole('tab').eq(2).should('contain.text', 'main.tex')
|
||||
})
|
||||
|
||||
it('reorders tabs by dragging to the left of another tab', function () {
|
||||
// Open three permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.appendix))
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Verify initial order
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'main.tex')
|
||||
cy.findAllByRole('tab').eq(1).should('contain.text', 'intro.tex')
|
||||
cy.findAllByRole('tab').eq(2).should('contain.text', 'appendix.tex')
|
||||
|
||||
// Drag appendix to the left of main
|
||||
const dataTransfer = new DataTransfer()
|
||||
dataTransfer.setData(TAB_TRANSFER_TYPE, DOC_IDS.appendix)
|
||||
|
||||
cy.findByRole('tab', { name: /appendix\.tex/ }).trigger('dragstart', {
|
||||
dataTransfer,
|
||||
})
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).then($el => {
|
||||
const rect = $el[0].getBoundingClientRect()
|
||||
cy.wrap($el).trigger('dragover', {
|
||||
dataTransfer,
|
||||
clientX: rect.left + rect.width * 0.25,
|
||||
})
|
||||
cy.wrap($el).trigger('drop', {
|
||||
dataTransfer,
|
||||
clientX: rect.left + rect.width * 0.25,
|
||||
})
|
||||
})
|
||||
|
||||
// Expected order: appendix, main, intro
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'appendix.tex')
|
||||
cy.findAllByRole('tab').eq(1).should('contain.text', 'main.tex')
|
||||
cy.findAllByRole('tab').eq(2).should('contain.text', 'intro.tex')
|
||||
})
|
||||
|
||||
it('shows a drop indicator when dragging over a tab', function () {
|
||||
// Open two permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
const dataTransfer = new DataTransfer()
|
||||
dataTransfer.setData(TAB_TRANSFER_TYPE, DOC_IDS.intro)
|
||||
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).trigger('dragstart', {
|
||||
dataTransfer,
|
||||
})
|
||||
|
||||
// Drag over left side of main tab
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).then($el => {
|
||||
const rect = $el[0].getBoundingClientRect()
|
||||
cy.wrap($el).trigger('dragover', {
|
||||
dataTransfer,
|
||||
clientX: rect.left + rect.width * 0.25,
|
||||
})
|
||||
})
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should(
|
||||
'have.class',
|
||||
'tab-drop-left'
|
||||
)
|
||||
|
||||
// Drag leave should clear the indicator
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).trigger('dragleave')
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should(
|
||||
'not.have.class',
|
||||
'tab-drop-left'
|
||||
)
|
||||
})
|
||||
|
||||
it('drops onto the tablist to move a tab to the end', function () {
|
||||
// Open three permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.appendix))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'main.tex')
|
||||
|
||||
// Drag main to the tablist gutter (right of last tab)
|
||||
const dataTransfer = new DataTransfer()
|
||||
dataTransfer.setData(TAB_TRANSFER_TYPE, DOC_IDS.main)
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).trigger('dragstart', {
|
||||
dataTransfer,
|
||||
})
|
||||
|
||||
cy.findByRole('tablist').trigger('dragover', { dataTransfer })
|
||||
cy.findByRole('tablist').trigger('drop', { dataTransfer })
|
||||
|
||||
// main should now be last
|
||||
cy.findAllByRole('tab').last().should('contain.text', 'main.tex')
|
||||
})
|
||||
|
||||
it('does nothing when dropping a tab on itself', function () {
|
||||
// Open two permanent tabs
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.intro))
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'main.tex')
|
||||
cy.findAllByRole('tab').eq(1).should('contain.text', 'intro.tex')
|
||||
|
||||
// Drag main onto itself
|
||||
const dataTransfer = new DataTransfer()
|
||||
dataTransfer.setData(TAB_TRANSFER_TYPE, DOC_IDS.main)
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).trigger('dragstart', {
|
||||
dataTransfer,
|
||||
})
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).then($el => {
|
||||
const rect = $el[0].getBoundingClientRect()
|
||||
cy.wrap($el).trigger('dragover', {
|
||||
dataTransfer,
|
||||
clientX: rect.left + rect.width * 0.75,
|
||||
})
|
||||
cy.wrap($el).trigger('drop', {
|
||||
dataTransfer,
|
||||
clientX: rect.left + rect.width * 0.75,
|
||||
})
|
||||
})
|
||||
|
||||
// Order unchanged
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'main.tex')
|
||||
cy.findAllByRole('tab').eq(1).should('contain.text', 'intro.tex')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Path disambiguation for duplicate names', function () {
|
||||
const duplicateNameRootFolder = makeRootFolder(
|
||||
[{ _id: DOC_IDS.main, name: 'main.tex' }],
|
||||
[
|
||||
{
|
||||
_id: FOLDER_IDS.chapterA,
|
||||
name: 'chapter-a',
|
||||
docs: [{ _id: DOC_IDS.introA, name: 'intro.tex' }],
|
||||
folders: [],
|
||||
fileRefs: [],
|
||||
},
|
||||
{
|
||||
_id: FOLDER_IDS.chapterB,
|
||||
name: 'chapter-b',
|
||||
docs: [{ _id: DOC_IDS.introB, name: 'intro.tex' }],
|
||||
folders: [],
|
||||
fileRefs: [],
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
it('shows disambiguated paths when two files share the same name', function () {
|
||||
mountTabs({ rootFolder: duplicateNameRootFolder })
|
||||
|
||||
// Open main.tex (unique name, no disambiguation needed)
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Open intro.tex from chapter-a
|
||||
cy.then(() =>
|
||||
selectDoc(DOC_IDS.introA, ['root-folder-id', FOLDER_IDS.chapterA])
|
||||
)
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Open intro.tex from chapter-b
|
||||
cy.then(() =>
|
||||
selectDoc(DOC_IDS.introB, ['root-folder-id', FOLDER_IDS.chapterB])
|
||||
)
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findAllByRole('tab').should('have.length', 3)
|
||||
|
||||
// main.tex is unique — should display without a path prefix
|
||||
cy.findAllByRole('tab').eq(0).should('contain.text', 'main.tex')
|
||||
|
||||
// The two intro.tex tabs should be disambiguated with their folder names
|
||||
cy.findAllByRole('tab')
|
||||
.eq(1)
|
||||
.should('contain.text', 'chapter-a/intro.tex')
|
||||
cy.findAllByRole('tab')
|
||||
.eq(2)
|
||||
.should('contain.text', 'chapter-b/intro.tex')
|
||||
})
|
||||
|
||||
it('uses only the file name when there is no collision', function () {
|
||||
mountTabs({ rootFolder: duplicateNameRootFolder })
|
||||
|
||||
// Open just one of the duplicate-named files
|
||||
cy.then(() =>
|
||||
selectDoc(DOC_IDS.introA, ['root-folder-id', FOLDER_IDS.chapterA])
|
||||
)
|
||||
cy.get('body').type('a')
|
||||
|
||||
// With only one intro.tex open, no disambiguation is needed
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should('exist')
|
||||
cy.findByRole('tab', { name: /intro\.tex/ }).should(
|
||||
'not.contain.text',
|
||||
'chapter-a/'
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Multiple file types', function () {
|
||||
it('displays tabs for both docs and file refs', function () {
|
||||
const rootFolder = makeRootFolder(
|
||||
[{ _id: DOC_IDS.main, name: 'main.tex' }],
|
||||
[],
|
||||
[{ _id: DOC_IDS.bibFile, name: 'refs.bib' }]
|
||||
)
|
||||
|
||||
mountTabs({ rootFolder })
|
||||
|
||||
// Open main doc
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Open a fileRef
|
||||
cy.then(() =>
|
||||
selectEntity(makeFileRefEntity(DOC_IDS.bibFile, 'refs.bib'))
|
||||
)
|
||||
cy.get('body').type('a')
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
|
||||
cy.findByRole('tab', { name: /refs\.bib/ }).should('exist')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Tab scroll into view', function () {
|
||||
it('scrolls the selected tab into view', function () {
|
||||
const manyDocs = [
|
||||
{ _id: DOC_IDS.main, name: 'main.tex' },
|
||||
...Array.from({ length: 10 }, (_, i) => ({
|
||||
_id: `ch${i + 1}`,
|
||||
name: `chapter-${i + 1}.tex`,
|
||||
})),
|
||||
]
|
||||
const rootFolder = makeRootFolder(manyDocs)
|
||||
mountTabs({ rootFolder })
|
||||
|
||||
// Open main and make it permanent
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
cy.get('body').type('a')
|
||||
|
||||
// Open all chapter tabs first so they push main.tex out of view
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
const id = `ch${i}`
|
||||
cy.then(() => selectEntity(makeDocEntity(id, `chapter-${i}.tex`)))
|
||||
cy.get('body').type('a')
|
||||
cy.findByRole('tab', { name: new RegExp(`chapter-${i}.tex`) }).should(
|
||||
'be.visible'
|
||||
)
|
||||
}
|
||||
|
||||
// Now select main again — it should be scrolled back into view
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
|
||||
cy.findByRole('tab', { name: /main\.tex/ }).should('be.visible')
|
||||
})
|
||||
})
|
||||
|
||||
describe('SplitTestBadge', function () {
|
||||
it('renders the labs badge icon in the tabs container', function () {
|
||||
cy.window().then(win => {
|
||||
win.metaAttributesCache.set('ol-splitTestInfo', {
|
||||
'editor-tabs': {
|
||||
phase: 'beta',
|
||||
badgeInfo: {
|
||||
url: '/beta/editor-tabs',
|
||||
tooltipText: 'Editor tabs are in beta',
|
||||
},
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
mountTabs()
|
||||
|
||||
cy.then(() => selectDoc(DOC_IDS.main))
|
||||
|
||||
cy.get('.editor-tabs-labs-icon').should('exist')
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user