@nuralyui/timepicker
Version:
NuralyUI TimePicker - A comprehensive time selection component with clock interface, multiple formats, and validation
218 lines • 10.8 kB
JavaScript
/**
* @license
* Copyright 2023 Nuraly, Laabidi Aymen
* SPDX-License-Identifier: MIT
*/
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { html, fixture, expect, aTimeout } from '@open-wc/testing';
import { TimeFormat, TimePickerSize, TimePickerVariant } from '../timepicker.types.js';
describe('NrTimePickerElement', () => {
let element;
beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
element = yield fixture(html `<nr-timepicker></nr-timepicker>`);
}));
describe('Basic functionality', () => {
it('should render successfully', () => {
expect(element).to.exist;
expect(element.tagName).to.equal('NR-TIMEPICKER');
});
it('should have default properties', () => {
expect(element.format).to.equal(TimeFormat.TwentyFourHour);
expect(element.showSeconds).to.be.false;
expect(element.disabled).to.be.false;
expect(element.readonly).to.be.false;
expect(element.required).to.be.false;
});
it('should have empty initial value', () => {
expect(element.value).to.equal('');
});
});
describe('Time format handling', () => {
it('should handle 24-hour format by default', () => __awaiter(void 0, void 0, void 0, function* () {
element.value = '14:30';
yield element.updateComplete;
expect(element.value).to.equal('14:30');
}));
it('should handle 12-hour format', () => __awaiter(void 0, void 0, void 0, function* () {
element.format = TimeFormat.TwelveHour;
element.value = '2:30 PM';
yield element.updateComplete;
expect(element.value).to.equal('2:30 PM');
}));
it('should format time with seconds when enabled', () => __awaiter(void 0, void 0, void 0, function* () {
element.showSeconds = true;
element.value = '14:30:45';
yield element.updateComplete;
expect(element.value).to.equal('14:30:45');
}));
});
describe('Time validation', () => {
it('should validate time within min/max range', () => __awaiter(void 0, void 0, void 0, function* () {
element.minTime = '09:00';
element.maxTime = '17:00';
yield element.updateComplete;
// Valid time within range
element.value = '12:00';
yield element.updateComplete;
expect(element.value).to.equal('12:00');
}));
it('should reject invalid time formats', () => __awaiter(void 0, void 0, void 0, function* () {
const invalidValue = 'invalid-time';
element.value = invalidValue;
yield element.updateComplete;
// Should not set invalid value
expect(element.value).to.not.equal(invalidValue);
}));
});
describe('Clock functionality', () => {
it('should open and close clock', () => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b, _c;
// Check initial state via DOM
let dropdown = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.time-picker__dropdown--open');
expect(dropdown).to.not.exist;
element.open();
yield element.updateComplete;
dropdown = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.time-picker__dropdown--open');
expect(dropdown).to.exist;
element.close();
yield element.updateComplete;
dropdown = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.time-picker__dropdown--open');
expect(dropdown).to.not.exist;
}));
it('should toggle clock state via trigger button', () => __awaiter(void 0, void 0, void 0, function* () {
var _d, _e, _f, _g;
const trigger = (_d = element.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.time-picker__trigger');
// Initially closed
let dropdown = (_e = element.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.time-picker__dropdown--open');
expect(dropdown).to.not.exist;
// Click to open
trigger.click();
yield element.updateComplete;
dropdown = (_f = element.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('.time-picker__dropdown--open');
expect(dropdown).to.exist;
// Click to close
trigger.click();
yield element.updateComplete;
dropdown = (_g = element.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector('.time-picker__dropdown--open');
expect(dropdown).to.not.exist;
}));
});
describe('Time manipulation', () => {
it('should clear time value', () => __awaiter(void 0, void 0, void 0, function* () {
element.value = '12:00';
yield element.updateComplete;
element.clear();
yield element.updateComplete;
expect(element.value).to.equal('');
}));
it('should set current time', () => __awaiter(void 0, void 0, void 0, function* () {
element.setToNow();
yield element.updateComplete;
// Should have some value after setting to now
expect(element.value).to.not.equal('');
// Basic format check for 24-hour format
expect(element.value).to.match(/^\d{1,2}:\d{2}$/);
}));
});
describe('Event handling', () => {
it('should dispatch time-change event', () => __awaiter(void 0, void 0, void 0, function* () {
let eventFired = false;
let eventDetail = null;
element.addEventListener('nr-time-change', (e) => {
const customEvent = e;
eventFired = true;
eventDetail = customEvent.detail;
});
element.value = '15:30';
yield element.updateComplete;
// Allow time for event to be dispatched
yield aTimeout(10);
expect(eventFired).to.be.true;
expect(eventDetail).to.exist;
}));
it('should dispatch clock open/close events', () => __awaiter(void 0, void 0, void 0, function* () {
let openEventFired = false;
let closeEventFired = false;
element.addEventListener('nr-clock-open', () => {
openEventFired = true;
});
element.addEventListener('nr-clock-close', () => {
closeEventFired = true;
});
element.open();
yield element.updateComplete;
yield aTimeout(10);
expect(openEventFired).to.be.true;
element.close();
yield element.updateComplete;
yield aTimeout(10);
expect(closeEventFired).to.be.true;
}));
});
describe('Accessibility', () => {
it('should have proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
var _a;
element.label = 'Select Time';
element.required = true;
yield element.updateComplete;
const input = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
expect(input).to.exist;
expect(input === null || input === void 0 ? void 0 : input.getAttribute('required')).to.exist;
}));
it('should support disabled state', () => __awaiter(void 0, void 0, void 0, function* () {
var _b;
element.disabled = true;
yield element.updateComplete;
const input = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
expect(input === null || input === void 0 ? void 0 : input.hasAttribute('disabled')).to.be.true;
}));
it('should support readonly state', () => __awaiter(void 0, void 0, void 0, function* () {
var _c;
element.readonly = true;
yield element.updateComplete;
const input = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('input');
expect(input === null || input === void 0 ? void 0 : input.hasAttribute('readonly')).to.be.true;
}));
});
describe('Size and variant attributes', () => {
it('should apply size attribute to host', () => __awaiter(void 0, void 0, void 0, function* () {
element.size = TimePickerSize.Large;
yield element.updateComplete;
expect(element.hasAttribute('size')).to.be.true;
expect(element.getAttribute('size')).to.equal('large');
}));
it('should apply variant attribute to host', () => __awaiter(void 0, void 0, void 0, function* () {
element.variant = TimePickerVariant.Outlined;
yield element.updateComplete;
expect(element.hasAttribute('variant')).to.be.true;
expect(element.getAttribute('variant')).to.equal('outlined');
}));
});
describe('Controller integration', () => {
it('should have selection controller', () => {
// Access private controller for testing (cast to any to bypass TypeScript)
const controller = element.selectionController;
expect(controller).to.exist;
expect(typeof controller.selectTime).to.equal('function');
});
it('should have validation controller', () => {
const controller = element.validationController;
expect(controller).to.exist;
expect(typeof controller.validateConstraints).to.equal('function');
});
it('should have formatting controller', () => {
const controller = element.formattingController;
expect(controller).to.exist;
expect(typeof controller.formatForDisplay).to.equal('function');
});
});
});
//# sourceMappingURL=timepicker.test.js.map