enso/app/gui2/e2e/edgeRendering.spec.ts

import { expect, Page, test } from '@playwright/test'
import * as actions from './actions'
import { edgesFromNodeWithBinding, edgesToNodeWithBinding } from './locate'

// For each outgoing edge we expect two elements: an element for io and an element for the rendered edge itself.
const EDGE_PARTS = 2
// For a split edge we expect an extra element for the split rendering.
const SPLIT_EDGE_PARTS = EDGE_PARTS + 1

test('Existence of edges between nodes', async ({ page }) => {
  await actions.goToGraph(page)

  await expect(await edgesFromNodeWithBinding(page, 'aggregated')).toHaveCount(0)
  await expect(await edgesFromNodeWithBinding(page, 'filtered')).toHaveCount(0)
  await expect(await edgesFromNodeWithBinding(page, 'data')).toHaveCount(3 * EDGE_PARTS)
  await expect(await edgesFromNodeWithBinding(page, 'list')).toHaveCount(0)
  await expect(await edgesFromNodeWithBinding(page, 'final')).toHaveCount(0)
  await expect(await edgesFromNodeWithBinding(page, 'selected')).toHaveCount(0)
  await expect(await edgesFromNodeWithBinding(page, 'prod')).toHaveCount(EDGE_PARTS)
  await expect(await edgesFromNodeWithBinding(page, 'sum')).toHaveCount(EDGE_PARTS)
  await expect(await edgesFromNodeWithBinding(page, 'ten')).toHaveCount(EDGE_PARTS)
  await expect(await edgesFromNodeWithBinding(page, 'five')).toHaveCount(EDGE_PARTS)

  await expect(await edgesToNodeWithBinding(page, 'selected')).toHaveCount(EDGE_PARTS)
  await expect(await edgesToNodeWithBinding(page, 'aggregated')).toHaveCount(EDGE_PARTS)
  await expect(await edgesToNodeWithBinding(page, 'filtered')).toHaveCount(EDGE_PARTS)
  await expect(await edgesToNodeWithBinding(page, 'data')).toHaveCount(0)
  await expect(await edgesToNodeWithBinding(page, 'list')).toHaveCount(0)
  await expect(await edgesToNodeWithBinding(page, 'final')).toHaveCount(EDGE_PARTS)
  await expect(await edgesToNodeWithBinding(page, 'prod')).toHaveCount(EDGE_PARTS)
  await expect(await edgesToNodeWithBinding(page, 'sum')).toHaveCount(2 * EDGE_PARTS)
  await expect(await edgesToNodeWithBinding(page, 'ten')).toHaveCount(0)
  await expect(await edgesToNodeWithBinding(page, 'five')).toHaveCount(0)
})

/**
 * Prepare the graph for the tests. We drag the `ten` node to the right for better access to its outgoing edge.
 */
async function initGraph(page: Page) {
  await actions.goToGraph(page)
  await actions.dragNodeByBinding(page, 'ten', 400, 0)
}

/**
 * Scenario: We hover over the edge to the left of the `ten` node. We expect the edge to be rendered with a dimmed part
 * and a non-dimmed part.
 */
test('Hover behaviour of edges', async ({ page }) => {
  await initGraph(page)

  const edgeElements = await edgesFromNodeWithBinding(page, 'ten')
  await expect(edgeElements).toHaveCount(EDGE_PARTS)

  const targetEdge = edgeElements.first()
  await expect(targetEdge).toHaveClass('edge io')

  // Hover over edge to the left of node with binding `ten`.
  await targetEdge.hover({
    position: { x: 250, y: 35.0 },
    force: true,
  })

  // Expect an extra edge for the split rendering.
  const hoveredEdgeElements = await edgesFromNodeWithBinding(page, 'ten')
  await expect(hoveredEdgeElements).toHaveCount(SPLIT_EDGE_PARTS)

  // Expect the top edge part to be dimmed
  const topEdge = page.locator('svg.behindNodes g:nth-child(2) path:nth-child(1)')
  await expect(topEdge).toHaveClass('edge visible dimmed')
  // Expect the bottom edge part not to be dimmed
  const bottomEdge = page.locator('svg.behindNodes g:nth-child(2) path:nth-child(3)')
  await expect(bottomEdge).toHaveClass('edge visible')
})