Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added bar label test cases in Horizontal bar chart #33286

Open
wants to merge 29 commits into
base: charting/web-components
Choose a base branch
from
+45 −0
Open

Added bar label test cases in Horizontal bar chart #33286

Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
0f4e495
Added basic test cases to donut chart
v-baambati Oct 24, 2024
8ef1a6b
removed unused code
v-baambati Oct 24, 2024
db2a991
added basic tests to Horizontalbar chart
v-baambati Oct 25, 2024
b45180f
added basic tests to Horizontalbar chart
v-baambati Oct 25, 2024
7ce4c9a
added mouse events to donut chart
v-baambati Oct 28, 2024
9f79e2a
added mouse events to donut chart
v-baambati Oct 28, 2024
a58bfac
added mouse event test cases to horizontalbarchart
v-baambati Oct 28, 2024
45b860a
Merge branch 'charting/web-components' of https://github.com/microsof…
v-baambati Oct 30, 2024
85b67ab
added RTL tests
v-baambati Nov 4, 2024
d56b47c
Merge commit '86aac7cc3199d1bbef3285b5170d6e3dfd2caa5e' into charting…
v-baambati Nov 4, 2024
02333fc
removed dependency on stories
v-baambati Nov 5, 2024
f6606f8
added test cases for single HBC
v-baambati Nov 5, 2024
fb431c7
added test cases for horizontal bar chart variants
v-baambati Nov 5, 2024
7535626
added theme based test cases
v-baambati Nov 6, 2024
f556188
added test cases for single data point
v-baambati Nov 7, 2024
531bfed
created separate function to validate options values
v-baambati Nov 8, 2024
cea91fe
updated input data
v-baambati Nov 12, 2024
57af8aa
resolved merge conflicts
v-baambati Nov 13, 2024
0bfb34d
Merge branch 'charting/web-components' of https://github.com/microsof…
v-baambati Nov 13, 2024
8db4774
Updated test cases with latest chnages
v-baambati Nov 13, 2024
66eb383
disabled screenshot matching test cases
v-baambati Nov 14, 2024
7c07de0
Fixed failed test cases
v-baambati Nov 14, 2024
acd76e2
Fixed failed test cases
v-baambati Nov 14, 2024
ee46eb5
Fixed failed test cases
v-baambati Nov 14, 2024
d859e92
updated barLabel class name for testing
v-baambati Nov 14, 2024
cfe76c8
updated barLabel class name for testing
v-baambati Nov 14, 2024
34d0a8a
removed bar label test cases
v-baambati Nov 14, 2024
8a3f7af
Merge branch 'charting/web-components' of https://github.com/microsof…
v-baambati Nov 18, 2024
36219e1
added test cases to bar label
v-baambati Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions packages/charts/chart-web-components/src/horizontal-bar-chart/horizontalbarchart.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,21 @@ test.describe('horizontalbarchart - Basic', () => {
await expect(page.getByText('Unmonitored')).toBeVisible();
});

test('Should render bars and bar labels properly', async ({ page }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename the spec file to match the hyphen based naming convention used in other charts.

const element = page.locator('fluent-horizontal-bar-chart');
const bars = element.locator('.bar');
await expect(bars).toHaveCount(12);
const firstBar = bars.first();
await expect(firstBar).toHaveCSS('fill', 'rgb(0, 153, 188)');
await expect(firstBar).toHaveCSS('opacity', '1');
await expect(firstBar).toHaveAttribute(`height`, '12');
const barLabels = element.locator('.bar-label');
await expect(barLabels).toHaveCount(8);
const firstBarLabel = barLabels.first();
await expect(firstBarLabel).toHaveText('272');
await expect(firstBarLabel).toHaveAttribute(`aria-label`, 'Total: 272');
});

test('Should render legends data properly', async ({ page }) => {
const element = page.locator('fluent-horizontal-bar-chart');
const legends = element.locator('.legend');
Expand Down Expand Up @@ -425,6 +440,36 @@ test.describe('horizontalbarchart - Single Bar HBC', () => {
}
});

test('Should render bars and bar labels properly', async ({ page }) => {
const element = page.locator('fluent-horizontal-bar-chart');
const bars = element.locator('.bar');
await expect(bars).toHaveCount(8);
await expect(bars.nth(0)).toHaveCSS('fill', 'rgb(99, 124, 239)');
await expect(bars.nth(0)).toHaveCSS('opacity', '1');
await expect(bars.nth(0)).toHaveAttribute(`height`, '12');
let firstBarWidth = await bars.nth(0).getAttribute('width');
expect(parseFloat(firstBarWidth)).toBeLessThan(10);
let secondBarWidth = await bars.nth(1).getAttribute('width');
expect(parseFloat(secondBarWidth)).toBeLessThan(6);
let thirdBarWidth = await bars.nth(2).getAttribute('width');
expect(parseFloat(thirdBarWidth)).toBeLessThan(56);
let forthBarWidth = await bars.nth(3).getAttribute('width');
expect(parseFloat(forthBarWidth)).toBe(100);
let fifthBarWidth = await bars.nth(4).getAttribute('width');
expect(parseFloat(fifthBarWidth)).toBeLessThan(75);
let sixthBarWidth = await bars.nth(5).getAttribute('width');
expect(parseFloat(sixthBarWidth)).toBeLessThan(90);
let seventhBarWidth = await bars.nth(6).getAttribute('width');
expect(parseFloat(seventhBarWidth)).toBeLessThan(63);
let eithBarWidth = await bars.nth(7).getAttribute('width');
expect(parseFloat(eithBarWidth)).toBeLessThan(27);
const barLabels = element.locator('.bar-label');
await expect(barLabels).toHaveCount(8);
const firstBarLabel = barLabels.first();
await expect(firstBarLabel).toHaveText('1543');
await expect(firstBarLabel).toHaveAttribute(`aria-label`, 'Total: 1543');
});

test('Should update bar css/opaity when mouse hover on legend', async ({ page }) => {
const element = page.locator('fluent-horizontal-bar-chart');
const legends = element.locator('.legend');
Expand Down
Loading