mzabriskie

Enzyme 3 Gotchas

Some things have changed with enzyme 3 that deviate from version 2, and in some cases deviate from what even the enzyme docs suggest. Here's some of the gotchas I came across in upgrading from enzyme 2 to 3.

Accessing the DOM node

React

render () {
 return (

mzabriskie

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class MessageModalBody extends Component {
  render () {
    return (
      <TabList>
        <TabPanel title="Score Range">
          <MessageForm showScoreFilter={true} />
        </TabPanel>

mzabriskie

Dialog Components Refactor

The purpose of this document is to help define the components that comprise Instructure UI's dialog components. Dialog components typically render outside the context of the application and are the primary focal point when rendered.

This represents a refactor as specified by Jen Stern.

Building Blocks

These are the low-level components needed for dialogs.

mzabriskie

Dialog Components

The purpose of this document is to help define the components that comprise Instructure UI's dialog components. Dialog components typically render outside the context of the application and are the primary focal point when rendered.

This represents the current state of things.

Building Blocks

These are the low-level components needed for dialogs.

mzabriskie

Portal Component Refactor

Proposal for how to refactor InstUI's use of <Portal />.

The Problem

There are several issues with how <Portal /> is currently being used.

1. We have two versions of <Portal /> in our code base. A version that we wrote ourselves and a version packaged with react-overlays. This causes unecessary overhead.
2. There are inconsistencies with the developer facing API for how to specify the trigger and the content for components that use a ``. This makes it confusing as the usage of these components is not predictable.

mzabriskie

// Which is the best practice for React?
// This needs to be compatible with RequireJS.

module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
  
  // - OR -

mzabriskie

// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
'use strict';

/*
Pre Babel

import axios from 'axios'

mzabriskie

OSS Projects I've made at Instructure

• https://github.com/mzabriskie/pdf-text.js
• https://github.com/mzabriskie/pkg-version
• https://github.com/mzabriskie/create-stylesheet
• https://github.com/mzabriskie/rackt-cli
• https://github.com/mzabriskie/react-flipcard
• https://github.com/instructure/pdf-annotate.js
• https://github.com/instructure/instructure-ui
• https://github.com/instructure/tinymce-mediauploader

mzabriskie

Example use of <FormField/>:

<FormField label="Username" errors={['Cannot be left blank']}>
  <input type="text" name="username" value=""/>
</FormField>

This renders something like:

mzabriskie

build/
node_modules/