feat: backfill component integration tests (#66)

* backfill components integration tests
* remove unfinished components
* add iot webgl context

Co-authored-by: Norbert Nader <[email protected]>

packages/components/src/components.d.ts

@@ -88,15 +88,6 @@ export namespace Components {
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
-    interface IotTable {
-        "annotations": Annotations;
-        "appKit": IoTAppKit;
-        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
-        "settings": TimeSeriesDataRequestSettings;
-        "styleSettings": StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
-        "widgetId": string;
-    }
     interface IotTestRoutes {
     }
     interface IotTimeSeriesConnector {
@@ -125,6 +116,8 @@ export namespace Components {
     }
     interface IotTreeTableDemo {
     }
+    interface IotWebglContext {
+    }
     interface SitewiseResourceExplorer {
         "appKit": IoTAppKit;
         "columnDefinitions": ColumnDefinition<any>[];
@@ -192,12 +185,6 @@ declare global {
         prototype: HTMLIotStatusTimelineElement;
         new (): HTMLIotStatusTimelineElement;
     };
-    interface HTMLIotTableElement extends Components.IotTable, HTMLStencilElement {
-    }
-    var HTMLIotTableElement: {
-        prototype: HTMLIotTableElement;
-        new (): HTMLIotTableElement;
-    };
     interface HTMLIotTestRoutesElement extends Components.IotTestRoutes, HTMLStencilElement {
     }
     var HTMLIotTestRoutesElement: {
@@ -222,6 +209,12 @@ declare global {
         prototype: HTMLIotTreeTableDemoElement;
         new (): HTMLIotTreeTableDemoElement;
     };
+    interface HTMLIotWebglContextElement extends Components.IotWebglContext, HTMLStencilElement {
+    }
+    var HTMLIotWebglContextElement: {
+        prototype: HTMLIotWebglContextElement;
+        new (): HTMLIotWebglContextElement;
+    };
     interface HTMLSitewiseResourceExplorerElement extends Components.SitewiseResourceExplorer, HTMLStencilElement {
     }
     var HTMLSitewiseResourceExplorerElement: {
@@ -243,11 +236,11 @@ declare global {
         "iot-scatter-chart": HTMLIotScatterChartElement;
         "iot-status-grid": HTMLIotStatusGridElement;
         "iot-status-timeline": HTMLIotStatusTimelineElement;
-        "iot-table": HTMLIotTableElement;
         "iot-test-routes": HTMLIotTestRoutesElement;
         "iot-time-series-connector": HTMLIotTimeSeriesConnectorElement;
         "iot-tree-table": HTMLIotTreeTableElement;
         "iot-tree-table-demo": HTMLIotTreeTableDemoElement;
+        "iot-webgl-context": HTMLIotWebglContextElement;
         "sitewise-resource-explorer": HTMLSitewiseResourceExplorerElement;
         "testing-ground": HTMLTestingGroundElement;
     }
@@ -329,15 +322,6 @@ declare namespace LocalJSX {
         "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
-    interface IotTable {
-        "annotations"?: Annotations;
-        "appKit": IoTAppKit;
-        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
-        "settings"?: TimeSeriesDataRequestSettings;
-        "styleSettings"?: StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
-        "widgetId"?: string;
-    }
     interface IotTestRoutes {
     }
     interface IotTimeSeriesConnector {
@@ -366,6 +350,8 @@ declare namespace LocalJSX {
     }
     interface IotTreeTableDemo {
     }
+    interface IotWebglContext {
+    }
     interface SitewiseResourceExplorer {
         "appKit"?: IoTAppKit;
         "columnDefinitions"?: ColumnDefinition<any>[];
@@ -392,11 +378,11 @@ declare namespace LocalJSX {
         "iot-scatter-chart": IotScatterChart;
         "iot-status-grid": IotStatusGrid;
         "iot-status-timeline": IotStatusTimeline;
-        "iot-table": IotTable;
         "iot-test-routes": IotTestRoutes;
         "iot-time-series-connector": IotTimeSeriesConnector;
         "iot-tree-table": IotTreeTable;
         "iot-tree-table-demo": IotTreeTableDemo;
+        "iot-webgl-context": IotWebglContext;
         "sitewise-resource-explorer": SitewiseResourceExplorer;
         "testing-ground": TestingGround;
     }
@@ -413,11 +399,11 @@ declare module "@stencil/core" {
             "iot-scatter-chart": LocalJSX.IotScatterChart & JSXBase.HTMLAttributes<HTMLIotScatterChartElement>;
             "iot-status-grid": LocalJSX.IotStatusGrid & JSXBase.HTMLAttributes<HTMLIotStatusGridElement>;
             "iot-status-timeline": LocalJSX.IotStatusTimeline & JSXBase.HTMLAttributes<HTMLIotStatusTimelineElement>;
-            "iot-table": LocalJSX.IotTable & JSXBase.HTMLAttributes<HTMLIotTableElement>;
             "iot-test-routes": LocalJSX.IotTestRoutes & JSXBase.HTMLAttributes<HTMLIotTestRoutesElement>;
             "iot-time-series-connector": LocalJSX.IotTimeSeriesConnector & JSXBase.HTMLAttributes<HTMLIotTimeSeriesConnectorElement>;
             "iot-tree-table": LocalJSX.IotTreeTable & JSXBase.HTMLAttributes<HTMLIotTreeTableElement>;
             "iot-tree-table-demo": LocalJSX.IotTreeTableDemo & JSXBase.HTMLAttributes<HTMLIotTreeTableDemoElement>;
+            "iot-webgl-context": LocalJSX.IotWebglContext & JSXBase.HTMLAttributes<HTMLIotWebglContextElement>;
             "sitewise-resource-explorer": LocalJSX.SitewiseResourceExplorer & JSXBase.HTMLAttributes<HTMLSitewiseResourceExplorerElement>;
             "testing-ground": LocalJSX.TestingGround & JSXBase.HTMLAttributes<HTMLTestingGroundElement>;
         }

packages/components/src/components/iot-table/iot-table.tsx

@@ -1,83 +0,0 @@
-import { Component, Prop, h, State, Listen, Watch } from '@stencil/core';
-import { Annotations, DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
-import {
-  StyleSettingsMap,
-  SiteWiseTimeSeriesDataProvider,
-  IoTAppKit,
-  TimeSeriesQuery,
-  TimeSeriesDataRequestSettings,
-  composeSiteWiseProviders,
-} from '@iot-app-kit/core';
-
-@Component({
-  tag: 'iot-table',
-  shadow: false,
-})
-export class IotTable {
-  @Prop() appKit!: IoTAppKit;
-
-  @Prop() annotations: Annotations;
-
-  @Prop() queries!: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
-
-  @Prop() viewport!: MinimalViewPortConfig;
-
-  @Prop() settings: TimeSeriesDataRequestSettings = {};
-
-  @Prop() widgetId: string;
-
-  @Prop() styleSettings: StyleSettingsMap | undefined;
-
-  @State() provider: SiteWiseTimeSeriesDataProvider;
-
-  private defaultSettings: TimeSeriesDataRequestSettings = {
-    fetchMostRecentBeforeEnd: true,
-  };
-
-  buildProvider() {
-    this.provider = composeSiteWiseProviders(
-      this.queries.map((query) =>
-        query.build(this.appKit.session(this.widgetId), {
-          viewport: this.viewport,
-          settings: {
-            ...this.defaultSettings,
-            ...this.settings,
-          },
-        })
-      )
-    );
-  }
-
-  componentWillLoad() {
-    this.buildProvider();
-  }
-
-  @Watch('queries')
-  @Watch('settings')
-  @Watch('viewport')
-  private onPropUpdate() {
-    this.buildProvider();
-  }
-
-  @Listen('dateRangeChange')
-  private handleDateRangeChange({ detail: [start, end, lastUpdatedBy] }: { detail: [Date, Date, string | undefined] }) {
-    this.provider.updateViewport({ start, end, lastUpdatedBy });
-  }
-
-  render() {
-    return (
-      <iot-time-series-connector
-        provider={this.provider}
-        styleSettings={this.styleSettings}
-        renderFunc={({ dataStreams }) => (
-          <sc-table
-            dataStreams={dataStreams as SynchroChartsDataStream[]}
-            annotations={this.annotations}
-            viewport={this.provider.input.request.viewport}
-            widgetId={this.widgetId}
-          />
-        )}
-      />
-    );
-  }
-}

packages/components/src/components/iot-webgl-context/iot-webgl-context.tsx

@@ -0,0 +1,11 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'iot-webgl-context',
+  shadow: false,
+})
+export class IotWebglContext {
+  render() {
+    return <sc-webgl-context />;
+  }
+}

packages/components/src/integration/iot-bar-chart/iot-bar-chart.spec.component.ts

@@ -0,0 +1,38 @@
+import { renderChart } from '../../testing/renderChart';
+import { mockGetAggregatedOrRawResponse } from '../../testing/mocks/mockGetAggregatedOrRawResponse';
+import { mockGetAssetSummary } from '../../testing/mocks/mockGetAssetSummaries';
+
+const SECOND_IN_MS = 1000;
+
+const snapshotOptions = {
+  clip: { x: 0, y: 0, width: 400, height: 500 },
+};
+
+describe('bar chart', () => {
+  const assetId = 'some-asset-id';
+  const assetModelId = 'some-asset-model-id';
+
+  before(() => {
+    cy.intercept('/properties/aggregates?*', (req) => {
+      req.reply(
+        mockGetAggregatedOrRawResponse({
+          startDate: new Date(req.query.startDate),
+          endDate: new Date(req.query.endDate),
+          resolution: req.query.resolution as string,
+        })
+      );
+    });
+
+    cy.intercept(`/assets/${assetId}`, (req) => {
+      req.reply(mockGetAssetSummary({ assetModelId, id: assetId }));
+    });
+  });
+
+  it('renders', () => {
+    renderChart({ chartType: 'iot-bar-chart', settings: { resolution: '1m' } });
+
+    cy.wait(SECOND_IN_MS * 2);
+
+    cy.matchImageSnapshot(snapshotOptions);
+  });
+});

packages/components/src/integration/iot-kpi/iot-kpi.spec.component.ts

@@ -0,0 +1,32 @@
+import { renderChart } from '../../testing/renderChart';
+import { mockLatestValueResponse } from '../../testing/mocks/mockGetAggregatedOrRawResponse';
+import { mockGetAssetSummary } from '../../testing/mocks/mockGetAssetSummaries';
+
+const SECOND_IN_MS = 1000;
+
+const snapshotOptions = {
+  clip: { x: 0, y: 0, width: 400, height: 500 },
+};
+
+describe('kpi', () => {
+  const assetId = 'some-asset-id';
+  const assetModelId = 'some-asset-model-id';
+
+  before(() => {
+    cy.intercept('/properties/latest?*', (req) => {
+      req.reply(mockLatestValueResponse());
+    });
+
+    cy.intercept(`/assets/${assetId}`, (req) => {
+      req.reply(mockGetAssetSummary({ assetModelId, id: assetId }));
+    });
+  });
+
+  it('renders', () => {
+    renderChart({ chartType: 'iot-kpi', settings: { resolution: '0' }, viewport: { duration: '1m' } });
+
+    cy.wait(SECOND_IN_MS * 2);
+
+    cy.matchImageSnapshot(snapshotOptions);
+  });
+});

packages/components/src/integration/iot-line-chart/iot-line-chart.spec.component.ts

@@ -0,0 +1,38 @@
+import { renderChart } from '../../testing/renderChart';
+import { mockGetAggregatedOrRawResponse } from '../../testing/mocks/mockGetAggregatedOrRawResponse';
+import { mockGetAssetSummary } from '../../testing/mocks/mockGetAssetSummaries';
+
+const SECOND_IN_MS = 1000;
+
+const snapshotOptions = {
+  clip: { x: 0, y: 0, width: 400, height: 500 },
+};
+
+describe('line chart', () => {
+  const assetId = 'some-asset-id';
+  const assetModelId = 'some-asset-model-id';
+
+  before(() => {
+    cy.intercept('/properties/aggregates?*', (req) => {
+      req.reply(
+        mockGetAggregatedOrRawResponse({
+          startDate: new Date(req.query.startDate),
+          endDate: new Date(req.query.endDate),
+          resolution: req.query.resolution as string,
+        })
+      );
+    });
+
+    cy.intercept(`/assets/${assetId}`, (req) => {
+      req.reply(mockGetAssetSummary({ assetModelId, id: assetId }));
+    });
+  });
+
+  it('renders', () => {
+    renderChart({ chartType: 'iot-line-chart' });
+
+    cy.wait(SECOND_IN_MS * 2);
+
+    cy.matchImageSnapshot(snapshotOptions);
+  });
+});