Snapshots, linting and storybook styles

Author: Tomdango

.storybook/_storybook.scss

@@ -2,7 +2,6 @@
   display: block;
   margin: auto;
   background-color: transparent;
-  text-align: center;
 }
 
 .tag-demo {
@@ -24,6 +23,7 @@
 
 .tooltip-demo {
   @extend %demo-centered;
+  text-align: center;
   width: 250px;
   padding-top: 100px;
   padding-bottom: 100px;

src/components/accordion-menu/__tests__/AccordionMenu.test.tsx

@@ -8,4 +8,77 @@ describe('AccordionMenu', () => {
     expect(component).toMatchSnapshot();
     component.unmount();
   });
+
+  describe('Section', () => {
+    it('matches snapshot', () => {
+      const component = shallow(<AccordionMenu.Section heading="TestHeading" />);
+      expect(component).toMatchSnapshot();
+      component.unmount();
+    });
+
+    it('passes through text', () => {
+      const component = shallow(<AccordionMenu.Section heading="TestHeading" />);
+      expect(component.find('.nhsuk-accordion-menu__section-summary-text').text()).toBe(
+        'TestHeading',
+      );
+      component.unmount();
+    });
+
+    it('handles defaultOpen', () => {
+      const component = shallow(
+        <AccordionMenu.Section id="accordion" heading="Heading" defaultOpen />,
+      );
+      const event = {
+        preventDefault: jest.fn(),
+      };
+
+      expect(component.find('#accordion').getElement().props.open).toBe(true);
+      component.find('summary').simulate('click', event);
+      expect(event.preventDefault).toHaveBeenCalledTimes(1);
+      expect(component.find('#accordion').getElement().props.open).toBe(false);
+      component.find('summary').simulate('click', event);
+      expect(event.preventDefault).toHaveBeenCalledTimes(2);
+      expect(component.find('#accordion').getElement().props.open).toBe(true);
+      component.unmount();
+    });
+    it('handles open={true}', () => {
+      const component = shallow(<AccordionMenu.Section id="accordion" heading="Heading" open />);
+      const event = {
+        preventDefault: jest.fn(),
+      };
+      expect(component.find('#accordion').getElement().props.open).toBe(true);
+      component.find('summary').simulate('click', event);
+      expect(event.preventDefault).toHaveBeenCalledTimes(1);
+      expect(component.find('#accordion').getElement().props.open).toBe(true);
+      component.find('summary').simulate('click', event);
+      expect(event.preventDefault).toHaveBeenCalledTimes(2);
+      expect(component.find('#accordion').getElement().props.open).toBe(true);
+      component.unmount();
+    });
+
+    it('handles open={false}', () => {
+      const component = shallow(
+        <AccordionMenu.Section id="accordion" heading="Heading" open={false} />,
+      );
+      const event = {
+        preventDefault: jest.fn(),
+      };
+      expect(component.find('#accordion').getElement().props.open).toBe(false);
+      component.find('summary').simulate('click', event);
+      expect(event.preventDefault).toHaveBeenCalledTimes(1);
+      expect(component.find('#accordion').getElement().props.open).toBe(false);
+      component.find('summary').simulate('click', event);
+      expect(event.preventDefault).toHaveBeenCalledTimes(2);
+      expect(component.find('#accordion').getElement().props.open).toBe(false);
+      component.unmount();
+    });
+  });
+  describe('Link', () => {
+    it('matches snapshot', () => {
+      const component = shallow(<AccordionMenu.Link>Test</AccordionMenu.Link>);
+      expect(component).toMatchSnapshot();
+      expect(component.text()).toBe('Test');
+      component.unmount();
+    });
+  });
 });

src/components/accordion-menu/__tests__/__snapshots__/AccordionMenu.test.tsx.snap

@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AccordionMenu Link matches snapshot 1`] = `
+<div
+  className="nhsuk-accordion-menu__subsection"
+>
+  <a
+    className="nhsuk-accordion-menu__subsection-link"
+  >
+    Test
+  </a>
+</div>
+`;
+
+exports[`AccordionMenu Section matches snapshot 1`] = `
+<details
+  className="nhsuk-accordion-menu__section"
+  open={false}
+>
+  <summary
+    className="nhsuk-accordion-menu__section-summary"
+    onClick={[Function]}
+    role="tab"
+    tabIndex={1}
+  >
+    <span
+      className="nhsuk-accordion-menu__section-summary-text"
+    >
+      TestHeading
+    </span>
+  </summary>
+</details>
+`;
+
 exports[`AccordionMenu matches snapshot 1`] = `
 <div
   className="nhsuk-accordion-menu"

stories/SubNavigation.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { SubNavigation } from '../src';