Merge pull request gooddata#4912 from scavnickyj/jsc-repeater-tests

Repeater storybook and api regression tests Reviewed-by: https://github.com/kandl
hackerstanislav · Apr 16, 2024 · d037496 · d037496
2 parents f360dcf + b74d077
commit d037496
Show file tree

Hide file tree

Showing 54 changed files with 12,661 additions and 13 deletions.
diff --git a/libs/sdk-model/src/execution/objectFactoryNotation/index.ts b/libs/sdk-model/src/execution/objectFactoryNotation/index.ts
@@ -1,4 +1,4 @@
-// (C) 2019-2022 GoodData Corporation
+// (C) 2019-2024 GoodData Corporation
 import compact from "lodash/compact.js";
 import flow from "lodash/flow.js";
 import isNil from "lodash/isNil.js";
@@ -43,6 +43,8 @@ import {
     IArithmeticMeasureDefinition,
     IPoPMeasureDefinition,
     IPreviousPeriodMeasureDefinition,
+    isInlineMeasureDefinition,
+    IInlineMeasureDefinition,
 } from "../measure/index.js";
 import { isAttribute, IAttribute } from "../attribute/index.js";
 import { isTotal, ITotal } from "../base/totals.js";
@@ -139,6 +141,11 @@ const convertPopMeasure = (measure: IMeasure["measure"], definition: IPoPMeasure
     )}, ${builder})`;
 };
 
+const convertInlineMeasure = (measure: IMeasure["measure"], definition: IInlineMeasureDefinition) => {
+    const builder = getBuilder("m => m", baseMeasureDotAdders(measure));
+    return `newInlineMeasure(${stringify(definition.inlineDefinition.maql)}, ${builder})`;
+};
+
 const convertPreviousPeriodMeasure = (
     measure: IMeasure["measure"],
     definition: IPreviousPeriodMeasureDefinition,
@@ -165,6 +172,8 @@ const convertMeasure: Converter<IMeasure> = ({ measure }) => {
         return convertPopMeasure(measure, definition);
     } else if (isPreviousPeriodMeasureDefinition(definition)) {
         return convertPreviousPeriodMeasure(measure, definition);
+    } else if (isInlineMeasureDefinition(definition)) {
+        return convertInlineMeasure(measure, definition);
     }
     throw new Error("Unknown measure type");
 };

diff --git a/libs/sdk-ui-charts/package.json b/libs/sdk-ui-charts/package.json
@@ -30,7 +30,8 @@
         "./internal-tests/CoreSankeyChart": "./esm/charts/sankeyChart/CoreSankeyChart.js",
         "./internal-tests/CoreScatterPlot": "./esm/charts/scatterPlot/CoreScatterPlot.js",
         "./internal-tests/CoreTreemap": "./esm/charts/treemap/CoreTreemap.js",
-        "./internal-tests/CoreXirr": "./esm/charts/xirr/CoreXirr.js"
+        "./internal-tests/CoreXirr": "./esm/charts/xirr/CoreXirr.js",
+        "./internal-tests/CoreRepeater": "./esm/charts/repeater/CoreRepeater.js"
     },
     "types": "./esm/index.d.ts",
     "sideEffects": [

diff --git a/.../sdk-ui-ext/src/internal/components/tests/__snapshots__/VisualizationCatalog.test.ts.snap b/.../sdk-ui-ext/src/internal/components/tests/__snapshots__/VisualizationCatalog.test.ts.snap
@@ -46800,6 +46800,243 @@ export function MyComponent() {
 "
 `;
 
