From e206ef3684e9523059614f679aa5b26b5743e2b5 Mon Sep 17 00:00:00 2001 From: Srirang Kalantri Date: Wed, 16 Sep 2026 18:38:01 +0530 Subject: [PATCH] chore: add style contracts tests --- .../src/__tests__/backgroundGradient.spec.tsx | 6 ++++++ .../src/utils/__tests__/StyleUtils.spec.ts | 9 ++++++++- .../src/__tests__/BarcodeScanner.spec.tsx | 6 ++++++ .../src/__tests__/Carousel.spec.tsx | 7 ++++++- .../src/__tests__/ColorPicker.spec.tsx | 6 ++++++ .../src/utils/__tests__/StyleUtils.spec.ts | 9 ++++++++- .../src/__tests__/Feedback.spec.tsx | 17 ++++++++++++++++- .../src/utils/__tests__/StyleUtils.spec.ts | 9 ++++++++- .../src/__tests__/PieDoughnutChart.spec.tsx | 5 +++++ .../src/__tests__/ProgressBar.spec.tsx | 6 ++++++ .../src/__tests__/ProgressCircle.spec.tsx | 6 ++++++ .../src/__tests__/ToggleButtons.spec.tsx | 14 ++++++++++++++ 12 files changed, 95 insertions(+), 5 deletions(-) diff --git a/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx b/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx index 1821a1fb7..7d55e2ac9 100644 --- a/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx +++ b/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx @@ -3,6 +3,7 @@ import { render, fireEvent } from "@testing-library/react-native"; import Big from "big.js"; import { ActionValue } from "mendix"; import { BackgroundGradient, props } from "../BackgroundGradient"; +import defaultStyle from "../ui/Styles"; describe("Background gradient", () => { let defaultProps: props; @@ -132,4 +133,9 @@ describe("Background gradient", () => { fireEvent.press(pressable); expect(actionExecution).toHaveBeenCalled(); }); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultStyle).sort(); + expect(keys).toEqual(["angle", "colorList", "container", "opacity"]); + }); }); diff --git a/packages/pluggableWidgets/bar-chart-native/src/utils/__tests__/StyleUtils.spec.ts b/packages/pluggableWidgets/bar-chart-native/src/utils/__tests__/StyleUtils.spec.ts index 53fbaa648..bb426e936 100644 --- a/packages/pluggableWidgets/bar-chart-native/src/utils/__tests__/StyleUtils.spec.ts +++ b/packages/pluggableWidgets/bar-chart-native/src/utils/__tests__/StyleUtils.spec.ts @@ -1,5 +1,5 @@ import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToBarStyles } from "../StyleUtils"; -import { BarChartAxisStyle, BarChartGridStyle, BarChartStyle } from "../../ui/Styles"; +import { BarChartAxisStyle, BarChartGridStyle, BarChartStyle, defaultBarChartStyle } from "../../ui/Styles"; describe("StyleMappers", () => { describe("mapToGridStyle", () => { @@ -210,3 +210,10 @@ describe("aggregateGridPadding", () => { expect(aggregateGridPadding(undefined)).toBeUndefined(); }); }); + +describe("Style schema guardrail", () => { + it("preserves expected style key set", () => { + const keys = Object.keys(defaultBarChartStyle).sort(); + expect(keys).toEqual(["chart", "container", "errorMessage", "grid", "legend", "xAxis"]); + }); +}); diff --git a/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx b/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx index 4774fd46e..1eb1920f1 100644 --- a/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx +++ b/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx @@ -3,6 +3,7 @@ import { actionValue, EditableValueBuilder } from "@mendix/piw-utils-internal"; import { render } from "@testing-library/react-native"; import { View } from "react-native"; import { BarcodeScanner, Props } from "../BarcodeScanner"; +import { defaultBarcodeScannerStyle } from "../ui/styles"; let mockOnCodeScanned: ((codes: Array<{ value: string }>) => void) | undefined; @@ -68,4 +69,9 @@ describe("BarcodeScanner", () => { expect(defaultProps.barcode.setValue).toHaveBeenCalledWith("value1"); expect(onDetectAction.execute).toHaveBeenCalledTimes(2); }); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultBarcodeScannerStyle).sort(); + expect(keys).toEqual(["container", "mask"]); + }); }); diff --git a/packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx b/packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx index bbab1c98c..3702096d1 100644 --- a/packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx +++ b/packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx @@ -1,5 +1,5 @@ import { CarouselProps } from "../../typings/CarouselProps"; -import { CarouselStyle } from "../ui/styles"; +import { CarouselStyle, defaultCarouselStyle } from "../ui/styles"; import { render } from "@testing-library/react-native"; import { Text, View } from "react-native"; import { buildWidgetValue, ListValueBuilder } from "@mendix/piw-utils-internal"; @@ -47,4 +47,9 @@ describe("Carousel", () => { // }; // expect(render().toJSON()).toMatchSnapshot(); // }); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultCarouselStyle).sort(); + expect(keys).toEqual(["cardLayout", "container", "fullWidthLayout"]); + }); }); diff --git a/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx index f46abbe62..a3b9197d2 100644 --- a/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx +++ b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx @@ -4,6 +4,7 @@ import Slider from "react-native-slider"; import { fireEvent, render, RenderAPI } from "@testing-library/react-native"; import { ReactTestInstance } from "react-test-renderer"; import { ColorPicker, Props } from "../ColorPicker"; +import { defaultColorPickerStyle } from "../ui/Styles"; describe("Color Picker", () => { let defaultProps: Props; @@ -177,6 +178,11 @@ describe("Color Picker", () => { function getSliders(component: RenderAPI): ReactTestInstance[] { return component.UNSAFE_getAllByType(Slider); } + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultColorPickerStyle).sort(); + expect(keys).toEqual(["container", "preview"]); + }); }); function responderMove(dx: number): any { diff --git a/packages/pluggableWidgets/column-chart-native/src/utils/__tests__/StyleUtils.spec.ts b/packages/pluggableWidgets/column-chart-native/src/utils/__tests__/StyleUtils.spec.ts index ad17ffc1a..d9097e18f 100644 --- a/packages/pluggableWidgets/column-chart-native/src/utils/__tests__/StyleUtils.spec.ts +++ b/packages/pluggableWidgets/column-chart-native/src/utils/__tests__/StyleUtils.spec.ts @@ -1,5 +1,5 @@ import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToColumnStyles } from "../StyleUtils"; -import { ColumnChartAxisStyle, ColumnChartGridStyle, ColumnChartStyle } from "../../ui/Styles"; +import { ColumnChartAxisStyle, ColumnChartGridStyle, ColumnChartStyle, defaultColumnChartStyle } from "../../ui/Styles"; describe("StyleMappers", () => { describe("mapToGridStyle", () => { @@ -210,3 +210,10 @@ describe("aggregateGridPadding", () => { expect(aggregateGridPadding(undefined)).toBeUndefined(); }); }); + +describe("Style schema guardrail", () => { + it("preserves expected style key set", () => { + const keys = Object.keys(defaultColumnChartStyle).sort(); + expect(keys).toEqual(["chart", "container", "errorMessage", "legend", "xAxis"]); + }); +}); diff --git a/packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx b/packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx index d562fa058..776b766a6 100644 --- a/packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx +++ b/packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx @@ -1,4 +1,4 @@ -import { FeedbackStyle } from "../ui/styles"; +import { FeedbackStyle, defaultFeedbackStyle } from "../ui/styles"; import { render, cleanup, fireEvent, waitFor } from "@testing-library/react-native"; import { FeedbackProps } from "../../typings/FeedbackProps"; import { Feedback } from "../Feedback"; @@ -101,4 +101,19 @@ describe("Feedback", () => { expect(typeof parsedBody.metadata.screenWidth).toBe("number"); expect(typeof parsedBody.metadata.screenHeight).toBe("number"); }, 15000); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultFeedbackStyle).sort(); + expect(keys).toEqual([ + "activityIndicator", + "button", + "buttonDisabled", + "dialog", + "floatingButton", + "switchInput", + "switchLabel", + "textAreaInput", + "title" + ]); + }); }); diff --git a/packages/pluggableWidgets/line-chart-native/src/utils/__tests__/StyleUtils.spec.ts b/packages/pluggableWidgets/line-chart-native/src/utils/__tests__/StyleUtils.spec.ts index 5c3ca0810..7103ee39a 100644 --- a/packages/pluggableWidgets/line-chart-native/src/utils/__tests__/StyleUtils.spec.ts +++ b/packages/pluggableWidgets/line-chart-native/src/utils/__tests__/StyleUtils.spec.ts @@ -1,5 +1,5 @@ import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToLineStyle, mapToMarkerStyle } from "../StyleUtils"; -import { LineChartAxisStyle, LineChartGridStyle, LineChartLineStyle } from "../../ui/Styles"; +import { LineChartAxisStyle, LineChartGridStyle, LineChartLineStyle, defaultLineChartStyle } from "../../ui/Styles"; describe("StyleMappers", () => { describe("mapToGridStyle", () => { @@ -183,3 +183,10 @@ describe("aggregateGridPadding", () => { expect(aggregateGridPadding(undefined)).toBeUndefined(); }); }); + +describe("Style schema guardrail", () => { + it("preserves expected style key set", () => { + const keys = Object.keys(defaultLineChartStyle).sort(); + expect(keys).toEqual(["chart", "container", "errorMessage", "grid", "legend", "xAxis"]); + }); +}); diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx b/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx index 21ec108d8..9999ce118 100644 --- a/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx +++ b/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx @@ -334,6 +334,11 @@ describe("PieDoughnutChart", () => { }); }); }); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultStyle).sort(); + expect(keys).toEqual(["container", "slices"]); + }); }); function createProps(opts: Partial> = {}): PieDoughnutChartProps { diff --git a/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx b/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx index db964902e..2b8dba97d 100644 --- a/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx +++ b/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx @@ -5,6 +5,7 @@ import { Bar } from "react-native-progress"; import { render } from "@testing-library/react-native"; import { ProgressBar, Props } from "../ProgressBar"; +import { defaultProgressBarStyle } from "../ui/Styles"; describe("ProgressBar", () => { it("renders", () => { @@ -45,6 +46,11 @@ describe("ProgressBar", () => { expect(component.UNSAFE_getByType(Bar).props.progress).toBe(0.7); expect(component.UNSAFE_queryByType(Text)).toBeNull(); }); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultProgressBarStyle).sort(); + expect(keys).toEqual(["bar", "container", "fill", "validationMessage"]); + }); }); function createProps(progressValue?: number, minimumValue?: number, maximumValue?: number): Props { diff --git a/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx b/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx index b67837724..ea2cf41e9 100644 --- a/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx +++ b/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx @@ -5,6 +5,7 @@ import { Circle } from "react-native-progress"; import { render } from "@testing-library/react-native"; import { ProgressCircle, Props } from "../ProgressCircle"; +import { defaultProgressCircleStyle } from "../ui/Styles"; describe("ProgressCircle", () => { it("renders", () => { @@ -80,6 +81,11 @@ No current value provided.` const component = render(); expect(component.UNSAFE_queryByType(Text)).toBeNull(); }); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultProgressCircleStyle).sort(); + expect(keys).toEqual(["circle", "container", "fill", "text", "validationMessage"]); + }); }); function createProps(progressValue?: number, minimumValue?: number, maximumValue?: number): Props { diff --git a/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx b/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx index 0ada19173..b339619be 100644 --- a/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx +++ b/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx @@ -3,6 +3,7 @@ import { Text } from "react-native"; import { fireEvent, render } from "@testing-library/react-native"; import { Props, ToggleButtons } from "../ToggleButtons"; +import { defaultToggleButtonsStyle } from "../ui/Styles"; describe("ToggleButtons", () => { let defaultProps: Props; @@ -68,4 +69,17 @@ describe("ToggleButtons", () => { expect(defaultProps.enum.setValue).not.toHaveBeenCalled(); }); + + it("preserves expected style key set", () => { + const keys = Object.keys(defaultToggleButtonsStyle).sort(); + expect(keys).toEqual([ + "activeButton", + "activeButtonText", + "button", + "container", + "containerDisabled", + "text", + "validationMessage" + ]); + }); });