Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: markup-mitchell/playground-reactor
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: codepoduk/react-playground
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Able to merge. These branches can be automatically merged.
  • 16 commits
  • 9 files changed
  • 2 contributors

Commits on Mar 27, 2017

  1. moved state and event handler to App

    spitchell committed Mar 27, 2017
    Copy the full SHA
    55f7182 View commit details
  2. styling tested

    spitchell committed Mar 27, 2017
    Copy the full SHA
    21fdd42 View commit details

Commits on Mar 28, 2017

  1. add readme

    spitchell committed Mar 28, 2017
    Copy the full SHA
    fe7b0fd View commit details
  2. move readme to right directory

    spitchell committed Mar 28, 2017
    Copy the full SHA
    3e62d57 View commit details
  3. Merge branch 'raiseState'

    spitchell committed Mar 28, 2017
    Copy the full SHA
    98df8e9 View commit details
  4. update README with npm module install commands

    spitchell committed Mar 28, 2017
    Copy the full SHA
    b3f30ad View commit details
  5. README update

    spitchell committed Mar 28, 2017
    Copy the full SHA
    9e7e418 View commit details

Commits on Mar 29, 2017

  1. Copy the full SHA
    6b079af View commit details

Commits on Mar 31, 2017

  1. Merge pull request #1 from CodePodUK/readme

    Change setup instructions - fine
    Mark Mitchell authored Mar 31, 2017
    Copy the full SHA
    c0d5697 View commit details

Commits on Apr 3, 2017

  1. Copy the full SHA
    9ec4648 View commit details
  2. Add testing framework

    danmarcus111 committed Apr 3, 2017
    Copy the full SHA
    fe12655 View commit details

Commits on Apr 4, 2017

  1. Merge pull request #2 from CodePodUK/testing

    Testing
    Mark Mitchell authored Apr 4, 2017
    Copy the full SHA
    532a79d View commit details

Commits on Apr 5, 2017

  1. add css

    spitchell committed Apr 5, 2017
    Copy the full SHA
    221f20b View commit details
  2. stylesheet

    spitchell committed Apr 5, 2017
    Copy the full SHA
    b97df3a View commit details
  3. Copy the full SHA
    e71861d View commit details
  4. removing files added in error

    spitchell committed Apr 5, 2017
    Copy the full SHA
    0747bf0 View commit details
Showing with 164 additions and 30 deletions.
  1. +1 −1 .babelrc
  2. +1 −1 .gitignore
  3. +54 −0 README.md
  4. +28 −2 app/components/App.js
  5. +58 −0 app/components/App.spec.js
  6. +1 −1 app/components/CaseStats.js
  7. +2 −23 app/components/FreeType.js
  8. +9 −0 app/components/NonAlphaNum.js
  9. +10 −2 package.json
2 changes: 1 addition & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{ presets: ['react']}
{ "presets": ["babel-preset-env", "react"]}
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
node_modules/
node_modules/
coverage
54 changes: 54 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Overview

This repo is just as its name suggests - a sandbox for react.js components.

It's also an opportunity to practice our github workflow.

As an initial overview, I suggest contributors do the following:

0) clone the repo and run it on your local machine (see #setup below for details)
1) decide on an improvement to make, feature or component to add
2) make a new branch exclusively aimed at your change
3) get the feature working and submit a pull request

# Content

There are literally *no prescribed functions* for this "project".

It exists purely as a structural exercise.

My initial components take typed user input and display inconsequential data analyses. Feel free to build on that, or add whatever else you see fit - pictures of cats, embedded widgets, random data from APIs - **I dont care!**

# Form

This is what it's all about. We should discuss all issues and PRs in terms of their formal correctness. Does it fit the react modular paradigm? Does it respect the (as yet unformulated) group style criteria and best practice?

The point is that this gives us an an opportunity to discuss such issues in the abstract and converge around a consistent approach.

The point is not that the product is good, but that it's method of production is.

I won't waffle on more, you get the idea.

# setup

After cloning the repo, you'll have to install the npm packages. To do this, type ```npm i``` while in the correct repos directory in the terminal.

Once you have done this, you can begin developing by typing ```npm start```. This will start webpack dev server which will watch for changes you make and serve an up to date version of the app.

If you wish to build a static version of the website (for test deployment), type ```npm run build``` in the terminal.

