- Install:
- jest:
npm install --save-dev jest - ts-jest:
npm install --save-dev ts-jest @types/jest
- Modify package.json
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
Andrey Barchuk HollyBang
HollyBang
/ ts-jest.md
Created
February 14, 2020 12:51
— forked from jackawatts/ts-jest.md
Getting started with Typescript, React and Jest
HollyBang
/ gist:df76eb52e27d89e8bd368e995f6ad10b
Created
June 26, 2019 11:37
Simple vanilla JS code swipe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('touchstart', handleTouchStart, false); | |
| document.addEventListener('touchmove', handleTouchMove, false); | |
| var xDown = null; | |
| var yDown = null; | |
| function getTouches(evt) { | |
| return evt.touches || // browser API | |
| evt.originalEvent.touches; // jQuery | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const offset = 100; | |
| let xDown, yDown; | |
| window.addEventListener('touchstart', e => { | |
| const firstTouch = getTouch(e); | |
| xDown = firstTouch.clientX; | |
| yDown = firstTouch.clientY; | |
| }); |
HollyBang
/ Breakpoints
Created
October 25, 2018 14:15
— forked from janily/Breakpoints
Mobile-first CSS Media Queries Breakpoints
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ } | |
| @media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } | |
| @media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } | |
| @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } | |
| @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } | |
| @media (min-width:1281px) { /* hi-res laptops and desktops */ } |
HollyBang
/ determine-changed-props.js
Created
July 27, 2018 14:23
— forked from sorenlouv/determine-changed-props.js
Determine which props causes React components to re-render
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| export default function withPropsChecker(WrappedComponent) { | |
| return class PropsChecker extends Component { | |
| componentWillReceiveProps(nextProps) { | |
| Object.keys(nextProps) | |
| .filter(key => { | |
| return nextProps[key] !== this.props[key]; | |
| }) | |
| .map(key => { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const movies = { | |
| action: ['dark', 'aveng'], | |
| comedy: ['life', 'lights'], | |
| [Symbol.iterator]*() { | |
| for (let movies of Object.values(this)) { | |
| // option 1: | |
| for (let movie of movies) { | |
| yield movie; | |
| } | |
| // option 2 (see https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/function* for details): |
HollyBang
/ ErrorBoundary in React
Created
November 23, 2017 15:33
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| class ErrorBoundary extends Component { | |
| state = { | |
| hasError: false, | |
| errorMessage: '' | |
| } | |
| componentDidCatch = (error, info) => { | |
| this.setState({hasError: true, errorMessage: error}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const puppeteer = require('puppeteer'); | |
| let scrape = async () => { | |
| const browser = await puppeteer.launch({headless: false}); | |
| const page = await browser.newPage(); | |
| await page.goto('http://books.toscrape.com/'); | |
| await page.click('#default > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(1) > article > div.image_container > a > img'); | |
| await page.waitFor(1000); |
HollyBang
/ README-Template.md
Created
August 2, 2017 08:29
— forked from PurpleBooth/README-Template.md
A template to make good README.md
NewerOlder