Merge pull request #34 from NHSDigital/lp-disableDefaultBehaviour-skiplink-fix

If disableDefaultBehaviour is set, dont set the href on the skiplink

Author: Tomdango

src/components/skip-link/SkipLink.tsx

@@ -14,6 +14,7 @@ class SkipLink extends React.Component<SkipLinkProps> {
   static defaultProps = {
     children: 'Skip to main content',
     href: '#maincontent',
+    tabIndex: 0,
   };
 
   constructor(props: SkipLinkProps, ...rest: any[]) {
@@ -84,9 +85,14 @@ class SkipLink extends React.Component<SkipLinkProps> {
   };
 
   render() {
-    const { className, focusTargetRef, disableDefaultBehaviour, ...rest } = this.props;
+    const { className, focusTargetRef, disableDefaultBehaviour, href, ...rest } = this.props;
     return (
-      <a className={classNames('nhsuk-skip-link', className)} onClick={this.onClick} {...rest} />
+      <a
+        className={classNames('nhsuk-skip-link', className)}
+        onClick={this.onClick}
+        href={disableDefaultBehaviour ? undefined : href}
+        {...rest}
+      />
     );
   }
 }

src/components/skip-link/__tests__/SkipLink.test.tsx

@@ -1,5 +1,5 @@
 import React, { createRef } from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import SkipLink from '..';
 
 describe('SkipLink', () => {
@@ -17,4 +17,21 @@ describe('SkipLink', () => {
     expect(component.prop('aria-label')).toEqual('test');
     component.unmount();
   });
+
+  it('sets the href to #maincontent by default', () => {
+    const component = mount(<SkipLink />);
+    expect(component.find('.nhsuk-skip-link').prop('href')).toBe('#maincontent');
+  });
+
+  it('calls onClick callback when clicked', () => {
+    const onClick = jest.fn();
+    const component = mount(<SkipLink onClick={onClick} />);
+    component.find('.nhsuk-skip-link').simulate('click');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('does not set the href to #maincontent if disableDefaultBehaviour is set', () => {
+    const component = mount(<SkipLink disableDefaultBehaviour />);
+    expect(component.find('.nhsuk-skip-link').prop('href')).toBeUndefined();
+  });
 });

src/components/skip-link/__tests__/__snapshots__/SkipLink.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`SkipLink matches snapshot: SkipLink 1`] = `
   className="nhsuk-skip-link"
   href="#maincontent"
   onClick={[Function]}
+  tabIndex={0}
 >
   Skip to main content
 </a>