Commit b1a49808 authored by Kristian Freeman's avatar Kristian Freeman

Clearer examples - component testing

parent b5835427
import React from 'react';
import ReactDOM from 'react-dom';
import React from "react";
import ReactDOM from "react-dom";
var TEXT_HERE, FUNCTION_HERE;
class MyFirstComponent extends React.Component {
constructor() {
super()
super();
this.state = {
ping: null,
hello: 'world'
hello: "world"
};
this.clickedButton = this.clickedButton.bind(this);
}
clickedButton() {
this.setState({ ping: 'pong' })
this.setState({ ping: "pong" });
}
render() {
......@@ -22,7 +22,7 @@ class MyFirstComponent extends React.Component {
return (
<div>
<h1>Hello!</h1>
<h1>{spanText}</h1>
<button onClick={this.clickedButton}>Click me</button>
</div>
);
......@@ -30,6 +30,8 @@ class MyFirstComponent extends React.Component {
}
const root = document.getElementById("root");
if (root) { ReactDOM.render(<MyFirstComponent />, root); }
if (root) {
ReactDOM.render(<MyFirstComponent />, root);
}
export default MyFirstComponent;
import React from 'react';
import ReactDOM from 'react-dom';
import { shallow } from 'enzyme';
import React from "react";
import ReactDOM from "react-dom";
import { shallow } from "enzyme";
import MyFirstComponent from './index';
import MyFirstComponent from "./index";
it('can do equality checks', () => {
it("can do equality checks", () => {
// Tests are written in the format expect(thing)
// with a "check" appended to the end.
// For instance, we might want to verify that 1 + 1 = 2.
expect(1 + 1).toEqual(2)
expect(1 + 1).toEqual(2);
// We can also do "equality" checks with .toEqual.
expect(1 == 1).toEqual(true)
expect(1 == 1).toEqual(true);
// Ultimately, we want to simplify _what_ we're checking
// in .toEqual. A complicated statement inside of expect
// should only be used to ensure that the `.toEqual` value
// is fairly simple.
var array = [1, 2, 3];
expect(Math.floor(array[0] * 3 + 10 - 4 * 0.5)).toEqual(11)
})
expect(Math.floor(array[0] * 3 + 10 - 4 * 0.5)).toEqual(11);
});
it('renders without crashing', () => {
const div = document.createElement('div');
it("renders without crashing", () => {
const div = document.createElement("div");
// ReactDOM.render takes a component and an
// "element" to render the component onto a
......@@ -34,10 +34,10 @@ it('renders without crashing', () => {
// ReactDOM.render(component, element)
//
// Replace the below line with your test.
expect(false).toEqual(true)
ReactDOM.render(null, null);
});
it('has initial state set', () => {
it("has initial state set", () => {
const wrapper = shallow(<MyFirstComponent />);
// Hint: the state of a component can be referenced
......@@ -49,10 +49,10 @@ it('has initial state set', () => {
// state `.toEqual`?
//
// Replace the below line with your test.
expect(false).toEqual(true)
expect(false).toEqual(true);
});
it('displays the text variable in the <span>', () => {
it("displays the text variable in the <span>", () => {
const wrapper = shallow(<MyFirstComponent />);
// Hint: you can inspect values in a component
// (like text) using `.contains`.
......@@ -64,12 +64,12 @@ it('displays the text variable in the <span>', () => {
// wrapper.contains(string)
//
// Replace the below line with your test.
expect(false).toEqual(true)
expect(false).toEqual(true);
});
it('clicks the button and updates state', () => {
it("clicks the button and updates state", () => {
const wrapper = shallow(<MyFirstComponent />);
const button = wrapper.find('button')
const button = wrapper.find("button");
// Clicking a button in the UI is done with `.simulate`:
// in this case, we want to simulate click-this can be provided
......@@ -82,5 +82,5 @@ it('clicks the button and updates state', () => {
// changes? What would you expect it `.toEqual`?
//
// Replace the below line with your test.
expect(false).toEqual(true)
expect(false).toEqual(true);
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment