Skip to content

Instantly share code, notes, and snippets.

@burgwyn
burgwyn / basic-html5-video.markdown
Created February 24, 2019 04:06
Basic HTML5 Video
@burgwyn
burgwyn / SinonExample.jsx
Last active October 16, 2017 19:10
Example of unit test using Sinon
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 October 16, 2017 18:02
Avoiding using key as index, even when one is unavailable
const shortid = require('shortid');
items.map((item) => {
return (<ItemComponent key={shortid.generate()} item={item} />);
});
@burgwyn
burgwyn / IndexAsKeyBad.jsx
Created October 16, 2017 17:57
Example of Index as Key anti-pattern
items.map((item, index) => {
return (<ItemComponent key={index} item={item} />);
});
@burgwyn
burgwyn / SampleUnitTests.jsx
Created October 16, 2017 04:36
Assertions using Jest, Enzyme, and Snapshots
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();
@burgwyn
burgwyn / GoodStyles.jsx
Created October 16, 2017 03:51
Good styling
# JSX
render() {
let hiddenClass = '';
if (this.props.hideArrow) {
hiddenClass = 'hide';
}
return (
<button className={`filter-toggle ${hiddenClass}`}
@burgwyn
burgwyn / BadStyles.jsx
Created October 16, 2017 03:49
Setting `style` is often bad
<Modal
isOpen={this.props.isOpen}
className="wrapper no-select"
contentLabel="No Content Modal"
style={{overlay: {"backgroundColor": "transparent"}}}>
const HelloWorld = ({name}) => (
<div>{`Hi ${name}`}</div>
);
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 October 14, 2017 02:26
PropTypes and DefaultProps - Good Example
import propTypes from ‘prop-types’;
const propTypes = {
findDelay: PropTypes.number,
columns: PropTypes.array,
loadCollapsed: PropTypes.bool,
tableHeight: PropTypes.number,
rowHeight: PropTypes.number,
defaultColWidth: PropTypes.number,
};