enso/app/gui2/e2e/graphNodeVisualization.spec.ts
Adam Obuchowicz ef2f5f993d
Visualization Preview (#10310)
Fixes #8533

Visualization is shown when pressing ctrl (cmd on mac) and hovering output port.

[Screencast from 2024-06-18 17-06-59.webm](https://github.com/enso-org/enso/assets/3919101/4963eaa7-8b96-4fdb-af09-70de68c6df57)
2024-06-19 13:46:51 +00:00

72 lines
3.1 KiB
TypeScript

import { test } from '@playwright/test'
import assert from 'assert'
import * as actions from './actions'
import { computedContent } from './css'
import { expect } from './customExpect'
import * as locate from './locate'
test('Node can open and load visualization', async ({ page }) => {
await actions.goToGraph(page)
const node = locate.graphNode(page).last()
await node.click({ position: { x: 8, y: 8 } })
await expect(locate.circularMenu(page)).toExist()
await locate.toggleVisualizationButton(page).click()
await expect(locate.anyVisualization(page)).toExist()
await expect(locate.loadingVisualization(page)).toHaveCount(0)
await locate.toggleVisualizationSelectorButton(page).click()
await page.getByText('JSON').click()
const vis = locate.jsonVisualization(page)
await expect(vis).toExist()
// The default JSON viz data contains an object.
const element = await vis.elementHandle()
assert(element != null)
const textContent = await computedContent(element)
const jsonContent = JSON.parse(textContent)
expect(typeof jsonContent).toBe('object')
})
test('Previewing visualization', async ({ page }) => {
await actions.goToGraph(page)
const node = locate.graphNode(page).last()
const port = await locate.outputPortCoordinates(node)
await page.keyboard.down('Meta')
await page.keyboard.down('Control')
await expect(locate.anyVisualization(page)).not.toBeVisible()
await page.mouse.move(port.x, port.y)
await expect(locate.anyVisualization(node)).toBeVisible()
await page.keyboard.up('Meta')
await page.keyboard.up('Control')
await expect(locate.anyVisualization(page)).not.toBeVisible()
await page.keyboard.down('Meta')
await page.keyboard.down('Control')
await expect(locate.anyVisualization(node)).toBeVisible()
await page.mouse.move(1, 1)
await expect(locate.anyVisualization(page)).not.toBeVisible()
await page.keyboard.up('Meta')
await page.keyboard.up('Control')
await page.mouse.move(port.x, port.y)
await expect(locate.anyVisualization(page)).not.toBeVisible()
})
test('Warnings visualization', async ({ page }) => {
await actions.goToGraph(page)
// Create a node, attach a warning, open the warnings-visualization.
await locate.addNewNodeButton(page).click()
const input = locate.componentBrowserInput(page).locator('input')
await input.fill('Warning.attach "Uh oh" 42')
await page.keyboard.press('Enter')
await expect(locate.componentBrowser(page)).not.toBeVisible()
await expect(locate.circularMenu(page)).toExist()
await locate.toggleVisualizationButton(page).click()
await expect(locate.anyVisualization(page)).toExist()
await expect(locate.loadingVisualization(page)).toHaveCount(0)
await locate.toggleVisualizationSelectorButton(page).click()
await page.locator('.VisualizationSelector').getByRole('button', { name: 'Warnings' }).click()
await expect(locate.warningsVisualization(page)).toExist()
// Click the remove-warnings button, and ensure a node is created.
const nodeCount = await locate.graphNode(page).count()
await page.getByTestId('remove-warnings-button').click()
await expect(locate.graphNode(page)).toHaveCount(nodeCount + 1)
})