ghengeveld

/* async-action.js */
import SomeService from './some-service';

export function doAsync(arg) {
  return dispatch => {
    // SomeService.doSomething returns a promise which resolves to the passed argument
    SomeService.doSomething(arg).then(result => {
      const action = { type: 'ASYNC_SUCCESS', payload: result };
      dispatch(action);
    }).catch(error => {

ghengeveld

function App(props) {
  return <Header title="Fancy" />;
}

function Header(props) {
  return <Title {...props} />;
}

function Title(props) {
  return <div>{props.title}</div>;

ghengeveld

{
  "products": [
    {
      "id": 448082,
      "title": "GoPro HERO4 Silver",
      "price": 36900,
      "description": "De GoPro HERO4 Silver is een waardige opvolger van GoPro 3-serie.",
      "thumbnail": "https://image.coolblue.io/products/448082?width=200&height=200"
    },
    {

ghengeveld

/**
 * Directive to instantly enable/disable multiple checkboxes based on a master checkbox.
 * Changing slave checkboxes will update the master checkbox accordingly, including the indeterminate state.
 *
 * Usage example:
 *
 * <label><input type="checkbox" select-all="theProperties"> Select all</label>
 * <div ng-repeat="property in properties">
 *   <label><input type="checkbox" rel="theProperties" ng-model="property.checked"> {{ property.label }}</label>
 * </div>

ghengeveld

class Accordion extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: null,
    }
  }
  toggle = (event, index) => this.setState(state => ({ activeItem: state.activeItem === index ? null : index }))
  render() {
    return (

ghengeveld

import styled, { keyframes } from "styled-components"

const slide = keyframes`
  0% { left: -35%; right: 100%; }
  60% { left: 100%; right: -90%; }
  100% { left: 100%; right: -90%; }
`

const chase = keyframes`
  0% { left: -200%; right: 100%; }

ghengeveld

import React from "react"
import { render, unmountComponentAtNode } from "react-dom"
import { act } from "react-dom/test-utils"

let container = null

beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div")
  document.body.appendChild(container)

ghengeveld

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us catch unexpected changes on time.

ghengeveld

start(systemName | extension, ...extensions)
stop(actorRef) 
query(actor,msg, timeoutInMs)
dispatch(actor, msg, sender)
spawn(parent, f, name,  properties)
spawnStateless(parent, f, name, properties)
spawnPersistent(parent, f, persistentKey, name, properties)
persistentQuery(parent, f, key, properties) : Promise<Result>

ghengeveld

export const mockWaiting = (): AsyncInitial<any> => ({
  data: undefined,
  error: undefined,
  initialValue: undefined,
  startedAt: undefined,
  finishedAt: undefined,
  status: "initial",
  isInitial: true,
  isPending: false,
  isLoading: false,