Forem: Kamaal Aboothalib

Understanding by making your own: JavaScript call, apply & bind

Kamaal Aboothalib — Mon, 23 Sep 2019 05:52:30 +0000

It ultimately makes sense not to reinvent the wheel, but it's also of a way to Improve yourself by (re)creating things that were already existing. I'm writing this series to mainly improving my understanding of how things work in JavaScript's Standard built-in objects like call, apply, bind.

Function.prototype.call()

The call() method calls a function with a given this value and arguments provided individually. -- MDN

Mozilla

Initially, the method call invokes the function and allows you to pass comma-separated arguments.

Example from MDN


function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

const food = new Food('cheese', 5)
console.log(food.name) //  cheese
console.log(food) //  {name: 'chees', price: 5, category: 'food'}

const fun = new Toy('robot', 40);
console.log(fun.name) //  robot

Custom example


const add = (a, b) => a + b
console.log(add.call(null, 3, 8, 10)) // 11

Above examples, we can understand the basic functionality of the call method.

Call changes the this context of the caller, In the above example Product.call replaces the this from its original function body with the first argument of call, That is Food. > Using the call to chain constructors for an object -- MDN

If call called with more than one arguments then in left to right order, starting with the second argument, pass each argument to the original function.
- in our case name and price.
The call should not make any side effect on the this object.

The thisArg value is passed without modification as this value. This is a change from Edition 3, where an undefined or null thisArg is replaced with the global object and ToObject is applied to all other values and that result is passed as the this value. Even though the thisArg is passed without modification, non-strict functions still perform these transformations upon entry to the function. -- Ecma

Ecma-spec

Lets re-implement the call method.


if(!Function.prototype.fauxCall){
    Function.prototype.fauxCall = function(context){
       context.fn = this;
       return context.fn();
    }
}


const food = new Food('cheese', 5)
console.log(food) //  expected {name: 'chees', price: 5, category: 'food'}

If we run the above code, we'll get

instead of


{name: 'chees', price: 5, category: 'food'}

Ok, we need to pass original arguments when we call fn(). Seems easy, but 🤔 how do we know how many arguments are coming from the original call?

Here we can use arguments it is Array-like object accessible inside the function, but still, we have a problem; remember arguments is not an array its an object that's why Array-like

We can convert this object to array with Array.from(more ways), then ignore the first argument by Array.slice from the second element.

if(!Function.prototype.fauxCall){
    Function.prototype.fauxCall = function(context){
       const args = Array.from(arguments).slice(1);
       context.fn = this;
       return context.fn(...args);
    }
}

const food = new Food('cheese', 5)
console.log(food) //  expected {name: 'chees', price: 5, category: 'food'}

If we run the above code, we'll get

Ok looks good, but still, we can see the side effect. Get rid of the side effect we can use delete operator, however, even if we can delete this side effect fn property that we created we have one more problem; if context already has a property with the same name fn. In this case, should form the random key then assign it to context then we have to delete it.

if(!Function.prototype.fauxCall){
    Function.prototype.fauxCall = function(context){
       const fnName =
    [...Array(10)].map(_ => ((Math.random() * 36) | 0).toString(36)).join`` ||
    {};
       const args = Array.from(arguments).slice(1);
       context[fnName]= this;
       const result = obj[fnName](...args); 
       delete obj[fnName];
       return result;
    }
}

const food = new Food('cheese', 5)
console.log(food) //  expected {name: 'chees', price: 5, category: 'food'}

If we run the above code, we'll get

Almost success, but if we call with null instead of the object we'll get an error.

Remember our add function? if we want to fauxCall add function without this argument we'll get error

const add = (a, b) => a + b;
console.log(add.fauxCall(null, 5, 6, 7)); // 11 :: 7 will ignore by add method

It's because o we're trying to set a property to a null object, and we can fix it by guard function.

Also, add two more methods to check the existing property and assign new property instead of static fnName variable.

getRandomKey : this function generates and returns a random string each time.
checkRandomKey : this function takes two arguments; key and context (object) and checks this object already has the same key as property if-then recurse it with the new key, until finding a unique new property for the property name.

Complete implementation

const isOBject = obj => {
    const type = typeof obj;
    return type === "function" || (type === "object" && !!obj);
};

const getRandomKey = () => {
    return (
    [...Array(10)].map(_ => ((Math.random() * 36) | 0).toString(36)).join`` ||
    {}
  );
};

const checkRandomKey = (key, obj) => (obj[key] === undefined) ? key : checkRandomKey(getRandomKey(), obj);

if(!Function.prototype.fauxCall){
    Function.prototype.fauxCall = function(_context) {
       const context = isOBject(_context) ? _context : {};
       const fnName = checkRandomKey(getRandomKey(), context);
       const args = Array.from(arguments).slice(1);
       context[fnName] = this;
       const result = context[fnName](...args);
       delete context[fnName];
       return result;
    };
}

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.fauxCall(this, name, price);
  this.category = "food";
}
const add = (a, b) => a + b;

console.log(new Food("cheese", 5)); // {name: 'chees', price: 5, category: 'food'}
console.log(add.fauxCall(null, 5, 6, 7)); // 11 :: 7 will ignore by add method

Function.prototype.apply()

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object). -- MDN

Mozilla

Initially, the method apply invokes the function and allows you to pass an array or array-like arguments. Sound familiar? yes because call and apply almost doing the same thing only different is call accept comma-separated arguments while apply accepts array or array-like object as the argument.

In this case, everything that we did for the call is valid for apply except args part, now we know exactly which argument should go with the function call.

//... all call helper codes
if(!Function.prototype.fauxApply){
    Function.prototype.fauxApply = function(_context, _args) {
        const context = isOBject(_context) ? _context : {};
        const fnName = checkRandomKey(getRandomKey(), context);
        const args = _args.length ? _args : []
        context[fnName] = this;
        const result = context[fnName](...args);
        delete context[fnName];
        return result;
    };
}
const numbers = [5, 6, 7];

console.log(new Food("cheese", 5)); // {name: 'chees', price: 5, category: 'food'}
console.log(add.fauxApply(null, 5, 6, 7)); // 11 :: 7 will ignore by add method

Function.prototype.bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Only different between call and bind is call invoke the function and returns the value but bind returns a new function with updated context.

So we can simply return a new function that calls call with arguments and context.

//... all call helper codes
Function.prototype.fauxBind = function(_contetxt){
  const args = Array.from(arguments).slice(1);
  const self = this;
  return function(){
      //return self.fauxApply(_contetxt, args)
      return self.fauxCall(_contetxt, ...args) // either call or apply
  }
}
console.log(add.fauxBind(null, 4,7)());

CodeSandbox

♥

This implementation here is one of many ways. The purpose of this simulation is only to get how call works under the hood. If you find any issue or typo please let me know.

A quick guide to Testing React hooks that use RxJS

Kamaal Aboothalib — Tue, 03 Sep 2019 10:52:01 +0000

RxJs is cool when you work with complex async operations. RxJS is designed for reactive programming using Observables. It converts your async operations to Observables. With observables we can "watch" the data stream, passively listening for an event.

React hooks supercharge your functional components in many ways. With hooks, we can abstract and decouple the logics with custom hooks. With the separation of logics makes your code testable and share between components.

This post helps explain how thou can test useEffect hook that uses RxJs inside to listen to mouse click and delay the click with RxJs's debounceTime operator.

Hooks that we are using here.

useState: Enhance functional component with the state.
useEffect: We can perform DOM manipulation and select.

RxJs Operators we are using here.

map: returns Observable value from the provided function using emitted by the source.
debouonceTime: Emits a value from the source Observable only after a particular time has passed without another source emission.

Before we jump to write our test code, let see our example component.

Button.tsx

//Button.tsx
import React, { SFC} from 'react'
import {useClick} from './useClick'

type Props = {
    interval?: number;
    label?:string;
}

const Button:SFC<Props> = (props:Props) => {
    const {ref, count} = useClick(props.interval)
    return <button data-testid="btn" ref={ref}>Hello {count}</button>
}

export default Button

useClick.ts

// useClick.ts
import React, { useRef, useEffect, useCallback, useState, RefObject, Dispatch} from 'react'
import {fromEvent, Observable, Subscribable, Unsubscribable} from 'rxjs'
import {map, debounceTime} from 'rxjs/operators'

type NullableObservarbel = Observable<any> | null;
type NUllabe = HTMLButtonElement | null;
type NullableSubscribable = Subscribable<any> | null
type NullableUnsubscribable = Unsubscribable | null
export type Result = {
    ref: RefObject<HTMLButtonElement>;
    count:number;
    updateCount:Dispatch<React.SetStateAction<number>>;
}

