Chun-Lin

{
    "sync.gist": "3d21f64bee06ae95f3d1b7064f3784ba"
}

Chun-Lin

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

• constructor
• render

Chun-Lin

export default ({ skyblue }) => {
  /* inline-style */
  let style = {}
  if (skyblue) {
    style = { color: 'skyblue' }
  }

  return (
    <div className="content">
      <div className="content__img" />

Chun-Lin

class App extends Component {
  render() {
    return (
      <div className="App">
        <Content skyblue/>
      </div>
    )
  }
}

Chun-Lin

.content{
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
}

.content__img{
  display: inline-block;
  width: 300px;
  height: 100%;

Chun-Lin

import React from 'react'
import './content.css'

export default ({ skyblue }) => {

  /* add new css classes */
  let titleStyles = ['content__title']
  if (skyblue) {
    titleStyles.push('content--skyblue')
  }

Chun-Lin

export default () => (
    <div className="content">
      <div className="content__img" />
      <div className="content__info">
        <div className="content__title">Cute Puppy</div>
        <div className="content__description">
          Sed ut voluptatem neque cumque. Qui sed ut itaque est doloribus qui.
          Eos perferendis autem qui fugiat.
        </div>
      </div>

Chun-Lin

.content{
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
}

.content__img{
  display: inline-block;
  width: 300px;
  height: 100%;

Chun-Lin

import React from 'react'
import styled from 'styled-components'

const ContentWrapper = styled.div`
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
`

const Img = styled.div`

Chun-Lin

import React from 'react'
import styled from 'styled-components'

const ContentWrapper = styled.div`
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
`

const Img = styled.div`