FAN-3742 | Add tests

package.json

@@ -7,6 +7,7 @@
   "license": "PRIVATE",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "design-system": "git://github.com/Wikia/design-system.git#XW-4947",
     "lodash.get": "^4.4.2",
@@ -36,6 +37,7 @@
     "watch:notify": "concurrently --names \"SERVER,TESTS\" --prefix \"{time}|{name}\" \"yarn build:watch\" \"yarn test:watch:notify\""
   },
   "devDependencies": {
+    "axios-mock-adapter": "^1.15.0",
     "babel-core": "^6.26.0",
     "babel-jest": "^22.4.1",
     "babel-loader": "^7.1.3",

src/components/GlobalFooter/__snapshots__/index.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalFooter should render correctly with default data 1`] = `
+<div>
+  NOT IMPLEMENTED
+</div>
+`;

src/components/GlobalFooter/index.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+import sinon from 'sinon';
+
+import GlobalFooter from './index';
+
+test('GlobalFooter should render correctly with default data', () => {
+  const component = renderer.create(
+    <GlobalFooter />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/GlobalNavigation/README.md

@@ -1,3 +1,14 @@
+User:
 ```js
-<GlobalNavigation />
+<GlobalNavigation api={() => Promise.resolve({data: require('./mockedData').user})}/>
+```
+
+Anon:
+```js
+<GlobalNavigation api={() => Promise.resolve({data: require('./mockedData').anon})}/>
+```
+
+Anon with Partner Slot:
+```js
+<GlobalNavigation api={() => Promise.resolve({data: require('./mockedData').anonPartner})}/>
 ```

src/components/GlobalNavigation/__snapshots__/index.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalNavigation should render correctly with mocked anon 1`] = `
+<GlobalNavigation
+  api={[Function]}
+  className=""
+/>
+`;
+
+exports[`GlobalNavigation should render correctly with mocked partner slot 1`] = `
+<GlobalNavigation
+  api={[Function]}
+  className=""
+/>
+`;
+
+exports[`GlobalNavigation should render correctly with mocked user 1`] = `
+<GlobalNavigation
+  api={[Function]}
+  className=""
+/>
+`;
+
+exports[`GlobalNavigation should work with axios 1`] = `
+<GlobalNavigation
+  api={[Function]}
+  className=""
+/>
+`;

src/components/GlobalNavigation/components/Link.js

@@ -171,7 +171,11 @@ const Link = ({link, ...props}) => {
 };
 
 Link.propTypes = {
-  link: linkType.isRequired,
+  link: linkType,
+};
+
+Link.defaultProps = {
+  link: null,
 };
 
 export default Link;