export const isString = (input:any):Boolean => (typeof input === "string" && input !== "")

export const makeObservable = (el:NUllabe, eventType:string):NullableObservarbel => el instanceof HTMLElement && isString(eventType) ? fromEvent(el, eventType) : null

export const useClick = (time:number = 500):Result => {
    const button: RefObject<HTMLButtonElement> = useRef(null)
    const [count, updateCount] = useState<number>(0)
    const fireAfterSubscribe = useCallback((c) => {updateCount(c)}, [])
    useEffect(():()=>void => {
        const el = button.current
        const observerble =  makeObservable(el, 'click')
        let _count = count
        let subscribable:NullableSubscribable = null
        let subscribe:NullableUnsubscribable = null
        if(observerble){
            subscribable = observerble.pipe(
                map(e => _count++),
                debounceTime(time)
            )
            subscribe = subscribable.subscribe(fireAfterSubscribe)
        }
        return () => subscribe && subscribe.unsubscribe() // cleanup subscription
    // eslint-disable-next-line
    }, [])
    return {ref:button, count, updateCount:fireAfterSubscribe}
}

Above example, we have 2 files.

1 Button.tsx: is an simple button component.
2 useClick.ts: contains the custom hook useClick and makeObservable. functions.

Button uses useClick to delay the button clicks. Each clicks debounced with RxJs debounceTime function.

Clicks will be ignored while the user clicks within 400ms. Once the user has done clicks, it waits 400ms then fire the last event.

Simple!.🤓

Now lets test! 🧪.

Let's start with something simple. Test the useState hook.

// useClick.test.tsx - v1
import React from 'react'
import {useClick} from './useClick'
describe('useState', () => {
    it('should update count using useState', () => {
        const result = useClick(400) // test will break due to invarient violation
        const {updateCount} = result
        updateCount(8) 
        expect(result.current.count).toBe(8)
    })
})

Now run yarn test.

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component....

Not the result that we expected.

The error above means that calling hooks outside the functional component body is Invalid.

In this case, we can use react hooks testing utility library @testing-library/react-hooks.

import {  renderHook } from '@testing-library/react-hooks

With renderHook we can call the hooks outside of the body of a function component.

