tor-browser

ExternalComponentWrapper.test.jsx (9816B)

---

import { GlobalOverrider } from "test/unit/utils";
import { mount } from "enzyme";
import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
import { combineReducers, createStore } from "redux";
import { Provider } from "react-redux";
import { ExternalComponentWrapper } from "content-src/components/ExternalComponentWrapper/ExternalComponentWrapper";
import React from "react";

const DEFAULT_PROPS = {
 type: "SEARCH",
 className: "test-wrapper",
};

const flushPromises = () => new Promise(resolve => queueMicrotask(resolve));

const createMockConfig = (overrides = {}) => ({
 type: "SEARCH",
 componentURL: "chrome://test/content/component.mjs",
 tagName: "test-component",
 l10nURLs: [],
 ...overrides,
});

const createStateWithConfig = config => ({
 ...INITIAL_STATE,
 ExternalComponents: {
   components: [config],
 },
});

const createMockElement = sandbox => {
 const element = document.createElement("div");
 sandbox.spy(element, "setAttribute");
 sandbox.spy(element.style, "setProperty");
 return element;
};

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

describe("<ExternalComponentWrapper>", () => {
 let globals;
 let sandbox;
 const TestWrapper = ExternalComponentWrapper;

 beforeEach(() => {
   globals = new GlobalOverrider();
   sandbox = globals.sandbox;
 });

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

 const stubCreateElement = handlers => {
   const originalCreateElement = document.createElement.bind(document);
   return sandbox.stub(document, "createElement").callsFake(tagName => {
     if (handlers[tagName]) {
       return handlers[tagName]();
     }
     return originalCreateElement(tagName);
   });
 };

 it("should render a container div", () => {
   const wrapper = mount(
     <WrapWithProvider>
       <TestWrapper {...DEFAULT_PROPS} />
     </WrapWithProvider>
   );
   assert.ok(wrapper.exists());
   assert.equal(wrapper.find("div").length, 1);
 });

 it("should apply className to container div", () => {
   const wrapper = mount(
     <WrapWithProvider>
       <TestWrapper {...DEFAULT_PROPS} />
     </WrapWithProvider>
   );
   assert.equal(wrapper.find("div.test-wrapper").length, 1);
 });

 it("should warn when no configuration is found for type", async () => {
   const consoleWarnStub = sandbox.stub(console, "warn");
   mount(
     <WrapWithProvider>
       <TestWrapper {...DEFAULT_PROPS} />
     </WrapWithProvider>
   );

   await flushPromises();

   assert.calledWith(
     consoleWarnStub,
     "No external component configuration found for type: SEARCH"
   );
 });

 it("should not render custom element without configuration", async () => {
   const importModuleStub = sandbox.stub().resolves();
   const wrapper = mount(
     <WrapWithProvider>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );

   await flushPromises();

   assert.notCalled(importModuleStub);
   wrapper.unmount();
 });

 it("should load component module when configuration is available", async () => {
   const mockConfig = createMockConfig();
   const stateWithConfig = createStateWithConfig(mockConfig);
   const importModuleStub = sandbox.stub().resolves();

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();

   assert.calledWith(importModuleStub, mockConfig.componentURL);
   wrapper.unmount();
 });

 it("should create custom element with correct tag name", async () => {
   const mockConfig = createMockConfig();
   const stateWithConfig = createStateWithConfig(mockConfig);
   const mockElement = createMockElement(sandbox);
   const importModuleStub = sandbox.stub().resolves();

   const createElementStub = stubCreateElement({
     "test-component": () => mockElement,
   });

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();

   assert.calledWith(createElementStub, "test-component");
   wrapper.unmount();
 });

 it("should add l10n link elements to document head", async () => {
   const mockConfig = createMockConfig({
     l10nURLs: ["browser/test.ftl", "browser/test2.ftl"],
   });
   const stateWithConfig = createStateWithConfig(mockConfig);
   const mockLinkElement = { rel: "", href: "", remove: sandbox.spy() };
   const importModuleStub = sandbox.stub().resolves();

   stubCreateElement({
     link: () => mockLinkElement,
     "test-component": () => createMockElement(sandbox),
   });

   const appendChildStub = sandbox.stub(document.head, "appendChild");

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();

   assert.equal(appendChildStub.callCount, 2, "Should append two l10n links");
   assert.equal(mockLinkElement.rel, "localization");
   wrapper.unmount();
 });

 it("should set attributes on custom element", async () => {
   const mockConfig = createMockConfig({
     attributes: {
       "data-test": "value",
       role: "search",
     },
   });
   const stateWithConfig = createStateWithConfig(mockConfig);
   const mockElement = createMockElement(sandbox);
   const importModuleStub = sandbox.stub().resolves();

   stubCreateElement({
     "test-component": () => mockElement,
   });

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();

   assert.calledWith(mockElement.setAttribute, "data-test", "value");
   assert.calledWith(mockElement.setAttribute, "role", "search");
   wrapper.unmount();
 });

 it("should set CSS variables on custom element", async () => {
   const mockConfig = createMockConfig({
     cssVariables: {
       "--test-color": "blue",
       "--test-size": "10px",
     },
   });
   const stateWithConfig = createStateWithConfig(mockConfig);
   const mockElement = createMockElement(sandbox);
   const importModuleStub = sandbox.stub().resolves();

   stubCreateElement({
     "test-component": () => mockElement,
   });

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();

   assert.calledWith(mockElement.style.setProperty, "--test-color", "blue");
   assert.calledWith(mockElement.style.setProperty, "--test-size", "10px");
   wrapper.unmount();
 });

 it("should handle component load errors gracefully", async () => {
   const mockConfig = createMockConfig();
   const stateWithConfig = createStateWithConfig(mockConfig);
   const consoleErrorStub = sandbox.stub(console, "error");
   const importModuleStub = sandbox
     .stub()
     .rejects(new Error("Module load failed"));

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();
   wrapper.update();

   assert.calledWith(
     consoleErrorStub,
     "Failed to load external component for type SEARCH:",
     sinon.match.instanceOf(Error)
   );

   assert.equal(wrapper.html(), "", "Should render null on error");
   wrapper.unmount();
 });

 it("should clean up l10n links on unmount", async () => {
   const mockConfig = createMockConfig({
     l10nURLs: ["browser/test.ftl"],
   });
   const stateWithConfig = createStateWithConfig(mockConfig);
   const mockLinkElements = [];
   const importModuleStub = sandbox.stub().resolves();

   stubCreateElement({
     "test-component": () => createMockElement(sandbox),
     link: () => {
       const linkEl = { remove: sandbox.spy() };
       mockLinkElements.push(linkEl);
       return linkEl;
     },
   });

   sandbox.stub(document.head, "appendChild");

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();

   assert.equal(mockLinkElements.length, 1, "Should create one l10n link");

   wrapper.unmount();

   assert.called(mockLinkElements[0].remove);
 });

 it("should not create duplicate elements on multiple renders", async () => {
   const mockConfig = createMockConfig();
   const stateWithConfig = createStateWithConfig(mockConfig);
   const mockElement = createMockElement(sandbox);
   const importModuleStub = sandbox.stub().resolves();

   const createElementStub = stubCreateElement({
     "test-component": () => mockElement,
   });

   const wrapper = mount(
     <WrapWithProvider state={stateWithConfig}>
       <TestWrapper {...DEFAULT_PROPS} importModule={importModuleStub} />
     </WrapWithProvider>
   );
   await flushPromises();

   const initialCallCount = createElementStub.callCount;

   wrapper.setProps({ className: "new-class" });
   await flushPromises();

   assert.equal(
     createElementStub.callCount,
     initialCallCount,
     "Should not create element again on re-render with same type"
   );
   wrapper.unmount();
 });
});