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
import React from "react";
import { mount } from "enzyme";
import { actionTypes as at } from "common/Actions.mjs";
import { useWidgetTelemetry } from "content-src/components/Widgets/useWidgetTelemetry";
const WEATHER_WIDGET = { id: "weather", telemetryName: "weather" };
const FOCUS_TIMER_WIDGET = { id: "focusTimer", telemetryName: "focus_timer" };
const LISTS_WIDGET = { id: "lists", telemetryName: "lists" };
function TestComponent({
dispatch,
widget,
widgetSize,
legacyImpressionTypes,
legacyUserEventType,
showEl = true,
onRender,
}) {
const telemetry = useWidgetTelemetry({
dispatch,
widget,
widgetSize,
legacyImpressionTypes,
legacyUserEventType,
});
onRender(telemetry);
return showEl ? <div ref={telemetry.impressionRef} /> : null;
}
describe("useWidgetTelemetry", () => {
let sandbox;
let dispatch;
let observerStub;
beforeEach(() => {
sandbox = sinon.createSandbox();
dispatch = sandbox.spy();
observerStub = sandbox
.stub(window, "IntersectionObserver")
.callsFake(function (cb) {
this.observe = sandbox.spy();
this.unobserve = sandbox.spy();
this.disconnect = sandbox.spy();
this.callback = cb;
});
});
afterEach(() => {
sandbox.restore();
});
describe("impression observer", () => {
it("dispatches WIDGETS_IMPRESSION once when element intersects", () => {
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={() => {}}
/>
);
const observerInstance = observerStub.getCall(0).returnValue;
const el = wrapper.find("div").getDOMNode();
observerInstance.callback([{ isIntersecting: true, target: el }]);
assert.calledOnce(dispatch);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_IMPRESSION);
assert.deepEqual(action.data, {
widget_name: "weather",
widget_size: "medium",
});
});
it("does not dispatch a second impression after the first", () => {
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={() => {}}
/>
);
const observerInstance = observerStub.getCall(0).returnValue;
const el = wrapper.find("div").getDOMNode();
observerInstance.callback([{ isIntersecting: true, target: el }]);
observerInstance.callback([{ isIntersecting: true, target: el }]);
assert.calledOnce(dispatch);
});
it("observes an element that mounts after the initial render", () => {
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
showEl={false}
onRender={() => {}}
/>
);
const observerInstance = observerStub.getCall(0).returnValue;
// Initial render: no element, observer didn't observe anything yet.
assert.notCalled(observerInstance.observe);
// Later render reveals the element; the callback ref should observe it.
wrapper.setProps({ showEl: true });
assert.calledOnce(observerInstance.observe);
const el = wrapper.find("div").getDOMNode();
observerInstance.callback([{ isIntersecting: true, target: el }]);
assert.calledOnce(dispatch);
assert.equal(dispatch.getCall(0).args[0].type, at.WIDGETS_IMPRESSION);
});
it("ignores a queued intersection entry for a previously-unobserved target", () => {
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={() => {}}
/>
);
const observerInstance = observerStub.getCall(0).returnValue;
const firstEl = wrapper.find("div").getDOMNode();
// Reassign the ref to a different node; firstEl is no longer the
// observed target.
wrapper.setProps({ showEl: false });
wrapper.setProps({ showEl: true });
// A queued callback for the old target fires; hook must not dispatch.
observerInstance.callback([{ isIntersecting: true, target: firstEl }]);
assert.notCalled(dispatch);
});
it("unobserves the previous element when the ref is reassigned", () => {
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={() => {}}
/>
);
const observerInstance = observerStub.getCall(0).returnValue;
const firstEl = wrapper.find("div").getDOMNode();
assert.calledOnce(observerInstance.observe);
assert.calledWith(observerInstance.observe, firstEl);
// Force the element to remount with a different node.
wrapper.setProps({ showEl: false });
assert.calledOnce(observerInstance.unobserve);
assert.calledWith(observerInstance.unobserve, firstEl);
wrapper.setProps({ showEl: true });
const secondEl = wrapper.find("div").getDOMNode();
assert.calledTwice(observerInstance.observe);
assert.equal(observerInstance.observe.lastCall.args[0], secondEl);
});
});
describe("recordImpression", () => {
it("dispatches WIDGETS_IMPRESSION manually with the current size", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
showEl={false}
onRender={t => (telemetry = t)}
/>
);
telemetry.recordImpression();
assert.calledOnce(dispatch);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_IMPRESSION);
assert.deepEqual(action.data, {
widget_name: "weather",
widget_size: "medium",
});
});
it("shares the impressionFired guard with the observer", () => {
let telemetry;
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
const observerInstance = observerStub.getCall(0).returnValue;
const el = wrapper.find("div").getDOMNode();
observerInstance.callback([{ isIntersecting: true, target: el }]);
telemetry.recordImpression();
assert.calledOnce(dispatch);
});
it("honors per-call size override", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
showEl={false}
onRender={t => (telemetry = t)}
/>
);
telemetry.recordImpression({ size: "large" });
assert.equal(dispatch.getCall(0).args[0].data.widget_size, "large");
});
});
describe("recordUserAction", () => {
it("dispatches WIDGETS_USER_EVENT via OnlyToMain by default", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="small"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("learn_more", { source: "context_menu" });
assert.calledOnce(dispatch);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_USER_EVENT);
assert.equal(action.meta.to, "ActivityStream:Main");
assert.equal(action.meta.skipLocal, true);
assert.deepEqual(action.data, {
widget_name: "weather",
widget_size: "small",
widget_source: "context_menu",
user_action: "learn_more",
});
});
it("dispatches via AlsoToMain when alsoToMain: true", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={LISTS_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("task_complete", {
source: "widget",
alsoToMain: true,
});
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_USER_EVENT);
assert.equal(action.meta.to, "ActivityStream:Main");
assert.notEqual(action.meta.skipLocal, true);
});
it("includes action_value when value is provided", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("change_temperature_units", {
source: "context_menu",
value: "c",
});
assert.equal(dispatch.getCall(0).args[0].data.action_value, "c");
});
it("omits action_value when value is not provided", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("learn_more", { source: "context_menu" });
assert.notProperty(dispatch.getCall(0).args[0].data, "action_value");
});
it("reads the latest widget_size after a prop change", () => {
let telemetry;
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="small"
onRender={t => (telemetry = t)}
/>
);
wrapper.setProps({ widgetSize: "large" });
telemetry.recordUserAction("provider_link_click", { source: "widget" });
assert.equal(dispatch.getCall(0).args[0].data.widget_size, "large");
});
it("honors an explicit size override", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("change_size", {
source: "context_menu",
value: "small",
size: "small",
});
assert.equal(dispatch.getCall(0).args[0].data.widget_size, "small");
});
});
describe("recordEnabled", () => {
it("dispatches WIDGETS_ENABLED with enabled flag and widget_size", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordEnabled(false, { source: "context_menu" });
assert.calledOnce(dispatch);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_ENABLED);
assert.deepEqual(action.data, {
widget_name: "weather",
widget_size: "medium",
widget_source: "context_menu",
enabled: false,
});
});
it("honors size override", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordEnabled(true, { source: "widget", size: "large" });
assert.equal(dispatch.getCall(0).args[0].data.widget_size, "large");
assert.equal(dispatch.getCall(0).args[0].data.enabled, true);
});
});
describe("recordError", () => {
it("dispatches WIDGETS_ERROR with error_type and no widget_source", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordError("load_error");
assert.calledOnce(dispatch);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_ERROR);
assert.deepEqual(action.data, {
widget_name: "weather",
widget_size: "medium",
error_type: "load_error",
});
assert.notProperty(action.data, "widget_source");
});
it("honors size override", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={WEATHER_WIDGET}
widgetSize="medium"
onRender={t => (telemetry = t)}
/>
);
telemetry.recordError("load_error", { size: "small" });
assert.equal(dispatch.getCall(0).args[0].data.widget_size, "small");
});
});
// co-dispatch alongside the unified events. Delete this block once they go.
describe("legacy co-dispatch", () => {
describe("impression", () => {
it("co-dispatches legacy impression types BEFORE WIDGETS_IMPRESSION", () => {
const wrapper = mount(
<TestComponent
dispatch={dispatch}
widget={FOCUS_TIMER_WIDGET}
widgetSize="large"
legacyImpressionTypes={[at.WIDGETS_TIMER_USER_IMPRESSION]}
onRender={() => {}}
/>
);
const observerInstance = observerStub.getCall(0).returnValue;
const el = wrapper.find("div").getDOMNode();
observerInstance.callback([{ isIntersecting: true, target: el }]);
assert.calledTwice(dispatch);
assert.equal(
dispatch.getCall(0).args[0].type,
at.WIDGETS_TIMER_USER_IMPRESSION
);
assert.equal(dispatch.getCall(1).args[0].type, at.WIDGETS_IMPRESSION);
});
});
describe("user event", () => {
it("co-dispatches the legacy user-event type BEFORE the unified event when legacy: true", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={FOCUS_TIMER_WIDGET}
widgetSize="large"
legacyUserEventType={at.WIDGETS_TIMER_USER_EVENT}
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("timer_play", {
source: "widget",
legacy: true,
});
assert.calledTwice(dispatch);
const [legacy] = dispatch.getCall(0).args;
const [modern] = dispatch.getCall(1).args;
assert.equal(legacy.type, at.WIDGETS_TIMER_USER_EVENT);
assert.deepEqual(legacy.data, { userAction: "timer_play" });
assert.equal(modern.type, at.WIDGETS_USER_EVENT);
});
it("does NOT co-dispatch legacy when legacy flag is omitted", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={FOCUS_TIMER_WIDGET}
widgetSize="large"
legacyUserEventType={at.WIDGETS_TIMER_USER_EVENT}
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("change_size", {
source: "context_menu",
value: "small",
size: "small",
});
assert.calledOnce(dispatch);
assert.equal(dispatch.getCall(0).args[0].type, at.WIDGETS_USER_EVENT);
});
it("legacy co-dispatch follows the alsoToMain routing flag", () => {
let telemetry;
mount(
<TestComponent
dispatch={dispatch}
widget={LISTS_WIDGET}
widgetSize="medium"
legacyUserEventType={at.WIDGETS_LISTS_USER_EVENT}
onRender={t => (telemetry = t)}
/>
);
telemetry.recordUserAction("task_complete", {
source: "widget",
alsoToMain: true,
legacy: true,
});
assert.calledTwice(dispatch);
assert.notEqual(dispatch.getCall(0).args[0].meta.skipLocal, true);
assert.notEqual(dispatch.getCall(1).args[0].meta.skipLocal, true);
});
});
});
});