Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
jest.mock(
"content-src/components/DiscoveryStreamComponents/FeatureHighlight/OMCHighlightRegistry.mjs",
() => {
const actual = jest.requireActual(
"content-src/components/DiscoveryStreamComponents/FeatureHighlight/OMCHighlightRegistry.mjs"
);
const TEST_REGISTRY = {
TestPopover: {
slot: "widgets-row",
shell: actual.SHELLS.POPOVER,
chrome: {
position: "inset-block-start inset-inline-center",
arrowPosition: "",
modalClassName: "test-popover-card",
},
body: {
image: { src: "test.png" },
title: { l10nId: "test-shared-title" },
subtitle: { l10nId: "test-shared-subtitle" },
},
dismiss: actual.DISMISS_MODES.BLOCK,
},
};
return {
...actual,
OMC_HIGHLIGHT_REGISTRY: TEST_REGISTRY,
getRegistryEntry: messageType =>
messageType ? TEST_REGISTRY[messageType] || null : null,
};
}
);
import { render } from "@testing-library/react";
import { WrapWithProvider } from "test/jest/test-utils";
import { OMCHighlightSlot } from "content-src/components/DiscoveryStreamComponents/FeatureHighlight/OMCHighlightSlot";
import { SLOTS } from "content-src/components/DiscoveryStreamComponents/FeatureHighlight/OMCHighlightSlots.mjs";
import { INITIAL_STATE } from "common/Reducers.sys.mjs";
function stateWithMessage(content) {
return {
...INITIAL_STATE,
Messages: {
...INITIAL_STATE.Messages,
messageData: { id: "test-message-id", content },
},
};
}
describe("<OMCHighlightSlot>", () => {
it("renders nothing when messageData has no messageType", () => {
const state = stateWithMessage({});
const { container } = render(
<WrapWithProvider state={state}>
<OMCHighlightSlot slot={SLOTS.WIDGETS_ROW} dispatch={jest.fn()} />
</WrapWithProvider>
);
expect(container.querySelector(".feature-highlight")).toBeNull();
});
it("renders nothing when messageType has no matching registry entry", () => {
const state = stateWithMessage({ messageType: "NotRegistered" });
const { container } = render(
<WrapWithProvider state={state}>
<OMCHighlightSlot slot={SLOTS.WIDGETS_ROW} dispatch={jest.fn()} />
</WrapWithProvider>
);
expect(container.querySelector(".feature-highlight")).toBeNull();
});
it("renders nothing when entry targets a different slot", () => {
const state = stateWithMessage({ messageType: "TestPopover" });
const { container } = render(
<WrapWithProvider state={state}>
<OMCHighlightSlot slot="some-other-slot" dispatch={jest.fn()} />
</WrapWithProvider>
);
expect(container.querySelector(".feature-highlight")).toBeNull();
});
it("renders the popover when messageType matches and slot is widgets-row", () => {
const state = stateWithMessage({ messageType: "TestPopover" });
const { container } = render(
<WrapWithProvider state={state}>
<OMCHighlightSlot slot={SLOTS.WIDGETS_ROW} dispatch={jest.fn()} />
</WrapWithProvider>
);
expect(container.querySelector(".feature-highlight")).toBeInTheDocument();
expect(container.querySelector(".test-popover-card")).toBeInTheDocument();
expect(container.querySelector(".title").getAttribute("data-l10n-id")).toBe(
"test-shared-title"
);
expect(
container.querySelector(".subtitle").getAttribute("data-l10n-id")
).toBe("test-shared-subtitle");
});
it("applies content overrides when OMC sends raw cardTitle/cardMessage", () => {
const state = stateWithMessage({
messageType: "TestPopover",
cardTitle: "Override Title",
cardMessage: "Override Body",
});
const { container } = render(
<WrapWithProvider state={state}>
<OMCHighlightSlot slot={SLOTS.WIDGETS_ROW} dispatch={jest.fn()} />
</WrapWithProvider>
);
expect(container.querySelector(".title").textContent).toBe(
"Override Title"
);
expect(container.querySelector(".subtitle").textContent).toBe(
"Override Body"
);
});
});