Skip to content

Instantly share code, notes, and snippets.

Nat Burgwyn burgwyn

Block or report user

Report or block burgwyn

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@burgwyn
burgwyn / SinonExample.jsx
Last active Oct 16, 2017
Example of unit test using Sinon
View SinonExample.jsx
describe('BidListButtonComponent', () => {
const bidList = [{ position: { id: 1 } }];
const bidListFalse = [{ position: { id: 2 } }];
it('can call the toggleSaved function', () => {
const spy = sinon.spy();
const wrapper = shallow(
<BidListButton
id={1}
toggleBidPosition={spy}
@burgwyn
burgwyn / IndexAsKeyGood.jsx
Created Oct 16, 2017
Avoiding using key as index, even when one is unavailable
View IndexAsKeyGood.jsx
const shortid = require('shortid');
items.map((item) => {
return (<ItemComponent key={shortid.generate()} item={item} />);
});
@burgwyn
burgwyn / IndexAsKeyBad.jsx
Created Oct 16, 2017
Example of Index as Key anti-pattern
View IndexAsKeyBad.jsx
items.map((item, index) => {
return (<ItemComponent key={index} item={item} />);
});
@burgwyn
burgwyn / SampleUnitTests.jsx
Created Oct 16, 2017
Assertions using Jest, Enzyme, and Snapshots
View SampleUnitTests.jsx
import React from 'react';
import { shallow } from 'enzyme';
import toJSON from 'enzyme-to-json';
import StarRating from '../components/StarRating';
describe('StarRating sharedComponent', () => {
it('should match a snapshot', () => {
const wrapper = shallow(<StarRating />);
expect(toJSON(wrapper)).toMatchSnapshot();
View GoodStyles.jsx
# JSX
render() {
let hiddenClass = '';
if (this.props.hideArrow) {
hiddenClass = 'hide';
}
return (
<button className={`filter-toggle ${hiddenClass}`}
@burgwyn
burgwyn / BadStyles.jsx
Created Oct 16, 2017
Setting `style` is often bad
View BadStyles.jsx
<Modal
isOpen={this.props.isOpen}
className="wrapper no-select"
contentLabel="No Content Modal"
style={{overlay: {"backgroundColor": "transparent"}}}>
View StatelessFunctionalComponent.jsx
const HelloWorld = ({name}) => (
<div>{`Hi ${name}`}</div>
);
View BadPropTypes.jsx
this.findDelay = typeof this.props.findDelay === 'number' ? this.props.findDelay : 500;
this.options = props.gridOptions;
this.options.columns = this.options.columns ? this.options.columns : [];
this.options.loadCollapsed = this.options.loadCollapsed ? this.options.loadCollapsed : false;
this.options.tableHeight = this.options.tableHeight ? this.options.tableHeight : 500;this.options.rowHeight = this.options.rowHeight ? this.options.rowHeight : 96;
this.defualtColWidth = this.options.columns.length ? `${100 / this.options.columns.length}%` : null;
@burgwyn
burgwyn / GoodPropTypes.jsx
Last active Oct 14, 2017
PropTypes and DefaultProps - Good Example
View GoodPropTypes.jsx
import propTypes fromprop-types’;
const propTypes = {
findDelay: PropTypes.number,
columns: PropTypes.array,
loadCollapsed: PropTypes.bool,
tableHeight: PropTypes.number,
rowHeight: PropTypes.number,
defaultColWidth: PropTypes.number,
};
You can’t perform that action at this time.