fix(react-components): add snapshot tests

packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMaxes.spec.ts

@@ -107,7 +107,6 @@ test.describe('Data Stream Maxes', () => {
       .getByTestId(MAX_TABLE_CELL)
       .first()
       .innerText();
-    console.log('value', updatedMaxValueString);
     expect(getDecimalPlaces(updatedMaxValueString)).toBe(1);
   });
 });

packages/react-components/e2e/tests/chart/chart.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+const TEST_PAGE = '/iframe.html?id=widgets-base-chart--default-base-chart';
+
+test('line chart default settings', async ({ page }) => {
+  await page.goto(TEST_PAGE);
+  const LineChart = page.getByTestId('base-chart-container');
+
+  // screenshot comparison with everything showing
+  await expect(LineChart).toHaveScreenshot('line-chart-default-settings.png');
+});

packages/react-components/e2e/tests/gauge/gauge.spec.ts

@@ -1,69 +1,28 @@
 import { test, expect } from '@playwright/test';
 
-const TEST_IFRAME = '#storybook-preview-iframe';
-const TEST_PAGE = '/?path=/story/widgets-gauge-gauge-base--main';
+const TEST_DATA_ID = 'gauge-base-component';
+const TEST_PAGE = '/iframe.html?id=widgets-gauge--default-gauge';
+const TEST_PAGE_HIDDEN_SETTINGS =
+  '/iframe.html?id=widgets-gauge--hidden-settings-gauge';
+const THRESHOLD_TEST_PAGE = '/iframe.html?id=widgets-gauge--threshold-gauge';
 
