import React from "react";

export class Newsletter extends React.Component {
    constructor() {
        super();

        this.state = {
            valid:   null,
            sending: false
        }

        this.validateEmail = this.validateEmail.bind(this);
        this.submitForm    = this.submitForm.bind(this);
    }

    validateEmail() {
        const self = this;
        let emailData = this.refs.email.value;

        if ( emailData.includes('@') && emailData.indexOf('.') > -1 ) {
            if ( !self.state.valid ) {
                self.setState({
                    valid: true
                })
            }
        } else {
            if ( self.state.valid || self.state.valid === null ) {
                self.setState({
                    valid: false
                })
            }
        }
    }

    submitForm(event) {
        event.preventDefault();

        if ( !this.state.valid ) {
            return false;
        }

        this.setState({
            sending: true
        })

        // Send data to the database
    }

    render() {
        const state = this.state;
        let inputClass;

        if ( state.valid === false ) {
            inputClass = 'invalid';
        } else if ( state.valid === true ) {
            inputClass = 'valid'
        }

        return (
            <form>
                <input type="email" className={inputClass} onChange={this.validateEmail} ref="email" name="email" placeholder="E-mail" required />
                <button disabled={state.sending} onClick={this.submitForm}>Subscribe</button>
            </form>
        );
    }
}

import React from "react";

import { mount } from "enzyme";
import toJson from "enzyme-to-json";

import { Newsletter } from "./Newsletter";

describe("Teste newsletter footer component", () => {
    it("Should render as expected", () => {
        const tree = toJson(mount(<Newsletter />));

        expect(tree).toMatchSnapshot();
    });

    describe("Input class", () => {
        let wrapper, input;

        beforeEach(function() {
            wrapper = mount(<Newsletter />);
            input = wrapper.find("input");
        })

        it("Should be empty", () => {
            expect( wrapper.find('.valid').length ).toBe(0);
            expect( wrapper.find('.invalid').length ).toBe(0);
        });

        it("Should be 'invalid'", () => {
            input.node.value = "name@email";
            input.simulate("change");

            expect( wrapper.find('.invalid').length ).toBe(1);
        });

        it("Should be 'valid'", () => {
            input.node.value = "name@email.com.br";
            input.simulate("change");

            expect( wrapper.find('.valid').length ).toBe(1);
        });
    });

    describe("Validate e-mail", () => {
        let wrapper, input;

        beforeEach(function() {
            wrapper = mount(<Newsletter />);
            input = wrapper.find("input");
        })

        it("Should be invalid", () => {
            input.node.value = "name";
            input.simulate("change");
            expect( wrapper.state().valid ).toBeFalsy();

            input.node.value = "name@email";
            input.simulate("change");
            expect( wrapper.state().valid ).toBeFalsy();
        });

        it("Should be valid", () => {
            input.node.value = "name@email.com";
            input.simulate("change");
            expect( wrapper.state().valid ).toBeTruthy();

            input.node.value = "name@email.com.br";
            input.simulate("change");
            expect( wrapper.state().valid ).toBeTruthy();
        });
    });

    describe("Submit the form", () => {
        let wrapper, input;

        beforeEach(function() {
            wrapper = mount(<Newsletter />);
            input = wrapper.find("input");
        })

        it("Should not be submiting", () => {
            input.node.value = "name@email";
            input.simulate("change");
            wrapper.find("button").simulate("click", {
                preventDefault: () => {}
            });

            expect( wrapper.state().sending ).toBeFalsy();
        });

        it("Should be submiting", () => {
            input.node.value = "name@email.com";
            input.simulate("change");
            wrapper.find("button").simulate("click", {
                preventDefault: () => {}
            });

            expect( wrapper.state().sending ).toBeTruthy();
        });
    });
});