+exports[`getEmbeddingCode functionality > should generate code for Repeater - canvas - large row height 1`] = `
+"import React from "react";
+import { IAttribute, IAttributeOrMeasure, idRef, newAttribute, newMeasure } from "@gooddata/sdk-model";
+import { IChartConfig, Repeater } from "@gooddata/sdk-ui-charts";
+
+const attribute: IAttribute = newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname"));
+const columns: IAttributeOrMeasure[] = [
+    newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname_1")),
+    newInlineMeasure("SELECT {metric/of_lost_opps.} BY ALL OTHER EXCEPT {label/f_city.id.cityname}", m => m.localId("m_7bd77a90_inline").title("# of Lost Opps.")),
+    newMeasure(idRef("of_lost_opps.", "measure"), m => m.localId("m_of_lost_opps."))
+];
+const viewBy: IAttribute = newAttribute(idRef("attr.f_product.product", "displayForm"), a => a.localId("a_attr.f_product.product"));
+const config: IChartConfig = {
+    inlineVisualizations: {"m_of_lost_opps.": {type: "column"}},
+    rowHeight: "large",
+    separators: {decimal: ".", thousand: ","},
+    legend: {position: "auto"},
+    dataPoints: {visible: "auto"}
+};
+const style = {height: 400};
+
+export function MyComponent() {
+    return (
+        <div style={style}>
+            <Repeater
+                attribute={attribute}
+                columns={columns}
+                viewBy={viewBy}
+                config={config}
+            />
+        </div>
+    );
+}
+"
+`;
+
+exports[`getEmbeddingCode functionality > should generate code for Repeater - coloring - custom palette 1`] = `
+"import React from "react";
+import { IAttribute, IAttributeOrMeasure, idRef, newAttribute, newMeasure } from "@gooddata/sdk-model";
+import { IChartConfig, Repeater } from "@gooddata/sdk-ui-charts";
+
+const attribute: IAttribute = newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname"));
+const columns: IAttributeOrMeasure[] = [
+    newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname_1")),
+    newInlineMeasure("SELECT {metric/of_lost_opps.} BY ALL OTHER EXCEPT {label/f_city.id.cityname}", m => m.localId("m_7bd77a90_inline").title("# of Lost Opps.")),
+    newMeasure(idRef("of_lost_opps.", "measure"), m => m.localId("m_of_lost_opps."))
+];
+const viewBy: IAttribute = newAttribute(idRef("attr.f_product.product", "displayForm"), a => a.localId("a_attr.f_product.product"));
+const config: IChartConfig = {
+    inlineVisualizations: {"m_of_lost_opps.": {type: "column"}},
+    separators: {decimal: ".", thousand: ","},
+    legend: {position: "auto"},
+    dataPoints: {visible: "auto"}
+};
+const style = {height: 400};
+
+export function MyComponent() {
+    return (
+        <div style={style}>
+            <Repeater
+                attribute={attribute}
+                columns={columns}
+                viewBy={viewBy}
+                config={config}
+            />
+        </div>
+    );
+}
+"
+`;
+
+exports[`getEmbeddingCode functionality > should generate code for Repeater - font 1`] = `
+"import React from "react";
+import { IAttribute, IAttributeOrMeasure, idRef, newAttribute, newMeasure } from "@gooddata/sdk-model";
+import { IChartConfig, Repeater } from "@gooddata/sdk-ui-charts";
+
+const attribute: IAttribute = newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname"));
+const columns: IAttributeOrMeasure[] = [
+    newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname_1")),
+    newInlineMeasure("SELECT {metric/of_lost_opps.} BY ALL OTHER EXCEPT {label/f_city.id.cityname}", m => m.localId("m_7bd77a90_inline").title("# of Lost Opps.")),
+    newMeasure(idRef("of_lost_opps.", "measure"), m => m.localId("m_of_lost_opps."))
+];
+const viewBy: IAttribute = newAttribute(idRef("attr.f_product.product", "displayForm"), a => a.localId("a_attr.f_product.product"));
+const config: IChartConfig = {
+    inlineVisualizations: {"m_of_lost_opps.": {type: "column"}},
+    separators: {decimal: ".", thousand: ","},
+    legend: {position: "auto"},
+    dataPoints: {visible: "auto"}
+};
+const style = {height: 400};
+
+export function MyComponent() {
+    return (
+        <div style={style}>
+            <Repeater
+                attribute={attribute}
+                columns={columns}
+                viewBy={viewBy}
+                config={config}
+            />
+        </div>
+    );
+}
+"
+`;
+
+exports[`getEmbeddingCode functionality > should generate code for Repeater - one attribute 1`] = `
+"import React from "react";
+import { IAttribute, IAttributeOrMeasure, idRef, newAttribute } from "@gooddata/sdk-model";
+import { IChartConfig, Repeater } from "@gooddata/sdk-ui-charts";
+
+const attribute: IAttribute = newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname"));
+const columns: IAttributeOrMeasure[] = [
+    newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname_1"))
+];
+const config: IChartConfig = {
+    separators: {decimal: ".", thousand: ","},
+    legend: {position: "auto"},
+    dataPoints: {visible: "auto"}
+};
+const style = {height: 400};
+
+export function MyComponent() {
+    return (
+        <div style={style}>
+            <Repeater
+                attribute={attribute}
+                columns={columns}
+                config={config}
+            />
+        </div>
+    );
+}
+"
+`;
+
+exports[`getEmbeddingCode functionality > should generate code for Repeater - one attribute and one measure 1`] = `
+"import React from "react";
+import { IAttribute, IAttributeOrMeasure, idRef, newAttribute, newMeasure } from "@gooddata/sdk-model";
+import { IChartConfig, Repeater } from "@gooddata/sdk-ui-charts";
+
+const attribute: IAttribute = newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname"));
+const columns: IAttributeOrMeasure[] = [
+    newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname_1")),
+    newMeasure(idRef("of_lost_opps.", "measure"), m => m.localId("m_of_lost_opps."))
+];
+const config: IChartConfig = {
+    separators: {decimal: ".", thousand: ","},
+    legend: {position: "auto"},
+    dataPoints: {visible: "auto"}
+};
+const style = {height: 400};
+
+export function MyComponent() {
+    return (
+        <div style={style}>
+            <Repeater
+                attribute={attribute}
+                columns={columns}
+                config={config}
+            />
+        </div>
+    );
+}
+"
+`;
+
+exports[`getEmbeddingCode functionality > should generate code for Repeater - one attribute and one visualisation 1`] = `
+"import React from "react";
+import { IAttribute, IAttributeOrMeasure, idRef, newAttribute, newMeasure } from "@gooddata/sdk-model";
+import { IChartConfig, Repeater } from "@gooddata/sdk-ui-charts";
+
+const attribute: IAttribute = newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname"));
+const columns: IAttributeOrMeasure[] = [
+    newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname_1")),
+    newInlineMeasure("SELECT {metric/of_lost_opps.} BY ALL OTHER EXCEPT {label/f_city.id.cityname}", m => m.localId("m_7bd77a90_inline").title("# of Lost Opps.")),
+    newMeasure(idRef("of_lost_opps.", "measure"), m => m.localId("m_of_lost_opps."))
+];
+const viewBy: IAttribute = newAttribute(idRef("attr.f_product.product", "displayForm"), a => a.localId("a_attr.f_product.product"));
+const config: IChartConfig = {
+    inlineVisualizations: {"m_of_lost_opps.": {type: "column"}},
+    separators: {decimal: ".", thousand: ","},
+    legend: {position: "auto"},
+    dataPoints: {visible: "auto"}
+};
+const style = {height: 400};
+
+export function MyComponent() {
+    return (
+        <div style={style}>
+            <Repeater
+                attribute={attribute}
+                columns={columns}
+                viewBy={viewBy}
+                config={config}
+            />
+        </div>
+    );
+}
+"
+`;
+
+exports[`getEmbeddingCode functionality > should generate code for Repeater - themed 1`] = `
+"import React from "react";
+import { IAttribute, IAttributeOrMeasure, idRef, newAttribute, newMeasure } from "@gooddata/sdk-model";
+import { IChartConfig, Repeater } from "@gooddata/sdk-ui-charts";
+
+const attribute: IAttribute = newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname"));
+const columns: IAttributeOrMeasure[] = [
+    newAttribute(idRef("f_city.id.cityname", "displayForm"), a => a.localId("a_f_city.id.cityname_1")),
+    newInlineMeasure("SELECT {metric/of_lost_opps.} BY ALL OTHER EXCEPT {label/f_city.id.cityname}", m => m.localId("m_7bd77a90_inline").title("# of Lost Opps.")),
+    newMeasure(idRef("of_lost_opps.", "measure"), m => m.localId("m_of_lost_opps."))
+];
+const viewBy: IAttribute = newAttribute(idRef("attr.f_product.product", "displayForm"), a => a.localId("a_attr.f_product.product"));
+const config: IChartConfig = {
+    inlineVisualizations: {"m_of_lost_opps.": {type: "column"}},
+    separators: {decimal: ".", thousand: ","},
+    legend: {position: "auto"},
+    dataPoints: {visible: "auto"}
+};
+const style = {height: 400};
+
+export function MyComponent() {
+    return (
+        <div style={style}>
+            <Repeater
+                attribute={attribute}
+                columns={columns}
+                viewBy={viewBy}
+                config={config}
+            />
+        </div>
+    );
+}
+"
+`;
+
 exports[`getEmbeddingCode functionality > should generate code for SankeyChart - 180x154 - Force position TOP, max 1 row, Gradient legend minimized - auto legend 1`] = `
 "import React from "react";
 import { IAttribute, IAttributeOrMeasure, idRef, newAttribute, newMeasure } from "@gooddata/sdk-model";

diff --git a/...ries_From_Test_Scenarios_Repeater_base_-_one_attribute_0_document_0_desktop.png b/...ries_From_Test_Scenarios_Repeater_base_-_one_attribute_0_document_0_desktop.png
diff --git a/...cenarios_Repeater_base_-_one_attribute_and_one_measure_0_document_0_desktop.png b/...cenarios_Repeater_base_-_one_attribute_and_one_measure_0_document_0_desktop.png
diff --git a/...os_Repeater_base_-_one_attribute_and_one_visualisation_0_document_0_desktop.png b/...os_Repeater_base_-_one_attribute_and_one_visualisation_0_document_0_desktop.png
diff --git a/...es_From_Test_Scenarios_Repeater_customization_-_canvas_0_document_0_desktop.png b/...es_From_Test_Scenarios_Repeater_customization_-_canvas_0_document_0_desktop.png
diff --git a/...Test_Scenarios_Repeater_customization_color_-_coloring_0_document_0_desktop.png b/...Test_Scenarios_Repeater_customization_color_-_coloring_0_document_0_desktop.png
diff --git a/...rom_Test_Scenarios_Repeater_customization_theme_-_font_0_document_0_desktop.png b/...rom_Test_Scenarios_Repeater_customization_theme_-_font_0_document_0_desktop.png
diff --git a/...m_Test_Scenarios_Repeater_customization_theme_-_themed_0_document_0_desktop.png b/...m_Test_Scenarios_Repeater_customization_theme_-_themed_0_document_0_desktop.png
diff --git a/...tories_For_Pluggable_Vis_Repeater_base_-_one_attribute_0_document_0_desktop.png b/...tories_For_Pluggable_Vis_Repeater_base_-_one_attribute_0_document_0_desktop.png
diff --git a/...able_Vis_Repeater_base_-_one_attribute_and_one_measure_0_document_0_desktop.png b/...able_Vis_Repeater_base_-_one_attribute_and_one_measure_0_document_0_desktop.png
diff --git a/...is_Repeater_base_-_one_attribute_and_one_visualisation_0_document_0_desktop.png b/...is_Repeater_base_-_one_attribute_and_one_visualisation_0_document_0_desktop.png
diff --git a/...Vis_Repeater_customization_-_canvas_-_large_row_height_0_document_0_desktop.png b/...Vis_Repeater_customization_-_canvas_-_large_row_height_0_document_0_desktop.png
diff --git a/...peater_customization_color_-_coloring_-_custom_palette_0_document_0_desktop.png b/...peater_customization_color_-_coloring_-_custom_palette_0_document_0_desktop.png
diff --git a/..._For_Pluggable_Vis_Repeater_customization_theme_-_font_0_document_0_desktop.png b/..._For_Pluggable_Vis_Repeater_customization_theme_-_font_0_document_0_desktop.png
diff --git a/...or_Pluggable_Vis_Repeater_customization_theme_-_themed_0_document_0_desktop.png b/...or_Pluggable_Vis_Repeater_customization_theme_-_themed_0_document_0_desktop.png
diff --git a/libs/sdk-ui-tests/backstop/scenarios.config.js b/libs/sdk-ui-tests/backstop/scenarios.config.js
@@ -1,4 +1,4 @@
-// (C) 2007-2019 GoodData Corporation
+// (C) 2007-2024 GoodData Corporation
 
 const stories = require("./stories");
 
@@ -24,10 +24,19 @@ const stories = require("./stories");
  */
 
 const ScenarioConfig = [
+    {
+        /*
+         * Tests for repeater stories - either created automatically for test scenarios or created manually.
+         */
+        idRegex: /(01).*Repeater.*/g,
+        config: {
+            delay: 2500,
+        },
+    },
     {
         // this is for customization stories that generate multiple variants with different config; we have
         // a special ready wrapper for these
-        idRegex: /.*(data labels|coloring|legend)/g,
+        idRegex: /.*(data labels|coloring|legend|canvas)/g,
         config: {
             readySelector: ".screenshot-ready-wrapper-done",
         },

diff --git a/libs/sdk-ui-tests/scenarios/charts/_infra/canvasVariants.ts b/libs/sdk-ui-tests/scenarios/charts/_infra/canvasVariants.ts
@@ -0,0 +1,18 @@
+// (C) 2024 GoodData Corporation
+
+import { IChartConfig, IBucketChartProps } from "@gooddata/sdk-ui-charts";
+import { CustomizedScenario, UnboundVisProps } from "../../../src/index.js";
+
+export const ConfigVariants: Array<[string, IChartConfig]> = [["large row height", { rowHeight: "large" }]];
+
+export function canvasCustomizer<T extends IBucketChartProps>(
+    baseName: string,
+    baseProps: UnboundVisProps<T>,
+): Array<CustomizedScenario<T>> {
+    return ConfigVariants.map(([variantName, canvasOverlay]) => {
+        return [
+            `${baseName} - ${variantName}`,
+            { ...baseProps, config: { ...baseProps.config, ...canvasOverlay } },
+        ];
+    });
+}
diff --git a/libs/sdk-ui-tests/scenarios/charts/index.tsx b/libs/sdk-ui-tests/scenarios/charts/index.tsx
@@ -1,4 +1,4 @@
-// (C) 2007-2019 GoodData Corporation
+// (C) 2007-2024 GoodData Corporation
 
 import areaChart from "./areaChart/index.js";
 import barChart from "./barChart/index.js";
@@ -19,6 +19,7 @@ import sankeyChart from "./sankeyChart/index.js";
 import xirr from "./xirr/index.js";
 import dependencyWheelChart from "./dependencyWheelChart/index.js";
 import waterfallChart from "./waterfallChart/index.js";
+import repeater from "./repeater/index.js";
 
 export default [
     ...areaChart,
@@ -40,4 +41,5 @@ export default [
     ...dependencyWheelChart,
     ...xirr,
     ...waterfallChart,
+    ...repeater,
 ];