ConfirmDialog.test.jsx (6406B)
1 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs"; 2 import { _ConfirmDialog as ConfirmDialog } from "content-src/components/ConfirmDialog/ConfirmDialog"; 3 import React from "react"; 4 import { shallow } from "enzyme"; 5 6 describe("<ConfirmDialog>", () => { 7 let wrapper; 8 let dispatch; 9 let ConfirmDialogProps; 10 beforeEach(() => { 11 dispatch = sinon.stub(); 12 ConfirmDialogProps = { 13 visible: true, 14 data: { 15 onConfirm: [], 16 cancel_button_string_id: "newtab-topsites-delete-history-button", 17 confirm_button_string_id: "newtab-topsites-cancel-button", 18 eventSource: "HIGHLIGHTS", 19 }, 20 }; 21 wrapper = shallow( 22 <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} /> 23 ); 24 }); 25 it("should render an overlay", () => { 26 assert.ok(wrapper.find("dialog").exists()); 27 }); 28 it("should render a modal", () => { 29 assert.ok(wrapper.find(".confirmation-dialog").exists()); 30 }); 31 it("should not render if visible is false", () => { 32 ConfirmDialogProps.visible = false; 33 wrapper = shallow( 34 <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} /> 35 ); 36 37 assert.lengthOf(wrapper.find("dialog"), 1); 38 }); 39 it("should display an icon if we provide one in props", () => { 40 const iconName = "modal-icon"; 41 // If there is no icon in the props, we shouldn't display an icon 42 assert.lengthOf(wrapper.find(`.icon-${iconName}`), 0); 43 44 ConfirmDialogProps.data.icon = iconName; 45 wrapper = shallow( 46 <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} /> 47 ); 48 49 // But if we do provide an icon - we should show it 50 assert.lengthOf(wrapper.find(`.icon-${iconName}`), 1); 51 }); 52 describe("fluent message check", () => { 53 it("should render the message body sent via props", () => { 54 Object.assign(ConfirmDialogProps.data, { 55 body_string_id: ["foo", "bar"], 56 }); 57 wrapper = shallow( 58 <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} /> 59 ); 60 let msgs = wrapper.find(".modal-message").find("p"); 61 assert.equal(msgs.length, ConfirmDialogProps.data.body_string_id.length); 62 msgs.forEach((fm, i) => 63 assert.equal( 64 fm.prop("data-l10n-id"), 65 ConfirmDialogProps.data.body_string_id[i] 66 ) 67 ); 68 }); 69 it("should render the correct primary button text", () => { 70 Object.assign(ConfirmDialogProps.data, { 71 confirm_button_string_id: "primary_foo", 72 }); 73 wrapper = shallow( 74 <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} /> 75 ); 76 77 let doneLabel = wrapper.find("moz-button[type='primary']"); 78 assert.ok(doneLabel.exists()); 79 assert.equal( 80 doneLabel.prop("data-l10n-id"), 81 ConfirmDialogProps.data.confirm_button_string_id 82 ); 83 }); 84 }); 85 describe("click events", () => { 86 it("should emit AlsoToMain DIALOG_CANCEL when you click the overlay", () => { 87 let dialog = wrapper.find("dialog"); 88 89 assert.ok(dialog.exists()); 90 dialog.simulate("click", { 91 target: wrapper.instance().dialogRef.current, 92 }); 93 94 // Two events are emitted: UserEvent+AlsoToMain. 95 assert.calledTwice(dispatch); 96 assert.propertyVal(dispatch.firstCall.args[0], "type", at.DIALOG_CANCEL); 97 assert.calledWith(dispatch, { type: at.DIALOG_CANCEL }); 98 }); 99 it("should emit UserEvent DIALOG_CANCEL when you click the overlay", () => { 100 let dialog = wrapper.find("dialog"); 101 102 assert.ok(dialog); 103 dialog.simulate("click", { 104 target: wrapper.instance().dialogRef.current, 105 }); 106 107 // Two events are emitted: UserEvent+AlsoToMain. 108 assert.calledTwice(dispatch); 109 assert.isUserEventAction(dispatch.secondCall.args[0]); 110 assert.calledWith( 111 dispatch, 112 ac.UserEvent({ event: at.DIALOG_CANCEL, source: "HIGHLIGHTS" }) 113 ); 114 }); 115 it("should emit AlsoToMain DIALOG_CANCEL on cancel", () => { 116 let cancelButton = wrapper 117 .find("moz-button") 118 .filterWhere(n => !n.prop("type")); 119 120 assert.ok(cancelButton); 121 cancelButton.simulate("click"); 122 123 // Two events are emitted: UserEvent+AlsoToMain. 124 assert.calledTwice(dispatch); 125 assert.propertyVal(dispatch.firstCall.args[0], "type", at.DIALOG_CANCEL); 126 assert.calledWith(dispatch, { type: at.DIALOG_CANCEL }); 127 }); 128 it("should emit UserEvent DIALOG_CANCEL on cancel", () => { 129 let cancelButton = wrapper 130 .find("moz-button") 131 .filterWhere(n => !n.prop("type")); 132 133 assert.ok(cancelButton); 134 cancelButton.simulate("click"); 135 136 // Two events are emitted: UserEvent+AlsoToMain. 137 assert.calledTwice(dispatch); 138 assert.isUserEventAction(dispatch.secondCall.args[0]); 139 assert.calledWith( 140 dispatch, 141 ac.UserEvent({ event: at.DIALOG_CANCEL, source: "HIGHLIGHTS" }) 142 ); 143 }); 144 it("should emit UserEvent on primary button", () => { 145 Object.assign(ConfirmDialogProps.data, { 146 body_string_id: ["foo", "bar"], 147 onConfirm: [ 148 ac.AlsoToMain({ type: at.DELETE_URL, data: "foo.bar" }), 149 ac.UserEvent({ event: "DELETE" }), 150 ], 151 }); 152 wrapper = shallow( 153 <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} /> 154 ); 155 let doneButton = wrapper.find("moz-button[type='primary']"); 156 157 assert.ok(doneButton); 158 doneButton.simulate("click"); 159 160 // Two events are emitted: UserEvent+AlsoToMain. 161 assert.isUserEventAction(dispatch.secondCall.args[0]); 162 163 assert.calledTwice(dispatch); 164 assert.calledWith(dispatch, ConfirmDialogProps.data.onConfirm[1]); 165 }); 166 it("should emit AlsoToMain on primary button", () => { 167 Object.assign(ConfirmDialogProps.data, { 168 body_string_id: ["foo", "bar"], 169 onConfirm: [ 170 ac.AlsoToMain({ type: at.DELETE_URL, data: "foo.bar" }), 171 ac.UserEvent({ event: "DELETE" }), 172 ], 173 }); 174 wrapper = shallow( 175 <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} /> 176 ); 177 let doneButton = wrapper.find("moz-button[type='primary']"); 178 179 assert.ok(doneButton); 180 doneButton.simulate("click"); 181 182 // Two events are emitted: UserEvent+AlsoToMain. 183 assert.calledTwice(dispatch); 184 assert.calledWith(dispatch, ConfirmDialogProps.data.onConfirm[0]); 185 }); 186 }); 187 });