Giter Club home page Giter Club logo

eventsourcemock's Introduction

eventsourcemock

A dependency free mock for EventSource objects.

Example (with Jest)

Setup

To setup the mock create a new file where the mock is assigned to the window object.

// __test__/configJSDom.js
import EventSource from 'eventsourcemock';

Object.defineProperty(window, 'EventSource', {
  value: EventSource,
});

Then instruct Jest to use that file during setup in package.json.

"jest": {
  "setupFiles": [
    "./__test__/configJSDom.js"
  ]
}

Usage

Suppose we want to test this component, which updates its state when a message is received from an EventSource instance.

export default class Component extends React.Component {
  props: Props;
  state: State;
  source: $PropertyType<window, 'EventSource'>;

  constructor(props: Props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }

  componentDidMount() {
    this.source = new window.EventSource('http://example.com/events');
    this.source.addEventListener('foo', messageEvent => {
      this.setState({ counter: parseInt(messageEvent.data, 10) });
    });
  }

  componentWillUnmount() {
    this.source.close();
  }

  render() {
    return <div className="Component">{this.state.counter}</div>;
  }
}

We can write a test file that grabs the source from the global sources object and simulates messages:

// @flow
import React from 'react';
import { mount } from 'enzyme';

import Component from './Component';
import { sources } from 'eventsourcemock';

const messageEvent = new MessageEvent('foo', {
  data: '1',
});

describe('update counter on SSE', () => {
  let wrapper;
  beforeAll(() => {
    wrapper = mount(<Component />);
  });

  it('should initialise counter to 0', () => {
    expect(wrapper.state('counter')).toBe(0);
  });

  it('should display "0"', () => {
    expect(wrapper.text()).toBe('0');
  });

  it('should update the counter to 1', () => {
    sources['http://example.com/events'].emit(
      messageEvent.type,
      messageEvent
    );
    expect(wrapper.state('counter')).toBe(1);
  });

  it('should close the EventSource on unmount', () => {
    wrapper.unmount();
    expect(sources['http://example.com/events'].readyState).toBe(2);
  });
});

API

sources: { [key: string]: EventSource }

sources holds the EventSource instances created.

import { sources } from 'eventsourcemock';

EventSource

EventSource mocks window.EventSource, providing methods to simulate messages and errors from the network.

import EventSource from 'eventsourcemock';

Constructor

EventSource(
  url: string,
  options?: {
    withCredentials: boolean
  }
)

Properties

__emitter

A reference to the node EventEmitter instance used internally.

onerror

See eventSource.onerror.

readyState

See eventSource.readyState.

url

See eventSource.url.

withCredentials

See eventSource.withCredentials.

Methods

emit(eventName: string, messageEvent?: MessageEvent)

Calls each of the listeners registered for the event named eventName, providing messageEvent as argument.

Example

const messageEvent = new MessageEvent('type', {
  data: 'message event data'
});
source.emit(messageEvent.type, messageEvent);
emitError(error: Error)

Simulates dispatching an error event on the EventSource instance. Causes onerror to be called.

Example (jest)

const onErrorSpy = jest.fn();
const error = new Error('Something went wrong.');
eventSource.onerror = onErrorSpy;
eventSource.emitError(error);
expect(onErrorSpy).toHaveBeenCalledWith(error);
addEventListener(eventName: string, listener: Function)

See EventTarget.addEventListener.

close()

See EventSource.close.

eventsourcemock's People

Contributors

gcedo avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.