Skip to content

Commit

Permalink
Add and fix tests #3827
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenediktMehl
BenediktMehl committed Dec 17, 2024
1 parent 483f2ee commit bbd4562
Showing 1 changed file with 53 additions and 52 deletions.
105 changes: 53 additions & 52 deletions ...nBar/colorSettingsPanel/metricColorRangeDiagram/metricColorRangeDiagram.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ describe("MetricColorRangeDiagramComponent", () => {

describe("cross-hair", () => {
let container: Element
let fixture: ComponentFixture<MetricColorRangeDiagramComponent>
let fixture: ComponentFixture<MetricColorRangeDiagramComponent>
let svg: Element
let mouseEventRectangle: HTMLElement

Expand All @@ -294,63 +294,64 @@ describe("MetricColorRangeDiagramComponent", () => {
})

function simulateMouseEvent(isAttributeDirectionInverted: boolean, mouseXPosition: number) {
fixture.componentInstance.isAttributeDirectionInverted = isAttributeDirectionInverted;
fixture.componentInstance.ngOnChanges();
fixture.componentInstance.isAttributeDirectionInverted = isAttributeDirectionInverted
fixture.componentInstance.ngOnChanges()

svg = container.querySelector("svg");
mouseEventRectangle = svg.getElementsByClassName("mouse-event-rect")[0] as HTMLElement;
svg = container.querySelector("svg")
mouseEventRectangle = svg.getElementsByClassName("mouse-event-rect")[0] as HTMLElement

const simulatedEvent = new MouseEvent("mousemove", {
clientX: mouseXPosition,
clientY: 0
});
mouseEventRectangle.dispatchEvent(simulatedEvent);
})
mouseEventRectangle.dispatchEvent(simulatedEvent)
}

const expectedYLinePositionsForMouseXPositions = [
{isAttributeDirectionInverted: false, mouseXPosition: 0, expectedYPosition: 167},
{isAttributeDirectionInverted: false, mouseXPosition: 50, expectedYPosition: 167},
{isAttributeDirectionInverted: false, mouseXPosition: 200, expectedYPosition: 95},
{isAttributeDirectionInverted: false, mouseXPosition: 450, expectedYPosition: 5},
{isAttributeDirectionInverted: false, mouseXPosition: 1000, expectedYPosition: 5},
{isAttributeDirectionInverted: true, mouseXPosition: 0, expectedYPosition: 185},
{isAttributeDirectionInverted: true, mouseXPosition: 50, expectedYPosition: 185},
{isAttributeDirectionInverted: true, mouseXPosition: 200, expectedYPosition: 113},
{isAttributeDirectionInverted: true, mouseXPosition: 450, expectedYPosition: 23},
{isAttributeDirectionInverted: true, mouseXPosition: 1000, expectedYPosition: 23}
];
{ isAttributeDirectionInverted: false, mouseXPosition: 0, expectedYPosition: 167 },
{ isAttributeDirectionInverted: false, mouseXPosition: 50, expectedYPosition: 167 },
{ isAttributeDirectionInverted: false, mouseXPosition: 200, expectedYPosition: 95 },
{ isAttributeDirectionInverted: false, mouseXPosition: 450, expectedYPosition: 5 },
{ isAttributeDirectionInverted: false, mouseXPosition: 1000, expectedYPosition: 5 },
{ isAttributeDirectionInverted: true, mouseXPosition: 0, expectedYPosition: 185 },
{ isAttributeDirectionInverted: true, mouseXPosition: 50, expectedYPosition: 185 },
{ isAttributeDirectionInverted: true, mouseXPosition: 200, expectedYPosition: 113 },
{ isAttributeDirectionInverted: true, mouseXPosition: 450, expectedYPosition: 23 },
{ isAttributeDirectionInverted: true, mouseXPosition: 1000, expectedYPosition: 23 }
]
test.each(expectedYLinePositionsForMouseXPositions)(
`should be at expectedYPosition=$expectedYPosition for isAttributeDirectionInverted=$isAttributeDirectionInverted attribute direction and mouseXPosition=$mouseXPosition`,
({isAttributeDirectionInverted, mouseXPosition, expectedYPosition}) => {
//WHEN
simulateMouseEvent(isAttributeDirectionInverted, mouseXPosition);
({ isAttributeDirectionInverted, mouseXPosition, expectedYPosition }) => {
//WHEN
simulateMouseEvent(isAttributeDirectionInverted, mouseXPosition)

//THEN
const horizontalLine = svg.getElementsByClassName("horizontal-line")[0] as HTMLElement
const xPosition = horizontalLine.getAttribute("x2")
const yPosition = horizontalLine.getAttribute("y1")
//THEN
const horizontalLine = svg.getElementsByClassName("horizontal-line")[0] as HTMLElement
const xPosition = horizontalLine.getAttribute("x2")
const yPosition = horizontalLine.getAttribute("y1")

expect(xPosition).toBe(mouseXPosition.toString())
expect(yPosition).toBe(expectedYPosition.toString())
})
expect(xPosition).toBe(mouseXPosition.toString())
expect(yPosition).toBe(expectedYPosition.toString())
}
)

