chore: adds styled base container light/dark tests

zendeskgarden · Jun 19, 2024 · 4b8b9f6 · 4b8b9f6
1 parent 8991351
commit 4b8b9f6
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/packages/notifications/src/styled/StyledBase.spec.tsx b/packages/notifications/src/styled/StyledBase.spec.tsx
@@ -6,18 +6,21 @@
  */
 
 import React from 'react';
-import { render } from 'garden-test-utils';
+import { render, getRenderFn } from 'garden-test-utils';
 import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledBase } from './StyledBase';
+import { Type } from "../types"
 
 describe('StyledBase', () => {
-  it('should renders the correct background, border, and foreground color for a given type', () => {
-    const { container } = render(<StyledBase $type="success" />);
+  it.each<{ mode: 'light' | 'dark', type: Type, background: string, color: string, border: string }>([
+    { mode: 'light', type: 'success', background: PALETTE.green[100], color: PALETTE.green[700], border: PALETTE.green[300] },
+  ])('renders $mode mode $type colors', ({ mode, type, background, color, border }) => {
+    const { container } = getRenderFn(mode)(<StyledBase $type={type} />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE.green[700]);
-    expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.green[300]);
-    expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.green[100]);
-  });
+    expect(container.firstChild).toHaveStyleRule('color', color);
+    expect(container.firstChild).toHaveStyleRule('border-color', border);
+    expect(container.firstChild).toHaveStyleRule('background-color', background);
+  })
 
   it('renders neutral colors given no type', () => {
     const { container } = render(<StyledBase />);