From 42e9a7e49d5a1aa7077d6dd85219d570aa580b8c Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Sat, 10 Jun 2017 10:07:55 -0700
Subject: [PATCH 01/17] Add deps for jest.

---
 package.json | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0f623cc65..4c6e052ed 100644
--- a/package.json
+++ b/package.json
@@ -26,10 +26,11 @@
     "autoprefixer": "7.1.1",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "classnames": "2.2.5",
     "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.28.3",
@@ -39,6 +40,7 @@
     "gh-pages": "^1.0.0",
     "html-webpack-plugin": "2.28.0",
     "immutable": "3.8.1",
+    "jest": "^20.0.4",
     "lodash.bindall": "4.4.0",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.0",
@@ -58,6 +60,7 @@
     "react-redux": "5.0.5",
     "react-style-proptype": "3.0.0",
     "react-tabs": "1.0.0",
+    "react-test-renderer": "^15.5.4",
     "redux": "3.6.0",
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",

From b909f05d3fd5566495fe940bdbdbe339ee004370 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Sat, 10 Jun 2017 12:42:08 -0700
Subject: [PATCH 02/17] Setup jest. Tried following instructions for webpack.
 jest not working at this point.

---
 __mocks__/fileMock.js         |  3 +++
 __mocks__/styleMock.js        |  3 +++
 __tests__/green-flag.test.jsx |  6 ++++++
 package.json                  | 17 ++++++++++++++++-
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 __mocks__/fileMock.js
 create mode 100644 __mocks__/styleMock.js
 create mode 100644 __tests__/green-flag.test.jsx

diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
new file mode 100644
index 000000000..59890f6a2
--- /dev/null
+++ b/__mocks__/fileMock.js
@@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+
+module.exports = 'test-file-stub';
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
new file mode 100644
index 000000000..d988e23b7
--- /dev/null
+++ b/__mocks__/styleMock.js
@@ -0,0 +1,3 @@
+// __mocks__/styleMock.js
+
+module.exports = {};
diff --git a/__tests__/green-flag.test.jsx b/__tests__/green-flag.test.jsx
new file mode 100644
index 000000000..5b2a5b7f5
--- /dev/null
+++ b/__tests__/green-flag.test.jsx
@@ -0,0 +1,6 @@
+/* eslint-env jest */
+// TODO: Import green flag and write tests.
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(1 + 2).toBe(3);
+});
diff --git a/package.json b/package.json
index 4c6e052ed..1cd1059ed 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
     "lint": "eslint . --ext .js,.jsx",
     "start": "webpack-dev-server",
-    "test": "npm run lint && npm run build"
+    "test": "jest && npm run lint && npm run build"
   },
   "author": "Massachusetts Institute of Technology",
   "license": "BSD-3-Clause",
@@ -63,6 +63,7 @@
     "react-test-renderer": "^15.5.4",
     "redux": "3.6.0",
     "redux-throttle": "0.1.1",
+    "regenerator-runtime": "^0.10.5",
     "rimraf": "^2.6.1",
     "scratch-audio": "^0.1.0-prerelease.0",
     "scratch-blocks": "^0.1.0-prerelease.0",
@@ -76,5 +77,19 @@
     "webpack": "^2.4.1",
     "webpack-dev-server": "^2.4.1",
     "xhr": "2.4.0"
+  },
+  "jest": {
+    "verbose": true,
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
   }
 }

From d62e13a1e306ae8278eab546029c5be4fd5892a4 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Sat, 10 Jun 2017 12:54:10 -0700
Subject: [PATCH 03/17] Try going to more basic jest setup to see if we can get
 it working.

---
 package.json | 23 +++--------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 1cd1059ed..25a733a2b 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
     "lint": "eslint . --ext .js,.jsx",
     "start": "webpack-dev-server",
-    "test": "jest && npm run lint && npm run build"
+    "test": "jest"
   },
   "author": "Massachusetts Institute of Technology",
   "license": "BSD-3-Clause",
@@ -26,11 +26,10 @@
     "autoprefixer": "7.1.1",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
-    "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
     "classnames": "2.2.5",
     "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.28.3",
@@ -60,10 +59,8 @@
     "react-redux": "5.0.5",
     "react-style-proptype": "3.0.0",
     "react-tabs": "1.0.0",
-    "react-test-renderer": "^15.5.4",
     "redux": "3.6.0",
     "redux-throttle": "0.1.1",
-    "regenerator-runtime": "^0.10.5",
     "rimraf": "^2.6.1",
     "scratch-audio": "^0.1.0-prerelease.0",
     "scratch-blocks": "^0.1.0-prerelease.0",
@@ -77,19 +74,5 @@
     "webpack": "^2.4.1",
     "webpack-dev-server": "^2.4.1",
     "xhr": "2.4.0"
-  },
-  "jest": {
-    "verbose": true,
-    "moduleFileExtensions": [
-      "js",
-      "jsx"
-    ],
-    "moduleDirectories": [
-      "node_modules"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
-    }
   }
 }

From ea6d5d676637b09710eeefbf9c4f36d44aaf82ac Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Sat, 10 Jun 2017 13:20:45 -0700
Subject: [PATCH 04/17] \o/ Successfully got hello world of jest working on
 windows (in windows cmd line). For some reason git bash doesn't work.

---
 package.json                                 | 8 +++++++-
 {__mocks__ => test/__mocks__}/fileMock.js    | 0
 {__mocks__ => test/__mocks__}/styleMock.js   | 0
 {__tests__ => test/unit}/green-flag.test.jsx | 0
 4 files changed, 7 insertions(+), 1 deletion(-)
 rename {__mocks__ => test/__mocks__}/fileMock.js (100%)
 rename {__mocks__ => test/__mocks__}/styleMock.js (100%)
 rename {__tests__ => test/unit}/green-flag.test.jsx (100%)

diff --git a/package.json b/package.json
index 25a733a2b..3cc3939fe 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
     "lint": "eslint . --ext .js,.jsx",
     "start": "webpack-dev-server",
-    "test": "jest"
+    "unit-test": "jest",
+    "test": "npm run lint && npm run unit-test && npm run build"
   },
   "author": "Massachusetts Institute of Technology",
   "license": "BSD-3-Clause",
@@ -74,5 +75,10 @@
     "webpack": "^2.4.1",
     "webpack-dev-server": "^2.4.1",
     "xhr": "2.4.0"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "src/test.js"
+    ]
   }
 }
diff --git a/__mocks__/fileMock.js b/test/__mocks__/fileMock.js
similarity index 100%
rename from __mocks__/fileMock.js
rename to test/__mocks__/fileMock.js
diff --git a/__mocks__/styleMock.js b/test/__mocks__/styleMock.js
similarity index 100%
rename from __mocks__/styleMock.js
rename to test/__mocks__/styleMock.js
diff --git a/__tests__/green-flag.test.jsx b/test/unit/green-flag.test.jsx
similarity index 100%
rename from __tests__/green-flag.test.jsx
rename to test/unit/green-flag.test.jsx

From ad2ab75d6ee90f6cc3e552dd6a9588d099a8e6e7 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 13:44:34 -0700
Subject: [PATCH 05/17] WIP getting a react test working. Throws syntax error
 on svgs so need to maybe configure jest to use existing webpack config
 instead which probably properly handles svgs. - added additional plugins to
 get tests working

---
 .babelrc                      | 10 ++++++++++
 package.json                  |  3 +++
 test/unit/green-flag.test.jsx | 24 +++++++++++++++++++++---
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 .babelrc

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..53c2d4dc0
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ],
+  "plugins": [
+    "transform-es2015-destructuring",
+    "transform-object-rest-spread"
+  ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3cc3939fe..8c8f967b0 100644
--- a/package.json
+++ b/package.json
@@ -28,12 +28,14 @@
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.22.0",
     "classnames": "2.2.5",
     "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.28.3",
+    "enzyme": "^2.8.2",
     "eslint": "^3.16.1",
     "eslint-config-scratch": "^3.0.0",
     "eslint-plugin-react": "^7.0.1",
@@ -60,6 +62,7 @@
     "react-redux": "5.0.5",
     "react-style-proptype": "3.0.0",
     "react-tabs": "1.0.0",
+    "react-test-renderer": "^15.5.4",
     "redux": "3.6.0",
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
diff --git a/test/unit/green-flag.test.jsx b/test/unit/green-flag.test.jsx
index 5b2a5b7f5..dadab647b 100644
--- a/test/unit/green-flag.test.jsx
+++ b/test/unit/green-flag.test.jsx
@@ -1,6 +1,24 @@
 /* eslint-env jest */
-// TODO: Import green flag and write tests.
+const React = require('react');
+const {shallow} = require('enzyme');
+// const GreenFlag = require('../../src/components/green-flag/green-flag');
+const GreenFlag = require('../../src/containers/green-flag');
+const renderer = require('react-test-renderer');
 
-test('adds 1 + 2 to equal 3', () => {
-  expect(1 + 2).toBe(3);
+describe('GreenFlag', () => {
+  test('renders active state', () => {
+    const component = renderer.create(
+        <GreenFlag active={true}/>
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  test('triggers onClick when active', () => {
+    const onClick = jest.fn();
+    const component = shallow(
+        <GreenFlag active={true} onClick={onClick}/>
+    );
+    component.find('img').simulate('click');
+    expect(onClick).toHaveBeenCalled();
+  });
 });

From 83475bb565552a6860141b7607cb560eaa91a9e6 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 13:47:34 -0700
Subject: [PATCH 06/17] Configure Jest to mock svgs and css so that it doesn't
 throw syntax errors. This is also per recommendation in the Jest docs:
 https://facebook.github.io/jest/docs/webpack.html

---
 package.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8c8f967b0..243a07d69 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,10 @@
   "jest": {
     "testPathIgnorePatterns": [
       "src/test.js"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+    }
   }
 }

From 2abb0a40ec4fe30ad6e89f48c7cbb2eab83aa8f3 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 14:15:50 -0700
Subject: [PATCH 07/17] Got one test passing. yay!

---
 test/unit/green-flag.test.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/test/unit/green-flag.test.jsx b/test/unit/green-flag.test.jsx
index dadab647b..fa45ff4e3 100644
--- a/test/unit/green-flag.test.jsx
+++ b/test/unit/green-flag.test.jsx
@@ -1,14 +1,20 @@
 /* eslint-env jest */
 const React = require('react');
 const {shallow} = require('enzyme');
-// const GreenFlag = require('../../src/components/green-flag/green-flag');
 const GreenFlag = require('../../src/containers/green-flag');
 const renderer = require('react-test-renderer');
+const VM = require('scratch-vm');
 
 describe('GreenFlag', () => {
+  let vm;
+  beforeEach(() => {
+    // TODO(bogusred): Ask scratch team their thoughts on mocking the VM.
+    vm = new VM();
+  });
+
   test('renders active state', () => {
     const component = renderer.create(
-        <GreenFlag active={true}/>
+        <GreenFlag active={true} vm={vm}/>
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -16,7 +22,7 @@ describe('GreenFlag', () => {
   test('triggers onClick when active', () => {
     const onClick = jest.fn();
     const component = shallow(
-        <GreenFlag active={true} onClick={onClick}/>
+        <GreenFlag active={true} onClick={onClick} vm={vm}/>
     );
     component.find('img').simulate('click');
     expect(onClick).toHaveBeenCalled();

From c5a1a157dfd4b78d4ba56cf124b2b628b610383c Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 14:23:38 -0700
Subject: [PATCH 08/17] Got other test passing. all green!

---
 test/unit/green-flag.test.jsx | 38 +++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/test/unit/green-flag.test.jsx b/test/unit/green-flag.test.jsx
index fa45ff4e3..313f5e45f 100644
--- a/test/unit/green-flag.test.jsx
+++ b/test/unit/green-flag.test.jsx
@@ -6,25 +6,25 @@ const renderer = require('react-test-renderer');
 const VM = require('scratch-vm');
 
 describe('GreenFlag', () => {
-  let vm;
-  beforeEach(() => {
-    // TODO(bogusred): Ask scratch team their thoughts on mocking the VM.
-    vm = new VM();
-  });
+    let vm;
+    beforeEach(() => {
+        // TODO(bogusred): Ask scratch team their thoughts on mocking the VM.
+        vm = new VM();
+    });
 
-  test('renders active state', () => {
-    const component = renderer.create(
-        <GreenFlag active={true} vm={vm}/>
-    );
-    expect(component.toJSON()).toMatchSnapshot();
-  });
+    test('renders active state', () => {
+        const component = renderer.create(
+            <GreenFlag active={true} vm={vm}/>
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
 
-  test('triggers onClick when active', () => {
-    const onClick = jest.fn();
-    const component = shallow(
-        <GreenFlag active={true} onClick={onClick} vm={vm}/>
-    );
-    component.find('img').simulate('click');
-    expect(onClick).toHaveBeenCalled();
-  });
+    test('triggers onClick when active', () => {
+        const onClick = jest.fn();
+        const componentShallowWrapper = shallow(
+            <GreenFlag active={true} onClick={onClick} vm={vm}/>
+        );
+        componentShallowWrapper.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+    });
 });

From 36603e616d30ad9d4588c2c9c9630efdbc030954 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 14:37:58 -0700
Subject: [PATCH 09/17] - Add TODOs for next set of tests. - Add documentation
 on how to run tests.

---
 README.md                     | 13 +++++++++++++
 test/unit/green-flag.test.jsx | 11 +++++++++++
 2 files changed, 24 insertions(+)

diff --git a/README.md b/README.md
index a48de2ef4..4db3a2138 100644
--- a/README.md
+++ b/README.md
@@ -29,9 +29,22 @@ npm start
 Then go to [http://localhost:8601/](http://localhost:8601/) - the playground outputs the default GUI component
 
 ## Testing
+NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.
+
+Run linter, unit tests, and build.
 ```bash
 npm test
 ```
 
+Run unit tests in isolation.
+```bash
+npm run unit-test
+```
+
+Run unit tests in watch mode (watches for code changes and continuously runs tests). See [jest cli docs](https://facebook.github.io/jest/docs/en/cli.html#content) for more options.
+```bash
+npm run unit-test -- --watch
+```
+
 ## Donate
 We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
diff --git a/test/unit/green-flag.test.jsx b/test/unit/green-flag.test.jsx
index 313f5e45f..72530872c 100644
--- a/test/unit/green-flag.test.jsx
+++ b/test/unit/green-flag.test.jsx
@@ -19,6 +19,13 @@ describe('GreenFlag', () => {
         expect(component.toJSON()).toMatchSnapshot();
     });
 
+    test('renders inactive state', () => {
+        const component = renderer.create(
+            <GreenFlag active={false} vm={vm}/>
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
     test('triggers onClick when active', () => {
         const onClick = jest.fn();
         const componentShallowWrapper = shallow(
@@ -27,4 +34,8 @@ describe('GreenFlag', () => {
         componentShallowWrapper.simulate('click');
         expect(onClick).toHaveBeenCalled();
     });
+
+    // TODO(bogusred): Test for handles key events.
+    // TODO(bogusred): Test project run start.
+    // TODO(bogusred): Test project run stop.
 });

From 222f601ddfe19c86fa927c64b7716efccaba9b6d Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 14:41:04 -0700
Subject: [PATCH 10/17] Remove unused babel plugin.

---
 .babelrc     | 1 -
 package.json | 1 -
 2 files changed, 2 deletions(-)

diff --git a/.babelrc b/.babelrc
index 53c2d4dc0..f9e96ea25 100644
--- a/.babelrc
+++ b/.babelrc
@@ -4,7 +4,6 @@
     "react"
   ],
   "plugins": [
-    "transform-es2015-destructuring",
     "transform-object-rest-spread"
   ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 243a07d69..82ad3b204 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.0.0",
-    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.22.0",

From 7da56096e0897add240f3b04aa1e2ff90e74c4ae Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 14:50:43 -0700
Subject: [PATCH 11/17] Tell linter to ignore unused imports.

---
 test/unit/green-flag.test.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/unit/green-flag.test.jsx b/test/unit/green-flag.test.jsx
index 72530872c..d4a6e371f 100644
--- a/test/unit/green-flag.test.jsx
+++ b/test/unit/green-flag.test.jsx
@@ -1,14 +1,14 @@
 /* eslint-env jest */
-const React = require('react');
+const React = require('react'); // eslint-disable-line no-unused-vars
 const {shallow} = require('enzyme');
-const GreenFlag = require('../../src/containers/green-flag');
+const GreenFlag = require('../../src/containers/green-flag'); // eslint-disable-line no-unused-vars
 const renderer = require('react-test-renderer');
 const VM = require('scratch-vm');
 
 describe('GreenFlag', () => {
     let vm;
     beforeEach(() => {
-        // TODO(bogusred): Ask scratch team their thoughts on mocking the VM.
+        // @todo: Ask scratch team their thoughts on mocking the VM.
         vm = new VM();
     });
 
@@ -35,7 +35,7 @@ describe('GreenFlag', () => {
         expect(onClick).toHaveBeenCalled();
     });
 
-    // TODO(bogusred): Test for handles key events.
-    // TODO(bogusred): Test project run start.
-    // TODO(bogusred): Test project run stop.
+    // @todo: Test for handles key events.
+    // @todo: Test project run start.
+    // @todo: Test project run stop.
 });

From 0518f31871473837953f3c4f55925381a0533192 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 15:12:50 -0700
Subject: [PATCH 12/17] Add documentation links for Jest and Enzyme.

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 265965943..b478b1e47 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,8 @@ Run unit tests in watch mode (watches for code changes and continuously runs tes
 npm run unit-test -- --watch
 ```
 
+You may want to review the documentation for [Jest](https://facebook.github.io/jest/docs/en/api.html) and [Enzyme](http://airbnb.io/enzyme/docs/api/) as you write your tests.
+
 ## Publishing to GitHub Pages
 
 You can publish the GUI to github.io so that others on the Internet can view it.

From 49fc648c14c4e1d6410aceb3099e56b0991367c5 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Tue, 13 Jun 2017 15:20:27 -0700
Subject: [PATCH 13/17] Add missing snapshot.

---
 .../__snapshots__/green-flag.test.jsx.snap    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 test/unit/__snapshots__/green-flag.test.jsx.snap

diff --git a/test/unit/__snapshots__/green-flag.test.jsx.snap b/test/unit/__snapshots__/green-flag.test.jsx.snap
new file mode 100644
index 000000000..c07e9f2c6
--- /dev/null
+++ b/test/unit/__snapshots__/green-flag.test.jsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GreenFlag renders active state 1`] = `
+<img
+  className="undefined"
+  onClick={[Function]}
+  src="test-file-stub"
+  title="Go"
+/>
+`;
+
+exports[`GreenFlag renders inactive state 1`] = `
+<img
+  className=""
+  onClick={[Function]}
+  src="test-file-stub"
+  title="Go"
+/>
+`;

From e9452cb3e47acead4163b278302ea6f3d315e8c7 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Thu, 29 Jun 2017 19:01:45 -0700
Subject: [PATCH 14/17] Move green flag test to containers directory to make it
 clearer it's testing the container and not the component.

---
 .../{ => containers}/__snapshots__/green-flag.test.jsx.snap  | 4 ++--
 test/unit/{ => containers}/green-flag.test.jsx               | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)
 rename test/unit/{ => containers}/__snapshots__/green-flag.test.jsx.snap (65%)
 rename test/unit/{ => containers}/green-flag.test.jsx (85%)

diff --git a/test/unit/__snapshots__/green-flag.test.jsx.snap b/test/unit/containers/__snapshots__/green-flag.test.jsx.snap
similarity index 65%
rename from test/unit/__snapshots__/green-flag.test.jsx.snap
rename to test/unit/containers/__snapshots__/green-flag.test.jsx.snap
index c07e9f2c6..21b5a43f6 100644
--- a/test/unit/__snapshots__/green-flag.test.jsx.snap
+++ b/test/unit/containers/__snapshots__/green-flag.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`GreenFlag renders active state 1`] = `
+exports[`GreenFlag Container renders active state 1`] = `
 <img
   className="undefined"
   onClick={[Function]}
@@ -9,7 +9,7 @@ exports[`GreenFlag renders active state 1`] = `
 />
 `;
 
-exports[`GreenFlag renders inactive state 1`] = `
+exports[`GreenFlag Container renders inactive state 1`] = `
 <img
   className=""
   onClick={[Function]}
diff --git a/test/unit/green-flag.test.jsx b/test/unit/containers/green-flag.test.jsx
similarity index 85%
rename from test/unit/green-flag.test.jsx
rename to test/unit/containers/green-flag.test.jsx
index d4a6e371f..3c6ebfe9b 100644
--- a/test/unit/green-flag.test.jsx
+++ b/test/unit/containers/green-flag.test.jsx
@@ -1,14 +1,13 @@
 /* eslint-env jest */
 const React = require('react'); // eslint-disable-line no-unused-vars
 const {shallow} = require('enzyme');
-const GreenFlag = require('../../src/containers/green-flag'); // eslint-disable-line no-unused-vars
+const GreenFlag = require('../../../src/containers/green-flag'); // eslint-disable-line no-unused-vars
 const renderer = require('react-test-renderer');
 const VM = require('scratch-vm');
 
-describe('GreenFlag', () => {
+describe('GreenFlag Container', () => {
     let vm;
     beforeEach(() => {
-        // @todo: Ask scratch team their thoughts on mocking the VM.
         vm = new VM();
     });
 

From 192e79ea22564d1916a61e6c125760d5618f5dad Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Thu, 29 Jun 2017 19:25:36 -0700
Subject: [PATCH 15/17] Add snapshot test for button component.

---
 .../__snapshots__/button.test.jsx.snap        |  9 +++++++
 test/unit/components/button.test.jsx          | 24 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 test/unit/components/__snapshots__/button.test.jsx.snap
 create mode 100644 test/unit/components/button.test.jsx

diff --git a/test/unit/components/__snapshots__/button.test.jsx.snap b/test/unit/components/__snapshots__/button.test.jsx.snap
new file mode 100644
index 000000000..5b928b4c4
--- /dev/null
+++ b/test/unit/components/__snapshots__/button.test.jsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonComponent matches snapshot 1`] = `
+<span
+  className=""
+  onClick={[Function]}
+  role="button"
+/>
+`;
diff --git a/test/unit/components/button.test.jsx b/test/unit/components/button.test.jsx
new file mode 100644
index 000000000..80b20f50f
--- /dev/null
+++ b/test/unit/components/button.test.jsx
@@ -0,0 +1,24 @@
+/* eslint-env jest */
+const React = require('react'); // eslint-disable-line no-unused-vars
+const {shallow} = require('enzyme');
+const ButtonComponent = require('../../../src/components/button/button'); // eslint-disable-line no-unused-vars
+const renderer = require('react-test-renderer');
+
+describe('ButtonComponent', () => {
+    test('matches snapshot', () => {
+        const onClick = jest.fn();
+        const component = renderer.create(
+            <ButtonComponent onClick={onClick}/>
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('triggers callback when clicked', () => {
+        const onClick = jest.fn();
+        const componentShallowWrapper = shallow(
+            <ButtonComponent onClick={onClick}/>
+        );
+        componentShallowWrapper.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+    });
+});

From 10b579e9e28eff7601f159a6af76d66a4660fe85 Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Thu, 29 Jun 2017 20:33:48 -0700
Subject: [PATCH 16/17] Add unit tests for sprite selector item component and
 sprite selector item container

---
 package.json                                  |  1 +
 .../sprite-selector-item.test.jsx.snap        | 43 ++++++++++++
 .../components/sprite-selector-item.test.jsx  | 70 +++++++++++++++++++
 .../containers/sprite-selector-item.test.jsx  | 59 ++++++++++++++++
 4 files changed, 173 insertions(+)
 create mode 100644 test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
 create mode 100644 test/unit/components/sprite-selector-item.test.jsx
 create mode 100644 test/unit/containers/sprite-selector-item.test.jsx

diff --git a/package.json b/package.json
index 84c7ff765..b6c5a2ee9 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "react-tabs": "1.0.0",
     "react-test-renderer": "^15.5.4",
     "redux": "3.6.0",
+    "redux-mock-store": "^1.2.3",
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "latest",
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
new file mode 100644
index 000000000..39146df34
--- /dev/null
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
+<div
+  className="ponies undefined"
+  onClick={[Function]}
+  style={
+    Object {
+      "alignContent": undefined,
+      "alignItems": undefined,
+      "alignSelf": undefined,
+      "flexBasis": undefined,
+      "flexDirection": undefined,
+      "flexGrow": undefined,
+      "flexShrink": undefined,
+      "flexWrap": undefined,
+      "height": undefined,
+      "justifyContent": undefined,
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className=""
+    onClick={[Function]}
+  >
+    <img
+      className={undefined}
+      src="test-file-stub"
+    />
+  </div>
+  <canvas
+    className={undefined}
+    height={32}
+    width={32}
+  />
+  <div
+    className={undefined}
+  >
+    Pony sprite
+  </div>
+</div>
+`;
diff --git a/test/unit/components/sprite-selector-item.test.jsx b/test/unit/components/sprite-selector-item.test.jsx
new file mode 100644
index 000000000..ee4418008
--- /dev/null
+++ b/test/unit/components/sprite-selector-item.test.jsx
@@ -0,0 +1,70 @@
+/* eslint-env jest */
+const React = require('react'); // eslint-disable-line no-unused-vars
+const {shallow} = require('enzyme');
+const SpriteSelectorItemComponent = require('../../../src/components/sprite-selector-item/sprite-selector-item'); // eslint-disable-line no-unused-vars
+const CostumeCanvas = require('../../../src/components/costume-canvas/costume-canvas'); // eslint-disable-line no-unused-vars
+const CloseButton = require('../../../src/components/close-button/close-button'); // eslint-disable-line no-unused-vars
+const renderer = require('react-test-renderer');
+
+describe('SpriteSelectorItemComponent', () => {
+    let className;
+    let costumeURL;
+    let name;
+    let onClick;
+    let onDeleteButtonClick;
+    let selected;
+
+    // Wrap this in a function so it gets test specific states and can be reused.
+    const getComponent = function () {
+        return <SpriteSelectorItemComponent
+            className={className}
+            costumeURL={costumeURL}
+            name={name}
+            onClick={onClick}
+            onDeleteButtonClick={onDeleteButtonClick}
+            selected={selected}/>;
+    };
+
+    beforeEach(() => {
+        className = 'ponies';
+        costumeURL = 'https://scratch.mit.edu/foo/bar/pony';
+        name = 'Pony sprite';
+        onClick = jest.fn();
+        onDeleteButtonClick = jest.fn();
+        selected = true;
+    });
+
+    test('matches snapshot when selected', () => {
+        const component = renderer.create(getComponent());
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('does not have a close box when not selected', () => {
+        selected = false;
+        const componentShallowWrapper = shallow(getComponent());
+        expect(componentShallowWrapper.find(CloseButton).exists()).toBe(false);
+    });
+
+    test('triggers callback when Box component is clicked', () => {
+        const componentShallowWrapper = shallow(getComponent());
+        componentShallowWrapper.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    test('triggers callback when CloseButton component is clicked', () => {
+        const componentShallowWrapper = shallow(getComponent());
+        componentShallowWrapper.find(CloseButton).simulate('click');
+        expect(onDeleteButtonClick).toHaveBeenCalled();
+    });
+
+    test('creates a CostumeCanvas when a costume url is defined', () => {
+        const componentShallowWrapper = shallow(getComponent());
+        expect(componentShallowWrapper.find(CostumeCanvas).exists()).toBe(true);
+    });
+
+    test('does not create a CostumeCanvas when a costume url is null', () => {
+        costumeURL = null;
+        const componentShallowWrapper = shallow(getComponent());
+        expect(componentShallowWrapper.find(CostumeCanvas).exists()).toBe(false);
+    });
+});
diff --git a/test/unit/containers/sprite-selector-item.test.jsx b/test/unit/containers/sprite-selector-item.test.jsx
new file mode 100644
index 000000000..d05e22111
--- /dev/null
+++ b/test/unit/containers/sprite-selector-item.test.jsx
@@ -0,0 +1,59 @@
+/* eslint-env jest */
+const React = require('react'); // eslint-disable-line no-unused-vars
+const {mount} = require('enzyme');
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+
+const SpriteSelectorItem = require('../../../src/containers/sprite-selector-item'); // eslint-disable-line no-unused-vars
+const CloseButton = require('../../../src/components/close-button/close-button'); // eslint-disable-line no-unused-vars
+
+describe('SpriteSelectorItem Container', () => {
+    const mockStore = configureStore();
+    let className;
+    let costumeURL;
+    let name;
+    let onClick;
+    let onDeleteButtonClick;
+    let selected;
+    let id;
+    let store;
+    // Wrap this in a function so it gets test specific states and can be reused.
+    const getContainer = function () {
+        return <Provider store={store}><SpriteSelectorItem
+            className={className}
+            costumeURL={costumeURL}
+            id={id}
+            name={name}
+            onClick={onClick}
+            onDeleteButtonClick={onDeleteButtonClick}
+            selected={selected}/></Provider>;
+    };
+
+    beforeEach(() => {
+        store = mockStore();
+        className = 'ponies';
+        costumeURL = 'https://scratch.mit.edu/foo/bar/pony';
+        id = 1337;
+        name = 'Pony sprite';
+        onClick = jest.fn();
+        onDeleteButtonClick = jest.fn();
+        selected = true;
+        // Mock window.confirm() which is called when the close button is clicked.
+        global.confirm = jest.fn(() => true);
+    });
+
+    test('should confirm if the user really wants to delete the sprite', () => {
+        const wrapper = mount(getContainer());
+        wrapper.find(CloseButton).simulate('click');
+        expect(global.confirm).toHaveBeenCalled();
+        expect(onDeleteButtonClick).toHaveBeenCalledWith(1337);
+    });
+
+    test('should not delete the sprite if the user cancels', () => {
+        global.confirm = jest.fn(() => false);
+        const wrapper = mount(getContainer());
+        wrapper.find(CloseButton).simulate('click');
+        expect(global.confirm).toHaveBeenCalled();
+        expect(onDeleteButtonClick).not.toHaveBeenCalled();
+    });
+});

From 821df8a226f32c1a065528a842927cea3e0bc3dd Mon Sep 17 00:00:00 2001
From: Susie Sahim <bogusred@paperdemon.com>
Date: Thu, 29 Jun 2017 20:38:47 -0700
Subject: [PATCH 17/17] Fix lint

---
 test/unit/components/sprite-selector-item.test.jsx | 6 ++++--
 test/unit/containers/sprite-selector-item.test.jsx | 5 +++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/test/unit/components/sprite-selector-item.test.jsx b/test/unit/components/sprite-selector-item.test.jsx
index ee4418008..2e60f09b1 100644
--- a/test/unit/components/sprite-selector-item.test.jsx
+++ b/test/unit/components/sprite-selector-item.test.jsx
@@ -1,8 +1,10 @@
 /* eslint-env jest */
 const React = require('react'); // eslint-disable-line no-unused-vars
 const {shallow} = require('enzyme');
-const SpriteSelectorItemComponent = require('../../../src/components/sprite-selector-item/sprite-selector-item'); // eslint-disable-line no-unused-vars
-const CostumeCanvas = require('../../../src/components/costume-canvas/costume-canvas'); // eslint-disable-line no-unused-vars
+const SpriteSelectorItemComponent = require( // eslint-disable-line no-unused-vars
+    '../../../src/components/sprite-selector-item/sprite-selector-item');
+const CostumeCanvas = require( // eslint-disable-line no-unused-vars
+    '../../../src/components/costume-canvas/costume-canvas');
 const CloseButton = require('../../../src/components/close-button/close-button'); // eslint-disable-line no-unused-vars
 const renderer = require('react-test-renderer');
 
diff --git a/test/unit/containers/sprite-selector-item.test.jsx b/test/unit/containers/sprite-selector-item.test.jsx
index d05e22111..9e62199b1 100644
--- a/test/unit/containers/sprite-selector-item.test.jsx
+++ b/test/unit/containers/sprite-selector-item.test.jsx
@@ -2,9 +2,10 @@
 const React = require('react'); // eslint-disable-line no-unused-vars
 const {mount} = require('enzyme');
 import configureStore from 'redux-mock-store';
-import {Provider} from 'react-redux';
+import {Provider} from 'react-redux'; // eslint-disable-line no-unused-vars
 
-const SpriteSelectorItem = require('../../../src/containers/sprite-selector-item'); // eslint-disable-line no-unused-vars
+const SpriteSelectorItem = require( // eslint-disable-line no-unused-vars
+    '../../../src/containers/sprite-selector-item');
 const CloseButton = require('../../../src/components/close-button/close-button'); // eslint-disable-line no-unused-vars
 
 describe('SpriteSelectorItem Container', () => {