Skip to content

Instantly share code, notes, and snippets.

View trotzig's full-sized avatar

Henric Trotzig trotzig

View GitHub Profile
@trotzig
trotzig / subject-pattern.js.jsx
Last active August 29, 2015 14:10
An example of the `subject` pattern for DRYer Jasmine specs
describe('Button', () => {
beforeEach(() => {
this.subject = () => {
return React.addons.TestUtils.renderIntoDocument(
<Button {...this.props} />
);
};
});
describe('with a `text` prop', => {
describe('Button', () => {
describe('with a `text` prop', => {
it('renders the text', () => {
var button = React.addons.TestUtils.renderIntoDocument(
<Button text="Click me" />
);
expect(button).toHaveText('Click me');
});
describe('and an `icon` prop', () => {
describe('Button', () => {
subject(() => {
return React.addons.TestUtils.renderIntoDocument(
<Button {...this.lets['props']} />
);
});
describe('with a `text` prop', => {
let('props', { text: 'Click me'});
@trotzig
trotzig / .importjs
Created December 10, 2014 19:58
Example of an `aliases` configuration for Import-js
aliases:
'$' => 'third-party-libs/jquery'
'_' => 'third-party-libs/underscore'
@trotzig
trotzig / .importjs
Created December 10, 2014 20:00
Example .importjs configuration with `lookup_paths`
lookup_paths:
- 'app/assets/javascripts'
- 'vendor/bower_components'
@trotzig
trotzig / to_have_text_matcher.js
Created January 25, 2015 02:55
A custom Jasmine matcher to check a component for a particular string
var $ = require('jquery');
var resolveDOMNode = require('support/resolve_dom_node');
/**
* This file adds a `toHaveText` matcher to our Jasmine spec. To use it, do
* something like:
*
* expect(component).toHaveText('Support John');
*/
beforeEach(function() {
/**
* Convenience method to resolve a component or a DOM node to a DOM node. If the
* passed in `node` is a React component, the root DOM node of the component is
* returned. If `node` is already a DOM node, that node is returned in itself.
*
* @param {Object} node A React component or a DOM node
* @return {?Object} a DOM node
*/
var resolveDOMNode = (node) => {
if (!node) {
$z-index-menu: 100;
$z-index-navigation-main: 200;
$z-index-floating-action-button: 300;
$z-index-modal-wrapper: 400;
$z-index-toast: 500;
$z-index-n-progress: 600;
@trotzig
trotzig / count_commits.sh
Last active November 18, 2016 07:59
Counting commits
#!/bin/bash
# Run the script like this:
# > bash count_commits.sh <name>
# where name is a uniquely identifying string for a contributor, e.g. "Lencioni"
repos=( "causes" "brigade" "devscripts" "cuisine" "scss-lint"
"brigade-cap-tasks" "overcommit" "mock_redis" "sass-enhance"
"eslint-config-brigade" "react-waypoint" "haml-lint" "async_observer" "bender"
"react-simple-pie-chart" "tech-interview" "url-sweatshirt" "db-query-matchers"
@trotzig
trotzig / diffux_ci_talk_proposal.txt
Last active December 13, 2015 12:41
A talk proposal for React conf 2016
Diffux CI lightning talk proposal
Talk title: Visual diffing for React components
Are you worried that your CSS changes will break the styling of a component?
Are you scared that your code refactoring will result in visual bugs? Do you
find it difficult to understand how a code change affects the appearance of your
components? If you answer yes to any of the questions above, you want a visual
diffing tool. While many exist, Diffux-CI is the best one for React.