add Window tests

Author: arturbien

src/components/Window/Window.js

@@ -10,7 +10,7 @@ const StyledWindow = styled.div`
   ${createBorderStyles({ windowBorders: true })}
   ${createBoxStyles()}
 `;
-const DragHandle = styled.span`
+const ResizeHandle = styled.span`
   ${({ theme }) => css`
     display: inline-block;
     position: absolute;
@@ -41,11 +41,13 @@ const DragHandle = styled.span`
   `}
 `;
 
-// TODO pass resize handler
+// TODO how to pass event handlers to resize handler?
+// TODO how to pass refs to both Window component and DragHandle?
+
 const Window = ({ resizable, shadow, children, ...otherProps }) => (
   <StyledWindow shadow={shadow} {...otherProps}>
     {children}
-    {resizable && <DragHandle />}
+    {resizable && <ResizeHandle data-testid='resizeHandle' />}
   </StyledWindow>
 );
 

src/components/Window/Window.spec.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import Window from './Window';
+
+describe('<Window />', () => {
+  it('renders Window', () => {
+    const { container } = renderWithTheme(<Window />);
+    const window = container.firstChild;
+
+    expect(window).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <Window>
+        <span>{textContent}</span>
+      </Window>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+
+  describe('prop: resizable', () => {
+    it('does not render resize handle by default', () => {
+      const { queryByTestId } = renderWithTheme(<Window />);
+
+      expect(queryByTestId('resizeHandle')).not.toBeInTheDocument();
+    });
+    it('renders resize handle when set to true', () => {
+      const { queryByTestId } = renderWithTheme(<Window resizable />);
+
+      expect(queryByTestId('resizeHandle')).toBeInTheDocument();
+    });
+  });
+});