TopicsWidget.test.jsx (6906B)
1 import { combineReducers, createStore } from "redux"; 2 import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs"; 3 import { Provider } from "react-redux"; 4 import { 5 _TopicsWidget as TopicsWidgetBase, 6 TopicsWidget, 7 } from "content-src/components/DiscoveryStreamComponents/TopicsWidget/TopicsWidget"; 8 import { SafeAnchor } from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor"; 9 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs"; 10 import { mount } from "enzyme"; 11 import React from "react"; 12 13 describe("Discovery Stream <TopicsWidget>", () => { 14 let sandbox; 15 let wrapper; 16 let dispatch; 17 let fakeWindow; 18 19 beforeEach(() => { 20 sandbox = sinon.createSandbox(); 21 dispatch = sandbox.stub(); 22 fakeWindow = { 23 innerWidth: 1000, 24 innerHeight: 900, 25 }; 26 27 wrapper = mount( 28 <TopicsWidgetBase 29 dispatch={dispatch} 30 source="CARDGRID_WIDGET" 31 position={2} 32 id={1} 33 windowObj={fakeWindow} 34 DiscoveryStream={{ 35 experimentData: { 36 utmCampaign: "utmCampaign", 37 utmContent: "utmContent", 38 utmSource: "utmSource", 39 }, 40 }} 41 /> 42 ); 43 }); 44 45 afterEach(() => { 46 sandbox.restore(); 47 }); 48 49 it("should render", () => { 50 assert.ok(wrapper.exists()); 51 assert.ok(wrapper.find(".ds-topics-widget").exists()); 52 }); 53 54 it("should connect with DiscoveryStream store", () => { 55 let store = createStore(combineReducers(reducers), INITIAL_STATE); 56 wrapper = mount( 57 <Provider store={store}> 58 <TopicsWidget /> 59 </Provider> 60 ); 61 62 const topicsWidget = wrapper.find(TopicsWidgetBase); 63 assert.ok(topicsWidget.exists()); 64 assert.lengthOf(topicsWidget, 1); 65 assert.deepEqual( 66 topicsWidget.props().DiscoveryStream.experimentData, 67 INITIAL_STATE.DiscoveryStream.experimentData 68 ); 69 }); 70 71 describe("dispatch", () => { 72 it("should dispatch loaded event", () => { 73 assert.callCount(dispatch, 1); 74 const [first] = dispatch.getCalls(); 75 assert.calledWith( 76 first, 77 ac.DiscoveryStreamLoadedContent({ 78 source: "CARDGRID_WIDGET", 79 tiles: [ 80 { 81 id: 1, 82 pos: 2, 83 }, 84 ], 85 }) 86 ); 87 }); 88 89 it("should dispatch click event for technology", () => { 90 // Click technology topic. 91 wrapper.find(SafeAnchor).at(0).simulate("click"); 92 93 // First call is DiscoveryStreamLoadedContent, which is already tested. 94 const [second, third, fourth] = dispatch.getCalls().slice(1, 4); 95 96 assert.callCount(dispatch, 4); 97 assert.calledWith( 98 second, 99 ac.OnlyToMain({ 100 type: at.OPEN_LINK, 101 data: { 102 event: { 103 altKey: undefined, 104 button: undefined, 105 ctrlKey: undefined, 106 metaKey: undefined, 107 shiftKey: undefined, 108 }, 109 referrer: "https://getpocket.com/recommendations", 110 url: "https://getpocket.com/explore/technology?utm_source=utmSource&utm_content=utmContent&utm_campaign=utmCampaign", 111 is_sponsored: undefined, 112 }, 113 }) 114 ); 115 assert.calledWith( 116 third, 117 ac.DiscoveryStreamUserEvent({ 118 event: "CLICK", 119 source: "CARDGRID_WIDGET", 120 action_position: 2, 121 value: { 122 card_type: "topics_widget", 123 topic: "technology", 124 position_in_card: 0, 125 section_position: 2, 126 }, 127 }) 128 ); 129 assert.calledWith( 130 fourth, 131 ac.ImpressionStats({ 132 click: 0, 133 source: "CARDGRID_WIDGET", 134 tiles: [{ id: 1, pos: 2 }], 135 window_inner_width: 1000, 136 window_inner_height: 900, 137 }) 138 ); 139 }); 140 141 it("should dispatch click event for must reads", () => { 142 // Click must reads topic. 143 wrapper.find(SafeAnchor).at(8).simulate("click"); 144 145 // First call is DiscoveryStreamLoadedContent, which is already tested. 146 const [second, third, fourth] = dispatch.getCalls().slice(1, 4); 147 148 assert.callCount(dispatch, 4); 149 assert.calledWith( 150 second, 151 ac.OnlyToMain({ 152 type: at.OPEN_LINK, 153 data: { 154 event: { 155 altKey: undefined, 156 button: undefined, 157 ctrlKey: undefined, 158 metaKey: undefined, 159 shiftKey: undefined, 160 }, 161 referrer: "https://getpocket.com/recommendations", 162 url: "https://getpocket.com/collections?utm_source=utmSource&utm_content=utmContent&utm_campaign=utmCampaign", 163 is_sponsored: undefined, 164 }, 165 }) 166 ); 167 assert.calledWith( 168 third, 169 ac.DiscoveryStreamUserEvent({ 170 event: "CLICK", 171 source: "CARDGRID_WIDGET", 172 action_position: 2, 173 value: { 174 card_type: "topics_widget", 175 topic: "must-reads", 176 position_in_card: 8, 177 section_position: 2, 178 }, 179 }) 180 ); 181 assert.calledWith( 182 fourth, 183 ac.ImpressionStats({ 184 click: 0, 185 source: "CARDGRID_WIDGET", 186 tiles: [{ id: 1, pos: 2 }], 187 window_inner_width: 1000, 188 window_inner_height: 900, 189 }) 190 ); 191 }); 192 193 it("should dispatch click event for more topics", () => { 194 // Click more-topics. 195 wrapper.find(SafeAnchor).at(9).simulate("click"); 196 197 // First call is DiscoveryStreamLoadedContent, which is already tested. 198 const [second, third, fourth] = dispatch.getCalls().slice(1, 4); 199 200 assert.callCount(dispatch, 4); 201 assert.calledWith( 202 second, 203 ac.OnlyToMain({ 204 type: at.OPEN_LINK, 205 data: { 206 event: { 207 altKey: undefined, 208 button: undefined, 209 ctrlKey: undefined, 210 metaKey: undefined, 211 shiftKey: undefined, 212 }, 213 referrer: "https://getpocket.com/recommendations", 214 url: "https://getpocket.com/?utm_source=utmSource&utm_content=utmContent&utm_campaign=utmCampaign", 215 is_sponsored: undefined, 216 }, 217 }) 218 ); 219 assert.calledWith( 220 third, 221 ac.DiscoveryStreamUserEvent({ 222 event: "CLICK", 223 source: "CARDGRID_WIDGET", 224 action_position: 2, 225 value: { 226 card_type: "topics_widget", 227 topic: "more-topics", 228 section_position: 2, 229 }, 230 }) 231 ); 232 assert.calledWith( 233 fourth, 234 ac.ImpressionStats({ 235 click: 0, 236 source: "CARDGRID_WIDGET", 237 tiles: [{ id: 1, pos: 2 }], 238 window_inner_width: 1000, 239 window_inner_height: 900, 240 }) 241 ); 242 }); 243 }); 244 });