Note, the original starter kit for this repository was sourced from [codecademy](https://www.codecademy.com/articles/react-setup-). You can follow these instructions to set up your own blank project or use the popular CLI, create-react-app.

# testing

This repo uses Jest + Enzyme as its unit testing suite. This choice was made because these testing tools are powerful, easy to use, well documented and popular (meaning lots of community support and tutorials). However, anything you learn using these tools should be easily transferable to other testing frameworks with minor changes.

To run tests, find the root directory of this repo in your terminal application. If this is your first time testing, type ```npm i``` to ensure you have all required dependencies installed. You can then use the following commands to run different types of test:

* ```npm run test``` - this runs a one-off test of the whole testing suite;
* ```npm run test-watch``` - this runs the testing suite in watch mode. It will watch for saves you make to components that are being tested and re-run the tests relating to those components immediately after saving. This is useful to have running in the background if you are using TDD for immediate feedback on your changes.
* ```npm run test-coverage``` - this produces a coverage report. It will look at your tests and calculate how much of your codebase is covered by the tests you have written. It will also give you useful feedback on the lines of code that aren't touched by your tests (so you can fill these gaps).

To create a test, simply place a file next to the component you are testing with the following name: ```<component name>.spec.js```. Jest will automatically find all files following this naming convention.

An example (incomplete) test has been provided at ```app/components/App.spec.js```. Over time, we aim to build a testing utility library so that common tests and tasks within tests do not have to be tpyed out every time a new test is created.
30 changes: 28 additions & 2 deletions app/components/App.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,40 @@
import React from 'react';
import FreeType from './FreeType.js';
import CaseStats from './CaseStats.js';
import TextLength from './TextLength.js';
import NonAlphaNum from './NonAlphaNum.js';

export default class App extends React.Component {

constructor() {
super();
this.state = {
liveInput: {}
};
}

setValue(property, event) {
var value = event.target.value;
this.setState( ({liveInput}) => {
liveInput[property] = value;
return { liveInput: liveInput};
})
}

render() {
var testStyle = {
backgroundColor: "coral",
fontFamily: "monospace",
fontSize: 20,
textAlign: "center"
}
return(
<div>
<div style={testStyle}>
<h1>Real-time Text Analytics</h1>
<FreeType />
<FreeType acceptInput={this.setValue.bind(this, "liveInput")} />
<TextLength text={this.state.liveInput.liveInput} />
<CaseStats text={this.state.liveInput.liveInput} />
<NonAlphaNum text={this.state.liveInput.liveInput} />
</div>
);
}
58 changes: 58 additions & 0 deletions app/components/App.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import App from './App';
import React from 'react';
import {shallow, render, mount} from 'enzyme';

// mock console calls
global.console = {warn: jest.fn(), log: jest.fn(), error: jest.fn()}

describe("App", () => {
let props;
let mountedApp;
let renderedApp;
let shallowRenderedApp;

const mountApp = () => {
if (!mountedApp) {
mountedApp = mount(<App {...props} />);
}
return mountedApp;
}

const renderApp = () => {
if (!renderedApp) {
renderedApp = render(<App {...props} />);
}
return renderedApp;
}

const shallowRenderApp = () => {
if (!shallowRenderedApp) {
shallowRenderedApp = shallow(<App {...props} />);
}
return shallowRenderedApp;
}

beforeEach(() => {
props = {};
mountedApp = undefined;
renderedApp = undefined;
shallowRenderedApp = undefined;
});

it("always shallow renders", ()=>{
let shallowRenderedApp = shallowRenderApp();
expect(shallowRenderedApp).toBeDefined();
});

it("doesn't warn or send an error to console", ()=>{
shallowRenderApp();
expect(console.warn).toHaveBeenCalledTimes(0);
expect(console.error).toHaveBeenCalledTimes(0);
});

it("doesn't log to console", ()=>{
shallowRenderApp();
expect(console.log).toHaveBeenCalledTimes(0);
});

});
2 changes: 1 addition & 1 deletion app/components/CaseStats.js
Original file line number Diff line number Diff line change
@@ -13,6 +13,6 @@ const caseStats = (props) => {
<h2>Lower Case: {lowCount}</h2>
</div>
)
};
};

export default caseStats;
25 changes: 2 additions & 23 deletions app/components/FreeType.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,13 @@
import React from 'react';
import TextLength from './TextLength';
import CaseStats from './CaseStats';


export default class FreeType extends React.Component {

constructor() {
super();
this.state = {
liveInput: {}
};
}

setValue(property, event) {
var value = event.target.value;
this.setState( ({liveInput}) => {
liveInput[property] = value;
return { liveInput: liveInput};
})
}


render() {

return (
<div className="form-group">
<h1>This is the input field component:</h1>
<textarea rows="10" cols = "80" id="textArea" onChange={this.setValue.bind(this, "liveInput")} />
<TextLength text={this.state.liveInput.liveInput} />
<CaseStats text={this.state.liveInput.liveInput} />
<p>Enter text:</p>
<textarea rows="10" cols = "80" id="textArea" onChange={this.props.acceptInput} />
</div>
)
}
9 changes: 9 additions & 0 deletions app/components/NonAlphaNum.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';

const NonAlphaNum = (props) => {
let userInput = props.text || "";
let nonAlpha = userInput.match(/\W/g) || 0;
return <h2>Non-Alphanumeric Count: {nonAlpha.length || 0}</h2>;
};

export default NonAlphaNum;
12 changes: 10 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -4,8 +4,11 @@
"description": "React playground",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
"build": "webpack -p",
"start": "webpack-dev-server",
"test": "jest",
"test-watch": "jest --watch",
"test-coverage": "jest --coverage"
},
"author": "Mark Mitchell",
"license": "ISC",
@@ -15,9 +18,14 @@
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-jest": "^19.0.0",
"babel-loader": "^6.3.2",
"babel-preset-env": "^1.3.2",
"babel-preset-react": "^6.23.0",
"enzyme": "^2.8.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^19.0.2",
"react-addons-test-utils": "^15.4.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}