let’s just replace const result = useClick(400) with
const {result} = renderHook(() => useClick(400)

also, const {updateCount} = result with
const {updateCount} = result.current

Then wrap your setState call with act otherwise your test will throw an error.

// useClick.test.tsx -v2
import React from 'react'
import { useClick } from './useClick'
import { renderHook, act as hookAct } from '@testing-library/react-hooks'
describe('useState', () => {
    it('should update count using useState', () => {
        const {result} = renderHook(() => useClick(400))
        const {updateCount} = result.current
        hookAct(() => {
            updateCount(8) 
        })
        expect(result.current.count).toBe(8)
    })
})

Okay, now we good to go.

Again run yarn test.

Voila!. Test passing.

More tests

Now we test makeObservable function. Function makeObservable take DOMElement and event type as a string and should return Observable. It should return false if given an invalid argument(s).

Lets test makeObservable function.

// useClick.test.tsx
import React from 'react'
import { makeObservable, useClick } from './useClick'
import {Observable} from 'rxjs'
import Button from './Button'
import { render } from '@testing-library/react'
import { renderHook, act as hookAct } from '@testing-library/react-hooks'


describe('useState', () => {
    it('should update count using useState', () => {
        const {result} = renderHook(() => useClick(400))
        const {updateCount} = result.current
        hookAct(() => {
            updateCount(8) 
        })
        expect(result.current.count).toBe(8)
    })
})

describe('makeObservable', () => {
    it('should return false for non HTMLElement', () => {
        const observable = makeObservable({}, 'click')
        expect(observable instanceof Observable).toBe(false)
    })

    it('should return false for non non string event', () => {
        const {getByTestId} = render(<Button/>)
        const el = getByTestId('btn') as HTMLButtonElement
        const observable = makeObservable(el, 20)
        expect(observable instanceof Observable).toBe(false)
    })

    it('should return false for null', () => {
        const observable = makeObservable(null, 'click')
        expect(observable instanceof Observable).toBe(false)
    })

    it('should create observable', () => {
        const {getByTestId} = render(<Button/>)
        const el = getByTestId('btn') as HTMLButtonElement
        const observable = makeObservable(el, 'click')
        expect(observable instanceof Observable).toBe(true)
    })
})

Test Subscriber and useEffect.

Testing useEffect and observable is the complicated part.

Because useEffect and makes your component render asynchronous.
Assertions that inside the subscribers never run so the tests are always passing.

To capture useEffect's side effect, we can wrap our test code with act from react-dom/test-utils.

To run assertions inside the subscription, we can use done(). Jest wait until the done callback is called before finishing the test.

// useClick.test.tsx
import React from 'react'
import {isString, makeObservable, useClick } from './useClick'
import {Observable} from 'rxjs'
import {map, debounceTime} from 'rxjs/operators'
import Button from './Button'
import { render, fireEvent, waitForElement } from '@testing-library/react'
import {act} from 'react-dom/test-utils'
import { renderHook, act as hookAct } from '@testing-library/react-hooks'


describe('useState', () => {
    it('should update count using useState', () => {
        const {result} = renderHook(() => useClick(400))
        const {updateCount} = result.current
        hookAct(() => {
            updateCount(8) 
        })
        expect(result.current.count).toBe(8)
    })
})


describe('makeObservable', () => {
    it('should return false for non HTMLElement', () => {
        const observable = makeObservable({}, 'click')
        expect(observable instanceof Observable).toBe(false)
    })

    it('should return false for non non string event', () => {
        const {getByTestId} = render(<Button/>)
        const el = getByTestId('btn') as HTMLButtonElement
        const observable = makeObservable(el, 20)
        expect(observable instanceof Observable).toBe(false)
    })

    it('should return false for null', () => {
        const observable = makeObservable(null, 'click')
        expect(observable instanceof Observable).toBe(false)
    })

    it('should create observable', () => {
        const {getByTestId} = render(<Button/>)
        const el = getByTestId('btn') as HTMLButtonElement
        const observable = makeObservable(el, 'click')
        expect(observable instanceof Observable).toBe(true)
    })
})


describe('isString', () => {

    it('is a string "click"', () => {
        expect(isString('click')).toEqual(true)
    })

    it('is not a string: object', () => {
        expect(isString({})).toEqual(false)
    })

    it('is not a string: 9', () => {
        expect(isString(9)).toEqual(false)
    })

    it('is not a string: nothing', () => {
        expect(isString(null)).toEqual(false)
    })
})

describe('Observable', () => {
    it('Should subscribe observable', async (done) => {
        await act( async () => {
            const {getByTestId} = render(<Button/>)
            const el = await waitForElement(() => getByTestId('btn')) as HTMLButtonElement
            const observerble =  makeObservable(el, 'click');
            if(observerble){
                let count = 1
                observerble
                    .pipe(
                        map(e => count++),
                        debounceTime(400)
                    )
                    .subscribe(s => {
                        expect(s).toEqual(6)
                        done()
                    })

                fireEvent.click(el)
                fireEvent.click(el)
                fireEvent.click(el)
                fireEvent.click(el)
                fireEvent.click(el)
                fireEvent.click(el)
            }
        })
    })
})

And button component test

// Button.test.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import Button from './Button'
import { render, fireEvent, waitForElement, waitForDomChange } from '@testing-library/react'

describe('Button component', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(<Button />, div);
        ReactDOM.unmountComponentAtNode(div);
    });
})

describe('Dom updates', () => {
    it('should update button label to "Hello 2"', async (done) => {
        const {getByTestId} = render(<Button interval={500}/>)
        const el = await waitForElement(() => getByTestId('btn')) as HTMLButtonElement
        fireEvent.click(el)
        fireEvent.click(el)
        fireEvent.click(el)
        const t = await waitForDomChange({container: el})
        expect(el.textContent).toEqual('Hello 2')
        done()
    })
})

Now run yarn test again.

Now everything runs as expected, and you can see code coverage results and its more than 90%.

In this post, we've seen how to write tests for React Hooks that RxJS observable that's inside the custom hook with the react-testing-library.

Forem: Kamaal Aboothalib

Understanding by making your own: JavaScript call, apply & bind

Function.prototype.call()

Example from MDN

Custom example

Lets re-implement the call method.

Complete implementation

Function.prototype.apply()

Function.prototype.bind()

A quick guide to Testing React hooks that use RxJS

Hooks that we are using here.

RxJs Operators we are using here.

More tests

Test Subscriber and useEffect.

kamaal- / react-hook-rxjs-test

Test react hook & RxJs.

Test react hook & RxJs