test: update tests to use snapshots

Author: mxschll

src/tabs/__tests__/__snapshots__/styles.test.tsx.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`getTabContainerStyles transforms container styles to CSS properties 1`] = `
+{
+  "--awsui-style-tabs-divider-color-cdnyga": "#cbd5e1",
+  "--awsui-style-tabs-divider-width-cdnyga": "2px",
+  "--awsui-style-tabs-underline-border-radius-cdnyga": "2px",
+  "--awsui-style-tabs-underline-color-cdnyga": "#1d4ed8",
+  "--awsui-style-tabs-underline-width-cdnyga": "3px",
+}
+`;
+
+exports[`getTabHeaderStyles transforms header styles to CSS properties 1`] = `
+{
+  "--awsui-style-tabs-header-divider-color-cdnyga": "#94a3b8",
+  "--awsui-style-tabs-header-divider-width-cdnyga": "3px",
+}
+`;
+
 exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 {
   "--awsui-style-background-active-cdnyga": "#bfdbfe",

src/tabs/__tests__/styles.test.tsx

@@ -1,54 +1,67 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import customCssProps from '../../internal/generated/custom-css-properties';
+
 import { getTabContainerStyles, getTabHeaderStyles, getTabStyles } from '../styles';
 
 // Mock the environment module
 jest.mock('../../internal/environment', () => ({
   SYSTEM: 'core',
 }));
 
+const testStyles = {
+  tabs: {
+    borderRadius: '4px',
+    borderWidth: '2px',
+    fontSize: '16px',
+    fontWeight: '500',
+    paddingBlock: '10px',
+    paddingInline: '14px',
+    backgroundColor: {
+      default: '#dbeafe',
+      active: '#bfdbfe',
+      disabled: '#f3f4f6',
+      hover: '#eff6ff',
+    },
+    borderColor: {
+      default: '#3b82f6',
+      active: '#1d4ed8',
+      disabled: '#93c5fd',
+      hover: '#2563eb',
+    },
+    color: {
+      default: '#1e40af',
+      active: '#1e3a8a',
+      disabled: '#93c5fd',
+      hover: '#1e40af',
+    },
+    focusRing: {
+      borderColor: '#3b82f6',
+      borderRadius: '4px',
+      borderWidth: '2px',
+    },
+  },
+  underline: {
+    color: '#1d4ed8',
+    width: '3px',
+    borderRadius: '2px',
+  },
+  divider: {
+    color: '#cbd5e1',
+    width: '2px',
+  },
+  headerDivider: {
+    color: '#94a3b8',
+    width: '3px',
+  },
+};
+
 describe('getTabStyles', () => {
   afterEach(() => {
     jest.resetModules();
   });
 
   test('transforms tab styles to CSS properties', () => {
-    const tabStyles = {
-      tabs: {
-        borderRadius: '4px',
-        borderWidth: '2px',
-        fontSize: '16px',
-        fontWeight: '500',
-        paddingBlock: '10px',
-        paddingInline: '14px',
-        backgroundColor: {
-          default: '#dbeafe',
-          active: '#bfdbfe',
-          disabled: '#f3f4f6',
-          hover: '#eff6ff',
-        },
-        borderColor: {
-          default: '#3b82f6',
-          active: '#1d4ed8',
-          disabled: '#93c5fd',
-          hover: '#2563eb',
-        },
-        color: {
-          default: '#1e40af',
-          active: '#1e3a8a',
-          disabled: '#93c5fd',
-          hover: '#1e40af',
-        },
-        focusRing: {
-          borderColor: '#3b82f6',
-          borderRadius: '4px',
-          borderWidth: '2px',
-        },
-      },
-    };
-
-    expect(getTabStyles(tabStyles)).toMatchSnapshot();
+    expect(getTabStyles(testStyles)).toMatchSnapshot();
   });
 
   test('returns undefined when SYSTEM is not core', async () => {
@@ -59,13 +72,7 @@ describe('getTabStyles', () => {
 
     const { getTabStyles: getTabStylesNonCore } = await import('../styles');
 
-    const style = {
-      tabs: {
-        borderRadius: '4px',
-      },
-    };
-
-    const result = getTabStylesNonCore(style);
+    const result = getTabStylesNonCore(testStyles);
 
     expect(result).toBeUndefined();
   });
@@ -77,25 +84,20 @@ describe('getTabContainerStyles', () => {
   });
 
   test('transforms container styles to CSS properties', () => {
-    const containerStyles = {
-      underline: {
-        color: '#1d4ed8',
-        width: '3px',
-        borderRadius: '2px',
-      },
-      divider: {
-        color: '#cbd5e1',
-        width: '2px',
-      },
-    };
-
-    expect(getTabContainerStyles(containerStyles)).toEqual({
-      [customCssProps.styleTabsUnderlineColor]: '#1d4ed8',
-      [customCssProps.styleTabsUnderlineWidth]: '3px',
-      [customCssProps.styleTabsUnderlineBorderRadius]: '2px',
-      [customCssProps.styleTabsDividerColor]: '#cbd5e1',
-      [customCssProps.styleTabsDividerWidth]: '2px',
-    });
+    expect(getTabContainerStyles(testStyles)).toMatchSnapshot();
+  });
+
+  test('returns undefined when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getTabContainerStyles: getTabContainerStylesNonCore } = await import('../styles');
+
+    const result = getTabContainerStylesNonCore(testStyles);
+
+    expect(result).toBeUndefined();
   });
 });
 
@@ -105,17 +107,7 @@ describe('getTabHeaderStyles', () => {
   });
 
   test('transforms header styles to CSS properties', () => {
-    const headerStyles = {
-      headerDivider: {
-        color: '#94a3b8',
-        width: '3px',
-      },
-    };
-
-    expect(getTabHeaderStyles(headerStyles)).toEqual({
-      [customCssProps.styleTabsHeaderDividerColor]: '#94a3b8',
-      [customCssProps.styleTabsHeaderDividerWidth]: '3px',
-    });
+    expect(getTabHeaderStyles(testStyles)).toMatchSnapshot();
   });
 
   test('returns undefined when SYSTEM is not core', async () => {
@@ -126,13 +118,7 @@ describe('getTabHeaderStyles', () => {
 
     const { getTabHeaderStyles: getTabHeaderStylesNonCore } = await import('../styles');
 
-    const style = {
-      headerDivider: {
-        color: '#94a3b8',
-      },
-    };
-
-    const result = getTabHeaderStylesNonCore(style);
+    const result = getTabHeaderStylesNonCore(testStyles);
 
     expect(result).toBeUndefined();
   });