Skip to content

Instantly share code, notes, and snippets.

@Shelob9
Last active December 13, 2018 16:09
Show Gist options
  • Save Shelob9/6f5109bc8cb0219ac6f7ee237e24a9c0 to your computer and use it in GitHub Desktop.
Save Shelob9/6f5109bc8cb0219ac6f7ee237e24a9c0 to your computer and use it in GitHub Desktop.
function updatePost( post ){
//do some AJAX or whatever
}
function updatePosts( posts ){
updateItems( posts, updatePost );
}
function updateItems(items,callback){
items.forEach( item => callback(item) );
}
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);
})
});
describe( 'Update items handler', () => {
it( 'Updates each', () => {
const callback = jest.fn();
updateItems([1,2,3], callback);
expect( callback.mock.calls.length ).toBe(3);
});
});
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($);
});
});
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' );
}
});
});
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);
});
});
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);
});
});
$.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($)
});
$.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' )
});
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' );
};
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
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment