mozilla-central/toolkit/content/tests/browser/datetime/browser_datetime_datepicker_prev_next_month.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/**
* When the Previous Month button is pressed, calendar should display
* the dates for the previous month.
*/
add_task(async function test_datepicker_prev_month_btn() {
const inputValue = "2016-12-15";
const prevMonth = "2016-11-01";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Previous Month button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
EventUtils.synthesizeKey(" ", {});
// 2016-11-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth))
);
Assert.deepEqual(
getCalendarText(),
[
"30",
"31",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
],
"The calendar is updated to show the previous month (2016-11)"
);
Assert.ok(
helper.getElement(BTN_PREV_MONTH).matches(":focus"),
"Focus stays on a Previous Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Previous Month button to the same day of the month (2016-11-15):
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the previous month can be focused with a keyboard"
);
await helper.tearDown();
});
/**
* When the Next Month button is clicked, calendar should display the dates for
* the next month.
*/
add_task(async function test_datepicker_next_month_btn() {
const inputValue = "2016-12-15";
const nextMonth = "2017-01-01";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Next Month button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 4 });
EventUtils.synthesizeKey(" ", {});
// 2017-01-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextMonth))
);
Assert.deepEqual(
getCalendarText(),
[
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"1",
"2",
"3",
"4",
],
"The calendar is updated to show the next month (2017-01)."
);
Assert.ok(
helper.getElement(BTN_NEXT_MONTH).matches(":focus"),
"Focus stays on a Next Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Next Month button to the same day of the month (2017-01-15):
EventUtils.synthesizeKey("KEY_Tab", {});
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the next month can be focused with a keyboard"
);
await helper.tearDown();
});
/**
* When the Previous Month button is pressed, calendar should display
* the dates for the previous month on RTL build (bug 1806823).
*/
add_task(async function test_datepicker_prev_month_btn_rtl() {
const inputValue = "2016-12-15";
const prevMonth = "2016-11-01";
await SpecialPowers.pushPrefEnv({ set: [["intl.l10n.pseudo", "bidi"]] });
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Previous Month button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
EventUtils.synthesizeKey(" ", {});
// 2016-11-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"The calendar is updated to show the previous month (2016-11)"
);
Assert.ok(
helper.getElement(BTN_PREV_MONTH).matches(":focus"),
"Focus stays on a Previous Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Previous Month button to the same day of the month (2016-11-15):
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the previous month can be focused with a keyboard"
);
await helper.tearDown();
await SpecialPowers.popPrefEnv();
});
/**
* When the Next Month button is clicked, calendar should display the dates for
* the next month on RTL build (bug 1806823).
*/
add_task(async function test_datepicker_next_month_btn_rtl() {
const inputValue = "2016-12-15";
const nextMonth = "2017-01-01";
await SpecialPowers.pushPrefEnv({ set: [["intl.l10n.pseudo", "bidi"]] });
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Next Month button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 4 });
EventUtils.synthesizeKey(" ", {});
// 2017-01-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextMonth)),
"The calendar is updated to show the next month (2017-01)."
);
Assert.ok(
helper.getElement(BTN_NEXT_MONTH).matches(":focus"),
"Focus stays on a Next Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Next Month button to the same day of the month (2017-01-15):
EventUtils.synthesizeKey("KEY_Tab", {});
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the next month can be focused with a keyboard"
);
await helper.tearDown();
await SpecialPowers.popPrefEnv();
});
/**
* When Previous/Next Month buttons or arrow keys are used to change a month view
* when a time value is incomplete for datetime-local inputs,
* calendar should update the month (bug 1817785).
*/
add_task(async function test_datepicker_reopened_prev_next_month_btn() {
info("Setup a datetime-local datepicker to its reopened state for testing");
let inputValueDT = "2023-05-02T01:01";
let prevMonth = new Date("2023-04-02");
await helper.openPicker(
`data:text/html, <input type="datetime-local" value="${inputValueDT}">`
);
let closed = helper.promisePickerClosed();
EventUtils.synthesizeKey("KEY_Escape", {});
await closed;
Assert.equal(
helper.panel.state,
"closed",
"Date picker panel should be closed"
);
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
const editFields = shadowRoot.querySelectorAll(".datetime-edit-field");
const amPm = editFields[5];
amPm.focus();
Assert.ok(
amPm.matches(":focus"),
"Period of the day within the input is focused"
);
});
// Use Backspace key to clear the value of the AM/PM section of the input
// and wait for input.value to change to null (bug 1833988):
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
const input = content.document.querySelector("input");
const EventUtils = ContentTaskUtils.getEventUtils(content);
EventUtils.synthesizeKey("KEY_Backspace", {}, content);
await ContentTaskUtils.waitForMutationCondition(
input,
{ attributeFilter: ["value"] },
() => input.value == ""
);
Assert.ok(
!input.value,
`Expected an input value to be changed to 'null' when a time value became incomplete, instead got ${input.value}`
);
});
let ready = helper.waitForPickerReady();
// Move focus to a day section of the input and open a picker:
EventUtils.synthesizeKey("KEY_Tab", {});
EventUtils.synthesizeKey(" ", {});
await ready;
Assert.equal(
helper.panel.querySelector("#dateTimePopupFrame").contentDocument
.activeElement.textContent,
"2",
"Picker is opened with a focus set to the currently selected date"
);
info("Test the Previous Month button behavior");
// Move focus from the selected date to the Previous Month button,
// and activate it to move calendar from 2023-05-02 to 2023-04-02:
EventUtils.synthesizeKey("KEY_Tab", {
repeat: 2,
});
EventUtils.synthesizeKey(" ", {});
// Same date of the previous month should be visible and focusable
// (2023-04-02) but the focus should remain on the Previous Month button:
const focusableDayPrevMonth = getDayEl(2);
const monthYearEl = helper.getElement(MONTH_YEAR);
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{
childList: true,
},
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(prevMonth));
},
`Should change to the previous month (April 2023), instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.ok(
true,
`The date on both the Calendar and Month-Year button was updated
when Previous Month button was used`
);
Assert.ok(
helper.getElement(BTN_PREV_MONTH).matches(":focus"),
"Focus stays on a Previous Month button after it's pressed"
);
Assert.equal(
focusableDayPrevMonth,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
Assert.equal(
focusableDayPrevMonth.textContent,
"2",
"The same day of the month is present within a calendar grid"
);
// Move focus from the Previous Month button to the same day of the month (2023-04-02):
EventUtils.synthesizeKey("KEY_Tab", {
repeat: 3,
});
Assert.ok(
focusableDayPrevMonth.matches(":focus"),
"The same day of the previous month can be focused with a keyboard"
);
info("Test the Next Month button behavior");
// Move focus from the focused date to the Next Month button and activate it,
// (from 2023-04-02 to 2023-05-02):
EventUtils.synthesizeKey("KEY_Tab", {
repeat: 4,
});
EventUtils.synthesizeKey(" ", {});
// Same date of the next month should be visible and focusable
// (2023-05-02) but the focus should remain on the Next Month button:
const focusableDayNextMonth = getDayEl(2);
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{
childList: true,
},
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValueDT));
},
`Should change to May 2023, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.ok(
true,
`The date on both the Calendar and Month-Year button was updated
when Next Month button was used`
);
Assert.ok(
helper.getElement(BTN_NEXT_MONTH).matches(":focus"),
"Focus stays on a Next Month button after it's pressed"
);
Assert.equal(
focusableDayNextMonth,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
Assert.equal(
focusableDayNextMonth.textContent,
"2",
"The same day of the month is present within a calendar grid"
);
// Move focus from the Next Month button to the focusable day of the month (2023-05-02):
EventUtils.synthesizeKey("KEY_Tab", {});
Assert.ok(
focusableDayNextMonth.matches(":focus"),
"The same day of the month can be focused with a keyboard"
);
info("Test the arrow navigation behavior");
// Move focus from the focused date to the same weekday of the previous month,
// (From 2023-05-02 to 2023-04-25):
EventUtils.synthesizeKey("KEY_ArrowUp", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{
childList: true,
},
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(prevMonth));
},
`Should change to the previous month, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.ok(
true,
`The date on both the Calendar and Month-Year button was updated
when an Up Arrow key was used`
);
// Move focus from the focused date to the same weekday of the next month,
// (from 2023-04-25 to 2023-05-02):
EventUtils.synthesizeKey("KEY_ArrowDown", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{
childList: true,
},
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValueDT));
},
`Should change to the previous month, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.ok(
true,
`The date on both the Calendar and Month-Year button was updated
when a Down Arrow key was used`
);
await helper.tearDown();
});