Test DevelopmentServerPane component

src/components/DevelopmentServerPane/DevelopmentServerPane.js

@@ -28,7 +28,7 @@ type Props = {
   abortTask: Dispatch<typeof actions.abortTask>,
 };
 
-class DevelopmentServerPane extends PureComponent<Props> {
+export class DevelopmentServerPane extends PureComponent<Props> {
   handleToggle = (isToggled: boolean) => {
     const { task, launchDevServer, abortTask, project } = this.props;
 

src/components/DevelopmentServerPane/DevelopmentServerPane.test.js

@@ -0,0 +1,61 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import React from 'react';
+import { shallow } from 'enzyme';
+import lolex from 'lolex';
+
+import { DevelopmentServerPane } from './DevelopmentServerPane';
+
+describe('DevelopmentServerPane component', () => {
+  let wrapper;
+  let instance;
+  lolex.install();
+
+  const task = {
+    name: 'start',
+    status: 'idle',
+  };
+
+  const project = {
+    id: 'a-project',
+    type: 'create-react-app',
+  };
+
+  const mockActions = {
+    launchDevServer: jest.fn(),
+    abortTask: jest.fn(),
+  };
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <DevelopmentServerPane task={task} project={project} {...mockActions} />
+    );
+    instance = wrapper.instance();
+  });
+
+  describe('Rendering', () => {
+    it('should render', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should return message if no tasks', () => {
+      wrapper = shallow(<DevelopmentServerPane />);
+      expect(wrapper.text()).toMatch(/This project does not appear/);
+    });
+  });
+
+  describe('Component logic', () => {
+    it('should start devServer', () => {
+      instance.handleToggle(true);
+      expect(mockActions.launchDevServer).toBeCalledWith(task, new Date());
+    });
+
+    it('should abort task', () => {
+      instance.handleToggle(false);
+      expect(mockActions.abortTask).toBeCalledWith(
+        task,
+        project.type,
+        new Date()
+      );
+    });
+  });
+});

src/components/DevelopmentServerPane/__snapshots__/DevelopmentServerPane.test.js.snap

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DevelopmentServerPane component Rendering should render 1`] = `
+<Pane
+  moreInfoHref="https://github.com/joshwcomeau/guppy/blob/master/docs/getting-started.md#development-server"
+  primaryActionChildren={
+    <Toggle
+      isToggled={false}
+      onToggle={[Function]}
+      padding={2}
+      size={32}
+    />
+  }
+  title="Development Server"
+>
+  <OnlyOn
+    display="inline"
+    size="mdMin"
+  >
+    <styled.div>
+      <styled.div>
+        <styled.div>
+          Runs a local development server that updates whenever you make changes to the files.
+        </styled.div>
+        <DevelopmentServerStatus
+          status="idle"
+        />
+        <styled.div>
+          <ExternalLink
+            color="#304FFE"
+            display="inline-block"
+            hoverColor="#3f6cff"
+            href="https://github.com/facebook/create-react-app#user-guide"
+          >
+            View Documentation
+          </ExternalLink>
+        </styled.div>
+      </styled.div>
+      <styled.div>
+        <Connect(TerminalOutput)
+          height={300}
+          task={
+            Object {
+              "name": "start",
+              "status": "idle",
+            }
+          }
+          title="Server Logs"
+        />
+      </styled.div>
+    </styled.div>
+  </OnlyOn>
+  <OnlyOn
+    display="inline"
+    size="sm"
+  >
+    <styled.div>
+      <styled.div>
+        <styled.div>
+          <styled.div>
+            Runs a local development server that updates whenever you make changes to the files.
+          </styled.div>
+          <styled.div
+            size={10}
+          />
+          <styled.div>
+            <ExternalLink
+              color="#304FFE"
+              display="inline-block"
+              hoverColor="#3f6cff"
+              href="https://github.com/facebook/create-react-app#user-guide"
+            >
+              View Documentation
+            </ExternalLink>
+          </styled.div>
+        </styled.div>
+      </styled.div>
+      <styled.div>
+        <Connect(TerminalOutput)
+          height={300}
+          task={
+            Object {
+              "name": "start",
+              "status": "idle",
+            }
+          }
+        />
+      </styled.div>
+    </styled.div>
+  </OnlyOn>
+</Pane>
+`;

src/components/Sidebar/Sidebar.js

@@ -212,7 +212,6 @@ const Wrapper = animated(styled.nav.attrs({
     ${COLORS.blue[900]},
     ${COLORS.blue[700]}
   );
-  transform: translateX(${props => props.offset});
   will-change: transform;
   height: 100vh;
 `);