@roderickhsiao/react-i13n/dist-es/core/tests/createI13nNode.test.js

[Experiment] React I13n provides a performant and scalable solution to application instrumentation.

/**
 * Copyright 2020, Yahoo! Inc.
 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 */

/* All the functionalities are tested with this higher order component */
import React, { useContext, forwardRef } from 'react';
import { render, fireEvent } from '@testing-library/react';
import createI13nNode from '../createI13nNode';
import I13nContext from '../../components/core/I13nContext';
import setupI13n from '../setupI13n';
var eventsQueue = [];
var mockData = {
  options: {},
  plugins: [{
    name: 'test',
    eventHandlers: {
      created: () => {
        eventsQueue.push({
          action: 'create'
        });
      },
      click: payload => {
        var {
          i13nNode
        } = payload;
        eventsQueue.push({
          action: 'click',
          label: i13nNode.getText(),
          model: i13nNode.getMergedModel()
        });
      }
    }
  }]
};

var wrappedByI13nRoot = function wrappedByI13nRoot(ui) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mockData.options;
  var plugins = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : mockData.plugins;
  var RootApp = setupI13n((_ref) => {
    var {
      children
    } = _ref;
    return children;
  }, options, plugins);
  return /*#__PURE__*/React.createElement(RootApp, null, ui);
};

describe('createI13nNode', () => {
  beforeEach(() => {
    // http://fb.me/react-polyfills
    global.requestAnimationFrame = function (callback) {
      setTimeout(callback, 0);
    };

    window.innerHeight = 100;
  });
  afterEach(() => {
    eventsQueue = [];
  });
  it('should generate a component with createI13nNode', done => {
    var TestComponent = /*#__PURE__*/forwardRef((props, ref) => {
      var {
        i13nNode
      } = useContext(I13nContext);
      expect(i13nNode.getModel()).toEqual({
        sec: 'foo'
      });
      done();
      return /*#__PURE__*/React.createElement("div", {
        ref: ref
      });
    });
    TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render

    var I13nTestComponent = createI13nNode(TestComponent);
    expect(I13nTestComponent.displayName).toEqual('I13nTestComponent');
    render(wrappedByI13nRoot( /*#__PURE__*/React.createElement(I13nTestComponent, {
      i13nModel: {
        sec: 'foo'
      }
    })));
  });
  it('should generate a component with createI13nNode and custome name', () => {
    var TestComponent = (props, ref) => /*#__PURE__*/React.createElement("div", {
      ref: ref
    });

    TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render

    var I13nTestComponent = createI13nNode( /*#__PURE__*/forwardRef(TestComponent), {}, {
      displayName: 'CustomeName'
    });
    expect(I13nTestComponent.displayName).toEqual('CustomeName');
  }); // hoistNonReactStatics

  it('should generate a component with createI13nNode with statics', done => {
    var TestComponent = (props, ref) => /*#__PURE__*/React.createElement("div", {
      ref: ref
    });

    TestComponent.displayName = 'TestComponent';
    TestComponent.foo = 'bar'; // check the initial state is correct after render

    var I13nTestComponent = createI13nNode(TestComponent);
    expect(I13nTestComponent.foo).toEqual('bar');
    done();
  });
  it("should handle the case if reactI13n doesn't inititalized", () => {
    var TestComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("div", {
      ref: ref
    }));
    TestComponent.displayName = 'TestComponent';
    var I13nTestComponent = createI13nNode(TestComponent); // rendered without provider

    var {
      container
    } = render( /*#__PURE__*/React.createElement(I13nTestComponent, null));
    expect(container).toBeDefined();
  });
  it('should handle the case of unmount', () => {
    var rootI13nNode = null;
    var TestComponent = /*#__PURE__*/forwardRef((props, ref) => {
      var {
        parentI13nNode
      } = useContext(I13nContext); // only one layer, parent is root for this case

      rootI13nNode = parentI13nNode;
      return /*#__PURE__*/React.createElement("div", {
        ref: ref
      });
    });
    TestComponent.displayName = 'TestComponent';
    var I13nTestComponent = createI13nNode(TestComponent);
    var {
      unmount
    } = render(wrappedByI13nRoot( /*#__PURE__*/React.createElement(I13nTestComponent, null)));
    expect(typeof rootI13nNode.getChildrenNodes()[0]).toEqual('object');
    unmount(); // unmount should remove the child from root

    expect(rootI13nNode.getChildrenNodes()[0]).toEqual(undefined);
  });
  it('should be able to bind click handler', () => {
    var TestComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("div", {
      "data-testid": "node",
      ref: ref
    }));
    TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render

    var I13nTestComponent = createI13nNode(TestComponent);
    var {
      container,
      getByTestId
    } = render(wrappedByI13nRoot( /*#__PURE__*/React.createElement(I13nTestComponent, {
      bindClickEvent: true
    })));
    expect(container).toBeDefined();
    fireEvent.click(getByTestId('node'));
    expect(eventsQueue.some((_ref2) => {
      var {
        action
      } = _ref2;
      return action === 'click';
    })).toEqual(true);
  });
  it('should handle scan the links inside if autoScanLinks is enable', () => {
    var TestComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("div", {
      "data-testid": "node",
      ref: ref
    }, /*#__PURE__*/React.createElement("a", {
      "data-testid": "anchor",
      href: "/foo"
    }, "foo"), /*#__PURE__*/React.createElement("button", {
      "data-testid": "button"
    }, "bar")));
    TestComponent.displayName = 'TestComponent';
    var I13nTestComponent = createI13nNode(TestComponent);
    var {
      getByTestId
    } = render(wrappedByI13nRoot( /*#__PURE__*/React.createElement(I13nTestComponent, {
      scanLinks: {
        enable: true
      }
    })));
    var anchor = getByTestId('anchor');
    var button = getByTestId('button');
    fireEvent.click(anchor);
    expect(eventsQueue.some((_ref3) => {
      var {
        label
      } = _ref3;
      return label === 'foo';
    })).toEqual(true);
    fireEvent.click(button);
    expect(eventsQueue.some((_ref4) => {
      var {
        label
      } = _ref4;
      return label === 'bar';
    })).toEqual(true);
  });
  it('should update the i13n model when component updates', () => {
    var i13nModel = {
      sec: 'foo'
    };
    var TestComponent = /*#__PURE__*/forwardRef((props, ref) => {
      var {
        i13nNode
      } = useContext(I13nContext);
      expect(i13nNode.getModel()).toEqual(i13nModel);
      return /*#__PURE__*/React.createElement("div", {
        ref: ref
      });
    });
    TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render

    var I13nTestComponent = createI13nNode(TestComponent);
    var {
      rerender
    } = render(wrappedByI13nRoot( /*#__PURE__*/React.createElement(I13nTestComponent, {
      i13nModel: i13nModel
    })));
    i13nModel.sec = 'bar';
    rerender(wrappedByI13nRoot( /*#__PURE__*/React.createElement(I13nTestComponent, {
      i13nModel: i13nModel
    })));
  });
  it('should not cause error if we pass a undefined to createI13nNode', done => {
    console.warn = function (msg) {
      expect(msg).toEqual('You are passing a null component into createI13nNode');
      done();
    };

    console.trace = jest.fn();
    var I13nTestComponent = createI13nNode(undefined);
    expect(I13nTestComponent).toEqual(null);
  });
});