From 33faaac7bc064438ed5dcb5b37f19f58ae787404 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 20 Oct 2022 09:58:51 -0400 Subject: [PATCH] CSR-762 button-question-focus-helper tests --- .../button-question-focus-helper.spec.js | 251 ++++++++++++++++++ 1 file changed, 251 insertions(+) create mode 100644 src/helpers/button-question-focus-helper.spec.js diff --git a/src/helpers/button-question-focus-helper.spec.js b/src/helpers/button-question-focus-helper.spec.js new file mode 100644 index 000000000..0d6483d20 --- /dev/null +++ b/src/helpers/button-question-focus-helper.spec.js @@ -0,0 +1,251 @@ +import { + handleAnyComponentFocus, + handleButtonComponentFocus, + handleInputComponentBlur, +} from "@/helpers/button-question-focus-helper"; + +describe("buttonQuestionFocusHelper", () => { + let onButtonQuestionLostFocusCallbackOne = jest.fn(); + let onButtonQuestionLostFocusCallbackTwo = jest.fn(); + + let focusOnInputInGroupOne; + let blurFromInputInGroupOne; + let focusOnInputInGroupTwo; + let blurFromInputInGroupTwo; + + let focusOnNonRadioCheckboxElement; + + beforeEach(() => { + onButtonQuestionLostFocusCallbackOne = jest.fn(); + onButtonQuestionLostFocusCallbackTwo = jest.fn(); + + // Sanity check + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + focusOnInputInGroupOne = () => { + handleButtonComponentFocus({ + groupName: "group1", + }); + }; + + blurFromInputInGroupOne = () => { + handleInputComponentBlur({ + groupName: "group1", + onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackOne, + }); + }; + + focusOnInputInGroupTwo = () => { + handleButtonComponentFocus({ + groupName: "group2", + }); + }; + + blurFromInputInGroupTwo = () => { + handleInputComponentBlur({ + groupName: "group2", + onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackTwo, + }); + }; + + focusOnNonRadioCheckboxElement = () => { + handleAnyComponentFocus({ + target: { + type: "nonRadioCheckbox", + }, + }); + }; + }); + + test("focus on input => no callbacks were called", () => { + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + }); + + test("focus on input, then focus on input in same group => no callbacks are called", () => { + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in group 1 + blurFromInputInGroupOne(); + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + }); + + test("focus on non-radio/checkbox, focus on input => no callbacks are called", () => { + // focus on non-radio/checkbox + focusOnNonRadioCheckboxElement(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + }); + + test("focus on input in group 1, then focus on input in different group => callback for group 1 is called", () => { + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in different group + blurFromInputInGroupOne(); + focusOnInputInGroupTwo(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + }); + + test("focus on input in group 1, focus on input in same group, then focus on input in different group => callback for group 1 is called", () => { + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in same group + blurFromInputInGroupOne(); + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in different group + blurFromInputInGroupOne(); + focusOnInputInGroupTwo(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + }); + + test("focus on input in group 1, focus on non-radio/checkbox element => callback from group 1 is called", () => { + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in group 2 + blurFromInputInGroupOne(); + focusOnNonRadioCheckboxElement(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + }); + + test("focus on input in group 1, focus on input in group 2, focus on non-radio/checkbox element => both callbacks are called", () => { + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in group 2 + blurFromInputInGroupOne(); + focusOnInputInGroupTwo(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0); + + // focus on non-radio/checkbox + blurFromInputInGroupTwo(); + focusOnNonRadioCheckboxElement(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1); + }); + + test("focus on input in group 1, focus on input in group 2, focus on input in group 1 => both callbacks are called", () => { + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in group 2 + blurFromInputInGroupOne(); + focusOnInputInGroupTwo(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0); + + // focus on input in group 1 + blurFromInputInGroupTwo(); + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1); + }); + + test("go back and forth a lot => correct callbacks are called at the right time", () => { + // Arrange/Act + // focus on input in group 1 + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled(); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in group 2 + blurFromInputInGroupOne(); + focusOnInputInGroupTwo(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled(); + + // focus on input in group 1 + blurFromInputInGroupTwo(); + focusOnInputInGroupOne(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1); + expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1); + + // focus on non-radio/checkbox element + blurFromInputInGroupOne(); + focusOnNonRadioCheckboxElement(); + + // Assert + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2); + expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1); + + // focus on input in group 1 + focusOnInputInGroupOne(); + expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2); + expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1); + }); +});