From 4d2cf52e4c3d6102242462ca649c39ea7f7e83a9 Mon Sep 17 00:00:00 2001
From: GotPPay <bilal@saburly.com>
Date: Wed, 4 Apr 2018 01:09:29 +0200
Subject: [PATCH] add snapshot tests for 'import-from-source' part

---
 web/package-lock.json                         |   3 +-
 web/package.json                              |   1 +
 .../components/__tests__/AnswerSource.test.js |  73 +-
 .../__snapshots__/AnswerSource.test.js.snap   |  93 +++
 .../helper/__tests__/AnswerSourceForm.test.js |   5 +
 .../helper/__tests__/AnswerTextBox.test.js    |  12 +
 .../components/helper/__tests__/Modal.test.js |  17 +-
 .../AnswerSourceForm.test.js.snap             | 675 ++++++++++++++++++
 .../__snapshots__/AnswerTextBox.test.js.snap  | 376 ++++++++++
 .../__snapshots__/Modal.test.js.snap          |  42 ++
 10 files changed, 1260 insertions(+), 37 deletions(-)
 create mode 100644 web/src/components/__tests__/__snapshots__/AnswerSource.test.js.snap
 create mode 100644 web/src/components/helper/__tests__/__snapshots__/AnswerSourceForm.test.js.snap
 create mode 100644 web/src/components/helper/__tests__/__snapshots__/AnswerTextBox.test.js.snap
 create mode 100644 web/src/components/helper/__tests__/__snapshots__/Modal.test.js.snap

diff --git a/web/package-lock.json b/web/package-lock.json
index ea0b362..42c84e5 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -4382,8 +4382,7 @@
         },
         "jsbn": {
           "version": "0.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "json-schema": {
           "version": "0.2.3",
diff --git a/web/package.json b/web/package.json
index 542eca5..25bc015 100644
--- a/web/package.json
+++ b/web/package.json
@@ -29,6 +29,7 @@
     "babel-jest": "^22.4.3",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.3",
     "jest": "^20.0.3",
     "jest-enzyme": "^6.0.0",
     "nodemon": "^1.12.1",
diff --git a/web/src/components/__tests__/AnswerSource.test.js b/web/src/components/__tests__/AnswerSource.test.js
index 437a47b..c775523 100644
--- a/web/src/components/__tests__/AnswerSource.test.js
+++ b/web/src/components/__tests__/AnswerSource.test.js
@@ -2,51 +2,60 @@ import React from 'react';
 import {Button} from 'react-md';
 import {shallow, mount} from 'enzyme';
 import AnswerSource from '../AnswerSource';
-import {ANSWER_TYPE} from '../../config/constants'
+import {ANSWER_TYPE} from '../../config/constants';
 
 it ('renders without crashing', () => {
   shallow (<AnswerSource />);
 });
 
-
-describe('functional tests', ()=>{
+describe ('functional tests', () => {
   let wrapper;
-  beforeEach(()=>{
-    const onSaveAnswerTypeFunction = jest.fn();
-    wrapper = mount(<AnswerSource onSaveAnswerType={onSaveAnswerTypeFunction} />);
-    wrapper.setState({
+  beforeEach (() => {
+    const onSaveAnswerTypeFunction = jest.fn ();
+    wrapper = mount (
+      <AnswerSource onSaveAnswerType={onSaveAnswerTypeFunction} />
+    );
+    wrapper.setState ({
       isModalOpen: false,
-      answerType: 0
+      answerType: 0,
     });
   });
 
+  it ('snapshot', ()=>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it ('renders only a button', () => {
-    expect(wrapper.first().text()).toEqual('Answer type');
-    expect(wrapper.find('AnswerSourceForm').exists()).toEqual(false);
+    expect (wrapper.first ().text ()).toEqual ('Answer type');
+    expect (wrapper.find ('AnswerSourceForm').exists ()).toEqual (false);
   });
 
-  it('answer type button click opens modal form', () => {
-    expect(wrapper.find('AnswerSourceFormA').exists()).toEqual(false);
-    expect(wrapper.state().isModalOpen).toEqual(false);
-    const AnswerTypeButton = wrapper.find('button').first();
-    AnswerTypeButton.simulate('click');
-    expect(wrapper.state().isModalOpen).toEqual(true);
-    expect(wrapper.find('AnswerSourceForm').exists()).toEqual(true);
-    expect(wrapper.find('button').length).toBe(3);
-    expect(wrapper.find('button').first().text()).toEqual('Answer type');
+  it ('answer type button click opens modal form', () => {
+    expect (wrapper.find ('AnswerSourceFormA').exists ()).toEqual (false);
+    expect (wrapper.state ().isModalOpen).toEqual (false);
+    const AnswerTypeButton = wrapper.find ('button').first ();
+    AnswerTypeButton.simulate ('click');
+    expect (wrapper.state ().isModalOpen).toEqual (true);
+    expect (wrapper.find ('AnswerSourceForm').exists ()).toEqual (true);
+    expect (wrapper.find ('button').length).toBe (3);
+    expect (wrapper.find ('button').first ().text ()).toEqual ('Answer type');
   });
 
-  it('save button changes answerType value in state and closes the form ', () => {
-    const AnswerTypeButton = wrapper.find('button').first();
-    AnswerTypeButton.simulate('click');
-    const saveButton = wrapper.find('button').at(2);
-    const optionControl = wrapper.find('SelectionControlGroup');
-    expect(saveButton.text()).toEqual('Save');
-    expect(optionControl.exists()).toEqual(true);
-    optionControl.simulate('change',{target:{value:String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS)}});
-    saveButton.simulate('click');
-    expect(wrapper.state().answerType).toBe(ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS)
-    expect(wrapper.state().isModalOpen).toEqual(false);
-    expect(wrapper.find('button').length).toBe(1);
+  it ('save button changes answerType value in state and closes the form ', () => {
+    const AnswerTypeButton = wrapper.find ('button').first ();
+    AnswerTypeButton.simulate ('click');
+    const saveButton = wrapper.find ('button').at (2);
+    const optionControl = wrapper.find ('SelectionControlGroup');
+    expect (saveButton.text ()).toEqual ('Save');
+    expect (optionControl.exists ()).toEqual (true);
+    optionControl.simulate ('change', {
+      target: {value: String (ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS)},
+    });
+    saveButton.simulate ('click');
+    expect (wrapper.state ().answerType).toBe (
+      ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS
+    );
+    expect (wrapper.state ().isModalOpen).toEqual (false);
+    expect (wrapper.find ('button').length).toBe (1);
   });
-});
\ No newline at end of file
+});
diff --git a/web/src/components/__tests__/__snapshots__/AnswerSource.test.js.snap b/web/src/components/__tests__/__snapshots__/AnswerSource.test.js.snap
new file mode 100644
index 0000000..3279bc9
--- /dev/null
+++ b/web/src/components/__tests__/__snapshots__/AnswerSource.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`functional tests snapshot 1`] = `
+<AnswerSource
+  onSaveAnswerType={[Function]}
+>
+  <div>
+    <withInk(withTooltip(Button))
+      flat={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+    >
+      <withTooltip(Button)
+        flat={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+      >
+        <Button
+          fixedPosition="br"
+          flat={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            Answer type
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+  </div>
+</AnswerSource>
+`;
diff --git a/web/src/components/helper/__tests__/AnswerSourceForm.test.js b/web/src/components/helper/__tests__/AnswerSourceForm.test.js
index 37b8f45..d42a78a 100644
--- a/web/src/components/helper/__tests__/AnswerSourceForm.test.js
+++ b/web/src/components/helper/__tests__/AnswerSourceForm.test.js
@@ -7,6 +7,11 @@ it('renders without crashing', () => {
   shallow(<AnswerSourceForm onClose={()=>{}} onSave={()=>{}} onSourceChange={()=>{}} />);
 });
 
+it ('snapshot',()=>{
+  const wrapper = mount(<AnswerSourceForm onClose={()=>{}} onSave={()=>{}} onSourceChange={()=>{}} />);
+  expect(wrapper).toMatchSnapshot();
+})
+
 it('calls onClose when cancel is pressed', () => {
   const onClose = jest.fn();
   const wrapper = mount(<AnswerSourceForm onClose={onClose} onSave={()=>{}} onSourceChange={()=>{}} />);
diff --git a/web/src/components/helper/__tests__/AnswerTextBox.test.js b/web/src/components/helper/__tests__/AnswerTextBox.test.js
index e88b745..d74dfb8 100644
--- a/web/src/components/helper/__tests__/AnswerTextBox.test.js
+++ b/web/src/components/helper/__tests__/AnswerTextBox.test.js
@@ -23,6 +23,10 @@ describe ('predefined answer selected', () => {
     textField = wrapper.find ('TextField').first ();
   });
 
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it ('renders text box for normal answer', () => {
     expect (textField.props ().label).toEqual ('Answer');
   });
@@ -47,6 +51,10 @@ describe ('WordPress titles selected', () => {
     textField = wrapper.find ('TextField').first ();
   });
 
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it ('renders text box for external source input', () => {
     expect (textField.props ().label).toEqual ('Answer source');
   });
@@ -71,6 +79,10 @@ describe ('WordPress latest news selected', () => {
     textField = wrapper.find ('TextField').first ();
   });
 
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it ('renders text box for external source input', () => {
     expect (textField.props ().label).toEqual ('Answer source');
   });
diff --git a/web/src/components/helper/__tests__/Modal.test.js b/web/src/components/helper/__tests__/Modal.test.js
index 1355844..b2df126 100644
--- a/web/src/components/helper/__tests__/Modal.test.js
+++ b/web/src/components/helper/__tests__/Modal.test.js
@@ -6,10 +6,21 @@ it('renders without crashing', () => {
   shallow(<Modal />);
 });
 
+let actionButton;
+let childButton;
+let wrapper;
+
+beforeEach(()=>{
+  actionButton = <button key={0}>Dummy action button</button>;
+  childButton = <button key={1}>Child button</button>;
+  wrapper = mount(<Modal title={'Dummy title'} actions={[actionButton]}>{childButton}</Modal>);
+});
+
+it ('snapshot', () => {
+  expect(wrapper).toMatchSnapshot();
+});
+
 it('receives props as expected', () =>{
-  const actionButton = <button key={0}>Dummy action button</button>;
-  const childButton = <button key={1}>Child button</button>;
-  const wrapper = mount(<Modal title={'Dummy title'} actions={[actionButton]}>{childButton}</Modal>);
   expect(wrapper.props().title).toEqual('Dummy title');
   expect(wrapper.props().actions).toEqual([actionButton]);
   expect(wrapper.props().children).toEqual(childButton);
diff --git a/web/src/components/helper/__tests__/__snapshots__/AnswerSourceForm.test.js.snap b/web/src/components/helper/__tests__/__snapshots__/AnswerSourceForm.test.js.snap
new file mode 100644
index 0000000..6945070
--- /dev/null
+++ b/web/src/components/helper/__tests__/__snapshots__/AnswerSourceForm.test.js.snap
@@ -0,0 +1,675 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<AnswerSourceForm
+  onClose={[Function]}
+  onSave={[Function]}
+  onSourceChange={[Function]}
+>
+  <Modal
+    actions={
+      Array [
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          swapTheming={true}
+      >
+          Cancel
+      </withInk(withTooltip(Button))>,
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          primary={true}
+          swapTheming={true}
+      >
+          Save
+      </withInk(withTooltip(Button))>,
+      ]
+    }
+    title="Answer type"
+  >
+    <div
+      className="modal"
+    >
+      <div
+        className="modal-content"
+      >
+        <h2
+          className="header"
+        >
+          Answer type
+        </h2>
+        <SelectionControlGroup
+          component="fieldset"
+          controls={
+            Array [
+              Object {
+                "label": "Predefined answer",
+                "value": "0",
+              },
+              Object {
+                "label": "WordPress titles",
+                "value": "1",
+              },
+              Object {
+                "label": "WordPress latest news",
+                "value": "2",
+              },
+            ]
+          }
+          defaultValue="undefined"
+          id="answer-source"
+          label="Import answer from:"
+          labelClassName="md-subheading-1"
+          labelComponent="legend"
+          name="answer-source"
+          onChange={[Function]}
+          type="radio"
+        >
+          <fieldset
+            className="md-selection-control-group"
+            onChange={[Function]}
+            onKeyDown={[Function]}
+          >
+            <legend
+              className="md-subheading-1"
+            >
+              Import answer from:
+            </legend>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source0"
+              key="control0"
+              label="Predefined answer"
+              name="answer-source"
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="0"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source0"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="0"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source0"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={0}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={0}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    Predefined answer
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source1"
+              key="control1"
+              label="WordPress titles"
+              name="answer-source"
+              tabIndex={-1}
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="1"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source1"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="1"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source1"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                    tabIndex={-1}
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={-1}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    WordPress titles
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source2"
+              key="control2"
+              label="WordPress latest news"
+              name="answer-source"
+              tabIndex={-1}
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="2"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source2"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="2"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source2"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                    tabIndex={-1}
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={-1}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    WordPress latest news
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+          </fieldset>
+        </SelectionControlGroup>
+        <div
+          className="actions"
+        >
+          <withInk(withTooltip(Button))
+            flat={true}
+            inkTransitionEnterTimeout={450}
+            inkTransitionLeaveTimeout={300}
+            inkTransitionOverlap={150}
+            key="cancel"
+            onClick={[Function]}
+            swapTheming={true}
+          >
+            <withTooltip(Button)
+              flat={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              swapTheming={true}
+            >
+              <Button
+                fixedPosition="br"
+                flat={true}
+                iconBefore={true}
+                ink={
+                  <InkContainer
+                    className={undefined}
+                    disabledInteractions={undefined}
+                    inkClassName={undefined}
+                    inkStyle={undefined}
+                    pulse={undefined}
+                    style={undefined}
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                    waitForInkTransition={undefined}
+                  />
+                }
+                onClick={[Function]}
+                swapTheming={true}
+                type="button"
+              >
+                <button
+                  className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text md-inline-block"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  type="button"
+                >
+                  <InkContainer
+                    key="ink-container"
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      className="md-ink-container"
+                      component="div"
+                    >
+                      <div
+                        className="md-ink-container"
+                      />
+                    </TransitionGroup>
+                  </InkContainer>
+                  Cancel
+                </button>
+              </Button>
+            </withTooltip(Button)>
+          </withInk(withTooltip(Button))>
+          <withInk(withTooltip(Button))
+            flat={true}
+            inkTransitionEnterTimeout={450}
+            inkTransitionLeaveTimeout={300}
+            inkTransitionOverlap={150}
+            key="save"
+            onClick={[Function]}
+            primary={true}
+            swapTheming={true}
+          >
+            <withTooltip(Button)
+              flat={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              primary={true}
+              swapTheming={true}
+            >
+              <Button
+                fixedPosition="br"
+                flat={true}
+                iconBefore={true}
+                ink={
+                  <InkContainer
+                    className={undefined}
+                    disabledInteractions={undefined}
+                    inkClassName={undefined}
+                    inkStyle={undefined}
+                    pulse={undefined}
+                    style={undefined}
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                    waitForInkTransition={undefined}
+                  />
+                }
+                onClick={[Function]}
+                primary={true}
+                swapTheming={true}
+                type="button"
+              >
+                <button
+                  className="md-btn md-btn--flat md-btn--text md-pointer--hover md-background--primary md-background--primary-hover md-inline-block"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  type="button"
+                >
+                  <InkContainer
+                    key="ink-container"
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      className="md-ink-container"
+                      component="div"
+                    >
+                      <div
+                        className="md-ink-container"
+                      />
+                    </TransitionGroup>
+                  </InkContainer>
+                  Save
+                </button>
+              </Button>
+            </withTooltip(Button)>
+          </withInk(withTooltip(Button))>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</AnswerSourceForm>
+`;
diff --git a/web/src/components/helper/__tests__/__snapshots__/AnswerTextBox.test.js.snap b/web/src/components/helper/__tests__/__snapshots__/AnswerTextBox.test.js.snap
new file mode 100644
index 0000000..8de1500
--- /dev/null
+++ b/web/src/components/helper/__tests__/__snapshots__/AnswerTextBox.test.js.snap
@@ -0,0 +1,376 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WordPress latest news selected snapshot 1`] = `
+<AnswerTextBox
+  answerType={2}
+  externalAnswerSource="Dummy answer"
+  handleAnswerSourceEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer source"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer source"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer source"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer source
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer source"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer source"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer source"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;
+
+exports[`WordPress titles selected snapshot 1`] = `
+<AnswerTextBox
+  answerType={1}
+  externalAnswerSource="Dummy answer"
+  handleAnswerSourceEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer source"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer source"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer source"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer source
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer source"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer source"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer source"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;
+
+exports[`predefined answer selected snapshot 1`] = `
+<AnswerTextBox
+  answer="Dummy answer"
+  answerType={0}
+  handleAnswerEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;
diff --git a/web/src/components/helper/__tests__/__snapshots__/Modal.test.js.snap b/web/src/components/helper/__tests__/__snapshots__/Modal.test.js.snap
new file mode 100644
index 0000000..2404e5d
--- /dev/null
+++ b/web/src/components/helper/__tests__/__snapshots__/Modal.test.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<Modal
+  actions={
+    Array [
+      <button>
+        Dummy action button
+    </button>,
+    ]
+  }
+  title="Dummy title"
+>
+  <div
+    className="modal"
+  >
+    <div
+      className="modal-content"
+    >
+      <h2
+        className="header"
+      >
+        Dummy title
+      </h2>
+      <button
+        key="1"
+      >
+        Child button
+      </button>
+      <div
+        className="actions"
+      >
+        <button
+          key="0"
+        >
+          Dummy action button
+        </button>
+      </div>
+    </div>
+  </div>
+</Modal>
+`;