xiaoyunyang

What to Test

Testing interfaces

• Child component with the right props

import EditProfileForm from "../feedbackForm";
import Checkbox from "../checkbox";
import EmailInput from "../EmailInput";

xiaoyunyang

The example is taken from TypeScript's quick start tutorial

In JavaScript

const greeter = (person) => "hello "+person;
greeter([1,2,3]) // "hello 1,2,3"

In TypeScript

xiaoyunyang

function Person(name) {
   var secret = “secret!”
   this.name = name
   this.setName = function(newName) { this.name = newName }
   this.setNameToFoo = function() { this.name = foo }
   this.getSecret = function() { return secret }
}
 
var a = new Person(“Max”)
 

xiaoyunyang

function foo() {
  let res = ''
  let j = 10

  for(let i=0; i<j; i++) {
    // uncommenting ... the following line causes error
    // var j = 5
    res += `${j}, `
    j -= 1
  }

xiaoyunyang

import React, { useState } from "react";

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

xiaoyunyang

import React, { useState } from "react";

const UiState = {
  LOADING: "LOADING",
  ONLINE: "ONLINE",
  OFFLINE: "OFFLINE",
};

const UiStateMessageMap = {
  [UiState.LOADING]: "Loading...",

xiaoyunyang

var incrementUntil = function(max) { 
   if(num >= max) return num 
   num++
   incrementUntil(max)
}
 
var num = 0
incrementUntil(3)
num //> 3

xiaoyunyang

Flow to TypeScript Migration

Helpful Migration Guides:

• Migrating a Babel Project to TypeScript

Phase 1: Configure Project to use TypeScript

Delete Flow-related files

xiaoyunyang

import React from 'react';
import PropTypes from 'prop-types';
import { CompositeDecorator, convertFromRaw, Editor, EditorState } from 'draft-js';

// Following code based on:
// https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/link.html
const Link = (props) => {
  const {url} = props.contentState.getEntity(props.entityKey).getData();
  return (
    <a rel="nofollow noreferrer" href={url} target="_blank">

xiaoyunyang

What is nvm?

nvm is a version manager for node.js which lets you easily switch between different node versions. You can define an .nvmrc file in your node project which enforces the node version standardization with your codebase collaborators.

Install NVM

Install

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash