YahooArchive / mendel

A build toolchain for experimentation on isomorphic web applications with tree-inheritance and multivariate support.
MIT License
88 stars 25 forks source link

Tests break as mendel-mocha doesnt support to require setup files #116

Closed anuragdamle closed 7 years ago

anuragdamle commented 7 years ago

Tried to use mendel-mocha-runner for server Tests, but i see that mocha-runner doesn't have support to require files, that setup environment for mocha to run.

The below commit helps you to reproduce this error. https://github.com/yahoo/mendel/commit/59ef318d4a31955a0b76745f9a621cb9b46bce13

Attaching screenshot.

screen shot 2017-06-01 at 3 24 25 pm
irae commented 7 years ago

did you try with https://github.com/yahoo/mendel/pull/114 ?

irae commented 7 years ago

Hey, @anuragdamle -- works for me no problem Don't forget to npm install stuff.

I did the following on top of PR#114:

diff --git a/examples/full-example/isomorphic/variations/bucket_A/components/_test_/button_test.js b/examples/full-example/isomorphic/variations/bucket_A/components/_test_/button_test.js
index 6b5e3bc..1c27ed5 100644
--- a/examples/full-example/isomorphic/variations/bucket_A/components/_test_/button_test.js
+++ b/examples/full-example/isomorphic/variations/bucket_A/components/_test_/button_test.js
@@ -8,7 +8,13 @@ import {
     renderIntoDocument
 } from 'react-addons-test-utils';
 import Button from '../button';
-import {expect} from 'chai';
+import chai from 'chai';
+import sinon from 'sinon';
+const sinonChai = require('sinon-chai');
+chai.use(sinonChai);
+
+const expect = chai.expect;
+const stub = sinon.stub;

 describe("Button bucket_A", function() {
     beforeEach(function() {
@@ -30,4 +36,12 @@ describe("Button bucket_A", function() {
         const button = renderIntoDocument(<Button>foo</Button>);
         expect(this.getInnerText(button)).to.contain('foo');
     });
+    it("componentDidMount calls onMount prop", function() {
+        const myStub = stub();
+        const button = renderIntoDocument(
+            <Button onMount={myStub}>foo</Button>
+        );
+        expect(myStub).to.have.been.called;
+        expect(this.getInnerText(button)).to.contain('foo');
+    });
 });
diff --git a/examples/full-example/isomorphic/variations/bucket_A/components/button.js b/examples/full-example/isomorphic/variations/bucket_A/components/button.js
index 1545c7e..a912c6c 100644
--- a/examples/full-example/isomorphic/variations/bucket_A/components/button.js
+++ b/examples/full-example/isomorphic/variations/bucket_A/components/button.js
@@ -14,6 +14,17 @@ class Button extends React.Component {
             </button>
         );
     }
+
+    componentDidMount() {
+        const {onMount} = this.props;
+        if (onMount) {
+            onMount();
+        }
+    }
 }

+Button.propTypes = {
+  onMount: React.PropTypes.func
+};
+
 export default Button;
diff --git a/examples/full-example/package.json b/examples/full-example/package.json
index 28a1338..4752354 100644
--- a/examples/full-example/package.json
+++ b/examples/full-example/package.json
@@ -65,6 +65,7 @@
     "nodemon": "^1.9.2",
     "react-addons-test-utils": "^15.4.2",
     "rtlcss": "^2.1.2",
+    "sinon": "^2.3.2",
     "watchify": "^3.9.0"
   },
   "babel": {

Got the following results:

full-example $ npm run test-dev

> mendel-full-example@3.0.0 test-dev /Users/irae/code/mendel/examples/full-example
> mendel-mocha --prelude test/setup/jsdom.js **/_test_/*.js --watch

./main js
[Mendel] Synced
  toolbar feature_B
    ✓ contains 3 buttons

  toolbar
    ✓ contains a button with correct label

  Button
    ✓ renders with children

  Button bucket_A
    ✓ Adds suffix to content
    ✓ global counter incremented
    ✓ renders with children
Warning: Unknown prop `onMount` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by Button)
    in Button
    ✓ componentDidMount calls onMount prop

  7 passing (80ms)

I think you did something funky on beforeEach and afterEach. I think full example don't need to support that. this.sandbox is a pattern that hides the testing framework and therefore harder to understand than like I showed above.