mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-08 10:06:40 +02:00
@@ -441,7 +441,7 @@ describe('XY Chart', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render data labels within the bar in the horizontal xy-chart', () => {
|
it('should render data labels within each bar in the horizontal xy-chart', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
---
|
---
|
||||||
@@ -459,35 +459,29 @@ describe('XY Chart', () => {
|
|||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
|
||||||
let textProps, barProps;
|
cy.get('g.bar-plot-0').within(() => {
|
||||||
|
cy.get('rect').each(($rect, index) => {
|
||||||
|
// Extract bar properties
|
||||||
|
const barProps = {
|
||||||
|
x: parseFloat($rect.attr('x')),
|
||||||
|
y: parseFloat($rect.attr('y')),
|
||||||
|
width: parseFloat($rect.attr('width')),
|
||||||
|
height: parseFloat($rect.attr('height')),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get the text element corresponding to this bar by index.
|
||||||
cy.get('text')
|
cy.get('text')
|
||||||
.contains('5000')
|
.eq(index)
|
||||||
.then(($el) => {
|
.then(($text) => {
|
||||||
const bbox = $el[0].getBBox();
|
const bbox = $text[0].getBBox();
|
||||||
textProps = {
|
const textProps = {
|
||||||
x: bbox.x,
|
x: bbox.x,
|
||||||
y: bbox.y,
|
y: bbox.y,
|
||||||
width: bbox.width,
|
width: bbox.width,
|
||||||
height: bbox.height,
|
height: bbox.height,
|
||||||
};
|
};
|
||||||
console.log('textProps', textProps);
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.get('g.bar-plot-0')
|
// Verify that the text label is positioned within the boundaries of the bar.
|
||||||
.find('rect')
|
|
||||||
.first()
|
|
||||||
.then((rect) => {
|
|
||||||
barProps = {
|
|
||||||
x: parseFloat(rect.attr('x')),
|
|
||||||
y: parseFloat(rect.attr('y')),
|
|
||||||
width: parseFloat(rect.attr('width')),
|
|
||||||
height: parseFloat(rect.attr('height')),
|
|
||||||
};
|
|
||||||
console.log('barProps', barProps);
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// Ensure that both textProps and barProps are defined before the assertion
|
|
||||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||||
|
|
||||||
@@ -499,8 +493,10 @@ describe('XY Chart', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
it('should render data labels within the bar in the horizontal xy-chart', () => {
|
it('should render data labels within each bar in the vertical xy-chart', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
---
|
---
|
||||||
@@ -516,39 +512,43 @@ describe('XY Chart', () => {
|
|||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
let textProps, barProps;
|
|
||||||
|
cy.get('g.bar-plot-0').within(() => {
|
||||||
|
cy.get('rect').each(($rect, index) => {
|
||||||
|
// Extract bar properties
|
||||||
|
const barProps = {
|
||||||
|
x: parseFloat($rect.attr('x')),
|
||||||
|
y: parseFloat($rect.attr('y')),
|
||||||
|
width: parseFloat($rect.attr('width')),
|
||||||
|
height: parseFloat($rect.attr('height')),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get the text element corresponding to this bar by index.
|
||||||
cy.get('text')
|
cy.get('text')
|
||||||
.contains('5000')
|
.eq(index)
|
||||||
.then(($el) => {
|
.then(($text) => {
|
||||||
const bbox = $el[0].getBBox();
|
const bbox = $text[0].getBBox();
|
||||||
textProps = {
|
const textProps = {
|
||||||
x: bbox.x,
|
x: bbox.x,
|
||||||
y: bbox.y,
|
y: bbox.y,
|
||||||
width: bbox.width,
|
width: bbox.width,
|
||||||
height: bbox.height,
|
height: bbox.height,
|
||||||
};
|
};
|
||||||
console.log('textProps', textProps);
|
|
||||||
});
|
// Verify that the text label is positioned within the boundaries of the bar.
|
||||||
cy.get('g.bar-plot-0')
|
|
||||||
.find('rect')
|
|
||||||
.first()
|
|
||||||
.then((rect) => {
|
|
||||||
barProps = {
|
|
||||||
x: parseFloat(rect.attr('x')),
|
|
||||||
y: parseFloat(rect.attr('y')),
|
|
||||||
width: parseFloat(rect.attr('width')),
|
|
||||||
height: parseFloat(rect.attr('height')),
|
|
||||||
};
|
|
||||||
console.log('barProps', barProps);
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// Ensure that both textProps and barProps are defined before the assertion
|
|
||||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||||
expect(textProps.x + textProps.width / 2).to.be.closeTo(barProps.x + barProps.width / 2, 1);
|
|
||||||
|
// Check horizontal alignment (within tolerance)
|
||||||
|
expect(textProps.x + textProps.width / 2).to.be.closeTo(
|
||||||
|
barProps.x + barProps.width / 2,
|
||||||
|
1
|
||||||
|
);
|
||||||
|
|
||||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Reference in New Issue
Block a user