├── .gitignore ├── app ├── dispatcher │ └── app_dispatcher.js └── stores │ ├── user_store.js │ └── __tests__ │ └── user_store.test.js ├── README.md ├── karma.conf.js ├── package.json └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /app/dispatcher/app_dispatcher.js: -------------------------------------------------------------------------------- 1 | const Dispatcher = require("flux/lib/Dispatcher"); 2 | const AppDispatcher = new Dispatcher(); 3 | module.exports = AppDispatcher; 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flux-jasmine-rewire-example 2 | An example repo showing how to test [Flux](http://facebook.github.io/flux/) stores without [Jest](http://facebook.github.io/jest/), using [Jasmine](http://jasmine.github.io/), [Karma](karma-runner.github.io) & [rewire](https://github.com/jhnns/rewire) instead. 3 | 4 | Based on [this blog post](http://bensmithett.com/testing-flux-stores-without-jest/). 5 | 6 | You need Chrome installed, then you can run the tests: 7 | 8 | ``` 9 | npm install 10 | npm test 11 | ``` 12 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | const RewireWebpackPlugin = require("rewire-webpack"); 2 | 3 | const webpackConfig = { 4 | module: { 5 | loaders: [ 6 | { 7 | test: /\.js$/, 8 | exclude: /node_modules/, 9 | loaders: ["babel-loader"] 10 | } 11 | ] 12 | }, 13 | plugins: [new RewireWebpackPlugin()] 14 | }; 15 | 16 | const karmaConfig = function (config) { 17 | config.set({ 18 | basePath: "", 19 | frameworks: ["jasmine"], 20 | reporters: ["progress"], 21 | port: 9876, 22 | colors: true, 23 | logLevel: config.LOG_INFO, 24 | autoWatch: false, 25 | browsers: ["Chrome"], 26 | singleRun: true, 27 | files: ["app/**/*.test.js"], 28 | preprocessors: { 29 | "app/**/*.test.js": ["webpack"] 30 | }, 31 | webpack: webpackConfig, 32 | plugins: [ 33 | require("karma-webpack"), 34 | require("karma-jasmine"), 35 | require("karma-chrome-launcher") 36 | ] 37 | }); 38 | }; 39 | 40 | module.exports = karmaConfig; 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flux-jasmine-rewire-example", 3 | "version": "1.0.0", 4 | "description": "An example repo showing how to test Flux stores without Jest, using Jasmine & Rewire instead.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "./node_modules/karma/bin/karma start" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/bensmithett/flux-jasmine-rewire-example.git" 12 | }, 13 | "author": "Ben Smithett", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "babel-core": "^4.4.5", 17 | "babel-loader": "^4.0.0", 18 | "jasmine-core": "^2.2.0", 19 | "karma": "^0.12.31", 20 | "karma-chrome-launcher": "^0.1.7", 21 | "karma-jasmine": "^0.3.5", 22 | "karma-webpack": "^1.5.0", 23 | "rewire": "^2.3.1", 24 | "rewire-webpack": "^1.0.0", 25 | "webpack": "^1.5.3" 26 | }, 27 | "dependencies": { 28 | "flux": "^2.0.1", 29 | "object-assign": "^2.0.0", 30 | "react": "^0.12.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ben Smithett 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /app/stores/user_store.js: -------------------------------------------------------------------------------- 1 | const EventEmitter = require("events").EventEmitter; 2 | const assign = require("object-assign"); 3 | const AppDispatcher = require("../dispatcher/app_dispatcher"); 4 | 5 | // Create the internal store 6 | let _store = { 7 | users: [] 8 | }; 9 | 10 | // Create the registered callback in the module's 11 | // top level scope so rewire can find it 12 | const registeredCallback = function (payload) { 13 | const action = payload.action; 14 | 15 | switch (action.type) { 16 | case "ADD_USER": 17 | _store.users.push(action.username) 18 | break; 19 | 20 | case "REMOVE_USER": 21 | const index = _store.users.indexOf(action.username); 22 | if (index !== -1) { 23 | _store.users.splice(index, 1); 24 | } 25 | break; 26 | } 27 | }; 28 | 29 | // Register the callback 30 | AppDispatcher.register(registeredCallback); 31 | 32 | // Define the store's public getter methods 33 | const UserStore = assign({}, EventEmitter.prototype, { 34 | getUserCount () { 35 | return _store.users.length; 36 | }, 37 | 38 | getMostRecentUser () { 39 | return _store.users[_store.users.length - 1]; 40 | } 41 | }); 42 | 43 | // Export the public API 44 | module.exports = UserStore; 45 | -------------------------------------------------------------------------------- /app/stores/__tests__/user_store.test.js: -------------------------------------------------------------------------------- 1 | const rewire = require("rewire"); 2 | 3 | // In this store test we want to check that the store updates its state 4 | // in response to a Flux action being dispatched. 5 | 6 | // Since stores have no public setter API, we need a reference to the 7 | // stores action handler, so that we can call it with some fake 8 | // action payloads. 9 | 10 | // Then we can use the store's public getters to check that the action 11 | // resulted in the correct internal update. 12 | 13 | describe("UserStore", function () { 14 | beforeEach(function () { 15 | // rewire returns a new instance each time, which we want so that 16 | // the results of past tests don't stick around in the store's 17 | // internal state 18 | this.UserStore = rewire("../user_store"); 19 | 20 | // Using rewire's __get__, we grab a reference to the store's internal 21 | // action handler and call it with some fake actions in our tests. 22 | 23 | // For this to be possible, the action handler needs to be declared in the 24 | // top level scope of the store, and not just be an anonymous function passed 25 | // to Dispatcher.register 26 | this.registeredCallback = this.UserStore.__get__("registeredCallback"); 27 | }); 28 | 29 | it("doesn't update the internal store when a random action is dispatched", function () { 30 | this.registeredCallback({ 31 | action: { 32 | type: "AN_ACTION_THIS_STORE_DOESNT_CARE_ABOUT", 33 | username: "cottoneyejoe" 34 | } 35 | }); 36 | expect(this.UserStore.getUserCount()).toBe(0); 37 | }); 38 | 39 | it("adds a user", function () { 40 | this.registeredCallback({ 41 | action: { 42 | type: "ADD_USER", 43 | username: "clonehighrulez" 44 | } 45 | }); 46 | expect(this.UserStore.getMostRecentUser()).toBe("clonehighrulez"); 47 | }); 48 | 49 | it("removes a user", function () { 50 | this.registeredCallback({ 51 | action: { 52 | type: "ADD_USER", 53 | username: "clonehighrulez" 54 | } 55 | }); 56 | this.registeredCallback({ 57 | action: { 58 | type: "ADD_USER", 59 | username: "cottoneyejoe" 60 | } 61 | }); 62 | this.registeredCallback({ 63 | action: { 64 | type: "REMOVE_USER", 65 | username: "clonehighrulez" 66 | } 67 | }); 68 | expect(this.UserStore.getUserCount()).toBe(1); 69 | }); 70 | }); 71 | --------------------------------------------------------------------------------