Robdel12

Possible conferences to attend

• May 18th NationJS 2018
• June 2nd & 3rd JSConf EU 2018
• June 21st-22nd Dinosaurjs
• June 22nd-23rd Beer City Code
• July 11-13th Chain React: The React Native Conference
• July 13th-14th Home - Mid-Atlantic Developer Conference
• July 27th NEJS CONF 2018
• August 16-17th React Rally

Robdel12

BigTest Roadmap notes

What needs to get done for v1?

Notes

• Guides
• Tutorials
• BigTest React helpers
• We need a visit helper for all the frameworks
• Update docs site / remove the current doc generator site

Robdel12

Microstates Roadmap Meeting

What needs to get done for v1?

Notes

• Guides
• Docs
• Use microstates in projects
  • Need to find a production app to get Microstates into
• Focus on the on boarding

Robdel12

import React from "react";
import { mount } from "@bigtest/react";
import {
  interactor,
  attribute,
  property,
  clickable,
  focusable,
  blurrable,
  is

Robdel12

Jest + BigTest Interactor = Component Test ❤️

Over the past year, my friend Wil and I have been building an acceptance testing library for single page apps called BigTest. We strongly feel the highest value tests you can write are ones that run in different browsers and test the whole application together.

While building out BigTest Wil wrote a library called interactor (@bigtest/interactor). You can think about interactors as composable page objects that are super fast. They wait for the element to be present before interacting, so you don’t have to put any sleeps in or sync up with any run loops. It also has a super-expressive API that makes writing complex tests more readable and maintainable.

The best part about interactors is they are composable so you can build on top of other interactors. Another great thing is you can use them anywhere there’s DOM. They were specifically built

Robdel12

import Interactor, { is, focusable } from '@bigtest/interactor';

@Interactor.extend
class CheckboxInteractor {
  hasFocus = is("input", ":focus");
  focusCheckbox = focusable("input");
}

// You can use `@bigtest/interactor` without a 
// decorator by passing a POJO to `Interactor.from`

Robdel12

//...typical imports
import { mount } from '@bigtest/react';
import CheckboxInteractor from './interactor';

describe("Checkbox", () => {
  let checkbox = new CheckboxInteractor("label");
  
  it("calls onFocus() when focus is set", async () => {
    let handleFocus = jest.fn();
    

Robdel12

describe("Checkbox", () => {
  let checkbox = new CheckboxInteractor("label");
  //...previous test
    
  it("has the right tabindex", async () => {
    await mount(() => <Checkbox tabIndex="2" />);
    
    expect(checkbox.tabIndex).toBe("2");
  });
  

Robdel12

import Interactor, {
  attribute,
  property,
  clickable,
  focusable,
  blurrable,
  is
} from "@bigtest/interactor";

@Interactor.extend

Robdel12

import Interactor from '@bigtest/interactor';
import ModalInteractor from '../modal/test/interactor';

@ModalInteractor.extend
class ConfirmationModalInteractor {
    // new things
}