chore: adds color tests for views

Author: geotrev

packages/notifications/src/styled/StyledBase.spec.tsx

@@ -21,7 +21,7 @@ describe('StyledBase', () => {
     { mode: 'dark', type: 'warning', color: PALETTE.yellow[1000] },
     { mode: 'light', type: 'info', color: PALETTE.grey[100] },
     { mode: 'dark', type: 'info', color: PALETTE.grey[1000] }
-  ])('renders $mode mode $type background colors', ({ mode, type, color }) => {
+  ])('renders $mode mode $type background color', ({ mode, type, color }) => {
     const { container } = getRenderFn(mode)(<StyledBase $type={type} />);
 
     expect(container.firstChild).toHaveStyleRule('background-color', color);
@@ -36,7 +36,7 @@ describe('StyledBase', () => {
     { mode: 'dark', type: 'warning', color: PALETTE.yellow[800] },
     { mode: 'light', type: 'info', color: PALETTE.grey[300] },
     { mode: 'dark', type: 'info', color: PALETTE.grey[800] }
-  ])('renders $mode mode $type border colors', ({ mode, type, color }) => {
+  ])('renders $mode mode $type border color', ({ mode, type, color }) => {
     const { container } = getRenderFn(mode)(<StyledBase $type={type} />);
 
     expect(container.firstChild).toHaveStyleRule('border-color', color);
@@ -51,7 +51,7 @@ describe('StyledBase', () => {
     { mode: 'dark', type: 'warning', color: PALETTE.yellow[400] },
     { mode: 'light', type: 'info', color: PALETTE.grey[700] },
     { mode: 'dark', type: 'info', color: PALETTE.grey[500] }
-  ])('renders $mode mode $type foreground colors', ({ mode, type, color }) => {
+  ])('renders $mode mode $type foreground color', ({ mode, type, color }) => {
     const { container } = getRenderFn(mode)(<StyledBase $type={type} />);
 
     expect(container.firstChild).toHaveStyleRule('color', color);

packages/notifications/src/styled/StyledIcon.spec.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { getRenderFn } from 'garden-test-utils';
+import { PALETTE } from '@zendeskgarden/react-theming';
+import XStrokeIcon from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
+import { StyledIcon } from './StyledIcon';
+import { Type } from '../types';
+
+describe('StyledIcon', () => {
+  it.each<{ mode: 'light' | 'dark'; type: Type; color: string }>([
+    { mode: 'light', type: 'success', color: PALETTE.green[700] },
+    { mode: 'dark', type: 'success', color: PALETTE.green[400] },
+    { mode: 'light', type: 'error', color: PALETTE.red[700] },
+    { mode: 'dark', type: 'error', color: PALETTE.red[400] },
+    { mode: 'light', type: 'warning', color: PALETTE.yellow[700] },
+    { mode: 'dark', type: 'warning', color: PALETTE.yellow[400] },
+    { mode: 'light', type: 'info', color: PALETTE.grey[700] },
+    { mode: 'dark', type: 'info', color: PALETTE.grey[500] }
+  ])('renders $mode mode $type color', ({ mode, type, color }) => {
+    const { container } = getRenderFn(mode)(
+      <StyledIcon $type={type}>
+        <XStrokeIcon />
+      </StyledIcon>
+    );
+
+    expect(container.firstChild).toHaveStyleRule('color', color);
+  });
+});

packages/notifications/src/styled/StyledNotification.spec.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { getRenderFn } from 'garden-test-utils';
+import { PALETTE } from '@zendeskgarden/react-theming';
+import { StyledNotification } from './StyledNotification';
+import { Type } from '../types';
+import { StyledTitle } from './content/StyledTitle';
+import { css } from 'styled-components';
+
+describe('StyledNotification', () => {
+  it.each<{ mode: 'light' | 'dark'; type: Type; color: string }>([
+    { mode: 'light', type: 'success', color: PALETTE.green[700] },
+    { mode: 'dark', type: 'success', color: PALETTE.green[400] },
+    { mode: 'light', type: 'error', color: PALETTE.red[700] },
+    { mode: 'dark', type: 'error', color: PALETTE.red[400] },
+    { mode: 'light', type: 'warning', color: PALETTE.yellow[700] },
+    { mode: 'dark', type: 'warning', color: PALETTE.yellow[400] },
+    { mode: 'light', type: 'info', color: PALETTE.grey[900] },
+    { mode: 'dark', type: 'info', color: PALETTE.grey[300] }
+  ])('renders $mode mode $type color', ({ mode, type, color }) => {
+    const { container } = getRenderFn(mode)(
+      <StyledNotification $type={type}>
+        <StyledTitle>title</StyledTitle>
+      </StyledNotification>
+    );
+
+    expect(container.firstChild).toHaveStyleRule('color', color, {
+      modifier: css`
+        ${StyledTitle}
+      ` as any
+    });
+  });
+});