enso/app/gui/integration-test/project-view/rightPanel.spec.ts

import { expect, test } from 'playwright/test'
import * as actions from './actions'
import { mockCollapsedFunctionInfo, mockMethodCallInfo } from './expressionUpdates'
import { CONTROL_KEY } from './keyboard'
import * as locate from './locate'

test('Main method documentation', async ({ page }) => {
  await actions.goToGraph(page)

  const rightDock = locate.rightDock(page)
  // Documentation panel hotkey opens right-dock.
  await expect(rightDock).toBeHidden()
  await page.keyboard.press(`${CONTROL_KEY}+D`)
  await expect(rightDock).toBeVisible()

  // Right-dock displays main method documentation.
  await expect(locate.editorRoot(rightDock)).toContainText('The main method')
  // All three images are loaded properly
  await expect(rightDock.getByAltText('Image')).toHaveCount(3)
  for (const img of await rightDock.getByAltText('Image').all())
    await expect(img).toHaveJSProperty('naturalWidth', 3)

  // Documentation hotkey closes right-dock.p
  await page.keyboard.press(`${CONTROL_KEY}+D`)
  await expect(locate.rightDock(page)).toBeHidden()
})

test('Doc panel focus (regression #10471)', async ({ page }) => {
  await actions.goToGraph(page)

  await page.keyboard.press(`${CONTROL_KEY}+D`)
  await page.keyboard.press(`${CONTROL_KEY}+\``)
  await expect(locate.rightDock(page)).toBeVisible()
  const codeEditor = page.locator('.CodeEditor')
  await expect(codeEditor).toBeVisible()

  // Focus code editor.
  await codeEditor.click()

  await page.evaluate(() => {
    const codeEditorApi = (window as any).__codeEditorApi
    const docStart = codeEditorApi.indexOf('The main method')
    codeEditorApi.placeCursor(docStart + 8)
  })
  await page.keyboard.press('Space')
  await page.keyboard.press('T')
  await page.keyboard.press('E')
  await page.keyboard.press('S')
  await page.keyboard.press('T')

  const content = await page.evaluate(() => {
    const codeEditor = (window as any).__codeEditorApi
    return codeEditor.textContent()
  })
  expect(content.includes('The main TEST method')).toBe(true)
  await expect(locate.rightDock(page)).toContainText('The main TEST method')
})

test('Component help', async ({ page }) => {
  await actions.goToGraph(page, false)
  await locate.rightDock(page).getByRole('button', { name: 'Help' }).click()
  await expect(locate.rightDock(page)).toHaveText(/Select a single component/)

  await locate.graphNodeByBinding(page, 'final').click()
  await expect(locate.rightDock(page)).toHaveText(/No documentation available/)

  await mockMethodCallInfo(page, 'data', {
    methodPointer: {
      module: 'Standard.Base.Data',
      definedOnType: 'Standard.Base.Data',
      name: 'read',
    },
    notAppliedArguments: [0, 1, 2],
  })
  await locate.graphNodeByBinding(page, 'data').click()
  await expect(locate.rightDock(page)).toHaveText(/Reads a file into Enso/)
})

test('Documentation reflects entered function', async ({ page }) => {
  await actions.goToGraph(page)

  // Open the panel
  await expect(locate.rightDock(page)).toBeHidden()
  await page.keyboard.press(`${CONTROL_KEY}+D`)
  await expect(locate.rightDock(page)).toBeVisible()

  // Enter the collapsed function
  await mockCollapsedFunctionInfo(page, 'final', 'func1')
  await locate.graphNodeByBinding(page, 'final').dblclick()
  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1'])

  // Editor should contain collapsed function's docs
  await expect(locate.editorRoot(locate.rightDock(page))).toHaveText('A collapsed function')
})