-test('guage', async ({ page }) => {
+test('default guage', async ({ page }) => {
   await page.goto(TEST_PAGE);
-  await page.evaluate(() => document.fonts.ready);
-  const frame = page.frameLocator(TEST_IFRAME); // Need to go into frame otherwise the `locator` won't locate the selection.
-  const GaugeComponent = frame.getByTestId('gauge-base-component');
-  const GaugeError = frame.getByTestId('gauge-base-component-error');
-
-  // Gauge component should be visible
-  await expect(GaugeComponent).toBeVisible();
-
-  // Gauge should displays 'Uncertain Quality' for 'UNCERTAIN' quality
-  await page.goto(`${TEST_PAGE}&args=propertyPoint.quality:UNCERTAIN`);
-  await expect(GaugeComponent).toContainText('Uncertain Quality');
-
-  // Gauge should displays 'Bad Quality' for 'BAD' quality
-  await page.goto(`${TEST_PAGE}&args=propertyPoint.quality:BAD`);
-  await expect(GaugeComponent).toContainText('Bad Quality');
-
-  // Gauge should display error text when error is provided
-  const errorMsg = 'No Network';
-  await page.goto(`${TEST_PAGE}&args=error:${errorMsg}`);
-  await expect(GaugeError).toContainText(errorMsg);
-
-  // Gauge default settings
-  const gaugeValueElement = GaugeComponent.getByText('82');
-  const gaugeUnitElement = GaugeComponent.getByText('%');
-  const gaugeOutsideArcLabelelement = GaugeComponent.getByText('100');
-  await page.goto(`${TEST_PAGE}`);
-  await expect(GaugeComponent).not.toContainText('Windmill');
-  await expect(GaugeComponent).toContainText('%');
-  await expect(gaugeValueElement).toHaveCSS('font-size', '40px');
-  await expect(gaugeUnitElement).toHaveCSS('font-size', '16px');
-  await expect(gaugeOutsideArcLabelelement).toHaveCSS('font-size', '12px');
-  await expect(GaugeComponent).toContainText('0');
-  await expect(GaugeComponent).toContainText('100');
-
-  // Gauge settings should display name when showName is true
-  await page.goto(`${TEST_PAGE}&args=settings.showName:true`);
-  await expect(GaugeComponent).toContainText('Windmill');
-
-  // Gauge settings should not display unit when showUnit is false
-  await page.goto(`${TEST_PAGE}&args=settings.showUnit:false`);
-  await expect(GaugeComponent).not.toContainText('%');
-
-  // Gauge settings should disaplay the font size of 50 for value text
-  await page.goto(`${TEST_PAGE}&args=settings.fontSize:50`);
-  await expect(gaugeValueElement).toHaveCSS('font-size', '50px');
-
-  // Gauge settings should disaplay the unit size of 20 for unit text
-  await page.goto(`${TEST_PAGE}&args=settings.unitFontSize:20`);
-  await expect(gaugeUnitElement).toHaveCSS('font-size', '20px');
-
-  // Gauge settings should disaplay the labelFontSize size of 16 for label text
-  await page.goto(`${TEST_PAGE}&args=settings.labelFontSize:16`);
-  await expect(gaugeOutsideArcLabelelement).toHaveCSS('font-size', '16px');
+  const chart = page.getByTestId(TEST_DATA_ID);
+  // screenshot comparison
+  await expect(chart).toHaveScreenshot('gauge-default-settings.png');
+});
 
-  // Gauge settings should change the yMin value to 15
-  await page.goto(`${TEST_PAGE}&args=settings.yMin:15`);
-  await expect(GaugeComponent).toContainText('15');
+test('hidden guage settings', async ({ page }) => {
+  await page.goto(TEST_PAGE_HIDDEN_SETTINGS);
+  const chart = page.getByTestId(TEST_DATA_ID);
+  // screenshot comparison
+  await expect(chart).toHaveScreenshot('gauge-hidden-settings.png');
+});
 
-  // Gauge settings should change the yMax value to 200
-  await page.goto(`${TEST_PAGE}&args=settings.yMax:200`);
-  await expect(GaugeComponent).toContainText('200');
+test('guage with threshold', async ({ page }) => {
+  await page.goto(THRESHOLD_TEST_PAGE);
+  const chart = page.getByTestId(TEST_DATA_ID);
+  // screenshot comparison
+  await expect(chart).toHaveScreenshot('gauge-with-thresholds.png');
 });

packages/react-components/e2e/tests/kpi/kpi.spec.ts

@@ -1,38 +1,30 @@
 import { test, expect } from '@playwright/test';
 
-const TEST_PAGE = '/?path=/story/widgets-kpi-kpi-base--main';
-const TEST_IFRAME = '#storybook-preview-iframe';
+const TEST_PAGE = '/iframe.html?id=widgets-kpi--default-kpi';
+const TEST_PAGE_HIDDEN_SETTINGS =
+  '/iframe.html?id=widgets-kpi--kpi-hidden-settings';
+const TEST_PAGE_THRESHOLD = '/iframe.html?id=widgets-kpi--kpi-thresholds';
 
 test('kpi', async ({ page }) => {
   await page.goto(TEST_PAGE);
-  await page.evaluate(() => document.fonts.ready);
-  const frame = page.frameLocator(TEST_IFRAME); // Need to go into frame otherwise the `locator` won't locate the selection.
-  const KPIComponent = frame.getByTestId('kpi-base-component');
-  const KPIError = frame.getByTestId('kpi-error-component');
+  const KPIComponent = page.getByTestId('kpi-base-component');
 
-  // KPI will always show value
-  await expect(KPIComponent).toContainText('100');
-
-  // unit will display
-  const unit = 'mph';
-  await page.goto(`${TEST_PAGE}&args=unit:${unit}`);
-  await expect(KPIComponent).toContainText(unit);
+  // screenshot comparison with everything showing
+  await expect(KPIComponent).toHaveScreenshot('kpi-default-settings.png');
+});
 
-  // name will display
-  const name = 'windmill-name';
-  await page.goto(`${TEST_PAGE}&args=name:${name}`);
-  await expect(KPIComponent).toContainText(name);
+test('kpi hidden settings', async ({ page }) => {
+  await page.goto(TEST_PAGE_HIDDEN_SETTINGS);
+  const KPIComponent = page.getByTestId('kpi-base-component');
 
-  // displays as loading
-  await page.goto(`${TEST_PAGE}&args=isLoading:true`);
-  await expect(KPIComponent).toContainText('-');
+  // screenshot comparison with everything hidden
+  await expect(KPIComponent).toHaveScreenshot('kpi-hidden-settings.png');
+});
 
-  // error will display
-  const errorMsg = 'my-custom-error-msg';
-  await page.goto(`${TEST_PAGE}&args=error:${errorMsg}`);
-  await expect(KPIError).toContainText(errorMsg);
+test('kpi with thresholds', async ({ page }) => {
+  await page.goto(TEST_PAGE_THRESHOLD);
+  const AllKPIs = page.getByTestId('mock-data-kpi-story');
 
-  // displays empty state
-  await page.goto(`${TEST_PAGE}&args=propertyPoint:!null`);
-  await expect(KPIComponent).toContainText('-');
+  // screenshot comparison
+  await expect(AllKPIs).toHaveScreenshot('kpi-with-thresholds.png');
 });

packages/react-components/e2e/tests/webgl-charts/webgl-charts.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+const COMPONENT_SELECTOR = '#story-container';
+const TEST_PAGE_LINE_CHART =
+  '/iframe.html?id=widgets-webgl-charts--line-chart-example';
+const TEST_PAGE_BAR_CHART =
+  '/iframe.html?id=widgets-webgl-charts--bar-chart-example';
+const TEST_PAGE_SCATTER_CHART =
+  '/iframe.html?id=widgets-webgl-charts--scatter-chart-example';
+const TEST_PAGE_STATUS_TIMELINE =
+  '/iframe.html?id=widgets-webgl-charts--status-timeline-example';
+
+test('webgl-line-chart', async ({ page }) => {
+  await page.goto(TEST_PAGE_LINE_CHART);
+  const chart = page.locator(COMPONENT_SELECTOR);
+  await expect(chart).toContainText('2000');
+  await expect(chart).toHaveScreenshot('line-chart.png');
+});
+
+test('webgl-bar-chart', async ({ page }) => {
+  await page.goto(TEST_PAGE_BAR_CHART);
+  const chart = page.locator(COMPONENT_SELECTOR);
+  await expect(chart).toContainText('2000');
+  await expect(chart).toHaveScreenshot('bar-chart.png');
+});
+
+test('webgl-scatter-chart', async ({ page }) => {
+  await page.goto(TEST_PAGE_SCATTER_CHART);
+  const chart = page.locator(COMPONENT_SELECTOR);
+  await expect(chart).toContainText('2000');
+  await expect(chart).toHaveScreenshot('scatter-chart.png');
+});
+
+test('webgl-status-timeline', async ({ page }) => {
+  await page.goto(TEST_PAGE_STATUS_TIMELINE);
+  const chart = page.locator(COMPONENT_SELECTOR);
+  await expect(chart).toContainText('2000');
+  await expect(chart).toHaveScreenshot('status-timeline.png');
+});

packages/react-components/src/components/chart/baseChart.tsx

@@ -217,6 +217,7 @@ const BaseChart = ({
   return (
     <div
       className={`base-chart-container ${options.legend?.position}-position`}
+      data-testid='base-chart-container'
     >
       <div className='base-chart-container-element'>
         <Resizable

packages/react-components/src/components/gauge/constants.ts

@@ -180,7 +180,7 @@ export const DEFAULT_GAUGE_PROGRESS_SETTINGS_WITH_THRESHOLDS = {
 
 export const DEFAULT_GAUGE_STYLES = {
   gaugeThickness: 30,
-  showName: false,
+  showName: true,
   showUnit: true,
   fontSize: 40,
   labelFontSize: 12,