@nova-ui/bits
Version:
SolarWinds Nova Framework
166 lines • 6.23 kB
JavaScript
import moment from "moment/moment";
import { Atom } from "../../atom";
import { expect, Helpers } from "../../setup";
import { OverlayAtom } from "../overlay/overlay.atom";
import { TextboxAtom } from "../textbox/textbox.atom";
export class DatepickerAtom extends Atom {
constructor() {
super(...arguments);
this.selectDate = async (day) => this.clickCalendarItem(day.toString());
this.selectMonth = async (month) => this.clickCalendarItem(month);
this.selectYear = async (year) => this.clickCalendarItem(year.toString());
this.toHaveValue = async (value) => {
const el = this.getInput;
await el.isVisible();
await expect(el).toHaveValue(value);
};
this.acceptText = async (text) => {
await this.getInput.fill(text);
await Helpers.page.waitForTimeout(1000); // Wait for time frame picker to process the change and update min date of end date picker
await this.getInput.press("Enter");
};
this.clearText = async () => this.getInput.clear();
this.getMonthElement = (month, index) => this.selectButton(month, index);
this.getYearElement = (year, index) => this.selectButton(year, index);
this.deleteTextManually = async () => {
await this.getInput.press("Control+a");
await this.getInput.press("Delete");
};
this.clickTodayButton = async () => this.getLocatorByCss("button.today-button").click();
/** @deprecated As of Nova v11, use 'toggle' method instead. Removal: NUI-5865 */
this.clickCalendarIcon = async () => this.toggle();
this.toggle = async () => {
const el = this.getLocatorByCss(".nui-datepicker__icon");
await el.isVisible();
await el.click();
};
this.clickChangeModeButton = async () => this.getLocatorByCss(".change-mode-button").click();
this.clickFirstCalendarDate = async () => this.selectDayButtonByIndex(0).click();
this.isInputValid = async () => await this.textbox.toNotContainClass("has-error");
this.isNotInputValid = async () => await this.textbox.toContainClass("has-error");
this.clickInput = async () => this.getInput.click();
this.getMonthFromTitle = async () => ((await this.getTitleText.textContent()) ?? "").split(" ")[0];
}
static { this.EXPECTED_FORMAT = "DD MMM YYYY"; }
static { this.CSS_CLASS = "nui-datepicker"; }
static { this.MONTHNAMES_SHORT = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
]; }
static { this.MONTHNAMES_LONG = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
]; }
get getOverlay() {
return Atom.findIn(OverlayAtom, this.getLocator());
}
get textbox() {
return Atom.findIn(TextboxAtom, this.getLocator());
}
get getInput() {
return this.getLocator().locator(`input.form-control`);
}
formatDate(date, localeDateStringFormat) {
return date
.locale(localeDateStringFormat)
.format(DatepickerAtom.EXPECTED_FORMAT);
}
/**
* Gets title which will be after current title is clicked.
* For example, when daypicker mode is enabled then it gets title of monthpicker.
* In monthpicker mode gets title of yearpicker.
* @returns {Promise<string>}
*/
async getLargerPeriodTitle() {
let newTitle = "";
const currentTitle = await this.getTitleText.textContent();
if (currentTitle && currentTitle.length === 4) {
const currentYear = Math.floor(parseInt(currentTitle, 10));
const rangeStart = currentYear;
const rangeEnd = currentYear + 19;
newTitle = `${rangeStart} - ${rangeEnd}`;
}
else if (currentTitle) {
newTitle = currentTitle.substring(currentTitle.length - 4);
}
return newTitle;
}
async clickTitle() {
return super.getLocator().locator(`button[id*='title']`).click();
}
get getActiveDay() {
return this.getLocatorByCss(".btn.selected");
}
get getActiveDayText() {
return this.getLocatorByCss(".btn.selected");
}
get getTitleText() {
return super.getLocator().locator("button[id*='title']");
}
async goNext() {
return super.getLocator().locator("button[icon='caret-right']").click();
}
async goBack() {
return super.getLocator().locator("button[icon='caret-left']").click();
}
get todayButton() {
return this.getLocator().locator("button.today-button");
}
getPreviousMonthTitle(currentMonth, format = "MMMM") {
const previousMonth = moment().month(currentMonth).subtract(1, "month");
return previousMonth.format(format);
}
getNextMonthTitle(currentMonth, format = "MMMM") {
const nextMonth = moment().month(currentMonth).add(1, "month");
return nextMonth.format(format);
}
async clickCalendarItem(buttonText) {
const button = super
.getLocator()
.locator(`tbody button span:not(.text-muted)`)
.filter({ hasText: buttonText })
.first();
return button.click();
}
selectButton(identifier, index = 0) {
return super
.getLocator()
.locator(".nui-button span")
.filter({ hasText: identifier })
.nth(index);
}
selectDayButtonByIndex(index = 0) {
return super.getLocator().locator("td.day .nui-button").nth(index);
}
getLocatorByCss(identifier) {
// if deep is passed then look in shadow DOM
return super.getLocator().locator(identifier);
}
async toBeDisabled() {
await expect(this.getInput).toBeDisabled();
}
async toBeEnabled() {
await expect(this.getInput).toBeEnabled();
}
}
//# sourceMappingURL=datepicker.atom.js.map