ContentSection.test.jsx (5980B)
1 import { actionCreators as ac } from "common/Actions.mjs"; 2 import { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection"; 3 import { mount } from "enzyme"; 4 import React from "react"; 5 6 import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs"; 7 import { combineReducers, createStore } from "redux"; 8 import { Provider } from "react-redux"; 9 10 const DEFAULT_PROPS = { 11 mayHaveWidgets: false, 12 mayHaveWeather: true, 13 mayHaveTimerWidget: false, 14 mayHaveListsWidget: false, 15 wallpapersEnabled: false, 16 activeWallpaper: null, 17 exitEventFired: false, 18 enabledSections: { 19 topSitesEnabled: true, 20 pocketEnabled: true, 21 weatherEnabled: true, 22 showInferredPersonalizationEnabled: false, 23 topSitesRowsCount: 1, 24 }, 25 enabledWidgets: { 26 timerEnabled: false, 27 listsEnabled: false, 28 }, 29 dispatch: sinon.stub(), 30 setPref: sinon.stub(), 31 openPreferences: sinon.stub(), 32 pocketRegion: "US", 33 mayHaveInferredPersonalization: false, 34 mayHaveTopicSections: false, 35 }; 36 37 function WrapWithProvider({ children, state = INITIAL_STATE }) { 38 const store = createStore(combineReducers(reducers), state); 39 return <Provider store={store}>{children}</Provider>; 40 } 41 42 describe("ContentSection", () => { 43 let wrapper; 44 45 beforeEach(() => { 46 wrapper = mount(<ContentSection {...DEFAULT_PROPS} />); 47 }); 48 49 afterEach(() => { 50 if (wrapper) { 51 wrapper.unmount(); 52 wrapper = null; 53 } 54 }); 55 56 it("should render the component", () => { 57 assert.ok(wrapper.exists()); 58 }); 59 60 it("should look for a data-eventSource attribute and dispatch an event for INPUT", () => { 61 wrapper.instance().onPreferenceSelect({ 62 target: { 63 nodeName: "INPUT", 64 checked: true, 65 dataset: { preference: "foo", eventSource: "bar" }, 66 }, 67 }); 68 69 assert.calledWith( 70 DEFAULT_PROPS.dispatch, 71 ac.UserEvent({ 72 event: "PREF_CHANGED", 73 source: "bar", 74 value: { status: true, menu_source: "CUSTOMIZE_MENU" }, 75 }) 76 ); 77 assert.calledWith(DEFAULT_PROPS.setPref, "foo", true); 78 }); 79 80 it("should have data-eventSource attributes on relevant pref changing inputs", () => { 81 wrapper = mount(<ContentSection {...DEFAULT_PROPS} />); 82 assert.equal( 83 wrapper.find("#weather-toggle").prop("data-eventSource"), 84 "WEATHER" 85 ); 86 assert.equal( 87 wrapper.find("#shortcuts-toggle").prop("data-eventSource"), 88 "TOP_SITES" 89 ); 90 assert.equal( 91 wrapper.find("#pocket-toggle").prop("data-eventSource"), 92 "TOP_STORIES" 93 ); 94 }); 95 96 // Bug 1985305 - "Widgets Toggle Section" Layout 97 98 it("renders the Widgets section when mayHaveWidgets = true", () => { 99 wrapper = mount( 100 <WrapWithProvider> 101 <ContentSection {...DEFAULT_PROPS} mayHaveWidgets={true} /> 102 </WrapWithProvider> 103 ); 104 assert.isTrue(wrapper.find(".widgets-section").exists()); 105 }); 106 107 it("does not render the Widgets section when mayHaveWidgets = false", () => { 108 wrapper = mount( 109 <WrapWithProvider> 110 <ContentSection {...DEFAULT_PROPS} mayHaveWidgets={false} /> 111 </WrapWithProvider> 112 ); 113 assert.isFalse(wrapper.find(".widgets-section").exists()); 114 }); 115 116 it("places Weather under Widgets when widgets are enabled and doesn't render default Weather placement", () => { 117 wrapper = mount( 118 <WrapWithProvider> 119 <ContentSection 120 {...DEFAULT_PROPS} 121 mayHaveWidgets={true} 122 mayHaveWeather={true} 123 enabledSections={{ 124 ...DEFAULT_PROPS.enabledSections, 125 weatherEnabled: true, 126 }} 127 /> 128 </WrapWithProvider> 129 ); 130 131 assert.isTrue( 132 wrapper.find(".widgets-section #weather-section #weather-toggle").exists() 133 ); 134 assert.isFalse(wrapper.find(".settings-toggles #weather-section").exists()); 135 }); 136 137 it("places Weather in the default area when widgets are disabled", () => { 138 wrapper = mount( 139 <WrapWithProvider> 140 <ContentSection 141 {...DEFAULT_PROPS} 142 mayHaveWidgets={false} 143 mayHaveWeather={true} 144 /> 145 </WrapWithProvider> 146 ); 147 148 assert.isTrue( 149 wrapper 150 .find(".settings-toggles #weather-section #weather-toggle") 151 .exists() 152 ); 153 assert.isFalse(wrapper.find(".widgets-section #weather-section").exists()); 154 }); 155 156 it("renders Lists toggle only when mayHaveListsWidget = true in Widgets section", () => { 157 wrapper = mount( 158 <WrapWithProvider> 159 <ContentSection 160 {...DEFAULT_PROPS} 161 mayHaveWidgets={true} 162 mayHaveListsWidget={true} 163 enabledWidgets={{ 164 ...DEFAULT_PROPS.enabledWidgets, 165 listsEnabled: true, 166 }} 167 /> 168 </WrapWithProvider> 169 ); 170 171 assert.isTrue( 172 wrapper 173 .find(".widgets-section #lists-widget-section #lists-toggle") 174 .exists() 175 ); 176 177 wrapper.setProps({ 178 children: ( 179 <ContentSection 180 {...DEFAULT_PROPS} 181 mayHaveWidgets={true} 182 mayHaveListsWidget={false} 183 /> 184 ), 185 }); 186 assert.isFalse(wrapper.find("#lists-widget-section").exists()); 187 }); 188 189 it("renders Timer toggle only when mayHaveTimerWidget = true in Widgets section", () => { 190 wrapper = mount( 191 <WrapWithProvider> 192 <ContentSection 193 {...DEFAULT_PROPS} 194 mayHaveWidgets={true} 195 mayHaveTimerWidget={true} 196 enabledWidgets={{ 197 ...DEFAULT_PROPS.enabledWidgets, 198 timerEnabled: true, 199 }} 200 /> 201 </WrapWithProvider> 202 ); 203 204 assert.isTrue( 205 wrapper 206 .find(".widgets-section #timer-widget-section #timer-toggle") 207 .exists() 208 ); 209 210 wrapper.setProps({ 211 children: ( 212 <ContentSection 213 {...DEFAULT_PROPS} 214 mayHaveWidgets={true} 215 mayHaveTimerWidget={false} 216 /> 217 ), 218 }); 219 assert.isFalse(wrapper.find("#timer-widget-section").exists()); 220 }); 221 });