Add unit testing

zendeskgarden · Feb 3, 2021 · 5ff8238 · 5ff8238
1 parent 2ee8f8e
commit 5ff8238
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/packages/buttons/.size-snapshot.json b/packages/buttons/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 26657,
-    "minified": 19124,
-    "gzipped": 4667
+    "bundled": 26948,
+    "minified": 19312,
+    "gzipped": 4706
   },
   "index.esm.js": {
-    "bundled": 24697,
-    "minified": 17421,
-    "gzipped": 4514,
+    "bundled": 24988,
+    "minified": 17609,
+    "gzipped": 4554,
     "treeshaked": {
       "rollup": {
-        "code": 13702,
+        "code": 13815,
         "import_statements": 358
       },
       "webpack": {
-        "code": 15598
+        "code": 15711
       }
     }
   }

diff --git a/packages/buttons/src/styled/StyledButtonGroup.spec.tsx b/packages/buttons/src/styled/StyledButtonGroup.spec.tsx
@@ -9,6 +9,8 @@ import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
 import { StyledButtonGroup } from './StyledButtonGroup';
 import { StyledButton } from './StyledButton';
+import { StyledIconButton } from './StyledIconButton';
+import { PALETTE } from '@zendeskgarden/react-theming';
 
 describe('StyledButtonGroup', () => {
   it('renders the expected element', () => {
@@ -36,11 +38,20 @@ describe('StyledButtonGroup', () => {
       </StyledButtonGroup>
     );
 
-    /* stylelint-disable */
     expect(getByTestId('group-button')).toHaveStyleRule('position', 'relative', {
-      modifier: (`
-        ${StyledButtonGroup} &
-      ` as unknown) as string
+      modifier: `${StyledButtonGroup} &`
+    });
+  });
+
+  it('renders expected disabled icon button styling', () => {
+    const { getByTestId } = render(
+      <StyledButtonGroup>
+        <StyledIconButton data-test-id="group-button">test</StyledIconButton>
+      </StyledButtonGroup>
+    );
+
+    expect(getByTestId('group-button')).toHaveStyleRule('background-color', PALETTE.grey[200], {
+      modifier: `${StyledButtonGroup} &:disabled`
     });
   });
 });
diff --git a/packages/buttons/src/styled/StyledIconButton.spec.tsx b/packages/buttons/src/styled/StyledIconButton.spec.tsx
@@ -31,6 +31,24 @@ describe('StyledIconButton', () => {
     expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[600]);
   });
 
+  describe('disabled', () => {
+    it('renders expected styling', () => {
+      const { container } = render(<StyledIconButton disabled />);
+
+      expect(container.firstChild).toHaveStyleRule('background-color', 'transparent', {
+        modifier: ':disabled'
+      });
+    });
+
+    it('renders expected primary styling', () => {
+      const { container } = render(<StyledIconButton disabled isPrimary />);
+
+      expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[200], {
+        modifier: ':disabled'
+      });
+    });
+  });
+
   describe('Sizes', () => {
     it('renders small styling if provided', () => {
       const { container } = render(<StyledIconButton size="small" />);