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 { WidgetCelebration } from "content-src/components/Widgets/WidgetCelebration";
const DEFAULT_FRAME = { width: 300, height: 200, strokeInset: 1.5, radius: 8 };
const defaultProps = {
celebrationFrame: DEFAULT_FRAME,
celebrationId: 1,
headlineL10nId: "test-headline",
onComplete: () => {},
subheadL10nId: "test-subhead",
};
describe("<WidgetCelebration>", () => {
it("renders", () => {
const wrapper = mount(<WidgetCelebration {...defaultProps} />);
assert.ok(wrapper.exists());
});
it("uses the default widget-celebration classNamePrefix", () => {
const wrapper = mount(<WidgetCelebration {...defaultProps} />);
assert.ok(wrapper.find(".widget-celebration").exists());
assert.ok(wrapper.find(".widget-celebration-copy").exists());
assert.ok(wrapper.find(".widget-celebration-effects").exists());
assert.ok(wrapper.find(".widget-celebration-illustration").exists());
});
it("uses a custom classNamePrefix", () => {
const wrapper = mount(
<WidgetCelebration
{...defaultProps}
classNamePrefix="lists-celebration"
/>
);
assert.ok(wrapper.find(".lists-celebration").exists());
assert.ok(wrapper.find(".lists-celebration-copy").exists());
assert.isFalse(wrapper.find(".widget-celebration").exists());
});
it("appends ?run=celebrationId to SVG illustration src", () => {
const wrapper = mount(
<WidgetCelebration {...defaultProps} celebrationId={3} />
);
assert.ok(wrapper.find("img").prop("src").endsWith("?run=3"));
});
it("does not modify non-SVG illustration src", () => {
const wrapper = mount(
<WidgetCelebration {...defaultProps} illustrationSrc={src} />
);
assert.equal(wrapper.find("img").prop("src"), src);
});
it("renders headline with correct l10n id", () => {
const wrapper = mount(<WidgetCelebration {...defaultProps} />);
assert.equal(
wrapper.find(".widget-celebration-headline").prop("data-l10n-id"),
"test-headline"
);
});
it("renders subhead with correct l10n id", () => {
const wrapper = mount(<WidgetCelebration {...defaultProps} />);
assert.equal(
wrapper.find(".widget-celebration-subhead").prop("data-l10n-id"),
"test-subhead"
);
});
it("calls onComplete when animation ends on root with the lifecycle animation name", () => {
const onComplete = sinon.stub();
const wrapper = mount(
<WidgetCelebration {...defaultProps} onComplete={onComplete} />
);
const root = wrapper.find(".widget-celebration");
const node = root.getDOMNode();
root.prop("onAnimationEnd")({
target: node,
currentTarget: node,
animationName: "widget-celebration-lifecycle",
});
assert.ok(onComplete.calledOnce);
});
it("does not call onComplete for a different animation name", () => {
const onComplete = sinon.stub();
const wrapper = mount(
<WidgetCelebration {...defaultProps} onComplete={onComplete} />
);
const root = wrapper.find(".widget-celebration");
const node = root.getDOMNode();
root.prop("onAnimationEnd")({
target: node,
currentTarget: node,
animationName: "other-animation",
});
assert.ok(onComplete.notCalled);
});
it("does not call onComplete when target is not currentTarget", () => {
const onComplete = sinon.stub();
const wrapper = mount(
<WidgetCelebration {...defaultProps} onComplete={onComplete} />
);
const root = wrapper.find(".widget-celebration");
const node = root.getDOMNode();
root.prop("onAnimationEnd")({
target: document.createElement("div"),
currentTarget: node,
animationName: "widget-celebration-lifecycle",
});
assert.ok(onComplete.notCalled);
});
it("does not throw when onComplete is not provided", () => {
const wrapper = mount(
<WidgetCelebration {...defaultProps} onComplete={undefined} />
);
const root = wrapper.find(".widget-celebration");
const node = root.getDOMNode();
assert.doesNotThrow(() => {
root.prop("onAnimationEnd")({
target: node,
currentTarget: node,
animationName: "widget-celebration-lifecycle",
});
});
});
});