Jest tests (RyanNoelk#171)

* adding some jest tests

* fixing tests and the code

* Prevent filters from breaking when the page is small

* updating readme and lock file

* playing around with tests

* updating tests

* adding jest test for ratings and mocks

* adding more rating tests

* removing data file and making the data simpler

* adding test for recipe

* using data file for testing

* updating test names

* semi-colons

.gitignore

@@ -18,6 +18,7 @@ frontend/.DS_Store
 static-files/
 database/
 frontend/build/
+frontend/jest/
 
 servies/static-files/
 servies/side-media/

.travis.yml

@@ -16,3 +16,4 @@ before_install:
 
 script:
 - docker-compose -f docker-compose-test.yml -p test run --rm --entrypoint 'bash tests.sh' api
+- docker-compose -f docker-compose-test.yml -p test run --rm --entrypoint 'npm test' node

README.md

@@ -64,9 +64,8 @@ If you want to add some test data we can load a few recipes and some news data.
 
 # Running tests
 
-## API
 
-API tests run in their own container with the following command (`-p tests` is to use a different prefix
+Tests run in their own container with the following command (`-p tests` is to use a different prefix
 from the normal containers to avoid overlap):
 
 ```bash
@@ -85,6 +84,8 @@ Or to just get the response code (`0` for success/no errors):
 docker wait tests_api_1
 ```
 
+## API
+
 To avoid the docker startup overhead or for more fine-grained control of which tests to run:
 
 ```bash
@@ -93,6 +94,15 @@ docker-compose -f docker-compose-test.yml -p test run --rm api bash
 ./manage.py test -k
 ```
 
+## React
+
+We are using jest to run the tests as of right now. To avoid the docker startup overhead or for more fine-grained control of which tests to run:
+
+```bash
+docker-compose -f docker-compose-test.yml -p test run --rm node bash
+npm test
+```
+
 # Contributing
 
 All contributions are welcome! If you are are having an problem or find a bug please create an issue in github. If you would like to contribute, feel free to grab any unassigned issue with github issues.

docker-compose-test.yml

@@ -11,6 +11,17 @@ services:
       - db
     env_file:
       env_test.list
+  node:
+    build: frontend/
+    command: npm start
+    volumes:
+      - node_modules:/code/node_modules
+    depends_on:
+      - api
+    ports:
+      - "8080:8080"
+    env_file:
+      env_test.list
   db:
     image: mariadb
     volumes:

frontend/jest_mocks/fileMock.js

@@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+
+module.exports = 'test-file-stub';

frontend/jest_mocks/styleMock.js

@@ -0,0 +1,3 @@
+// __mocks__/styleMock.js
+
+module.exports = {};

frontend/modules/recipe/components/Directions.js

@@ -3,7 +3,7 @@ import React from 'react'
 export default React.createClass({
   getInitialState: function() {
     return {
-      data: []
+      data: this.props.data || []
     };
   },
 

frontend/modules/recipe/components/Ingredients.js

@@ -3,7 +3,7 @@ import React from 'react'
 export default React.createClass({
   getInitialState: function() {
     return {
-      data: []
+      data: this.props.data || []
     };
   },
 

frontend/modules/recipe/tests/Directions.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Directions from '../components/Directions';
+import renderer from 'react-test-renderer';
+
+import data from './data';
+
+test('Direction component test', () => {
+  const component = renderer.create(
+    <Directions data={ data.directions }/>
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});

frontend/modules/recipe/tests/Ingredients.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Ingredients from '../components/Ingredients';
+import renderer from 'react-test-renderer';
+
+import data from './data';
+
+test('Ingredient component test', () => {
+  const component = renderer.create(
+    <Ingredients data={ data.ingredients }/>
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});

frontend/modules/recipe/tests/Ratings.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Ratings from '../components/Ratings';
+import renderer from 'react-test-renderer';
+
+test('2 Star Rating test', () => {
+  const component = renderer.create(
+    <Ratings stars={ 2 }/>
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('0 Star Rating test', () => {
+  const component = renderer.create(
+    <Ratings stars={ -3 }/>
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('4 Star Rating test', () => {
+  const component = renderer.create(
+    <Ratings stars={ 4 }/>
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('5 Star Rating test', () => {
+  const component = renderer.create(
+    <Ratings stars={ 24 }/>
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});

frontend/modules/recipe/tests/__snapshots__/Directions.test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Direction component test 1`] = `
+<ol
+  className="directions"
+>
+  <li
+    className="direction"
+  >
+    Brown the ground pork and ground sirlion in a medium pan. Add a teaspoon of sereano pepper while browning the meat. Season with kosher salt and pepper.
+  </li>
+  <li
+    className="direction"
+  >
+    Chop the onion, bell pepper and one Serrano pepper and place them in a large pot.
+  </li>
+  <li
+    className="direction"
+  >
+    Open up and drain both cans of kidney beans and add them to the large pot.
+  </li>
+  <li
+    className="direction"
+  >
+    Open up both cans of stewed chili style tomatoes and add them to the pot.
+  </li>
+  <li
+    className="direction"
+  >
+    Drain the grease away from the browned meat and add the meat to the pot.
+  </li>
+  <li
+    className="direction"
+  >
+    Pour in the tomato juice over the meat mixture.
+  </li>
+  <li
+    className="direction"
+  >
+    Add kosher salt, black pepper, two table spoons of chili powder, and two teaspoons of ground cumin. Stir well.
+  </li>
+  <li
+    className="direction"
+  >
+    Cook slowly over medium low heat for an hour. If it starts to bubble turn down the heat. Taste during the cooking process to check the seasoning add more to taste.
+  </li>
+</ol>
+`;

frontend/modules/recipe/tests/__snapshots__/Ingredients.test.js.snap

@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ingredient component test 1`] = `
+<ul
+  className="ingredients"
+>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    dash
+     
+    black pepper
+  </li>
+  <li
+    className="ingredient"
+  >
+    4
+     
+    tablespoons
+     
+    chili powder
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    tablespoon
+     
+    cumin
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    can
+     
+    dark kidney beans
+  </li>
+  <li
+    className="ingredient"
+  >
+    2
+     
+    cans
+     
+    diced tomatos
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    whole
+     
+    green bell pepper
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    pound
+     
+    ground pork
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    pound
+     
+    ground sirloin
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    dash
+     
+    kosher salt
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    can
+     
+    light kidney beans
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    whole
+     
+    serrano pepper 
+  </li>
+  <li
+    className="ingredient"
+  >
+    1
+     
+    whole
+     
+    white onion
+  </li>
+</ul>
+`;