ActionChecklist.test.jsx (7174B)
1 import React from "react"; 2 import { mount, shallow } from "enzyme"; 3 import { 4 ActionChecklist, 5 ActionChecklistItem, 6 ActionChecklistProgressBar, 7 } from "content-src/components/ActionChecklist"; 8 import { GlobalOverrider } from "asrouter/tests/unit/utils"; 9 10 describe("Action Checklist component", () => { 11 let globals; 12 13 describe("<ActionChecklist>", () => { 14 let sandbox; 15 const mockContent = { 16 action_checklist_subtitle: { 17 raw: "Test subtitle", 18 }, 19 tiles: { 20 data: [ 21 { 22 type: "action_checklist", 23 data: [ 24 { 25 id: "action-checklist-test", 26 targeting: "false", 27 label: { 28 raw: "Test label", 29 }, 30 action: { 31 data: { 32 pref: { 33 name: "messaging-system-action.test1", 34 value: "false", 35 }, 36 }, 37 type: "SET_PREF", 38 }, 39 }, 40 { 41 id: "action-checklist-test2", 42 targeting: "false", 43 label: { 44 raw: "Test label 2", 45 }, 46 action: { 47 data: { 48 pref: { 49 name: "messaging-system-action.test2", 50 value: "false", 51 }, 52 }, 53 type: "SET_PREF", 54 }, 55 }, 56 ], 57 }, 58 ], 59 }, 60 }; 61 62 beforeEach(async () => { 63 sandbox = sinon.createSandbox(); 64 globals = new GlobalOverrider(); 65 globals.set({ 66 AWEvaluateAttributeTargeting: () => Promise.resolve(), 67 AWSendEventTelemetry: () => {}, 68 }); 69 }); 70 71 afterEach(async () => { 72 globals.restore(); 73 sandbox.restore(); 74 }); 75 76 it("should render", async () => { 77 const wrapper = mount(<ActionChecklist content={mockContent} />); 78 assert.ok(wrapper.exists()); 79 }); 80 81 it("should render a subtitle when the action_checklist_subtitle property is present", () => { 82 const wrapper = mount(<ActionChecklist content={mockContent} />); 83 let subtitle = wrapper.find(".action-checklist-subtitle"); 84 assert.ok(subtitle); 85 assert.equal(subtitle.text(), mockContent.action_checklist_subtitle.raw); 86 }); 87 88 it("should render a number of action checklist items equal to the number of items in its configuration", async () => { 89 const wrapper = mount(<ActionChecklist content={mockContent} />); 90 91 assert.equal(wrapper.children().length, mockContent.tiles.data.length); 92 assert.ok(wrapper.exists()); 93 }); 94 }); 95 96 describe("<ActionChecklistItem>", () => { 97 let sandbox; 98 99 beforeEach(async () => { 100 globals = new GlobalOverrider(); 101 globals.set({ 102 AWEvaluateAttributeTargeting: () => Promise.resolve(), 103 }); 104 sandbox = sinon.createSandbox(); 105 }); 106 107 afterEach(async () => { 108 globals.restore(); 109 sandbox.restore(); 110 }); 111 112 const mockItem = { 113 id: "test-item", 114 targeting: "true", 115 label: { 116 raw: "test", 117 }, 118 showExternalLinkIcon: true, 119 }; 120 121 const handleAction = sinon.spy(); 122 123 it("should render with a button", async () => { 124 const wrapper = shallow( 125 <ActionChecklistItem 126 item={mockItem} 127 index={0} 128 handleAction={handleAction} 129 showExternalLinkIcon={true} 130 /> 131 ); 132 assert.ok(wrapper.find("button")); 133 }); 134 135 it("should render with a label", async () => { 136 const wrapper = mount( 137 <ActionChecklistItem 138 item={mockItem} 139 index={0} 140 handleAction={handleAction} 141 showExternalLinkIcon={true} 142 /> 143 ); 144 assert.ok(wrapper.find("span")); 145 assert.equal(wrapper.find("span").text(), mockItem.label.raw); 146 }); 147 148 it("should call handleAction when clicked", async () => { 149 const wrapper = shallow( 150 <ActionChecklistItem 151 item={mockItem} 152 index={0} 153 handleAction={handleAction} 154 showExternalLinkIcon={true} 155 /> 156 ); 157 await wrapper.find("button").simulate("click"); 158 assert.calledOnce(handleAction); 159 }); 160 161 it("should display an empty checkbox when targeting is false", async () => { 162 sandbox.stub(window, "AWEvaluateAttributeTargeting").resolves(false); 163 const wrapper = shallow( 164 <ActionChecklistItem 165 item={mockItem} 166 index={0} 167 handleAction={handleAction} 168 showExternalLinkIcon={true} 169 /> 170 ); 171 assert.ok(wrapper.find(".check-empty")); 172 }); 173 174 it("should display a filled checkbox when targeting is true", async () => { 175 sandbox.stub(window, "AWEvaluateAttributeTargeting").resolves(true); 176 const wrapper = shallow( 177 <ActionChecklistItem 178 item={mockItem} 179 index={0} 180 handleAction={handleAction} 181 showExternalLinkIcon={true} 182 /> 183 ); 184 assert.ok(wrapper.find(".check-empty")); 185 }); 186 187 it("should be disabled when targeting is true", async () => { 188 sandbox.stub(window, "AWEvaluateAttributeTargeting").resolves(true); 189 const wrapper = shallow( 190 <ActionChecklistItem 191 item={mockItem} 192 index={0} 193 handleAction={handleAction} 194 showExternalLinkIcon={true} 195 /> 196 ); 197 assert.ok(wrapper.find("button").prop("disabled")); 198 }); 199 200 it("should be disabled when clicked", async () => { 201 const wrapper = shallow( 202 <ActionChecklistItem 203 item={mockItem} 204 index={0} 205 handleAction={handleAction} 206 showExternalLinkIcon={true} 207 /> 208 ); 209 await wrapper.find("button").simulate("click"); 210 assert.ok(wrapper.find("button").prop("disabled")); 211 }); 212 213 it("should display an external link icon when external link property is set to true and targeting is false", async () => { 214 sandbox.stub(window, "AWEvaluateAttributeTargeting").resolves(false); 215 const wrapper = shallow( 216 <ActionChecklistItem 217 item={mockItem} 218 index={0} 219 handleAction={handleAction} 220 showExternalLinkIcon={true} 221 /> 222 ); 223 assert.ok(wrapper.find("button").prop("disabled")); 224 }); 225 }); 226 227 describe("<ActionChecklistProgressbar>", () => { 228 it("should render the progress bar", async () => { 229 const wrapper = shallow(<ActionChecklistProgressBar progress={0} />); 230 assert.ok(wrapper.exists()); 231 }); 232 233 it("should render the progress bar indicator with a width based on the progress", async () => { 234 const progressPercent = 25; 235 const wrapper = shallow( 236 <ActionChecklistProgressBar progress={progressPercent} /> 237 ); 238 const indicatorElement = wrapper.find(".indicator"); 239 const indicatorWidth = 240 indicatorElement.prop("style")[ 241 "--action-checklist-progress-bar-progress" 242 ]; 243 assert.equal(indicatorWidth, `${progressPercent}%`); 244 }); 245 }); 246 });