diff --git a/package-lock.json b/package-lock.json index 13e4015b..50484e77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25001,7 +25001,7 @@ "requires": { "debuglog": "^1.0.1", "dezalgo": "^1.0.0", - "graceful-fs": "4.2.2", + "graceful-fs": "^4.1.2", "once": "^1.3.0" } }, diff --git a/src/scripts/clipperUI/panels/regionSelectingPanel.tsx b/src/scripts/clipperUI/panels/regionSelectingPanel.tsx index 25fe30fd..2a061dcd 100644 --- a/src/scripts/clipperUI/panels/regionSelectingPanel.tsx +++ b/src/scripts/clipperUI/panels/regionSelectingPanel.tsx @@ -4,6 +4,10 @@ import {ClipperStateProp} from "../clipperState"; import {ComponentBase} from "../componentBase"; class RegionSelectingPanelClass extends ComponentBase<{}, ClipperStateProp> { + initiallySetFocus(element: HTMLElement) { + element.focus(); + } + handleCancelButton() { this.props.clipperState.setState({ focusOnRender: Constants.Ids.regionButton @@ -28,6 +32,7 @@ class RegionSelectingPanelClass extends ComponentBase<{}, ClipperStateProp> {
{Localization.getLocalizedString("WebClipper.Action.BackToHome")} diff --git a/src/scripts/clipperUI/panels/successPanel.tsx b/src/scripts/clipperUI/panels/successPanel.tsx index be79716f..9131b9c8 100644 --- a/src/scripts/clipperUI/panels/successPanel.tsx +++ b/src/scripts/clipperUI/panels/successPanel.tsx @@ -14,6 +14,10 @@ import {Clipper} from "../frontEndGlobals"; import {SpriteAnimation} from "../components/spriteAnimation"; class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> { + initiallySetFocus(element: HTMLElement) { + element.focus(); + } + public onLaunchOneNoteButton() { Clipper.logger.logUserFunnel(Log.Funnel.Label.ViewInWac); let data = this.props.clipperState.oneNoteApiResult.data as OneNoteApi.Page; @@ -38,6 +42,7 @@ class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> {
{Localization.getLocalizedString("WebClipper.Action.ViewInOneNote")} diff --git a/src/tests/clipperUI/panels/regionSelectingPanel_tests.tsx b/src/tests/clipperUI/panels/regionSelectingPanel_tests.tsx new file mode 100644 index 00000000..e2aeb00f --- /dev/null +++ b/src/tests/clipperUI/panels/regionSelectingPanel_tests.tsx @@ -0,0 +1,47 @@ +import {Constants} from "../../../scripts/constants"; + +import {RegionSelectingPanel} from "../../../scripts/clipperUI/panels/regionSelectingPanel"; + +import {MithrilUtils} from "../../mithrilUtils"; +import {MockProps} from "../../mockProps"; +import {TestModule} from "../../testModule"; + +export class RegionSelectingPanelTests extends TestModule { + private mockRegionSelectingPanelProps = { + clipperState: MockProps.getMockClipperState() + }; + + private defaultComponent; + + protected module() { + return "regionSelectingPanel"; + } + + protected beforeEach() { + this.defaultComponent = ; + } + + protected tests() { + test("The region selecting panel should render the 'Back to Home' button", () => { + MithrilUtils.mountToFixture(this.defaultComponent); + + let button = document.getElementById(Constants.Ids.regionClipCancelButton); + ok(button, "The 'Back to Home' button should be present"); + }); + + test("The region selecting panel should set focus on the 'Back to Home' button when rendered", (assert) => { + let done = assert.async(); + + MithrilUtils.mountToFixture(this.defaultComponent); + + // Wait for the next tick to allow Mithril to complete rendering + setTimeout(() => { + let button = document.getElementById(Constants.Ids.regionClipCancelButton); + strictEqual(document.activeElement, button, "The 'Back to Home' button should have focus"); + done(); + }, 0); + }); + } +} + +(new RegionSelectingPanelTests()).run(); diff --git a/src/tests/clipperUI/panels/successPanel_tests.tsx b/src/tests/clipperUI/panels/successPanel_tests.tsx new file mode 100644 index 00000000..c3de87e3 --- /dev/null +++ b/src/tests/clipperUI/panels/successPanel_tests.tsx @@ -0,0 +1,61 @@ +import {Constants} from "../../../scripts/constants"; + +import {Status} from "../../../scripts/clipperUI/status"; +import {SuccessPanel} from "../../../scripts/clipperUI/panels/successPanel"; + +import {MithrilUtils} from "../../mithrilUtils"; +import {MockProps} from "../../mockProps"; +import {TestModule} from "../../testModule"; + +export class SuccessPanelTests extends TestModule { + private mockSuccessPanelProps = { + clipperState: MockProps.getMockClipperState() + }; + + private defaultComponent; + + protected module() { + return "successPanel"; + } + + protected beforeEach() { + // Setup a successful API result + let state = MockProps.getMockClipperState(); + state.oneNoteApiResult = { + status: Status.Succeeded, + data: { + links: { + oneNoteWebUrl: { + href: "https://www.onenote.com/page" + } + } + } + }; + this.mockSuccessPanelProps.clipperState = state; + this.defaultComponent = ; + } + + protected tests() { + test("The success panel should render the 'View in OneNote' button", () => { + MithrilUtils.mountToFixture(this.defaultComponent); + + let button = document.getElementById(Constants.Ids.launchOneNoteButton); + ok(button, "The 'View in OneNote' button should be present"); + }); + + test("The success panel should set focus on the 'View in OneNote' button when rendered", (assert) => { + let done = assert.async(); + + MithrilUtils.mountToFixture(this.defaultComponent); + + // Wait for the next tick to allow Mithril to complete rendering + setTimeout(() => { + let button = document.getElementById(Constants.Ids.launchOneNoteButton); + strictEqual(document.activeElement, button, "The 'View in OneNote' button should have focus"); + done(); + }, 0); + }); + } +} + +(new SuccessPanelTests()).run();