forked from mirrors/gecko-dev
cfa53fc21d
Moved the datepicker-related browser tests in the new subdirectory `datetime` within `toolkit/content/tests/browser/`. Besides `browser_datetime_*` tests `browser_spinner*` ones were also moved, because they share a lot of helper functions and are used for DateTimePicker widgets as well. The subdirectory includes a `header.js` with the `DateTimeTestHelper` class constructor and opther helper functions used across the DateTimePicker test files. It also splits larger test files to avoid intermittent timeouts caused by the large sets of use cases performed. `Browser.ini` includes `skip-if` cases for `browser_datetime_datepicker_*` tests that were provided initially but were not copied to the expanded browser test files in the bug 1676068 work. Differential Revision: https://phabricator.services.mozilla.com/D168140
201 lines
4 KiB
JavaScript
201 lines
4 KiB
JavaScript
/* 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 clicked, 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}">`
|
|
);
|
|
|
|
helper.click(helper.getElement(BTN_PREV_MONTH));
|
|
|
|
// 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",
|
|
],
|
|
"2016-11"
|
|
);
|
|
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"
|
|
);
|
|
|
|
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}">`
|
|
);
|
|
|
|
helper.click(helper.getElement(BTN_NEXT_MONTH));
|
|
|
|
// 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",
|
|
],
|
|
"2017-01"
|
|
);
|
|
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"
|
|
);
|
|
|
|
await helper.tearDown();
|
|
});
|
|
|
|
/**
|
|
* When a date on the calendar is clicked, date picker should close and set
|
|
* value to the input box.
|
|
*/
|
|
add_task(async function test_datepicker_clicked() {
|
|
info("When a calendar day is clicked, the picker closes, the value is set");
|
|
const inputValue = "2016-12-15";
|
|
const firstDayOnCalendar = "2016-11-27";
|
|
|
|
await helper.openPicker(
|
|
`data:text/html, <input id="date" type="date" value="${inputValue}">`
|
|
);
|
|
|
|
let browser = helper.tab.linkedBrowser;
|
|
Assert.equal(helper.panel.state, "open", "Panel should be opened");
|
|
|
|
// Click the first item (top-left corner) of the calendar
|
|
let promise = BrowserTestUtils.waitForContentEvent(browser, "input");
|
|
helper.click(helper.getElement(DAYS_VIEW).querySelector("td"));
|
|
await promise;
|
|
|
|
let value = await SpecialPowers.spawn(browser, [], () => {
|
|
return content.document.querySelector("input").value;
|
|
});
|
|
|
|
Assert.equal(value, firstDayOnCalendar);
|
|
|
|
await helper.tearDown();
|
|
});
|