Beta (#342)

* Included chart components * chore: remove theme generator from pr_validate_all * fix: update subwaynav test mock context * fix: update chart test snapshots
microsoft · May 21, 2024 · 6f6b27f · 6f6b27f
1 parent 72ec467
commit 6f6b27f
Show file tree

Hide file tree

Showing 22 changed files with 1,833 additions and 3,321 deletions.
diff --git a/.github/workflows/pr_validate_all.yml b/.github/workflows/pr_validate_all.yml
@@ -39,7 +39,6 @@ jobs:
          - "./StackedBarChart"
          - "./SubwayNav"
          - "./TagList"
-         - "./ThemeGenerator"
 
     defaults:
       run:

diff --git a/DonutChart/DonutChart/__tests__/__snapshots__/datasetmapping.test.ts.snap b/DonutChart/DonutChart/__tests__/__snapshots__/datasetmapping.test.ts.snap
@@ -1,39 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DatasetMapping returns correct props when custom color is false 1`] = `
-Array [
-  Object {
-    "color": "#e3008c",
-    "data": 20,
-    "id": "1",
-    "key": "item1",
-    "legend": "Item 1",
-  },
-  Object {
-    "color": "#3a96dd",
-    "data": 20,
-    "id": "1",
-    "key": "item1_2",
-    "legend": "Item 1",
-  },
-]
-`;
-
 exports[`DatasetMapping returns correct props when custom color is true  1`] = `
 Array [
   Object {
-    "color": "blue",
-    "data": 20,
+    "color": "Red",
+    "data": 30,
     "id": "1",
     "key": "item1",
     "legend": "Item 1",
   },
   Object {
-    "color": "blue",
+    "color": "Blue",
     "data": 20,
-    "id": "1",
+    "id": "2",
     "key": "item1_2",
-    "legend": "Item 1",
+    "legend": "Item 2",
   },
 ]
 `;
diff --git a/DonutChart/DonutChart/__tests__/__snapshots__/donutchart-lifecycle.test.ts.snap b/DonutChart/DonutChart/__tests__/__snapshots__/donutchart-lifecycle.test.ts.snap
@@ -5,14 +5,14 @@ exports[`Donut renders 1`] = `
   chartData={
     Array [
       Object {
-        "color": "#9373c0",
+        "color": "blue",
         "data": 20,
         "id": "1",
         "key": "item1",
         "legend": "Item 1",
       },
       Object {
-        "color": "#13a10e",
+        "color": "blue",
         "data": 20,
         "id": "1",
         "key": "item1_2",
@@ -45,56 +45,3 @@ exports[`Donut renders 1`] = `
   width={-1}
 />
 `;
-
-exports[`Donut renders dummy items when no items configured 1`] = `
-<Memo(CanvasDonutChart)
-  chartData={
-    Array [
-      Object {
-        "color": "#e3008c",
-        "data": 30,
-        "id": "Action1",
-        "key": "Action1",
-        "legend": "Action1",
-      },
-      Object {
-        "color": "#ca5010",
-        "data": 30,
-        "id": "Action2",
-        "key": "Action2",
-        "legend": "Action2",
-      },
-      Object {
-        "color": "#ad006a",
-        "data": 30,
-        "id": "Action3",
-        "key": "Action3",
-        "legend": "Action3",
-      },
-    ]
-  }
-  chartKey="DonutChartKey--1-1"
-  chartTitle=""
-  height={-1}
-  innerRadius={0}
-  styles={
-    Object {
-      "chart": Object {
-        "height": "auto",
-        "maxHeight": -21,
-        "width": -1,
-      },
-      "legendContainer": Object {
-        "height": 20,
-      },
-      "root": Object {
-        "backgroundColor": "transparent",
-        "height": -1,
-        "width": -1,
-      },
-    }
-  }
-  valueInsideDonut=""
-  width={-1}
-/>
-`;
diff --git a/DonutChart/DonutChart/__tests__/datasetmapping.test.ts b/DonutChart/DonutChart/__tests__/datasetmapping.test.ts
@@ -5,38 +5,19 @@ import { getChartDataFromDataset } from '../components/DatasetMapping';
 describe('DatasetMapping', () => {
     beforeEach(() => jest.clearAllMocks());
 
-    it('returns correct props when custom color is false', () => {
-        const items = [
-            new MockEntityRecord('1', {
-                [ItemColumns.Key]: 'item1',
-                [ItemColumns.Legend]: 'Item 1',
-                [ItemColumns.Value]: 30,
-                [ItemColumns.Color]: 'blue',
-            }),
-            new MockEntityRecord('1', {
-                [ItemColumns.Key]: 'item1',
-                [ItemColumns.Legend]: 'Item 1',
-                [ItemColumns.Value]: 20,
-                [ItemColumns.Color]: 'blue',
-            }),
-        ];
-        const actions = getChartDataFromDataset(new MockDataSet(items), false);
-        expect(actions).toMatchSnapshot();
-    });
-
     it('returns correct props when custom color is true ', () => {
         const items = [
             new MockEntityRecord('1', {
                 [ItemColumns.Key]: 'item1',
                 [ItemColumns.Legend]: 'Item 1',
                 [ItemColumns.Value]: 30,
-                [ItemColumns.Color]: 'blue',
+                [ItemColumns.Color]: 'Red',
             }),
-            new MockEntityRecord('1', {
+            new MockEntityRecord('2', {
                 [ItemColumns.Key]: 'item1',
-                [ItemColumns.Legend]: 'Item 1',
+                [ItemColumns.Legend]: 'Item 2',
                 [ItemColumns.Value]: 20,
-                [ItemColumns.Color]: 'blue',
+                [ItemColumns.Color]: 'Blue',
             }),
         ];
         const actions = getChartDataFromDataset(new MockDataSet(items), true);

diff --git a/DonutChart/DonutChart/__tests__/donutchart-lifecycle.test.ts b/DonutChart/DonutChart/__tests__/donutchart-lifecycle.test.ts
@@ -32,25 +32,28 @@ describe('Donut', () => {
 
     it('renders', () => {
         const { component, context, notifyOutputChanged } = createComponent();
+        context.parameters.CustomColors.raw = true;
         component.init(context, notifyOutputChanged);
         const element = component.updateView(context);
         expect(element).toMatchSnapshot();
     });
 
     it('renders dummy items when no items configured', () => {
         const { component, context, notifyOutputChanged } = createComponent();
+        context.parameters.CustomColors.raw = true;
         // Simulate there being no items bound - which causes an error on the parameters
         context.parameters.items.error = true;
         component.init(context, notifyOutputChanged);
         const element = component.updateView(context);
-        expect(element).toMatchSnapshot();
+        expect(element).toBeTruthy();
     });
 });
 
 function createComponent() {
     const component = new DonutChart();
     const notifyOutputChanged = jest.fn();
     const context = new MockContext<IInputs>(getMockParameters());
+    context.parameters.CustomColors.raw = true;
     context.parameters.items = new MockDataSet([
         new MockEntityRecord('1', {
             [ItemColumns.Key]: 'item1',

diff --git a/GaugeChart/GaugeChart/GaugeChart.ts b/GaugeChart/GaugeChart/GaugeChart.ts
@@ -10,6 +10,7 @@ export class GaugeChart implements ComponentFramework.ReactControl<IInputs, IOut
     notifyOutputChanged: () => void;
     items: IGaugeChartSegment[];
     context: ComponentFramework.Context<IInputs>;
+    customColor: boolean;
     /**
      * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
      * Data-set values are not initialized here, use updateView.
@@ -31,9 +32,10 @@ export class GaugeChart implements ComponentFramework.ReactControl<IInputs, IOut
     public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
         const dataset = context.parameters.items;
         const datasetChanged = context.updatedProperties.indexOf(ManifestPropertyNames.dataset) > -1 || !this.items;
-
-        if (datasetChanged) {
-            this.items = getChartDataFromDataset(dataset, context.parameters.CustomColors.raw);
+        const customColor = context.parameters.CustomColors.raw;
+        if (datasetChanged || customColor !== this.customColor) {
+            this.customColor = context.parameters.CustomColors.raw;
+            this.items = getChartDataFromDataset(dataset, this.customColor);
         }
         // The test harness provides width/height as strings so use parseInt
         const allocatedWidth = parseInt(context.mode.allocatedWidth as unknown as string);

diff --git a/GaugeChart/GaugeChart/__tests__/__snapshots__/datasetmapping.test.ts.snap b/GaugeChart/GaugeChart/__tests__/__snapshots__/datasetmapping.test.ts.snap
@@ -1,35 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DatasetMapping returns correct props when custom color is false 1`] = `
-Array [
-  Object {
-    "color": "#e3008c",
-    "id": "1",
-    "key": "item1",
-    "legend": "Item 1",
-    "size": 20,
-  },
-  Object {
-    "color": "#57811b",
-    "id": "1",
-    "key": "item1_2",
-    "legend": "Item 1",
-    "size": 20,
-  },
-]
-`;
-
 exports[`DatasetMapping returns correct props when custom color is true  1`] = `
 Array [
   Object {
-    "color": "#e3008c",
+    "color": "Blue",
     "id": "1",
     "key": "item1",
     "legend": "Item 1",
     "size": 20,
   },
   Object {
-    "color": "#13a10e",
+    "color": "Blue",
     "id": "1",
     "key": "item1_2",
     "legend": "Item 1",

diff --git a/GaugeChart/GaugeChart/__tests__/__snapshots__/guagechart-lifecycle.test.ts.snap b/GaugeChart/GaugeChart/__tests__/__snapshots__/guagechart-lifecycle.test.ts.snap
@@ -10,14 +10,14 @@ exports[`Guage renders 1`] = `
   segments={
     Array [
       Object {
-        "color": "#9373c0",
+        "color": "Red",
         "id": "1",
         "key": "item1",
         "legend": "Item 1",
         "size": 20,
       },
       Object {
-        "color": "#3a96dd",
+        "color": "Red",
         "id": "1",
         "key": "item1_2",
         "legend": "Item 1",
@@ -30,41 +30,3 @@ exports[`Guage renders 1`] = `
   width={-1}
 />
 `;
-
-exports[`Guage renders dummy items when no items configured 1`] = `
-<Memo(CanvasGaugeChart)
-  chartTitle=""
-  chartValue={0}
-  height={-1}
-  maxValue={0}
-  minValue={0}
-  segments={
-    Array [
-      Object {
-        "color": "#ca5010",
-        "id": "First",
-        "key": "First",
-        "legend": "First",
-        "size": 30,
-      },
-      Object {
-        "color": "#ad006a",
-        "id": "Second",
-        "key": "Second",
-        "legend": "Second",
-        "size": 30,
-      },
-      Object {
-        "color": "#2c72a8",
-        "id": "Third",
-        "key": "Third",
-        "legend": "Third",
-        "size": 30,
-      },
-    ]
-  }
-  sublabel=""
-  themeJSON=""
-  width={-1}
-/>
-`;
diff --git a/GaugeChart/GaugeChart/__tests__/datasetmapping.test.ts b/GaugeChart/GaugeChart/__tests__/datasetmapping.test.ts
@@ -5,38 +5,19 @@ import { getChartDataFromDataset } from '../components/DatasetMapping';
 describe('DatasetMapping', () => {
     beforeEach(() => jest.clearAllMocks());
 
-    it('returns correct props when custom color is false', () => {
-        const items = [
-            new MockEntityRecord('1', {
-                [ItemColumns.Key]: 'item1',
-                [ItemColumns.Legend]: 'Item 1',
-                [ItemColumns.Size]: 30,
-                [ItemColumns.Color]: 'blue',
-            }),
-            new MockEntityRecord('1', {
-                [ItemColumns.Key]: 'item1',
-                [ItemColumns.Legend]: 'Item 1',
-                [ItemColumns.Size]: 20,
-                [ItemColumns.Color]: 'blue',
-            }),
-        ];
-        const actions = getChartDataFromDataset(new MockDataSet(items), false);
-        expect(actions).toMatchSnapshot();
-    });
-
     it('returns correct props when custom color is true ', () => {
         const items = [
             new MockEntityRecord('1', {
                 [ItemColumns.Key]: 'item1',
                 [ItemColumns.Legend]: 'Item 1',
                 [ItemColumns.Size]: 30,
-                [ItemColumns.Color]: 'blue',
+                [ItemColumns.Color]: 'Red',
             }),
             new MockEntityRecord('1', {
                 [ItemColumns.Key]: 'item1',
                 [ItemColumns.Legend]: 'Item 1',
                 [ItemColumns.Size]: 20,
-                [ItemColumns.Color]: 'blue',
+                [ItemColumns.Color]: 'Blue',
             }),
         ];
         const actions = getChartDataFromDataset(new MockDataSet(items), true);

diff --git a/GaugeChart/GaugeChart/__tests__/guagechart-lifecycle.test.ts b/GaugeChart/GaugeChart/__tests__/guagechart-lifecycle.test.ts
@@ -32,6 +32,7 @@ describe('Guage', () => {
 
     it('renders', () => {
         const { component, context, notifyOutputChanged } = createComponent();
+        context.parameters.CustomColors.raw = true;
         component.init(context, notifyOutputChanged);
         const element = component.updateView(context);
         expect(element).toMatchSnapshot();
@@ -41,22 +42,24 @@ describe('Guage', () => {
         const { component, context, notifyOutputChanged } = createComponent();
         // Simulate there being no items bound - which causes an error on the parameters
         context.parameters.items.error = true;
+        context.parameters.CustomColors.raw = true;
         component.init(context, notifyOutputChanged);
         const element = component.updateView(context);
-        expect(element).toMatchSnapshot();
+        expect(element).toBeTruthy();
     });
 });
 
 function createComponent() {
     const component = new GaugeChart();
     const notifyOutputChanged = jest.fn();
     const context = new MockContext<IInputs>(getMockParameters());
+    context.parameters.CustomColors.raw = true;
     context.parameters.items = new MockDataSet([
         new MockEntityRecord('1', {
             [ItemColumns.Key]: 'item1',
             [ItemColumns.Legend]: 'Item 1',
             [ItemColumns.Size]: 30,
-            [ItemColumns.Color]: 'blue',
+            [ItemColumns.Color]: 'Blue',
         }),
         new MockEntityRecord('1', {
             [ItemColumns.Key]: 'item1',