mirror of
https://github.com/onkelbeh/cheatsheets.git
synced 2025-06-15 14:47:53 +02:00
Update
This commit is contained in:
Rico Sta. Cruz
parent
38af608bf2
commit
4886f3dc10
84
enzyme.md
Normal file
84
enzyme.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
title: Enzyme
|
||||
category: React
|
||||
---
|
||||
|
||||
## ReactWrapper
|
||||
|
||||
```js
|
||||
wrap = shallow(<MyComponent />) // => ReactWrapper (shallow)
|
||||
wrap = mount(<MyComponent />) // => ReactWrapper (full)
|
||||
```
|
||||
|
||||
### Traversing
|
||||
|
||||
```js
|
||||
wrap.find('button') // => ReactWrapper
|
||||
wrap.filter('button') // => ReactWrapper
|
||||
wrap.not('span') // => ReactWrapper (inverse of filter())
|
||||
wrap.children() // => ReactWrapper
|
||||
wrap.parent() // => ReactWrapper
|
||||
wrap.closest('div') // => ReactWrapper
|
||||
wrap.childAt(0) // => ReactWrapper
|
||||
wrap.at(0) // => ReactWrapper
|
||||
wrap.first() // => ReactWrapper
|
||||
wrap.last() // => ReactWrapper
|
||||
```
|
||||
|
||||
```js
|
||||
wrap.get(0) // => ReactElement
|
||||
wrap.getNode() // => ReactElement
|
||||
wrap.getNodes() // => Array<ReactElement>
|
||||
wrap.getDOMNode() // => DOMComponent
|
||||
```
|
||||
|
||||
### Actions
|
||||
|
||||
```js
|
||||
wrap.simulate('click')
|
||||
```
|
||||
|
||||
### React components
|
||||
|
||||
```js
|
||||
wrap.setState({ ... })
|
||||
wrap.setProps({ ... })
|
||||
wrap.setContext({ ... })
|
||||
|
||||
wrap.state() // => Any (get state)
|
||||
wrap.props() // => object (get props)
|
||||
wrap.context() // => Any (get context)
|
||||
|
||||
wrap.instance() // => ReactComponent
|
||||
```
|
||||
|
||||
### Mount
|
||||
|
||||
```js
|
||||
wrap.mount()
|
||||
wrap.unmount()
|
||||
wrap.update() // calls forceUpdate()
|
||||
```
|
||||
|
||||
### Tests
|
||||
|
||||
```js
|
||||
wrap.debug() // => string
|
||||
wrap.html() // => string
|
||||
wrap.text() // => string
|
||||
wrap.type() // => string | function
|
||||
wrap.name() // => string
|
||||
wrap.is('.classname') // => boolean
|
||||
wrap.hasClass('class') // => boolean
|
||||
wrap.exists() // => boolean
|
||||
wrap.contains(<div />) // => boolean
|
||||
wrap.contains([ <div /> ]) // => boolean
|
||||
|
||||
wrap.containsMatchingElement(<div />) // => boolean
|
||||
wrap.containsAllMatchingElements([ <div /> ]) // => boolean
|
||||
wrap.containsAnyMatchingElements([ <div /> ]) // => boolean
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
- <https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md>
|
||||
65
html-meta.md
65
html-meta.md
@ -57,27 +57,58 @@ article:section
|
||||
article:tag
|
||||
```
|
||||
|
||||
### Favicon
|
||||
|
||||
```html
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
||||
```
|
||||
|
||||
### Web app
|
||||
|
||||
```html
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- black | black-translucent | default -->
|
||||
```
|
||||
|
||||
### Apple-only
|
||||
|
||||
```html
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name='format-detection' content='telephone=no'>
|
||||
```
|
||||
|
||||
## Progressive web apps
|
||||
|
||||
### Add to homescreen
|
||||
|
||||
```html
|
||||
<meta name='mobile-web-app-capable' content='yes'>
|
||||
<meta name='apple-mobile-web-app-capable' content='yes'>
|
||||
<meta name='apple-mobile-web-app-status-bar-style' content='black'> <!-- black | black-translucent | default -->
|
||||
```
|
||||
|
||||
### [Theme color](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)
|
||||
|
||||
```html
|
||||
<meta name='theme-color' content='#ff00ff'>
|
||||
```
|
||||
|
||||
### [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
|
||||
|
||||
```html
|
||||
<link rel='manifest' href='/manifest.json'>
|
||||
```
|
||||
|
||||
### [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/)
|
||||
|
||||
```html
|
||||
<!-- Minimal -->
|
||||
<link rel='icon' type='image/png' href='favicon@32.png'>
|
||||
<link rel='icon' sizes='192x192' href='icon@192.png'>
|
||||
<link rel='apple-touch-icon' href='icon@152.png'>
|
||||
<meta name='msapplication-square310x310logo' content='icon@310.png'>
|
||||
|
||||
<!-- Apple -->
|
||||
<link rel='apple-touch-icon' href='touch-icon-iphone.png'>
|
||||
<link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
|
||||
<link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
|
||||
<link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
|
||||
|
||||
<!-- Microsoft -->
|
||||
<meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
|
||||
<meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
|
||||
<meta name='msapplication-wide310x150logo' content='icon_widetile.png'>
|
||||
```
|
||||
|
||||
Chrome on Android recommends [192x192](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
|
||||
|
||||
### Reference
|
||||
|
||||
* https://dev.twitter.com/docs/cards
|
||||
* https://developers.facebook.com/docs/opengraphprotocol/#types
|
||||
* <https://dev.twitter.com/docs/cards>
|
||||
* <https://developers.facebook.com/docs/opengraphprotocol/#types>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user