From 791def08361fb3e91133018afd1ae0dca82067d1 Mon Sep 17 00:00:00 2001
From: Josue Ruiz <7465495+SwaySway@users.noreply.github.com>
Date: Wed, 28 Sep 2022 09:40:59 -0700
Subject: [PATCH] fix: remove invalid breakpoints (#661) (#681)

ref pr661 merged back into feature branch
---
 .../__tests__/utils/breakpoint-utils.test.ts  | 85 +++++++++++++++++++
 .../codegen-ui/lib/utils/breakpoint-utils.ts  |  5 +-
 2 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 packages/codegen-ui/lib/__tests__/utils/breakpoint-utils.test.ts

diff --git a/packages/codegen-ui/lib/__tests__/utils/breakpoint-utils.test.ts b/packages/codegen-ui/lib/__tests__/utils/breakpoint-utils.test.ts
new file mode 100644
index 000000000..fef2511d2
--- /dev/null
+++ b/packages/codegen-ui/lib/__tests__/utils/breakpoint-utils.test.ts
@@ -0,0 +1,85 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+
+import { StudioComponent } from '../../types';
+import { getBreakpoints } from '../../utils';
+
+type ComponentWithVariant = StudioComponent & Required<Pick<StudioComponent, 'variants'>>;
+
+describe('breakpoint utils', () => {
+  it('should sort breakpoints correctly', () => {
+    const component: ComponentWithVariant = {
+      name: 'sample',
+      componentType: '',
+      properties: {},
+      bindingProperties: {},
+      variants: [
+        {
+          variantValues: {
+            breakpoint: 'xxl',
+          },
+          overrides: {},
+        },
+        {
+          variantValues: {
+            breakpoint: 'small',
+          },
+          overrides: {},
+        },
+        {
+          variantValues: {
+            breakpoint: 'base',
+          },
+          overrides: {},
+        },
+      ],
+    };
+
+    const breakpoints = getBreakpoints(component);
+    expect(breakpoints).toStrictEqual(['base', 'small', 'xxl']);
+  });
+  it('should remove invalid breakpoint sizes', () => {
+    const component: ComponentWithVariant = {
+      name: 'sample',
+      componentType: '',
+      properties: {},
+      bindingProperties: {},
+      variants: [
+        {
+          variantValues: {
+            breakpoint: 'xxs',
+          },
+          overrides: {},
+        },
+        {
+          variantValues: {
+            breakpoint: 'base',
+          },
+          overrides: {},
+        },
+        {
+          variantValues: {
+            breakpoint: 'small',
+          },
+          overrides: {},
+        },
+      ],
+    };
+
+    const breakpoints = getBreakpoints(component);
+    expect(breakpoints).toStrictEqual(['base', 'small']);
+  });
+});
diff --git a/packages/codegen-ui/lib/utils/breakpoint-utils.ts b/packages/codegen-ui/lib/utils/breakpoint-utils.ts
index 643fe6bae..e1d0135f4 100644
--- a/packages/codegen-ui/lib/utils/breakpoint-utils.ts
+++ b/packages/codegen-ui/lib/utils/breakpoint-utils.ts
@@ -40,8 +40,9 @@ export const sortBreakpoints = (bs: BreakpointSizeType[]): BreakpointSizeType[]
 
 export const getBreakpoints = (component: StudioComponent & Required<Pick<StudioComponent, 'variants'>>) => {
   const breakpoints = component.variants.reduce<BreakpointSizeType[]>((acc, variant) => {
-    if (variant.variantValues?.breakpoint) {
-      acc.push(variant.variantValues.breakpoint as BreakpointSizeType);
+    const breakpoint = variant.variantValues?.breakpoint as BreakpointSizeType | undefined;
+    if (breakpoint && breakpointSizes.includes(breakpoint)) {
+      acc.push(breakpoint);
     }
     return acc;
   }, []);