src/components/GlobalNavigation/components/Link.spec.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+import sinon from 'sinon';
+
+import Link from './Link';
+
+const emptyLink = {
+  type: '',
+  title: 'title',
+  tracking_label: 'tracking_label',
+};
+
+/* eslint-disable no-alert */
+
+test('Link should\'t render empty', () => {
+  const component = renderer.create(
+    <Link link={null} />
+  );
+  expect(component.toJSON()).toBe(null);
+});
+
+test('Link should\'t render unknown type', () => {
+  // mock console.error
+  const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  const unknownLink = {...emptyLink, type: '?'};
+  const component = renderer.create(
+    <Link link={unknownLink} />
+  );
+  expect(component.toJSON()).toBe(null);
+  // check console.error
+  expect(console.error).toHaveBeenCalled(); // eslint-disable-line no-console
+  expect(consoleSpy.mock.calls[0][0]).toContain('Unknown Link type:');
+
+  // restore global console
+  consoleSpy.mockRestore();
+});
+
+test('Link should render type link-nav', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-nav',
+    href: 'http://example.com',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-text', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-text',
+    href: 'http://example.com',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-button', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-button',
+    href: 'http://example.com',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-group', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-group',
+    title: 'group',
+    items: [
+      {...emptyLink, type: 'link-text', href: 'http://example.com', tracking_label: '1'},
+      {...emptyLink, type: 'link-button', href: 'http://example.com', tracking_label: '2'},
+    ],
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-partner-slot', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-partner-slot',
+    href: 'http://partner.com',
+    image: 'http://partner.com/image.jpg',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-logo', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-logo',
+    href: 'http://example.com',
+    edition: '',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-logout', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-logout',
+    href: 'http://example.com',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-full-button', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-full-button',
+    href: 'http://example.com',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Link should render type link-full-button-secondary with caption', () => {
+  const link = {
+    ...emptyLink,
+    type: 'link-full-button-secondary',
+    href: 'http://example.com',
+    caption: 'A caption',
+  };
+  const component = renderer.create(
+    <Link link={link} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/GlobalNavigation/components/Search.js

@@ -8,6 +8,7 @@ class Search extends React.Component {
     this.searchFocus = this.searchFocus.bind(this);
     this.searchBlur = this.searchBlur.bind(this);
     this.searchChange = this.searchChange.bind(this);
+    this.resetSearchInput = this.resetSearchInput.bind(this);
     this.searchInputRef = React.createRef();
   }
 
@@ -16,23 +17,29 @@ class Search extends React.Component {
     searchIsEmpty: true,
   };
 
-  searchChange() {
-    const searchIsEmpty = this.searchInputRef.current.value.length === 0;
+  searchChange(event) {
+    const value = event.target.value;
+    const searchIsEmpty = value.length === 0;
 
     this.setState({searchIsEmpty});
   }
 
+  resetSearchInput() {
+    this.setState({searchIsEmpty: true});
+    this.searchInputRef.current.value = '';
+  }
+
   searchFocus() {
-    this.setState({searchIsFocused: true, searchIsEmpty: true});
+    this.resetSearchInput();
+    this.setState({searchIsFocused: true});
     this.props.onStateChange(true);
-    this.searchInputRef.current.value = '';
     this.searchInputRef.current.focus();
   }
 
   searchBlur() {
-    this.setState({searchIsFocused: false, searchIsEmpty: true});
+    this.resetSearchInput();
+    this.setState({searchIsFocused: false});
     this.props.onStateChange(false);
-    this.searchInputRef.current.value = '';
     this.searchInputRef.current.blur();
   }
 

src/components/GlobalNavigation/components/Search.spec.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow, mount} from 'enzyme';
+import sinon from 'sinon';
+
+import Search from './Search';
+
+const search = {
+  url: 'http://fandom.wikia.com',
+  param: 's',
+  label: 'Search',
+  placeholder_active: 'Placeholder Active',
+  placeholder_inactive: 'Placeholder Inactive',
+  tracking_label: 'search',
+};
+
+test('Search should render correctly', () => {
+  const component = renderer.create(
+    <Search {...search} onStateChange={() => null} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Click on the search should invoke onStateChange', () => {
+  const mockedCallback = sinon.spy();
+  const wrapper = mount(
+    <Search {...search} onStateChange={mockedCallback} />
+  );
+
+  expect(wrapper.state().searchIsFocused).toBe(false);
+  wrapper.find('.wds-global-navigation__search-input-wrapper > input').simulate('focus');
+  expect(wrapper.state().searchIsFocused).toBe(true);
+  wrapper.find('.wds-global-navigation__search-input-wrapper > input').simulate('blur');
+  expect(wrapper.state().searchIsFocused).toBe(false);
+
+  expect(mockedCallback.callCount).toBe(2);
+});
+
+test('Empty state is handled properly', () => {
+  const wrapper = mount(
+    <Search {...search} onStateChange={() => null} />
+  );
+
+  expect(wrapper.state().searchIsEmpty).toBe(true);
+  wrapper.instance().searchChange({target: {value: 'value'}});
+  expect(wrapper.state('searchIsEmpty')).toBe(false);
+});
+
+test('Focus change is handled properly', () => {
+});

src/components/GlobalNavigation/components/User.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+import sinon from 'sinon';
+
+import User from './User';
+
+test('User shouldn\'t render with null', () => {
+  const component = renderer.create(
+    <User user={null} />
+  );
+  expect(component.toJSON()).toBe(null);
+});
+
+test('User should render correctly with data', () => {
+  const user = {
+    avatar: 'https://static.wikia.nocookie.net/2536a38e-ab79-4d85-a5a0-16428e2582e8/scale-to-width-down/50',
+    username: 'User name',
+    tracking_label: 'account',
+    items: [
+      {
+        type: 'link-text',
+        title: 'View wiki profile',
+        href: 'http://community.wikia.com/wiki/User:User_name',
+        tracking_label: 'account.profile-wiki',
+      },
+      {
+        type: 'link-text',
+        title: 'View author profile',
+        href: 'http://fandom.wikia.com/u/User_name',
+        tracking_label: 'account.profile',
+      },
+      {
+        type: 'link-logout',
+        title: 'Sign-out',
+        href: 'https://www.sandbox-content.wikia.com/signout?redirect=<referrer>',
+        tracking_label: 'account.sign-out',
+      },
+    ],
+  };
+  const component = renderer.create(
+    <User user={user} />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});