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