SAP · droshev · Dec 14, 2018 · Oct 31, 2018 · Oct 31, 2018 · Nov 1, 2018
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets": [["react-app", { "absoluteRuntime": false }]]
+}
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,19 @@
+language: node_js
+node_js:
+- 8.9.0
+dist: trusty
+git:
+  depth: false
+branches:
+  only:
+  - develop
+  - "/^feature\\/.*$/"
+jobs:
+  include:
+    - stage: "Fundamental-react build"
+      name: "Unit tests"
+      script: "./ci-scripts/unit-tests.sh"
+notifications:
+  email:
+    on_failure: always
+    on_success: change
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,19 +2,19 @@
 
 We're excited that you're interested in contributing to Fundamental-react! Your contribution can make this library even better. Please read the guidelines regarding contributions:
 
--   [Issues and Bugs](#issues-and-bugs)
--   [Feature Requests](#feature-requests)
--   [Contribute Code](#contribute-code)
+- [Issues and Bugs](#issues-and-bugs)
+- [Feature Requests](#feature-requests)
+- [Contribute Code](#contribute-code)
 
 ## Issues and Bugs
 
 If you find a bug or some other issue with any part of the library, please [submit an issue](https://github.com/SAP/fundamental-react/issues). Before doing so, please make sure that:
 
--   The issue is not a duplicate issue.
--   The issue has not been fixed in a newer release of the library.
--   The issue is reproducible.
--   Your explanation is clear and complete.
--   You provide example code and/or screenshots (recommended).
+- The issue is not a duplicate issue.
+- The issue has not been fixed in a newer release of the library.
+- The issue is reproducible.
+- Your explanation is clear and complete.
+- You provide example code and/or screenshots (recommended).
 
 If you meet the above criteria, you can submit issues with our [GitHub issue tracker](https://github.com/SAP/fundamental-react/issues/new). Please use [labels](#usage-of-labels) to categorize your issue.
 
@@ -28,25 +28,25 @@ GitHub offers labels to categorize issues. You can use the following labels:
 
 Labels for issue categories:
 
--   bug: Issues in the code.
--   documentation: Issues with the documentation.
--   enhancement: Enhancement requests.
+- bug: Something isn't working / Issues in the code.
+- documentation: Issues with the documentation (repo and website documentation).
+- enhancement: New feature or enhancement requests.
 
 Status of open issues:
 
--   (no label): The default status.
--   unconfirmed: The issue needs to be confirmed as being a bug or future enhancement.
--   approved: The issue is confirmed as being a bug to be fixed or enhancement to be developed.
--   author action: The issue's creator needs to provide additional information.
--   contribution welcome: The fix or enhancement is approved and you are invited to contribute to it.
+- (no label): The default status.
+- unconfirmed: The issue needs to be confirmed as being a bug or future enhancement.
+- approved: The issue is confirmed as being a bug to be fixed or enhancement to be developed.
+- author action: The issue's creator needs to provide additional information.
+- contribution welcome: The fix or enhancement is approved and you are invited to contribute to it.
 
 Status of closed issues:
 
--   fixed: A fix for the issue was provided.
--   duplicate: The issue is also reported in a different ticket and is being managed there.
--   invalid: The reported issue will not be addressed.
--   works: The issue cannot be reproduced, or the feature is working as expected.
--   wontfix: The issue will not be fixed.
+- fixed: A fix for the issue was provided.
+- duplicate: The issue is also reported in a different ticket and is being managed there.
+- invalid: The reported issue will not be addressed.
+- works: The issue cannot be reproduced, or the feature is working as expected.
+- wontfix: The issue will not be fixed.
 
 ## Contribute Code
 
@@ -57,7 +57,6 @@ There are three important things to consider:
 1.  You must be aware of the Apache License (which describes contributions) and **agree to the Contributors License Agreement**. This is common practice in all major Open Source projects. If you are an individual contributor, use _[CLA assistant](https://cla-assistant.io/)_. CLA assistant is an open source tool that integrates with GitHub and enables a one-click-experience for accepting the CLA. If you are contributing on behalf of a company, see the [Company Contributors](#company-contributors) section below for details.
 2.  You must follow **code style, quality, and product standards requirements**. You can find more information on the coding guidelines below.
 
-
 ### Contributor License Agreement
 
 When you contribute (code, documentation, or anything else), you must be aware that your contribution is covered by the same [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0) that is applied to Fundamental-react itself.
@@ -72,15 +71,19 @@ If employees of a company contribute code, in **addition** to the individual agr
 A company representative authorized to do so needs to download, fill out, and print
 the [Corporate Contributor License Agreement](/docs/SAP%20Corporate%20Contributor%20License%20Agreement.pdf) form. Then either:
 
--   Scan it and e-mail it to [opensource@sap.com](mailto:opensource@sap.com),
--   Fax it to: +49 6227 78-45813,
--   Send it by mail to: _Industry Standards & Open Source Team, Dietmar-Hopp-Allee 16, 69190 Walldorf, Germany_.
+- Scan it and e-mail it to [opensource@sap.com](mailto:opensource@sap.com),
+- Fax it to: +49 6227 78-45813,
+- Send it by mail to: _Industry Standards & Open Source Team, Dietmar-Hopp-Allee 16, 69190 Walldorf, Germany_.
 
 The form lists all employees who are authorized to contribute on behalf of your company. When this list changes, please let us know.
 
 ### Contribution Content Guidelines
 
-You must follow the coding style as best you can when submitting code. Take note of naming conventions, separation of concerns, and formatting rules. You can use the code formatter [Prettier](https://prettier.io/) to handle some of this for you automatically. 
+You must follow the coding style as best you can when submitting code. Take note of naming conventions, separation of concerns, and formatting rules. You can use the code formatter [Prettier](https://prettier.io/) to handle some of this for you automatically.
+
+### Unit testing
+
+All components should have associated unit tests created with a code coverage score of at least 85%. Be an overachiever and shoot for 100% :) [Learn how to create unit tests](./UNIT-TESTING.md)
 
 ### How to contribute - the Process
 
@@ -90,7 +93,7 @@ You must follow the coding style as best you can when submitting code. Take note
 4.  Create a Pull Request from your forked repository to github.com/SAP/fundamental-react. In the subject of the pull request, briefly describe the bug fix or enhancement you're contributing. In the pull request description, please provide a link to the issue in the issue tracker.
 5.  Follow the link posted by the CLA assistant to your pull request and accept it, as described above.
 6.  Wait for our code review and approval. We may ask you for additional commits, or make changes to your pull request ourselves.
-    -   Note that the Fundamental-react developers also have their regular duties so, depending on the required effort for reviewing, testing, and clarification, this may take a while.
+    - Note that the Fundamental-react developers also have their regular duties so, depending on the required effort for reviewing, testing, and clarification, this may take a while.
 7.  Once the change has been approved, we inform you in a comment.
 8.  Your pull request cannot be merged directly into the branch (internal SAP processes), but is merged internally and immediately appears in the public repository as well.
-9. We close the pull request. You can then delete the now obsolete branch.
+9.  We close the pull request. You can then delete the now obsolete branch.
diff --git a/README.md b/README.md
@@ -1,8 +1,11 @@
-
 # Fundamental-react
 React.JS components for [SAP Fiori Fundamentals](https://github.com/SAP/fundamental)
-- [Playground](https://sap.github.io/fundamental-react/) 
+
+- [Playground](https://sap.github.io/fundamental-react/)
 - [npm package fundamental-react](https://www.npmjs.com/package/fundamental-react)
+- [![Build Status](https://travis-ci.org/SAP/fundamental-react.svg?branch=develop)](https://travis-ci.org/SAP/fundamental-react)
+- [GitHub repo of Angular implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-ngx)
+- [GitHub repo of Vue implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-vue)
 
 ## Description
 
@@ -30,24 +33,31 @@ Lint errors are shown in the console.
 
 Launches the test runner in the interactive watch mode.
 
-#### `npm run build`
+#### `npm test -- --coverage`
 
-Builds the app for production to the `build` folder.
+Launches the test runner and display code coverage report.
 
+#### `npm test -- --coverage --watch`
 
-## Download and Installation
+Launches the test runner and display code coverage report and interactive watch mode.
 
-#### 1. Download Fundamental UI:
+#### `npm run build`
+
+Builds the app for production to the `build` folder.
 
-`npm install --save fundamental-ui`
+## Download and Installation
 
+#### 1. Download Fiori Fundamentals:
 
-#### 2. Include the Fundamental UI CSS in your React application. In your App.css or App.scss file include the following lines:
+`npm install --save fiori-fundamentals`
 
-`@import '../node_modules/fundamental-ui/scss/icons/'`
-`@import '../node_modules/fundamental-ui/dist/fonts/'`
-`@import '../node_modules/fundamental-ui/scss/all.scss'`
+#### 2. Include the Fiori Fundamentals CSS in your React application. In your App.css or App.scss file include the following lines:
 
+```
+$fd-icons-path: "~fiori-fundamentals/scss/icons/";
+$fd-fonts-path: "~fiori-fundamentals/scss/fonts/";
+@import '../node_modules/fiori-fundamentals/scss/all.scss';
+```
 
 ## Known Issues
 
@@ -59,7 +69,7 @@ If you encounter an issue, you can [create a ticket](https://github.com/SAP/fund
 
 ## Contributing
 
-If you want to contribute, please check the [CONTRIBUTING.md](./CONTRIBUTING.md) documentation for contribution guidelines. 
+If you want to contribute, please check the [CONTRIBUTING.md](./CONTRIBUTING.md) documentation for contribution guidelines.
 
 ## License
 

diff --git a/UNIT-TESTING.md b/UNIT-TESTING.md
@@ -0,0 +1,50 @@
+# Unit Testing
+
+To help improve the stability of the Fundamental React components, unit testing and code coverage reports are created using [Jest](https://jestjs.io/) and [Enzyme](https://github.com/airbnb/enzyme)
+
+- [Set-up](#set-up)
+- [Running Tests and Code Coverage](#running-tests-and-code-coverage)
+- [Creating a unit test](#creating-a-unit-test)
+
+## Set-up
+
+To ensure that you have the proper npm modules installed for unit testing, from the terminal window:
+`npm install`
+
+## Running Tests and Code Coverage
+
+Configuration is setup to look for .test.js files in the /src/ directory.
+
+#### `npm test`
+
+Launches the test runner in the interactive watch mode.
+
+#### `npm test -- --coverage`
+
+Launches the test runner and display code coverage report. The code coverage report will only be applied to the Components main .js file. Coverage reports will not be created for .Component.js files.
+
+#### `npm test -- --coverage --watch`
+
+Launches the test runner and display code coverage report as well starts interactive watch mode.
+
+## Creating a Unit Test
+
+Depending on the component, there are different approaches to creating unit tests. The easiest way to make sure that a component is rendered with the desired output is by creating a [snapshot](https://jestjs.io/docs/en/tutorial-react#snapshot-testing). The first time a snapshot is created it will render the component based off the prop values sent to the component. Each subsequent unit test will check against the snapshot to make sure the component is rendering exactly as before.
+
+Testing user interaction of a component can be done with Enzyme and Jest. Please refer to [Enzyme's documentation](https://github.com/airbnb/enzyme#basic-usage) on how to interact with the DOM.
+
+## Viewing results
+
+You can view a nice visual representation of the code coverage status as well as see what lines are missing coverage. In the repository of your fundamental-react project navigate to <directory of fundamental-react>/coverage/lcov-report/index.html. From here you can click on the component name you want to view coverage for view the lines covered in the JS file. Placing your mouse over a highlighted line of code will display a tooltip.
+
+## Common issues
+
+### Invariant Violation: Target container is not a DOM element.
+
+This issue is usually caused because the modules being imported are not properly defined. An example of improperly defining modules to be imported is by grouping all the components needed and just referencing the whole library.
+
+Ex: `import {Popover, Time} from '../';`
+
+The correct solution is to import the modules from their defined location.
+<br/><br/>
+Ex: `import {Popover} from '../Popover/Popover'; import {Time} from '../Time/Time';`
diff --git a/assets/.gitkeep b/assets/.gitkeep
diff --git a/assets/01.png b/assets/01.png
diff --git a/assets/02.png b/assets/02.png
diff --git a/assets/03.png b/assets/03.png
diff --git a/assets/04.png b/assets/04.png
diff --git a/assets/05.png b/assets/05.png
diff --git a/assets/06.png b/assets/06.png
diff --git a/assets/07.png b/assets/07.png
diff --git a/assets/08.png b/assets/08.png
diff --git a/assets/09.png b/assets/09.png
diff --git a/assets/10.png b/assets/10.png
diff --git a/assets/11.png b/assets/11.png
diff --git a/assets/12.png b/assets/12.png
diff --git a/assets/headshot-male.jpg b/assets/headshot-male.jpg
diff --git a/assets/index.js b/assets/index.js
diff --git a/ci-scripts/unit-tests.sh b/ci-scripts/unit-tests.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+set -e
+set -o pipefail
+
+echo "-----"
+echo "Running unit tests and code coverage for core"
+exec 5>&1
+output=$(npm test src --watch=false --code-coverage --browsers=ChromeHeadless | tee /dev/fd/5)
+coverage=$(echo $output | grep -i "does not meet global threshold" || true)
+if [[ -n "$coverage" ]]; then
+    echo "Error: Tests did not meet coverage expectations"
+    exit 1
+fi
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@