const expectedYTooltipPositionsForMouseXPositions = [
{isAttributeDirectionInverted: false, mouseXPosition: 0, expectedXPosition: 10, expectedYPosition: 147},
{isAttributeDirectionInverted: false, mouseXPosition: 50, expectedXPosition: 60, expectedYPosition: 147},
{isAttributeDirectionInverted: false, mouseXPosition: 200, expectedXPosition: 210, expectedYPosition: 75},
{isAttributeDirectionInverted: false, mouseXPosition: 450, expectedXPosition: 370, expectedYPosition: 25},
{isAttributeDirectionInverted: false, mouseXPosition: 1000, expectedXPosition: 920, expectedYPosition: 25},
{isAttributeDirectionInverted: true, mouseXPosition: 0, expectedXPosition: 10, expectedYPosition: 165},
{isAttributeDirectionInverted: true, mouseXPosition: 50, expectedXPosition: 60, expectedYPosition: 165},
{isAttributeDirectionInverted: true, mouseXPosition: 200, expectedXPosition: 210, expectedYPosition: 93},
{isAttributeDirectionInverted: true, mouseXPosition: 450, expectedXPosition: 370, expectedYPosition: 43},
{isAttributeDirectionInverted: true, mouseXPosition: 1000, expectedXPosition: 920, expectedYPosition: 43},
{ isAttributeDirectionInverted: false, mouseXPosition: 0, expectedXPosition: 10, expectedYPosition: 147 },
{ isAttributeDirectionInverted: false, mouseXPosition: 50, expectedXPosition: 60, expectedYPosition: 147 },
{ isAttributeDirectionInverted: false, mouseXPosition: 200, expectedXPosition: 210, expectedYPosition: 75 },
{ isAttributeDirectionInverted: false, mouseXPosition: 450, expectedXPosition: 370, expectedYPosition: 25 },
{ isAttributeDirectionInverted: false, mouseXPosition: 1000, expectedXPosition: 920, expectedYPosition: 25 },
{ isAttributeDirectionInverted: true, mouseXPosition: 0, expectedXPosition: 10, expectedYPosition: 165 },
{ isAttributeDirectionInverted: true, mouseXPosition: 50, expectedXPosition: 60, expectedYPosition: 165 },
{ isAttributeDirectionInverted: true, mouseXPosition: 200, expectedXPosition: 210, expectedYPosition: 93 },
{ isAttributeDirectionInverted: true, mouseXPosition: 450, expectedXPosition: 370, expectedYPosition: 43 },
{ isAttributeDirectionInverted: true, mouseXPosition: 1000, expectedXPosition: 920, expectedYPosition: 43 }
]
test.each(expectedYTooltipPositionsForMouseXPositions)(
`should show tooltip at expectedXPosition=$expectedXPosition and expectedYPosition=$expectedYPosition for isAttributeDirectionInverted=$isAttributeDirectionInverted attribute direction and mouseXPosition=$mouseXPosition`,
async ({isAttributeDirectionInverted, mouseXPosition, expectedXPosition, expectedYPosition}) => {
async ({ isAttributeDirectionInverted, mouseXPosition, expectedXPosition, expectedYPosition }) => {
//WHEN
simulateMouseEvent(isAttributeDirectionInverted, mouseXPosition);
simulateMouseEvent(isAttributeDirectionInverted, mouseXPosition)

// Then
const tooltip = svg.getElementsByClassName("cross-tooltip")[0] as HTMLElement
Expand All @@ -363,22 +364,22 @@ describe("MetricColorRangeDiagramComponent", () => {
)

const expectedQuantileAndYValueForMouseXPositions = [
{isAttributeDirectionInverted: false, mouseXPosition: 0, expectedQuantile: 0, expectedYValue: 1},
{isAttributeDirectionInverted: false, mouseXPosition: 50, expectedQuantile: 9, expectedYValue: 1},
{isAttributeDirectionInverted: false, mouseXPosition: 200, expectedQuantile: 41, expectedYValue: 5},
{isAttributeDirectionInverted: false, mouseXPosition: 450, expectedQuantile: 93, expectedYValue: 10},
{isAttributeDirectionInverted: false, mouseXPosition: 1000, expectedQuantile: 100, expectedYValue: 10},
{isAttributeDirectionInverted: true, mouseXPosition: 0, expectedQuantile: 0, expectedYValue: 10},
{isAttributeDirectionInverted: true, mouseXPosition: 50, expectedQuantile: 9, expectedYValue: 10},
{isAttributeDirectionInverted: true, mouseXPosition: 200, expectedQuantile: 41, expectedYValue: 6},
{isAttributeDirectionInverted: true, mouseXPosition: 450, expectedQuantile: 93, expectedYValue: 1},
{isAttributeDirectionInverted: true, mouseXPosition: 1000, expectedQuantile: 100, expectedYValue: 1}
{ isAttributeDirectionInverted: false, mouseXPosition: 0, expectedQuantile: 0, expectedYValue: 1 },
{ isAttributeDirectionInverted: false, mouseXPosition: 50, expectedQuantile: 9, expectedYValue: 1 },
{ isAttributeDirectionInverted: false, mouseXPosition: 200, expectedQuantile: 41, expectedYValue: 5 },
{ isAttributeDirectionInverted: false, mouseXPosition: 450, expectedQuantile: 93, expectedYValue: 10 },
{ isAttributeDirectionInverted: false, mouseXPosition: 1000, expectedQuantile: 100, expectedYValue: 10 },
{ isAttributeDirectionInverted: true, mouseXPosition: 0, expectedQuantile: 0, expectedYValue: 10 },
{ isAttributeDirectionInverted: true, mouseXPosition: 50, expectedQuantile: 9, expectedYValue: 10 },
{ isAttributeDirectionInverted: true, mouseXPosition: 200, expectedQuantile: 41, expectedYValue: 6 },
{ isAttributeDirectionInverted: true, mouseXPosition: 450, expectedQuantile: 93, expectedYValue: 1 },
{ isAttributeDirectionInverted: true, mouseXPosition: 1000, expectedQuantile: 100, expectedYValue: 1 }
]
test.each(expectedQuantileAndYValueForMouseXPositions)(
`should show quantile=$expectedQuantile and yValue=$expectedYValue for isAttributeDirectionInverted=$attributeDirectionInverted attribute direction and mouseXPosition=$mouseXPosition`,
({isAttributeDirectionInverted, mouseXPosition, expectedQuantile, expectedYValue}) => {
({ isAttributeDirectionInverted, mouseXPosition, expectedQuantile, expectedYValue }) => {
//WHEN
simulateMouseEvent(isAttributeDirectionInverted, mouseXPosition);
simulateMouseEvent(isAttributeDirectionInverted, mouseXPosition)

//THEN
const tooltip = svg.getElementsByClassName("cross-tooltip")[0] as HTMLElement
Expand Down

0 comments on commit bbd4562

Please sign in to comment.