test 'isActive' prop with data attribute

Author: arturbien

src/components/WindowHeader/WindowHeader.js

@@ -1,33 +1,30 @@
 import React from 'react';
 import propTypes from 'prop-types';
 
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 const SlyledWindowHeader = styled.div`
   height: 30px;
   line-height: 30px;
   padding-left: 0.25rem;
   font-weight: bold;
 
-  color: ${({ theme, isActive }) =>
-    isActive ? theme.textInvert : theme.material};
-
-  ${({ theme, isActive }) =>
-    isActive
-      ? css`
-          background: linear-gradient(
-            to right,
-            ${theme.headerMaterialDark},
-            ${theme.headerMaterialLight}
-          );
-        `
-      : css`
-          background: ${theme.headerNotActive};
-        `}
+  &[data-active='false'] {
+    background: ${({ theme }) => theme.headerNotActive};
+    color: ${({ theme }) => theme.material};
+  }
+  &[data-active='true'] {
+    background: linear-gradient(
+      to right,
+      ${({ theme }) => theme.headerMaterialDark},
+      ${({ theme }) => theme.headerMaterialLight}
+    );
+    color: ${({ theme }) => theme.textInvert};
+  }
 `;
 // TODO - should we add some aria label indicating if window is currently active?
 const WindowHeader = ({ isActive, children, ...otherProps }) => (
-  <SlyledWindowHeader isActive={isActive} {...otherProps}>
+  <SlyledWindowHeader data-active={isActive.toString()} {...otherProps}>
     {children}
   </SlyledWindowHeader>
 );

src/components/WindowHeader/WindowHeader.spec.js

@@ -22,19 +22,19 @@ describe('<WindowHeader />', () => {
     expect(getByText(textContent)).toBeInTheDocument();
   });
 
-  //   describe('prop: isActive', () => {
-  //     it('displays active header by default', () => {
-  //       const { container } = renderWithTheme(<WindowHeader />);
-  //       const windowHeader = container.firstChild;
+  describe('prop: isActive', () => {
+    it('displays active header by default', () => {
+      const { container } = renderWithTheme(<WindowHeader />);
+      const windowHeader = container.firstChild;
 
-  //       expect(windowHeader).toHaveAttribute('data-testid', 'activeHeader');
-  //     });
+      expect(windowHeader).toHaveAttribute('data-active', 'true');
+    });
 
-  //     it('renders non-active header when set to false', () => {
-  //       const { container } = renderWithTheme(<WindowHeader isActive={false} />);
-  //       const windowHeader = container.firstChild;
+    it('renders non-active header when set to false', () => {
+      const { container } = renderWithTheme(<WindowHeader isActive={false} />);
+      const windowHeader = container.firstChild;
 
-  //       expect(windowHeader).toHaveAttribute('data-testid', 'notActiveHeader');
-  //     });
-  //   });
+      expect(windowHeader).toHaveAttribute('data-active', 'false');
+    });
+  });
 });