chore: fix customization tests (#3612)

* chore: fix test * chore: fix bad story
twilio-labs · Nov 15, 2023 · 949df9e · 949df9e
1 parent cd6c11c
commit 949df9e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/.changeset/curvy-eels-tie.md b/.changeset/curvy-eels-tie.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/customization": patch
+"@twilio-paste/core": patch
+---
+
+[Customization] Minor change to customization tests to reflect updated prop change from 'variant' to 'variants' on CustomizationProvider.
diff --git a/packages/paste-customization/__tests__/CustomizationProvider.test.tsx b/packages/paste-customization/__tests__/CustomizationProvider.test.tsx
@@ -105,13 +105,13 @@ describe("CustomizationProvider", () => {
     render(
       <CustomizationProvider
         baseTheme="default"
-        elements={{ CARD: { backgroundColor: "colorBackground", variant: { padded: { padding: "space20" } } } }}
+        elements={{ CARD: { backgroundColor: "colorBackground", variants: { padded: { padding: "space20" } } } }}
       >
         <ThemeConsumerElementsExample />
       </CustomizationProvider>,
     );
     expect(screen.getByTestId("elements-test").textContent).toEqual(
-      'Elements: {"CARD":{"backgroundColor":"colorBackground","variant":{"padded":{"padding":"space20"}}}}',
+      'Elements: {"CARD":{"backgroundColor":"colorBackground","variants":{"padded":{"padding":"space20"}}}}',
     );
   });
 });
diff --git a/packages/paste-customization/stories/customization.stories.tsx b/packages/paste-customization/stories/customization.stories.tsx
@@ -60,11 +60,11 @@ export const Provider: StoryFn = (_args, { parameters: { isTestEnvironment } })
           fonts: { fontFamilyText: "cursive" },
         }}
         elements={{
-          CARD: {
+          BUTTON: {
             backgroundColor: "colorBackground",
-            variant: {
-              primary: {
-                backgroundColor: "colorBackgroundBody",
+            variants: {
+              destructive: {
+                backgroundColor: "colorBackgroundAvailable",
               },
             },
           },