tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

MessageWrapper.test.jsx (3022B)

      1 import React from "react";
      2 import { mount } from "enzyme";
      3 import { Provider } from "react-redux";
      4 import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
      5 import { MessageWrapper } from "content-src/components/MessageWrapper/MessageWrapper";
      6 import { createStore, combineReducers } from "redux";
      7 
      8 // Mock child component
      9 const MockChild = props => (
     10  <div data-is-intersecting={props.isIntersecting}></div>
     11 );
     12 
     13 // Wrap this around any component that uses useSelector,
     14 // or any mount that uses a child that uses redux.
     15 function WrapWithProvider({ children, state = INITIAL_STATE }) {
     16  let store = createStore(combineReducers(reducers), state);
     17  return <Provider store={store}>{children}</Provider>;
     18 }
     19 
     20 describe("MessageWrapper Component", () => {
     21  let wrapper;
     22  let sandbox;
     23  let dispatch;
     24  let observerStub;
     25 
     26  beforeEach(() => {
     27    sandbox = sinon.createSandbox();
     28    dispatch = sandbox.stub();
     29    observerStub = sandbox
     30      .stub(window, "IntersectionObserver")
     31      .callsFake(function (cb) {
     32        this.observe = sandbox.spy();
     33        this.unobserve = sandbox.spy();
     34        this.disconnect = sandbox.spy();
     35        this.callback = cb;
     36      });
     37 
     38    let state = {
     39      ...INITIAL_STATE,
     40      Messages: {
     41        isVisible: true,
     42        messageData: { id: "test-message-id" },
     43      },
     44    };
     45 
     46    wrapper = mount(
     47      <WrapWithProvider state={state}>
     48        <MessageWrapper
     49          dispatch={dispatch}
     50          document={{
     51            visibilityState: "visible",
     52          }}
     53        >
     54          <MockChild />
     55        </MessageWrapper>
     56      </WrapWithProvider>
     57    );
     58  });
     59 
     60  afterEach(() => {
     61    sandbox.restore();
     62  });
     63 
     64  it("should render", () => {
     65    assert.ok(wrapper.exists());
     66    assert.ok(wrapper.find(".message-wrapper").exists());
     67  });
     68 
     69  it("should not render if `Messages.isVisible` is false and hiddenOverride is false", () => {
     70    wrapper = mount(
     71      <WrapWithProvider
     72        state={{
     73          ...INITIAL_STATE,
     74          Messages: {
     75            isVisible: false,
     76            messageData: { id: "test-message-id" },
     77          },
     78        }}
     79      >
     80        <MessageWrapper
     81          hiddenOverride={false}
     82          dispatch={dispatch}
     83          document={{
     84            visibilityState: "visible",
     85          }}
     86        >
     87          <MockChild />
     88        </MessageWrapper>
     89      </WrapWithProvider>
     90    );
     91 
     92    assert.isFalse(wrapper.find(".message-wrapper").exists());
     93  });
     94 
     95  it("dispatches MESSAGE_IMPRESSION when intersecting", () => {
     96    // Manually trigger the intersection observer callback
     97    const child = wrapper.find(MockChild);
     98    assert.isFalse(child.prop("isIntersecting"));
     99    const observerInstance = observerStub.getCall(0).returnValue;
    100    const observedElement = wrapper.find(".message-wrapper").getDOMNode();
    101    // Simulate an intersection
    102    observerInstance.callback([
    103      { isIntersecting: true, target: observedElement },
    104    ]);
    105    // Expect dispatch to have been called twice
    106    assert.calledTwice(dispatch);
    107  });
    108 });