tor-browser

ReportContent.test.jsx (7369B)

---

import { mount } from "enzyme";
import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
import { ReportContent } from "content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent";
import { combineReducers, createStore } from "redux";
import { Provider } from "react-redux";
import { actionCreators as ac } from "common/Actions.mjs";
import React from "react";

const DEFAULT_PROPS = {
 dispatch() {},
 prefs: {
   ...INITIAL_STATE.Prefs,
   values: {
     ...INITIAL_STATE.Prefs.values,
     "discoverystream.sections.enabled": true,
     "unifiedAds.spocs.enabled": true,
   },
 },
};

const BASE_REPORT = {
 visible: true,
 url: "https://example.com",
 position: 1,
 reporting_url: "https://example.com/report",
};

function testState({ card_type, visible }) {
 return {
   Prefs: DEFAULT_PROPS.prefs,
   DiscoveryStream: {
     ...INITIAL_STATE.DiscoveryStream,
     report: {
       ...BASE_REPORT,
       card_type,
       visible,
     },
   },
 };
}

// Wrap this around any component that uses useSelector,
// or any mount that uses a child that uses redux.
function WrapWithProvider({ children, state, dispatch }) {
 let store = createStore(combineReducers(reducers), state);
 if (dispatch) {
   store.dispatch = dispatch;
 }
 return <Provider store={store}>{children}</Provider>;
}

// patch dialog element's .showModal()/close() functions to prevent errors in tests
before(() => {
 if (typeof HTMLDialogElement !== "undefined") {
   HTMLDialogElement.prototype.showModal = function () {
     this.open = true;
   };
   HTMLDialogElement.prototype.close = function () {
     this.open = false;
   };
 }
});

describe("Discovery Stream <ReportContent>", () => {
 let wrapper;
 let sandbox;
 let dispatch;

 beforeEach(() => {
   sandbox = sinon.createSandbox();
   dispatch = sandbox.stub();

   wrapper = mount(
     <WrapWithProvider>
       <ReportContent
         dispatch={dispatch}
         {...DEFAULT_PROPS}
         spocs={{ spocs: { data: {} } }}
       />
     </WrapWithProvider>
   );
 });

 afterEach(() => {
   sandbox.restore();
 });

 it("should render", () => {
   assert.ok(wrapper.exists());
   assert.ok(wrapper.find(".report-content-form").exists());
 });

 it("should open modal if report.visible is true", () => {
   const state = testState({ visible: true });

   wrapper = mount(
     <WrapWithProvider state={state}>
       <ReportContent spocs={{ spocs: { data: {} } }} />
     </WrapWithProvider>
   );
   assert.ok(wrapper.find("dialog").getDOMNode().open);
 });

 it("should close modal if report.visible is false", () => {
   const state = testState({ visible: false });

   wrapper = mount(
     <WrapWithProvider state={state}>
       <ReportContent spocs={{ spocs: { data: {} } }} />
     </WrapWithProvider>
   );

   assert.equal(wrapper.find("dialog").getDOMNode().open, false);
 });

 it("should render ad reporting options if card_type is spoc", () => {
   const state = testState({ card_type: "spoc" });

   // in the ReportContent.jsx file, spocs.spocs.data is used to grab spoc data
   wrapper = mount(
     <WrapWithProvider state={state}>
       <ReportContent spocs={{ spocs: { data: {} } }} />
     </WrapWithProvider>
   );

   assert.ok(wrapper.find(".report-ads-options").exists());

   // test to make sure content options aren't displayed when report ads is open
   assert.equal(wrapper.find(".report-content-options").length, 0);
 });

 it("should render content reporting options if card_type is organic", () => {
   const state = testState({ card_type: "organic" });

   // in the ReportContent.jsx file, spocs.spocs.data is used to grab spoc data
   wrapper = mount(
     <WrapWithProvider state={state}>
       <ReportContent spocs={{}} />
     </WrapWithProvider>
   );

   assert.ok(wrapper.find(".report-content-options").exists());

   // test to make sure ad options aren't displayed when report content is open
   assert.equal(wrapper.find(".report-ads-options").length, 0);
 });

 it("should dispatch REPORT_CLOSE when cancel button is clicked", () => {
   const state = testState({ visible: true });

   wrapper = mount(
     <WrapWithProvider state={state} dispatch={dispatch}>
       <ReportContent spocs={{}} />
     </WrapWithProvider>
   );

   // Cancel button implementation
   const cancelButton = wrapper.find("moz-button.cancel-report-btn");
   assert.ok(cancelButton.exists());
   cancelButton.simulate("click");

   assert.calledOnce(dispatch);

   const call = dispatch.getCall(0);
   assert.deepEqual(
     call.args[0],
     ac.AlsoToMain({
       type: "REPORT_CLOSE",
     })
   );
 });

 it("should dispatch REPORT_CONTENT_SUBMIT, BLOCK_URL, and SHOW_TOAST_MESSAGE when submit button is clicked", () => {
   const state = testState({ visible: true, card_type: "organic" });

   wrapper = mount(
     <WrapWithProvider state={state} dispatch={dispatch}>
       <ReportContent spocs={{}} />
     </WrapWithProvider>
   );

   // Submit button implementation
   const submitButton = wrapper.find("moz-button.submit-report-btn");
   assert.ok(submitButton.exists());
   submitButton.simulate("click");

   // Assert both action types were dispatched
   assert.calledThrice(dispatch);

   const firstCall = dispatch.getCall(0);
   const secondCall = dispatch.getCall(1);
   const thirdCall = dispatch.getCall(2);

   // Using .match instead of .deepEqual because submitting a report passes a lot of data during dispatch. And using .match makes it so we don't have to write out all the data
   assert.match(
     firstCall.args[0],
     ac.AlsoToMain({
       type: "REPORT_CONTENT_SUBMIT",
     })
   );

   assert.match(
     secondCall.args[0],
     ac.AlsoToMain({
       type: "BLOCK_URL",
     })
   );

   assert.match(
     thirdCall.args[0],
     ac.OnlyToOneContent(
       {
         type: "SHOW_TOAST_MESSAGE",
       },
       "ActivityStream:Content"
     )
   );
 });

 it("should clear selected radio button when modal closes", () => {
   // Initial render with modal visible
   const openState = testState({ visible: true });

   wrapper = mount(
     <WrapWithProvider state={openState} dispatch={dispatch}>
       <ReportContent spocs={{ spocs: {} }} />
     </WrapWithProvider>
   );

   // Select the first radio button
   const radioGroup = wrapper.find("moz-radio-group").getDOMNode();
   const firstRadio = radioGroup.querySelector("moz-radio");

   firstRadio.setAttribute("checked", "true");

   // Assert it's checked before modal closes
   assert.equal(firstRadio.hasAttribute("checked"), true);

   // Simulate closing the modal to clear the radio button
   const closedState = testState({ visible: false });

   wrapper = mount(
     <WrapWithProvider state={closedState} dispatch={dispatch}>
       <ReportContent spocs={{ spocs: {} }} />
     </WrapWithProvider>
   );

   const updatedRadioGroup = wrapper.find("moz-radio-group").getDOMNode();
   const updatedFirstRadio = updatedRadioGroup.querySelector("moz-radio");

   // The previously checked radio should now be unchecked
   assert.equal(
     updatedFirstRadio.hasAttribute("checked"),
     false,
     "Radio button should be unchecked after modal closes"
   );
 });
});