HMR.test.js

/* eslint-env browser */
/* eslint-disable no-console */

import hotModuleReplacement from '../src/hmr/hotModuleReplacement';

function getLoadEvent() {
  const event = document.createEvent('Event');

  event.initEvent('load', false, false);

  return event;
}

function getErrorEvent() {
  const event = document.createEvent('Event');

  event.initEvent('error', false, false);

  return event;
}

describe('HMR', () => {
  let consoleMock = null;

  beforeEach(() => {
    consoleMock = jest.spyOn(console, 'log').mockImplementation(() => () => {});

    jest.spyOn(Date, 'now').mockImplementation(() => 1479427200000);

    document.head.innerHTML = '<link rel="stylesheet" href="/dist/main.css" />';
    document.body.innerHTML = '<script src="/dist/main.js"></script>';
  });

  afterEach(() => {
    consoleMock.mockClear();
  });

  it('should works', (done) => {
    const update = hotModuleReplacement('./src/style.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);

      done();
    }, 100);
  });

  it('should works with multiple updates', (done) => {
    const update = hotModuleReplacement('./src/style.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);

      jest.spyOn(Date, 'now').mockImplementation(() => 1479427200001);

      const update2 = hotModuleReplacement('./src/style.css', {});

      update2();

      setTimeout(() => {
        const links2 = Array.prototype.slice.call(
          document.querySelectorAll('link')
        );

        expect(links2[0].visited).toBe(true);
        expect(links2[0].isLoaded).toBe(true);
        expect(document.head.innerHTML).toMatchSnapshot();

        links2[1].dispatchEvent(getLoadEvent());

        expect(links2[1].isLoaded).toBe(true);

        done();
      }, 100);
    }, 100);
  });

  it('should reloads with locals', (done) => {
    const update = hotModuleReplacement('./src/style.css', {
      locals: { foo: 'bar' },
    });

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);

      done();
    }, 100);
  });

  it('should work reload all css', (done) => {
    const update = hotModuleReplacement('./src/style.css', {
      filename: 'unreload_url',
    });

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);

      done();
    }, 100);
  });

  it('should reloads with non http/https link href', (done) => {
    document.head.innerHTML =
      '<link rel="stylesheet" href="/dist/main.css" /><link rel="shortcut icon" href="data:;base64,=" />';

    const update = hotModuleReplacement('./src/style.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);
      expect(links[2].visited).toBeUndefined();

      done();
    }, 100);
  });

  it('should reloads with # link href', (done) => {
    document.head.innerHTML =
      '<link rel="stylesheet" href="/dist/main.css" /><link rel="shortcut icon" href="#href" />';

    const update = hotModuleReplacement('./src/style.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);
      expect(links[2].visited).toBeUndefined();

      done();
    }, 100);
  });

  it('should reloads with link without href', (done) => {
    document.head.innerHTML =
      '<link rel="stylesheet" href="/dist/main.css" /><link rel="shortcut icon" />';

    const update = hotModuleReplacement('./src/style.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);
      expect(links[2].visited).toBeUndefined();

      done();
    }, 100);
  });

  it('should reloads with absolute remove url', (done) => {
    document.head.innerHTML =
      '<link rel="stylesheet" href="/dist/main.css" /><link rel="stylesheet" href="http://dev.com/dist/main.css" />';

    const update = hotModuleReplacement('./src/style.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);
      expect(links[2].visited).toBeUndefined();

      done();
    }, 100);
  });

  it('should reloads with non-file script in the end of page', (done) => {
    document.body.appendChild(document.createElement('script'));

    const update = hotModuleReplacement('./src/non_file_styles.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getLoadEvent());

      expect(links[1].isLoaded).toBe(true);

      done();
    }, 100);
  });

  it('should handle error event', (done) => {
    const update = hotModuleReplacement('./src/style.css', {});

    update();

    setTimeout(() => {
      expect(console.log.mock.calls[0][0]).toMatchSnapshot();

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      expect(links[0].visited).toBe(true);
      expect(document.head.innerHTML).toMatchSnapshot();

      links[1].dispatchEvent(getErrorEvent());

      expect(links[1].isLoaded).toBe(true);

      done();
    }, 100);
  });

  it('should not remove old link when new link is loaded twice', (done) => {

    const link = document.createElement('link');

    link.innerHTML = '<link rel="preload stylesheet" href="./dist/main.css" />';
    document.head.appendChild(link);
    document.head.removeChild = jest.fn();

    const update = hotModuleReplacement('./dist/main.css', {});

    update();

    setTimeout(() => {

      const links = Array.prototype.slice.call(
        document.querySelectorAll('link')
      );

      links[1].dispatchEvent(getLoadEvent());
      links[1].dispatchEvent(getLoadEvent());

      expect(document.head.removeChild).toHaveBeenCalledTimes(1);

      done();
    }, 100);
  });
});