Source code
Revision control
Copy as Markdown
Other Tools
import React from "react";
import { combineReducers, createStore } from "redux";
import { Provider } from "react-redux";
import { mount } from "enzyme";
import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
import { actionTypes as at } from "common/Actions.mjs";
import { Lists } from "content-src/components/Widgets/Lists/Lists";
const mockState = {
...INITIAL_STATE,
ListsWidget: {
selected: "test-list",
lists: {
"test-list": {
label: "test",
tasks: [{ id: "1", value: "task", completed: false, isUrl: false }],
completed: [],
},
},
},
};
function WrapWithProvider({ children, state = INITIAL_STATE }) {
let store = createStore(combineReducers(reducers), state);
return <Provider store={store}>{children}</Provider>;
}
describe("<Lists>", () => {
let wrapper;
let sandbox;
let dispatch;
let handleUserInteraction;
beforeEach(() => {
sandbox = sinon.createSandbox();
dispatch = sandbox.stub();
handleUserInteraction = sandbox.stub();
wrapper = mount(
<WrapWithProvider state={mockState}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
});
afterEach(() => {
// If we defined what the activeElement should be, remove our override
delete document.activeElement;
});
it("should render the component and selected list", () => {
assert.ok(wrapper.exists());
assert.ok(wrapper.find(".lists").exists());
assert.equal(wrapper.find("moz-option").length, 1);
assert.equal(wrapper.find(".task-item").length, 1);
});
it("should update task input and add a new task on Enter key", () => {
const input = wrapper.find("input").at(0);
input.simulate("change", { target: { value: "nathan's cool task" } });
// Override what the current active element so that the dispatch will trigger
Object.defineProperty(document, "activeElement", {
value: input.getDOMNode(),
configurable: true,
});
input.simulate("keyDown", { key: "Enter" });
assert.ok(dispatch.called, "Expected dispatch to be called");
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_LISTS_UPDATE);
assert.ok(
action.data.lists["test-list"].tasks.some(
task => task.value === "nathan's cool task"
)
);
});
it("should toggle task completion", () => {
const taskItem = wrapper.find(".task-item").at(0);
const checkbox = wrapper.find("input[type='checkbox']").at(0);
checkbox.simulate("change", { target: { checked: true } });
// dispatch not called until transition has ended
assert.equal(dispatch.callCount, 0);
taskItem.simulate("transitionEnd", { propertyName: "opacity" });
assert.ok(dispatch.calledThrice);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_LISTS_UPDATE);
assert.ok(action.data.lists["test-list"].completed[0].completed);
// Verify old telemetry event
const [oldTelemetryEvent] = dispatch.getCall(1).args;
assert.equal(oldTelemetryEvent.type, at.WIDGETS_LISTS_USER_EVENT);
assert.equal(oldTelemetryEvent.data.userAction, "task_complete");
// Verify new unified telemetry event
const [newTelemetryEvent] = dispatch.getCall(2).args;
assert.equal(newTelemetryEvent.type, at.WIDGETS_USER_EVENT);
assert.equal(newTelemetryEvent.data.widget_name, "lists");
assert.equal(newTelemetryEvent.data.widget_source, "widget");
assert.equal(newTelemetryEvent.data.user_action, "task_complete");
assert.equal(newTelemetryEvent.data.widget_size, "medium");
});
it("should not dispatch an action when input is empty and Enter is pressed", () => {
const input = wrapper.find("input").at(0);
input.simulate("change", { target: { value: "" } });
// Override what the current active element so that the dispatch will trigger
Object.defineProperty(document, "activeElement", {
value: input.getDOMNode(),
configurable: true,
});
input.simulate("keyDown", { key: "Enter" });
assert.ok(dispatch.notCalled);
});
it("should remove task when deleteTask is run from task item panel menu", () => {
// confirm that there is a task available to delete
const initialTasks = mockState.ListsWidget.lists["test-list"].tasks;
assert.equal(initialTasks.length, 1);
const deleteButton = wrapper.find("panel-item.delete-item").at(0);
deleteButton.props().onClick();
assert.ok(dispatch.calledThrice);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_LISTS_UPDATE);
// Check that the task list is now empty
const updatedTasks = action.data.lists["test-list"].tasks;
assert.equal(updatedTasks.length, 0, "Expected task to be removed");
// Verify old telemetry event
const [oldTelemetryEvent] = dispatch.getCall(1).args;
assert.equal(oldTelemetryEvent.type, at.WIDGETS_LISTS_USER_EVENT);
assert.equal(oldTelemetryEvent.data.userAction, "task_delete");
// Verify new unified telemetry event
const [newTelemetryEvent] = dispatch.getCall(2).args;
assert.equal(newTelemetryEvent.type, at.WIDGETS_USER_EVENT);
assert.equal(newTelemetryEvent.data.widget_name, "lists");
assert.equal(newTelemetryEvent.data.widget_source, "widget");
assert.equal(newTelemetryEvent.data.user_action, "task_delete");
assert.equal(newTelemetryEvent.data.widget_size, "medium");
});
it("should add a task with a valid URL and render it as a link", () => {
const input = wrapper.find("input").at(0);
const testUrl = "https://www.example.com";
input.simulate("change", { target: { value: testUrl } });
// Set activeElement for Enter key detection
Object.defineProperty(document, "activeElement", {
value: input.getDOMNode(),
configurable: true,
});
input.simulate("keyDown", { key: "Enter" });
assert.ok(dispatch.calledThrice, "Expected dispatch to be called");
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_LISTS_UPDATE);
const newHyperlinkedTask = action.data.lists["test-list"].tasks.find(
t => t.value === testUrl
);
assert.ok(newHyperlinkedTask, "Task with URL should be added");
assert.ok(newHyperlinkedTask.isUrl, "Task should be marked as a URL");
// Verify old telemetry event
const [oldTelemetryEvent] = dispatch.getCall(1).args;
assert.equal(oldTelemetryEvent.type, at.WIDGETS_LISTS_USER_EVENT);
assert.equal(oldTelemetryEvent.data.userAction, "task_create");
// Verify new unified telemetry event
const [newTelemetryEvent] = dispatch.getCall(2).args;
assert.equal(newTelemetryEvent.type, at.WIDGETS_USER_EVENT);
assert.equal(newTelemetryEvent.data.widget_name, "lists");
assert.equal(newTelemetryEvent.data.widget_source, "widget");
assert.equal(newTelemetryEvent.data.user_action, "task_create");
assert.equal(newTelemetryEvent.data.widget_size, "medium");
});
it("should dispatch list change when dropdown selection changes", () => {
const select = wrapper.find("moz-select").getDOMNode();
// need to create a new event since I couldnt figure out a way to
// trigger the change event to the moz-select component
const event = new Event("change", { bubbles: true });
select.value = "test-list";
select.dispatchEvent(event);
assert.ok(dispatch.calledOnce);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_LISTS_CHANGE_SELECTED);
assert.equal(action.data, "test-list");
});
it("should delete list and select a fallback list", () => {
// Grab panel-item for deleting a list
const deleteList = wrapper.find("panel-item").at(2);
deleteList.props().onClick();
assert.equal(dispatch.callCount, 4);
assert.equal(dispatch.getCall(0).args[0].type, at.WIDGETS_LISTS_UPDATE);
assert.equal(
dispatch.getCall(1).args[0].type,
at.WIDGETS_LISTS_CHANGE_SELECTED
);
// Verify old telemetry event
const [oldTelemetryEvent] = dispatch.getCall(2).args;
assert.equal(oldTelemetryEvent.type, at.WIDGETS_LISTS_USER_EVENT);
assert.equal(oldTelemetryEvent.data.userAction, "list_delete");
// Verify new unified telemetry event
const [newTelemetryEvent] = dispatch.getCall(3).args;
assert.equal(newTelemetryEvent.type, at.WIDGETS_USER_EVENT);
assert.equal(newTelemetryEvent.data.widget_name, "lists");
assert.equal(newTelemetryEvent.data.widget_source, "widget");
assert.equal(newTelemetryEvent.data.user_action, "list_delete");
assert.equal(newTelemetryEvent.data.widget_size, "medium");
});
it("should update list name when edited and saved", () => {
// Grab panel-item for editing a list
const editList = wrapper.find("panel-item").at(0);
editList.props().onClick();
wrapper.update();
const editableInput = wrapper.find("input.edit-list");
editableInput.simulate("change", { target: { value: "Updated List" } });
editableInput.simulate("keyDown", { key: "Enter" });
assert.ok(dispatch.calledThrice);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_LISTS_UPDATE);
assert.equal(action.data.lists["test-list"].label, "Updated List");
// Verify old telemetry event
const [oldTelemetryEvent] = dispatch.getCall(1).args;
assert.equal(oldTelemetryEvent.type, at.WIDGETS_LISTS_USER_EVENT);
assert.equal(oldTelemetryEvent.data.userAction, "list_edit");
// Verify new unified telemetry event
const [newTelemetryEvent] = dispatch.getCall(2).args;
assert.equal(newTelemetryEvent.type, at.WIDGETS_USER_EVENT);
assert.equal(newTelemetryEvent.data.widget_name, "lists");
assert.equal(newTelemetryEvent.data.widget_source, "widget");
assert.equal(newTelemetryEvent.data.user_action, "list_edit");
assert.equal(newTelemetryEvent.data.widget_size, "medium");
});
it("should create a new list and dispatch update and select list actions", () => {
const createListBtn = wrapper.find("panel-item").at(1); // assumes "Create a new list" is at index 1
createListBtn.props().onClick();
assert.equal(dispatch.callCount, 4);
assert.equal(dispatch.getCall(0).args[0].type, at.WIDGETS_LISTS_UPDATE);
assert.equal(
dispatch.getCall(1).args[0].type,
at.WIDGETS_LISTS_CHANGE_SELECTED
);
// Verify old telemetry event
const [oldTelemetryEvent] = dispatch.getCall(2).args;
assert.equal(oldTelemetryEvent.type, at.WIDGETS_LISTS_USER_EVENT);
assert.equal(oldTelemetryEvent.data.userAction, "list_create");
// Verify new unified telemetry event
const [newTelemetryEvent] = dispatch.getCall(3).args;
assert.equal(newTelemetryEvent.type, at.WIDGETS_USER_EVENT);
assert.equal(newTelemetryEvent.data.widget_name, "lists");
assert.equal(newTelemetryEvent.data.widget_source, "widget");
assert.equal(newTelemetryEvent.data.user_action, "list_create");
assert.equal(newTelemetryEvent.data.widget_size, "medium");
});
it("should copy the current list to clipboard with correct formatting", () => {
// Set up task list with additional "completed" task
const task1 = {
id: "1",
value: "task 1",
completed: false,
isUrl: false,
};
const task2 = {
id: "2",
value: "task 2",
completed: true,
isUrl: false,
};
mockState.ListsWidget.lists["test-list"].tasks = [task1, task2];
wrapper = mount(
<WrapWithProvider state={mockState}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const clipboardWriteTextStub = sinon.stub(navigator.clipboard, "writeText");
// Grab panel-item for copying a list
const copyList = wrapper.find("panel-item").at(3);
copyList.props().onClick();
assert.ok(
clipboardWriteTextStub.calledOnce,
"Expected clipboard.writeText to be called"
);
const [copiedText] = clipboardWriteTextStub.firstCall.args;
assert.include(
copiedText,
"List: test",
"Expected list title in copied text"
);
assert.include(
copiedText,
"- [ ] task 1",
"- [x] task 2",
"Expected uncompleted and completed tasks in copied text"
);
// Confirm WIDGETS_LISTS_USER_EVENT telemetry `list_copy` event
assert.ok(dispatch.calledTwice);
const [copyEvent] = dispatch.getCall(0).args;
assert.equal(copyEvent.type, at.WIDGETS_LISTS_USER_EVENT);
assert.equal(copyEvent.data.userAction, "list_copy");
// Verify new unified telemetry event
const [newTelemetryEvent] = dispatch.getCall(1).args;
assert.equal(newTelemetryEvent.type, at.WIDGETS_USER_EVENT);
assert.equal(newTelemetryEvent.data.widget_name, "lists");
assert.equal(newTelemetryEvent.data.widget_source, "widget");
assert.equal(newTelemetryEvent.data.user_action, "list_copy");
assert.equal(newTelemetryEvent.data.widget_size, "medium");
clipboardWriteTextStub.restore();
});
it("should reorder tasks via reorder event", () => {
const task1 = {
id: "1",
value: "task 1",
completed: false,
isUrl: false,
};
const task2 = {
id: "2",
value: "task 2",
completed: false,
isUrl: false,
};
mockState.ListsWidget.lists["test-list"].tasks = [task1, task2];
wrapper = mount(
<WrapWithProvider state={mockState}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const reorderNode = wrapper.find("moz-reorderable-list").getDOMNode();
// Simulate moving task2 before task1
const event = new CustomEvent("reorder", {
detail: {
draggedElement: { id: "2" },
targetElement: { id: "1" },
position: -1,
},
bubbles: true,
});
reorderNode.dispatchEvent(event);
assert.ok(dispatch.calledOnce);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.WIDGETS_LISTS_UPDATE);
const reorderedTasks = action.data.lists["test-list"].tasks;
assert.deepEqual(reorderedTasks, [task2, task1]);
});
it("should hide Lists widget when 'Hide widget' option is clicked", () => {
const menuItem = wrapper.find(
"panel-item[data-l10n-id='newtab-widget-menu-hide']"
);
menuItem.props().onClick();
assert.ok(dispatch.calledTwice);
const [setPrefAction] = dispatch.getCall(0).args;
assert.equal(setPrefAction.type, at.SET_PREF);
assert.equal(setPrefAction.data.name, "widgets.lists.enabled");
assert.equal(setPrefAction.data.value, false);
const [telemetryEvent] = dispatch.getCall(1).args;
assert.equal(telemetryEvent.type, at.WIDGETS_ENABLED);
assert.equal(telemetryEvent.data.widget_name, "lists");
assert.equal(telemetryEvent.data.widget_source, "context_menu");
assert.equal(telemetryEvent.data.enabled, false);
assert.equal(telemetryEvent.data.widget_size, "medium");
});
it("should dispatch OPEN_LINK when the Learn More option is clicked", () => {
const learnMoreItem = wrapper.find(".learn-more");
learnMoreItem.props().onClick();
assert.ok(dispatch.calledOnce);
const [action] = dispatch.getCall(0).args;
assert.equal(action.type, at.OPEN_LINK);
});
it("disables Create new list action (in the panel list) when at the max lists limit", () => {
// Set temporary maximum list limit
const stateAtMax = {
...mockState,
Prefs: {
...INITIAL_STATE.Prefs,
values: {
...INITIAL_STATE.Prefs.values,
"widgets.lists.maxLists": 1,
},
},
};
const localWrapper = mount(
<WrapWithProvider state={stateAtMax}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const createListBtn = localWrapper.find("panel-item.create-list").at(0);
assert.strictEqual(createListBtn.prop("disabled"), true);
});
it("overrides `widgets.lists.maxLists` pref when below `1` value", () => {
const state = {
...mockState,
Prefs: {
...mockState.Prefs,
values: {
...mockState.Prefs.values,
"widgets.lists.maxLists": 0,
},
},
};
const localWrapper = mount(
<WrapWithProvider state={state}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const createListBtn = localWrapper.find("panel-item.create-list").at(0);
// with 1 existing list, and maxLists coerced to 1, it should be disabled
assert.strictEqual(createListBtn.prop("disabled"), true);
});
it("disables Create List option when at the maximum lists limit", () => {
const state = {
...mockState,
ListsWidget: {
...mockState.ListsWidget,
lists: {
"list-1": { label: "A", tasks: [], completed: [] },
"list-2": { label: "B", tasks: [], completed: [] },
},
},
Prefs: {
...mockState.Prefs,
values: {
...mockState.Prefs.values,
"widgets.lists.maxLists": 2,
},
},
};
const localWrapper = mount(
<WrapWithProvider state={state}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const createListBtn = localWrapper.find("panel-item.create-list").at(0);
// with 2 existing lists, and maxLists is set to 2, it should be disabled
assert.strictEqual(createListBtn.prop("disabled"), true);
});
it("disables add-task input when at maximum list items limit", () => {
// total items = tasks + completed = 3
const state = {
...mockState,
ListsWidget: {
selected: "test-list",
lists: {
"test-list": {
label: "test",
tasks: [
{ id: "1", value: "task 1", completed: false, isUrl: false },
{ id: "2", value: "task 2", completed: false, isUrl: false },
],
completed: [
{ id: "c1", value: "done", completed: true, isUrl: false },
],
},
},
},
Prefs: {
...mockState.Prefs,
values: {
...mockState.Prefs?.values,
// At limit (3), so input should be disabled and icon greyed
"widgets.lists.maxListItems": 3,
},
},
};
const localWrapper = mount(
<WrapWithProvider state={state}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const input = localWrapper.find("input.add-task-input").at(0);
const addIcon = localWrapper
.find(".add-task-container .icon.icon-add")
.at(0);
assert.strictEqual(
input.prop("disabled"),
true,
"Expected add-task input to be disabled at the maximum list items limit"
);
assert.strictEqual(
addIcon.hasClass("icon-disabled"),
true,
"Expected add icon to have icon-disabled class at the maximum list items limit"
);
});
it("enables add-task input when at maximum list items limit", () => {
// with 3 items in current list, and maxLists coerced to 1, it should be enabled
const state = {
...mockState,
Prefs: {
...mockState.Prefs,
values: {
...mockState.Prefs?.values,
"widgets.lists.maxListItems": 5,
},
},
};
const localWrapper = mount(
<WrapWithProvider state={state}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const input = localWrapper.find("input.add-task-input").at(0);
const addIcon = localWrapper
.find(".add-task-container .icon.icon-add")
.at(0);
assert.strictEqual(
input.prop("disabled"),
false,
"Expected input to be enabled when under limit"
);
assert.strictEqual(
addIcon.hasClass("icon-disabled"),
false,
"Expected add icon not to be greyed when under limit"
);
});
it("should cancel creating a new list when Escape key is pressed", () => {
const newListId = "new-list-id";
// Provide a fallback list so CHANGE_SELECTED has somewhere to go after delete
const stateWithEmptyAndFallback = {
...mockState,
ListsWidget: {
selected: newListId,
lists: {
[newListId]: { label: "", tasks: [], completed: [] }, // empty "new" list
"test-list": { label: "test", tasks: [], completed: [] }, // fallback
},
},
};
const localWrapper = mount(
<WrapWithProvider state={stateWithEmptyAndFallback}>
<Lists
dispatch={dispatch}
handleUserInteraction={handleUserInteraction}
/>
</WrapWithProvider>
);
const editableText = localWrapper.find("EditableText").at(0);
assert.ok(editableText.exists());
editableText.props().setIsEditing(true);
localWrapper.update();
let editableInput = localWrapper.find("input.edit-list");
assert.ok(editableInput.exists());
// Press Escape to cancel new-list creation
editableInput.simulate("keyDown", { key: "Escape" });
localWrapper.update();
// Test dispatches from handleCancelNewList
const types = dispatch.getCalls().map(call => call.args[0].type);
assert.include(
types,
at.WIDGETS_LISTS_UPDATE,
"Expected update dispatch on cancel"
);
assert.include(
types,
at.WIDGETS_LISTS_CHANGE_SELECTED,
"Expected selected list to change after cancel"
);
assert.include(
types,
at.WIDGETS_LISTS_USER_EVENT,
"Expected telemetry event on cancel"
);
const listsState = localWrapper.find(Provider).prop("store").getState()
.ListsWidget.lists;
assert.strictEqual(
Object.keys(listsState).length,
2,
"expected total lists count to remain as 2 (no new list created on cancel)"
);
// After cancelling, the input should be gone (editing ended / list removed)
editableInput = localWrapper.find("input.edit-list");
assert.strictEqual(editableInput.exists(), false);
});
});