1import {
2  DSContextFooter,
3  StatusMessage,
4} from "content-src/components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter";
5import React from "react";
6import { mount } from "enzyme";
7import { cardContextTypes } from "content-src/components/Card/types.js";
8import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText.jsx";
9
10describe("<DSContextFooter>", () => {
11  let wrapper;
12  let sandbox;
13  const bookmarkBadge = "bookmark";
14  const removeBookmarkBadge = "removedBookmark";
15  const context = "Sponsored by Babel";
16  const sponsored_by_override = "Sponsored override";
17  const engagement = "Popular";
18
19  beforeEach(() => {
20    wrapper = mount(<DSContextFooter />);
21    sandbox = sinon.createSandbox();
22  });
23
24  afterEach(() => {
25    sandbox.restore();
26  });
27
28  it("should render", () => {
29    assert.isTrue(wrapper.exists());
30    assert.isOk(wrapper.find(".story-footer"));
31  });
32  it("should not render an engagement status if display_engagement_labels is false", () => {
33    wrapper = mount(
34      <DSContextFooter
35        display_engagement_labels={false}
36        engagement={engagement}
37      />
38    );
39
40    const engagementLabel = wrapper.find(".story-view-count");
41    assert.equal(engagementLabel.length, 0);
42  });
43  it("should render an engagement status if no badge and spoc passed", () => {
44    wrapper = mount(
45      <DSContextFooter
46        display_engagement_labels={true}
47        engagement={engagement}
48      />
49    );
50
51    const engagementLabel = wrapper.find(".story-view-count");
52    assert.equal(engagementLabel.text(), engagement);
53  });
54  it("should render a badge if a proper badge prop is passed", () => {
55    wrapper = mount(
56      <DSContextFooter context_type={bookmarkBadge} engagement={engagement} />
57    );
58    const { fluentID } = cardContextTypes[bookmarkBadge];
59
60    assert.lengthOf(wrapper.find(".story-view-count"), 0);
61    const statusLabel = wrapper.find(".story-context-label");
62    assert.equal(statusLabel.prop("data-l10n-id"), fluentID);
63  });
64  it("should only render a sponsored context if pass a sponsored context", async () => {
65    wrapper = mount(
66      <DSContextFooter
67        context_type={bookmarkBadge}
68        context={context}
69        engagement={engagement}
70      />
71    );
72
73    assert.lengthOf(wrapper.find(".story-view-count"), 0);
74    assert.lengthOf(wrapper.find(StatusMessage), 0);
75    assert.equal(wrapper.find(".story-sponsored-label").text(), context);
76  });
77  it("should render a sponsored_by_override if passed a sponsored_by_override", async () => {
78    wrapper = mount(
79      <DSContextFooter
80        context_type={bookmarkBadge}
81        context={context}
82        sponsored_by_override={sponsored_by_override}
83        engagement={engagement}
84      />
85    );
86
87    assert.equal(
88      wrapper.find(".story-sponsored-label").text(),
89      sponsored_by_override
90    );
91  });
92  it("should render nothing with a sponsored_by_override empty string", async () => {
93    wrapper = mount(
94      <DSContextFooter
95        context_type={bookmarkBadge}
96        context={context}
97        sponsored_by_override=""
98        engagement={engagement}
99      />
100    );
101
102    assert.isFalse(wrapper.find(".story-sponsored-label").exists());
103  });
104  it("should render localized string with sponsor with no sponsored_by_override", async () => {
105    wrapper = mount(
106      <DSContextFooter
107        context_type={bookmarkBadge}
108        context={context}
109        sponsor="Nimoy"
110        engagement={engagement}
111      />
112    );
113
114    assert.equal(
115      wrapper
116        .find(".story-sponsored-label")
117        .children()
118        .at(0)
119        .type(),
120      FluentOrText
121    );
122  });
123  it("should render a new badge if props change from an old badge to a new one", async () => {
124    wrapper = mount(<DSContextFooter context_type={bookmarkBadge} />);
125
126    const { fluentID: bookmarkFluentID } = cardContextTypes[bookmarkBadge];
127    const bookmarkStatusMessage = wrapper.find(
128      `div[data-l10n-id='${bookmarkFluentID}']`
129    );
130    assert.isTrue(bookmarkStatusMessage.exists());
131
132    const { fluentID: removeBookmarkFluentID } = cardContextTypes[
133      removeBookmarkBadge
134    ];
135
136    wrapper.setProps({ context_type: removeBookmarkBadge });
137    await wrapper.update();
138
139    assert.isEmpty(bookmarkStatusMessage);
140    const removedBookmarkStatusMessage = wrapper.find(
141      `div[data-l10n-id='${removeBookmarkFluentID}']`
142    );
143    assert.isTrue(removedBookmarkStatusMessage.exists());
144  });
145});
146