Example Tests from Private Repo for WeDoTDD.com

example-tests-wedotdd.js

/* 
   Tools: mocha, chai-enzyme, jsdom, airbnb enzyme 
   
   Using WebStorm test runner and WebStorm to write code.  
   For the prod code, using Flow for type checking 

   These are isolated unit tests (not integration) that test behavior for particular React components
   
   A big reason why I like React.js vs Vue, Angular, or other types of frameworks or 
   libraries is the simplicity at which you can test behavior.  Also there's no magic going on here in terms of
   other frameworks or libs that do stuff under the hood that leaves you with just ?.
   Tests in React.js are very straight forward clean, and independent of any weird framework or library 
   constraints/requirements.
   
   Some devs say "can't test the front-end; besides, there's nothing to test anyway...".  
   Truth: Of couse you can!  Yes there is!
   
   Some devs say "I get burned on front-end tests, they break too often".  
   Truth: Then you're writing them wrong, or they're probably not isolated or there are many other reasons for that.
   
   Some devs say "Front-end testing is hard".  
   Truth: Yes it is.  Wanna get mentored on it? Sign up for a session: https://www.codementor.io/daveschinkel13
*/


/* REACT & REDUX */

/* example react-redux reducer test */
it('maps state to props', () => {
	const state = {
	    companies: [{
	        name: "Pillar"
	    }]
	},
	      
	props = mapStateToProps(state);

	expect(props.companies[0].name).to.equal(state.companies[0].name)
});

/* example react-redux connect component (container) test */
it('connected to expected component', () => {
    const homePageContainer = shallow(<HomePageContainer store={fakeStore({})}/>),
          homePage = homePageContainer.find(HomePage);

    expect(homePage).to.exist;
});


/* GENERAL REACT COMPONENT TESTS */

it('returns an image and company name link', () => {
    const company = {
         	id: 4, 
		name: "Company E", 
		active: true, 
		featured: {active: true, order: 4},
            	images: {team: ["/lib/assets/noodlesandwich/company/team.png"]}
        },
        
	featuredCompany = shallow(<FeaturedCompany company={company} />),
        companyImage = featuredCompany.find('.ft-featured-company-image'),
        companyNameLink = featuredCompany.find('.ft-featured-company-name');

    expect(companyImage).to.exist;
    expect(companyNameLink).to.contain(company.name);
});
    
it('tags recent companies as new', () => {
    const company = {
            id: 4, name: "Company E", 
            active: true, 
            new: true, 
            featured: {active: true, order: 4},
            images: {
                team: ["/lib/assets/noodlesandwich/company/team.png"],
            }
        },
        tag = shallow(<FeaturedCompany company={company} />).find('.ink-badge');

    expect(tag).to.exist;
    expect(tag).to.contain("NEW");
});
    
it('renders a company\'s links', () => {
    const company = {
        images: {
            social: {
                twitter: "/lib/assets/social/thumbs/twitter-icon.png"
            }
        },
        website: {
            main: "http://cleancoders.com",
            engineering: "blog.cleancoder.com"
        },
        social: {
            twitter: "https://twitter.com/thecleancoders"
        }
    },
        links = shallow(<Links company={company} />),
        websiteLink = links.find('.ft-company-website'),
        engineeringLink = links.find('.ft-company-engineering-website'),
        twitterPageLink = links.find('.ft-twitter-page'),
        twitterImage = twitterPageLink.find('ft-twitter-image');

    expect(websiteLink.prop('url')).to.equal(company.website.main);
    expect(engineeringLink.prop('url')).to.contain(company.website.engineering);
    expect(twitterPageLink.prop('url')).to.contain(company.social.twitter);
    expect(twitterImage.prop('url')).to.contain(company.images.social.twitter);
});

it("lists headers for each country list", () => {
   const companies = [],
       countries = ["France",
                    "Germany",
                    "United Kingdom",
                    "Canada",
                    "Poland",
                    "Spain"]
   		    .map((id, name) => 
		    ({id: id++, name: name}));

   for(let [index, country] of countries.entries()) {
       let company = {
           id: index + 1,
           name: "Test Company for - `${country.name}`",
           active: true,
           locations: [{
               primary: true,
               country: country
           }]
       };

       companies.push(company);
    }

    const header = shallow(<LinkList companies={companies} countries={countries}/>)
			   .find('.ft-company-header');

    for(let [index, header] of header.entries()){
        let headerText = header[index].find(".ft-description").text();

        expect(headerText).to.equal(countries[index].name);
    }
});

Screen Shot - WebStorm Test Runner