Added Home.spec.js

app/components/Home.js

@@ -9,21 +9,21 @@ import logoPath from '../styles/images/manjushri_175x226.jpg'
 class Home extends Component {
   render () {
     return (
-      <div className="row">
-        <div className="col-md-2">
-          <img src={logoPath} className="logo" />
+      <div data-test-id="main-div" className="row">
+        <div data-test-id="div-logo" className="col-md-2">
+          <img data-test-id="img-logo" src={logoPath} className="logo" />
         </div>
-        <div className="col-md-10">
-          <div className="row header-row">
-            <div className="col-md-12">
-              <h1>
-                <em><FormattedMessage id="Home.search_title_em" /></em>
-                <FormattedMessage id="Home.search_title_h1" />
+        <div data-test-id="title-md-10" className="col-md-10">
+          <div data-test-id="header-row" className="row header-row">
+            <div data-test-id="title-md-12" className="col-md-12">
+              <h1 data-test-id="full-title">
+                <em data-test-id="em-title"><FormattedMessage id="Home.search_title_em" /></em>
+                <span data-test-id="span-title"><FormattedMessage id="Home.search_title_h1" /></span>
               </h1>
             </div>
           </div>
-          <div className="row search-row">
-            <div className="col-md-12">
+          <div data-test-id="search-row" className="row search-row">
+            <div data-test-id="search-md-12" className="col-md-12">
               <SearchInput />
               <SearchResults />
             </div>

app/components/search/SearchInput.js

@@ -16,7 +16,7 @@ class SearchInput extends Component {
   render () {
     let search = this.props.data
     return (
-      <div className='row'>
+      <div data-test-id="SearchInput" className='row'>
         <form>
           <div className='form-group'>
             <div className='col-md-6'>

app/components/search/SearchResults.js

@@ -9,7 +9,7 @@ class SearchResults extends Component {
   render () {
     let search = this.props.data
     return (
-    <div className="row search-results-row"> {
+    <div data-test-id="SearchResults" className="row search-results-row"> {
         search.started && search.result && !search.pending ? (
       <div>
         <div className="col-md-3">

package.json

@@ -92,6 +92,10 @@
     ]
   },
   "jest": {
-    "bail": true
+    "bail": true,
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/frontend/assetsTransformer.js",
+      "\\.(css|less)$": "<rootDir>/test/frontend/assetsTransformer.js"
+    }
   }
 }

test/frontend/assetsTransformer.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  process(src, filename, config, options) {
+    console.log('src', src, filename)
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+  },
+};

test/frontend/components/Home.spec.js

@@ -0,0 +1,59 @@
+global.window.localStorage = {};
+const React = require('react');
+const {Component} = require('react');
+const {expect} = require('chai');
+
+const Home = require('../../../app/components/Home').default;
+const {setupComponent, defaultLang} = require('../_shared.js');
+
+const i18n = require('../../../app/i18n/' + defaultLang);
+
+describe('Testing Home Component.', () => {
+  it('should show component', () => {
+    const wrapper = setupComponent(Home);
+
+    expect(wrapper.find('[data-test-id="main-div"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="main-div"]').hasClass('row')).equal(true);
+
+    expect(wrapper.find('[data-test-id="div-logo"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="div-logo"]').hasClass('col-md-2')).equal(true);
+
+    expect(wrapper.find('[data-test-id="img-logo"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="img-logo"]').hasClass('logo')).equal(true);
+
+    expect(wrapper.find('[data-test-id="title-md-10"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="title-md-10"]').hasClass('col-md-10')).equal(true);
+
+    expect(wrapper.find('[data-test-id="header-row"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="header-row"]').hasClass('row')).equal(true);
+    expect(wrapper.find('[data-test-id="header-row"]').hasClass('header-row')).equal(true);
+
+    expect(wrapper.find('[data-test-id="title-md-12"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="title-md-12"]').hasClass('col-md-12')).equal(true);
+
+    const fullTitle = i18n['Home.search_title_em'] + i18n['Home.search_title_h1'];
+    expect(wrapper.find('[data-test-id="full-title"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="full-title"]').text()).equal(fullTitle);
+
+    const emTitle = i18n['Home.search_title_em'];
+    expect(wrapper.find('[data-test-id="em-title"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="em-title"]').text()).equal(emTitle);
+
+    const spanTitle = i18n['Home.search_title_h1'];
+    expect(wrapper.find('[data-test-id="span-title"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="span-title"]').text()).equal(spanTitle);
+
+    expect(wrapper.find('[data-test-id="search-row"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="search-row"]').hasClass('row')).equal(true);
+    expect(wrapper.find('[data-test-id="search-row"]').hasClass('search-row')).equal(true);
+
+    expect(wrapper.find('[data-test-id="search-md-12"]').length).equal(1);
+    expect(wrapper.find('[data-test-id="search-md-12"]').hasClass('col-md-12')).equal(true);
+
+    expect(wrapper.find('[data-test-id="SearchInput"]').length).equal(1);
+    // further tests in "test/frontend/components/search/SearchInput"
+
+    expect(wrapper.find('[data-test-id="SearchResults"]').length).equal(1);
+    // further tests in "test/frontend/components/search/SearchResults"
+  });
+});