qborreda

The Ultimate Unit Testing Cheat-sheet

For Mocha, Chai and Sinon

using mocha/chai/sinon for node.js unit-tests? check out my utility: mocha-stirrer to easily reuse test components and mock require dependencies

---

• Sinon Chai
• Chai
• Sinon
• Mocha

qborreda

var uniqueArray = function(arrArg) {
  return arrArg.filter(function(elem, pos,arr) {
    return arr.indexOf(elem) == pos;
  });
};

var uniqEs6 = (arrArg) => {
  return arrArg.filter((elem, pos, arr) => {
    return arr.indexOf(elem) == pos;
  });

qborreda

/*
 * promiseSerial resolves Promises sequentially.
 * @example
 * const urls = ['/url1', '/url2', '/url3']
 * const funcs = urls.map(url => () => $.ajax(url))
 *
 * promiseSerial(funcs)
 *   .then(console.log)
 *   .catch(console.error)
 */

qborreda

/**
 * Chrome Snippet
 * Count the number of rules and selectors for CSS files on the page.
 * Flags up the >4096 threshold that confuses IE.
 */

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {

qborreda

import React, {PropTypes} from 'react';
import classNames from 'classnames';

const ANIMATION_DURATION = 1000;

class BatchDropZone extends React.Component {

    static propTypes = {

        // function that recieves an array of files

qborreda

//==== Simple SCSS mixin to create CSS triangles
//==== Example: @include css-triangle ("up", 10px, #fff);
@mixin css-triangle ($direction: "down", $size: 20px, $color: #000) {
	width: 0; 
	height: 0;
	border-left: $size solid #{setTriangleColor($direction, "left", $color)};
	border-right: $size solid #{setTriangleColor($direction, "right", $color)};
	border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
	border-top: $size solid #{setTriangleColor($direction, "top", $color)};
}

qborreda

// Alerts
@include alert-variant($background, $border, $text-color);

// Background Variant
@include bg-variant($parent, $color);

// Border Radius
@include border-top-radius($radius);
@include border-right-radius($radius);
@include border-bottom-radius($radius);

qborreda

@mixin setFlexBox($flexType){
	//options are block level or inline
	@if $flexType == 'block'{
		display: -webkit-box;
		display: -moz-box;
		display: box;
		display: -ms-flexbox;
		display: flexbox;
		display: -webkit-flex;
		display: flex;

qborreda

// Set up HTML hooks without id or extra classes
<button data-action="openLogin">Login</button>
<a href="javascript:;" data-action="openEditor">Link</a>

// Using [data-action=""] selectors instead of class selectors when binding events in JavaScript
var actions = {
    openLogin: openLoginWindow,
    openEditor: function() { ... }
//....
};

qborreda

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter