0-functions.js

function updatePost( post ){
	//do some AJAX or whatever
}

function updatePosts( posts ){
	updateItems( posts, updatePost );
}


function updateItems(items,callback){
	items.forEach( item => callback(item) );
}

0-test-2.js

describe( 'Update items handler', () => {

	it( 'Updates each', () => {
		const callback = jest.fn();
		updateItems([1,2,3], callback);
		expect( callback.mock.calls.length ).toBe(3);
	});

	it( 'Passes the right data to the callback', () => {
		const callback = jest.fn();
		updateItems([1], callback );
		expect( callback ).toBeCalledWith(1);
	})
});

0-test.js

describe( 'Update items handler', () => {

	it( 'Updates each', () => {
		const callback = jest.fn();
		updateItems([1,2,3], callback);
		expect( callback.mock.calls.length ).toBe(3);
	});
	
});

1-after.js

function onClick($){
	if( ! $( '#more-button' ).hasClass( 'expanded') ){
		$( '#more-button').addClass( 'expanded' );
	}else{
		$( '#more-button').removeClass( 'expanded' );

	}
}


jQuery( document ).ready(function($) {
	$( '#more-button' ).on( 'click', function(e){
		e.preventDefault();
		onClick($);
	});
});

1-before.js

jQuery( document ).ready(function($) {
	$( '#more-button' ).on( 'click', function(e){
		e.preventDefault();
		if( ! $( '#more-button' ).hasClass( 'expanded') ){
			$( '#more-button').addClass( 'expanded' );
		}else{
			$( '#more-button').removeClass( 'expanded' );
		}
	});
});

1-test-not-good-enough.js

describe( 'Hide show on click of button', () => {
	const jQuery = jest.fn(() => ({
		addClass: jest.fn(),
		removeClass: jest.fn(),
		hasClass: jest.fn()
	}));


	it( 'removes class when has class', () => {
		onClick(jQuery);
		expect( jQuery.mocks.calls.length ).toBe(2);
	
	});
});

1-test.js

describe( 'Hide show on click of button', () => {
	const addClass = jest.fn();
	const removeClass = jest.fn();
	const hasClass = jest.fn(className => {return true;});

	const jQuery = jest.fn(() => ({
		addClass,
		removeClass,
		hasClass
	}));


	it( 'removes class when has class', () => {
		onClick(jQuery);
		expect(addClass.mock.calls.length).toBe(0);
		expect(removeClass.mock.calls.length).toBe(1);
	});
});

2-ajax.js

$.ajax({
	url: 'https://calderaforms.com/wp-json/wp/v2/posts'
	method: 'GET',
}).done(function (r) {
	parsePostResponse(r,$,Handlebars);
}).fail(function (r) {
	parseErrorResponse(r,$);
}).always( () => {
  	alwaysHandler($) 
});

2-before.js

$.ajax({
	url: 'https://calderaforms.com/wp-json/wp/v2/posts'
	method: 'GET',
}).done(function (r) {
	if( r.length ){
	    $( "#posts" ).html( 'No Posts found' );
    }
    //parse with handlebars
	const template = $("#posts-templ").html();
	const compiledTemplate = Handlebars.compile (template);
	$("#posts").append (compiledTemplate(r));
}).fail(function (r) {
	$( '#posts' ).html( r.message );
}).always( () => {
   $( '#posts' ).addClass( 'posts-loaded' ) 
});

2-functions.js

function parsePostResponse(posts,$,Handlebars, noPostsFoundMessage = 'No Posts Found'){
	if( ! posts.length ){
		$( "#posts" ).html( noPostsFoundMessage );
	}else{
		//parse with handlebars
		const template = $("#posts-templ").html();
		const compiledTemplate = Handlebars.compile (template);
		$("#posts").html(compiledTemplate(posts));
	}
};

function parseErrorResponse(response,$){
	$( '#posts' ).html( response.message );
};

function alwaysHandler($){
	$( '#posts' ).addClass( 'posts-loaded' );
};

2-test.js

describe( 'AJAX callbacks', () => {
	const html = jest.fn();
	const addClass = jest.fn();
	const mockCompiled = jest.fn( () => { return '<div>HTMLs</div>' });

	const compile = jest.fn( () => { return mockCompiled });

	const jQuery = jest.fn(() => ({
		addClass,
		html
	}));

	const Handlebars = {
		compile
	};

	it( 'compiles the template in parsePostResponse' , () => {
		parsePostResponse([{ID:2}],jQuery, Handlebars);
		expect( compile.mock.calls.length ).toBe(1); //compiles template
		expect( html.mock.calls.length ).toBe(2); //1 would indicate that the no posts message was used.
	});


	it( 'Shows error message if no posts' , () => {
		const error = 'Fail boats';
		parsePostResponse([],jQuery, Handlebars,error);
		expect( compile.mock.calls.length ).toBe(0); //doesn't compile template
		expect( html.mock.calls.length ).toBeCalledWith(error); //Passes the right argument
	});
});