|
|
|
|
@ -1,5 +1,4 @@ |
|
|
|
|
import { |
|
|
|
|
EmbeddedScene, |
|
|
|
|
SceneCanvasText, |
|
|
|
|
SceneGridLayout, |
|
|
|
|
SceneGridRow, |
|
|
|
|
@ -13,14 +12,21 @@ import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/co |
|
|
|
|
import { activateFullSceneTree } from '../utils/test-utils'; |
|
|
|
|
|
|
|
|
|
import { RepeatDirection } from './DashboardGridItem'; |
|
|
|
|
import { DashboardScene } from './DashboardScene'; |
|
|
|
|
import { RowRepeaterBehavior } from './RowRepeaterBehavior'; |
|
|
|
|
import { RowActions } from './row-actions/RowActions'; |
|
|
|
|
|
|
|
|
|
describe('RowRepeaterBehavior', () => { |
|
|
|
|
describe('Given scene with variable with 5 values', () => { |
|
|
|
|
let scene: EmbeddedScene, grid: SceneGridLayout; |
|
|
|
|
let scene: DashboardScene, grid: SceneGridLayout, repeatBehavior: RowRepeaterBehavior; |
|
|
|
|
let gridStateUpdates: unknown[]; |
|
|
|
|
|
|
|
|
|
beforeEach(async () => { |
|
|
|
|
({ scene, grid } = buildScene({ variableQueryTime: 0 })); |
|
|
|
|
({ scene, grid, repeatBehavior } = buildScene({ variableQueryTime: 0 })); |
|
|
|
|
|
|
|
|
|
gridStateUpdates = []; |
|
|
|
|
grid.subscribeToState((state) => gridStateUpdates.push(state)); |
|
|
|
|
|
|
|
|
|
activateFullSceneTree(scene); |
|
|
|
|
await new Promise((r) => setTimeout(r, 1)); |
|
|
|
|
}); |
|
|
|
|
@ -28,17 +34,20 @@ describe('RowRepeaterBehavior', () => { |
|
|
|
|
it('Should repeat row', () => { |
|
|
|
|
// Verify that panel above row remains
|
|
|
|
|
expect(grid.state.children[0]).toBeInstanceOf(SceneGridItem); |
|
|
|
|
|
|
|
|
|
// Verify that first row still has repeat behavior
|
|
|
|
|
const row1 = grid.state.children[1] as SceneGridRow; |
|
|
|
|
expect(row1.state.$behaviors?.[0]).toBeInstanceOf(RowRepeaterBehavior); |
|
|
|
|
expect(row1.state.$variables!.state.variables[0].getValue()).toBe('1'); |
|
|
|
|
expect(row1.state.$variables!.state.variables[0].getValue()).toBe('A1'); |
|
|
|
|
expect(row1.state.actions).toBeDefined(); |
|
|
|
|
|
|
|
|
|
const row2 = grid.state.children[2] as SceneGridRow; |
|
|
|
|
expect(row2.state.$variables!.state.variables[0].getValueText?.()).toBe('B'); |
|
|
|
|
expect(row2.state.actions).toBeUndefined(); |
|
|
|
|
|
|
|
|
|
// Should give repeated panels unique keys
|
|
|
|
|
const gridItem = row2.state.children[0] as SceneGridItem; |
|
|
|
|
expect(gridItem.state.body?.state.key).toBe('canvas-1-row-1'); |
|
|
|
|
expect(gridItem.state.body?.state.key).toBe('canvas-1-clone-B1'); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('Should push row at the bottom down', () => { |
|
|
|
|
@ -66,24 +75,34 @@ describe('RowRepeaterBehavior', () => { |
|
|
|
|
it('Should handle second repeat cycle and update remove old repeats', async () => { |
|
|
|
|
// trigger another repeat cycle by changing the variable
|
|
|
|
|
const variable = scene.state.$variables!.state.variables[0] as TestVariable; |
|
|
|
|
variable.changeValueTo(['2', '3']); |
|
|
|
|
variable.changeValueTo(['B1', 'C1']); |
|
|
|
|
|
|
|
|
|
await new Promise((r) => setTimeout(r, 1)); |
|
|
|
|
|
|
|
|
|
// should now only have 2 repeated rows (and the panel above + the row at the bottom)
|
|
|
|
|
expect(grid.state.children.length).toBe(4); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('Should ignore repeat process if variable values are the same', async () => { |
|
|
|
|
// trigger another repeat cycle by changing the variable
|
|
|
|
|
repeatBehavior.performRepeat(); |
|
|
|
|
|
|
|
|
|
await new Promise((r) => setTimeout(r, 1)); |
|
|
|
|
|
|
|
|
|
expect(gridStateUpdates.length).toBe(1); |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
describe('Given scene empty row', () => { |
|
|
|
|
let scene: EmbeddedScene; |
|
|
|
|
let scene: DashboardScene; |
|
|
|
|
let grid: SceneGridLayout; |
|
|
|
|
let repeatBehavior: RowRepeaterBehavior; |
|
|
|
|
let rowToRepeat: SceneGridRow; |
|
|
|
|
|
|
|
|
|
beforeEach(async () => { |
|
|
|
|
({ scene, grid, repeatBehavior } = buildScene({ variableQueryTime: 0 })); |
|
|
|
|
({ scene, grid, rowToRepeat } = buildScene({ variableQueryTime: 0 })); |
|
|
|
|
|
|
|
|
|
rowToRepeat.setState({ children: [] }); |
|
|
|
|
|
|
|
|
|
repeatBehavior.setState({ sources: [] }); |
|
|
|
|
activateFullSceneTree(scene); |
|
|
|
|
await new Promise((r) => setTimeout(r, 1)); |
|
|
|
|
}); |
|
|
|
|
@ -108,21 +127,7 @@ interface SceneOptions { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function buildScene(options: SceneOptions) { |
|
|
|
|
const repeatBehavior = new RowRepeaterBehavior({ |
|
|
|
|
variableName: 'server', |
|
|
|
|
sources: [ |
|
|
|
|
new SceneGridItem({ |
|
|
|
|
x: 0, |
|
|
|
|
y: 11, |
|
|
|
|
width: 24, |
|
|
|
|
height: 5, |
|
|
|
|
body: new SceneCanvasText({ |
|
|
|
|
key: 'canvas-1', |
|
|
|
|
text: 'Panel inside repeated row, server = $server', |
|
|
|
|
}), |
|
|
|
|
}), |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
const repeatBehavior = new RowRepeaterBehavior({ variableName: 'server' }); |
|
|
|
|
|
|
|
|
|
const grid = new SceneGridLayout({ |
|
|
|
|
children: [ |
|
|
|
|
@ -140,7 +145,20 @@ function buildScene(options: SceneOptions) { |
|
|
|
|
y: 10, |
|
|
|
|
width: 24, |
|
|
|
|
height: 1, |
|
|
|
|
actions: new RowActions({}), |
|
|
|
|
$behaviors: [repeatBehavior], |
|
|
|
|
children: [ |
|
|
|
|
new SceneGridItem({ |
|
|
|
|
x: 0, |
|
|
|
|
y: 11, |
|
|
|
|
width: 24, |
|
|
|
|
height: 5, |
|
|
|
|
body: new SceneCanvasText({ |
|
|
|
|
key: 'canvas-1', |
|
|
|
|
text: 'Panel inside repeated row, server = $server', |
|
|
|
|
}), |
|
|
|
|
}), |
|
|
|
|
], |
|
|
|
|
}), |
|
|
|
|
new SceneGridRow({ |
|
|
|
|
x: 0, |
|
|
|
|
@ -148,6 +166,7 @@ function buildScene(options: SceneOptions) { |
|
|
|
|
width: 24, |
|
|
|
|
height: 5, |
|
|
|
|
title: 'Row at the bottom', |
|
|
|
|
|
|
|
|
|
children: [ |
|
|
|
|
new SceneGridItem({ |
|
|
|
|
key: 'griditem-2', |
|
|
|
|
@ -172,7 +191,7 @@ function buildScene(options: SceneOptions) { |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const scene = new EmbeddedScene({ |
|
|
|
|
const scene = new DashboardScene({ |
|
|
|
|
$timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now' }), |
|
|
|
|
$variables: new SceneVariableSet({ |
|
|
|
|
variables: [ |
|
|
|
|
@ -185,11 +204,11 @@ function buildScene(options: SceneOptions) { |
|
|
|
|
includeAll: true, |
|
|
|
|
delayMs: options.variableQueryTime, |
|
|
|
|
optionsToReturn: [ |
|
|
|
|
{ label: 'A', value: '1' }, |
|
|
|
|
{ label: 'B', value: '2' }, |
|
|
|
|
{ label: 'C', value: '3' }, |
|
|
|
|
{ label: 'D', value: '4' }, |
|
|
|
|
{ label: 'E', value: '5' }, |
|
|
|
|
{ label: 'A', value: 'A1' }, |
|
|
|
|
{ label: 'B', value: 'B1' }, |
|
|
|
|
{ label: 'C', value: 'C1' }, |
|
|
|
|
{ label: 'D', value: 'D1' }, |
|
|
|
|
{ label: 'E', value: 'E1' }, |
|
|
|
|
], |
|
|
|
|
}), |
|
|
|
|
], |
|
|
|
|
@ -197,5 +216,7 @@ function buildScene(options: SceneOptions) { |
|
|
|
|
body: grid, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return { scene, grid, repeatBehavior }; |
|
|
|
|
const rowToRepeat = repeatBehavior.parent as SceneGridRow; |
|
|
|
|
|
|
|
|
|
return { scene, grid, repeatBehavior, rowToRepeat }; |
|
|
|
|
} |
|
|
|
|
|
Torkel Ödegaard
1 year ago
committed by