Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 14, 2016 10:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/76ed81be15d8a9dedb53de95045e5f61 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/76ed81be15d8a9dedb53de95045e5f61 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jun 14, 2016.
    226 changes: 226 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,226 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple TODO (Reducer + Tests)</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>
    <script src="http://wzrd.in/standalone/expect@latest"></script>
    <script src="http://wzrd.in/standalone/deep-freeze@latest"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    </head>
    <body>
    <div id="root">
    <script id="jsbin-javascript">
    // Reducer function

    "use strict";

    var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

    function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

    var todos = function todos(state, action) {
    if (state === undefined) state = [];

    switch (action.type) {
    case "ADD_TODO":
    return [].concat(_toConsumableArray(state), [{
    id: action.id,
    text: action.text,
    completed: false
    }]);

    case "TOGGLE_TODO":
    return state.map(function (todo) {

    if (todo.id !== action.id) {
    return todo;
    }

    return _extends({}, todo, {
    completed: !todo.completed
    });
    });

    default:
    return state;
    }
    };

    var testAddTodo = function testAddTodo() {

    var stateBefore = [];

    var action = {
    type: "ADD_TODO",
    id: 0,
    text: "Learn Redux"
    };

    var stateAfter = [{
    id: 0,
    text: "Learn Redux",
    completed: false
    }];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(todos(stateBefore, action)).toEqual(stateAfter);

    //console.log(todos (stateBefore, action));
    };

    var testToggleTodo = function testToggleTodo() {

    var stateBefore = [{
    id: 0,
    text: "Learn Redux",
    completed: false
    }, {
    id: 1,
    text: "Epic Redux",
    completed: false
    }];

    var action = {
    type: "TOGGLE_TODO",
    id: 1
    };

    var stateAfter = [{
    id: 0,
    text: "Learn Redux",
    completed: false
    }, {
    id: 1,
    text: "Epic Redux",
    completed: true
    }];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(todos(stateBefore, action)).toEqual(stateAfter);
    };

    testAddTodo();
    testToggleTodo();
    console.log("Test Passed");
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">
    // Reducer function

    const todos = (state = [], action) => {
    switch (action.type){
    case "ADD_TODO":
    return [
    ...state,
    {
    id: action.id,
    text: action.text,
    completed:false
    }
    ];

    case "TOGGLE_TODO":
    return state.map(todo => {

    if (todo.id !== action.id){
    return todo;
    }

    return {
    ...todo,
    completed: !todo.completed
    };

    });

    default:
    return state;
    }
    }

    const testAddTodo = () => {

    const stateBefore = [];

    const action = {
    type: "ADD_TODO",
    id: 0,
    text: "Learn Redux"
    };

    const stateAfter = [
    {
    id: 0,
    text: "Learn Redux",
    completed:false
    }
    ];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(
    todos (stateBefore, action)
    ).toEqual(stateAfter);

    //console.log(todos (stateBefore, action));
    };


    const testToggleTodo = () => {

    const stateBefore = [
    {
    id: 0,
    text: "Learn Redux",
    completed:false
    },
    {
    id: 1,
    text: "Epic Redux",
    completed:false
    }
    ];

    const action = {
    type: "TOGGLE_TODO",
    id: 1
    };

    const stateAfter = [
    {
    id: 0,
    text: "Learn Redux",
    completed:false
    },
    {
    id: 1,
    text: "Epic Redux",
    completed:true
    }
    ];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(
    todos (stateBefore, action)
    ).toEqual(stateAfter);


    };

    testAddTodo();
    testToggleTodo();
    console.log("Test Passed");</script></body>
    </html>
    96 changes: 96 additions & 0 deletions jsbin.sixuzoy.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,96 @@
    // Reducer function

    "use strict";

    var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

    function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

    var todos = function todos(state, action) {
    if (state === undefined) state = [];

    switch (action.type) {
    case "ADD_TODO":
    return [].concat(_toConsumableArray(state), [{
    id: action.id,
    text: action.text,
    completed: false
    }]);

    case "TOGGLE_TODO":
    return state.map(function (todo) {

    if (todo.id !== action.id) {
    return todo;
    }

    return _extends({}, todo, {
    completed: !todo.completed
    });
    });

    default:
    return state;
    }
    };

    var testAddTodo = function testAddTodo() {

    var stateBefore = [];

    var action = {
    type: "ADD_TODO",
    id: 0,
    text: "Learn Redux"
    };

    var stateAfter = [{
    id: 0,
    text: "Learn Redux",
    completed: false
    }];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(todos(stateBefore, action)).toEqual(stateAfter);

    //console.log(todos (stateBefore, action));
    };

    var testToggleTodo = function testToggleTodo() {

    var stateBefore = [{
    id: 0,
    text: "Learn Redux",
    completed: false
    }, {
    id: 1,
    text: "Epic Redux",
    completed: false
    }];

    var action = {
    type: "TOGGLE_TODO",
    id: 1
    };

    var stateAfter = [{
    id: 0,
    text: "Learn Redux",
    completed: false
    }, {
    id: 1,
    text: "Epic Redux",
    completed: true
    }];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(todos(stateBefore, action)).toEqual(stateAfter);
    };

    testAddTodo();
    testToggleTodo();
    console.log("Test Passed");