KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use wrapElement method in Testcafe
Best JavaScript code snippet using testcafe
popup.spec.js
Source:popup.spec.js 
1describe('datepicker popup', function() {2 var inputEl, dropdownEl, $compile, $document, $rootScope, $sniffer,3 $templateCache, $timeout;4 beforeEach(module('ui.bootstrap.datepickerPopup'));5 beforeEach(module('uib/template/datepicker/datepicker.html'));6 beforeEach(module('uib/template/datepicker/day.html'));7 beforeEach(module('uib/template/datepicker/month.html'));8 beforeEach(module('uib/template/datepicker/year.html'));9 beforeEach(module('uib/template/datepickerPopup/popup.html'));10 beforeEach(inject(function(_$compile_, _$rootScope_, _$templateCache_) {11 $compile = _$compile_;12 $rootScope = _$rootScope_;13 $rootScope.date = new Date('September 30, 2010 15:30:00');14 $templateCache = _$templateCache_;15 }));16 function getTitleButton() {17 return element.find('th').eq(1).find('button').first();18 }19 function getTitle() {20 return getTitleButton().text();21 }22 function clickTitleButton() {23 getTitleButton().click();24 }25 function getLabelsRow() {26 return element.find('thead').find('tr').eq(1);27 }28 function getLabels(dayMode) {29 var els = getLabelsRow().find('th'),30 labels = [];31 for (var i = dayMode ? 1 : 0, n = els.length; i < n; i++) {32 labels.push(els.eq(i).text());33 }34 return labels;35 }36 function getOptions(dayMode) {37 var tr = element.find('tbody').find('tr');38 var rows = [];39 for (var j = 0, numRows = tr.length; j < numRows; j++) {40 var cols = tr.eq(j).find('td'), days = [];41 for (var i = dayMode ? 1 : 0, n = cols.length; i < n; i++) {42 days.push(cols.eq(i).find('button').text());43 }44 rows.push(days);45 }46 return rows;47 }48 function clickOption(index) {49 getAllOptionsEl().eq(index).click();50 }51 function getAllOptionsEl(dayMode) {52 return element.find('tbody').find('button');53 }54 function selectedElementIndex() {55 var buttons = getAllOptionsEl();56 for (var i = 0; i < buttons.length; i++) {57 if (angular.element(buttons[i]).hasClass('btn-info')) {58 return i;59 }60 }61 }62 function expectSelectedElement(index) {63 var buttons = getAllOptionsEl();64 angular.forEach( buttons, function(button, idx) {65 expect(angular.element(button).hasClass('btn-info')).toBe(idx === index);66 });67 }68 function getSelectedElement(index) {69 var buttons = getAllOptionsEl();70 var el = $.grep(buttons, function(button, idx) {71 return angular.element(button).hasClass('btn-info');72 })[0];73 return angular.element(el);74 }75 function triggerKeyDown(element, key, ctrl) {76 var keyCodes = {77 'enter': 13,78 'space': 32,79 'pageup': 33,80 'pagedown': 34,81 'end': 35,82 'home': 36,83 'left': 37,84 'up': 38,85 'right': 39,86 'down': 40,87 'esc': 2788 };89 var e = $.Event('keydown');90 e.which = keyCodes[key];91 if (ctrl) {92 e.ctrlKey = true;93 }94 element.trigger(e);95 }96 function assignElements(wrapElement) {97 inputEl = wrapElement.find('input');98 dropdownEl = wrapElement.find('ul');99 element = dropdownEl.find('table');100 }101 function changeInputValueTo(el, value) {102 el.val(value);103 el.trigger($sniffer.hasEvent('input') ? 'input' : 'change');104 $rootScope.$digest();105 }106 describe('basic', function() {107 var wrapElement, inputEl, dropdownEl;108 function assignElements(wrapElement) {109 inputEl = wrapElement.find('input');110 dropdownEl = wrapElement.find('ul');111 element = dropdownEl.find('table');112 }113 beforeEach(function() {114 $rootScope.date = new Date('September 30, 2010 15:30:00');115 $rootScope.isopen = true;116 wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="isopen"></div>')($rootScope);117 $rootScope.$digest();118 assignElements(wrapElement);119 });120 it('should stop click event from bubbling from today button', function() {121 var bubbled = false;122 wrapElement.on('click', function() {123 bubbled = true;124 });125 wrapElement.find('.uib-datepicker-current').trigger('click');126 expect(bubbled).toBe(false);127 });128 it('should stop click event from bubbling from clear button', function() {129 var bubbled = false;130 wrapElement.on('click', function() {131 bubbled = true;132 });133 wrapElement.find('.uib-clear').trigger('click');134 expect(bubbled).toBe(false);135 });136 it('should stop click event from bubbling from close button', function() {137 var bubbled = false;138 wrapElement.on('click', function() {139 bubbled = true;140 });141 wrapElement.find('.uib-close').trigger('click');142 expect(bubbled).toBe(false);143 });144 });145 describe('ngModelOptions allowInvalid', function() {146 beforeEach(inject(function(_$sniffer_) {147 $sniffer = _$sniffer_;148 $rootScope.date = new Date('September 30, 2010 15:30:00');149 $rootScope.modelOptions = {allowInvalid: true};150 element = $compile('<div><input ng-model="date" ng-model-options="modelOptions" uib-datepicker-popup></div>')($rootScope);151 inputEl = element.find('input');152 $rootScope.$digest();153 }));154 function changeInputValueTo(el, value) {155 el.val(value);156 el.trigger($sniffer.hasEvent('input') ? 'input' : 'change');157 $rootScope.$digest();158 }159 it('should update ng-model even if the date is invalid when allowInvalid is true', function() {160 changeInputValueTo(inputEl, 'pizza');161 expect($rootScope.date).toBe('pizza');162 expect(inputEl.val()).toBe('pizza');163 });164 });165 describe('setting datepickerPopupConfig', function() {166 var originalConfig = {};167 beforeEach(inject(function(uibDatepickerPopupConfig) {168 angular.extend(originalConfig, uibDatepickerPopupConfig);169 uibDatepickerPopupConfig.datepickerPopup = 'MM-dd-yyyy';170 element = $compile('<input ng-model="date" uib-datepicker-popup>')($rootScope);171 $rootScope.$digest();172 }));173 afterEach(inject(function(uibDatepickerPopupConfig) {174 // return it to the original state175 angular.extend(uibDatepickerPopupConfig, originalConfig);176 }));177 it('changes date format', function() {178 expect(element.val()).toEqual('09-30-2010');179 });180 });181 describe('setting datepickerPopupConfig inside ng-if', function() {182 var originalConfig = {};183 beforeEach(inject(function(uibDatepickerPopupConfig) {184 angular.extend(originalConfig, uibDatepickerPopupConfig);185 uibDatepickerPopupConfig.datepickerPopup = 'MM-dd-yyyy';186 element = $compile('<div><div ng-if="true"><input ng-model="date" uib-datepicker-popup></div></div>')($rootScope);187 $rootScope.$digest();188 }));189 afterEach(inject(function(uibDatepickerPopupConfig) {190 // return it to the original state191 angular.extend(uibDatepickerPopupConfig, originalConfig);192 }));193 it('changes date format', function() {194 expect(element.find('input').val()).toEqual('09-30-2010');195 });196 });197 describe('initially', function() {198 beforeEach(inject(function(_$document_, _$sniffer_) {199 $document = _$document_;200 $sniffer = _$sniffer_;201 $rootScope.isopen = true;202 $rootScope.date = new Date('September 30, 2010 15:30:00');203 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup><div>')($rootScope);204 $rootScope.$digest();205 assignElements(wrapElement);206 }));207 it('does not to display datepicker initially', function() {208 expect(dropdownEl.length).toBe(0);209 });210 it('to display the correct value in input', function() {211 expect(inputEl.val()).toBe('2010-09-30');212 });213 });214 describe('initially opened', function() {215 var wrapElement;216 beforeEach(inject(function(_$document_, _$sniffer_, _$timeout_) {217 $document = _$document_;218 $sniffer = _$sniffer_;219 $timeout = _$timeout_;220 $rootScope.isopen = true;221 $rootScope.date = new Date('September 30, 2010 15:30:00');222 wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="isopen"><div>')($rootScope);223 $rootScope.$digest();224 assignElements(wrapElement);225 }));226 it('datepicker is displayed', function() {227 expect(dropdownEl.length).toBe(1);228 });229 it('renders the calendar correctly', function() {230 expect(getLabelsRow().css('display')).not.toBe('none');231 expect(getLabels(true)).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);232 expect(getOptions(true)).toEqual([233 ['29', '30', '31', '01', '02', '03', '04'],234 ['05', '06', '07', '08', '09', '10', '11'],235 ['12', '13', '14', '15', '16', '17', '18'],236 ['19', '20', '21', '22', '23', '24', '25'],237 ['26', '27', '28', '29', '30', '01', '02'],238 ['03', '04', '05', '06', '07', '08', '09']239 ]);240 });241 it('updates the input when a day is clicked', function() {242 clickOption(17);243 expect(inputEl.val()).toBe('2010-09-15');244 expect($rootScope.date).toEqual(new Date('September 15, 2010 15:30:00'));245 });246 it('should mark the input field dirty when a day is clicked', function() {247 expect(inputEl).toHaveClass('ng-pristine');248 clickOption(17);249 expect(inputEl).toHaveClass('ng-dirty');250 });251 it('updates the input correctly when model changes', function() {252 $rootScope.date = new Date('January 10, 1983 10:00:00');253 $rootScope.$digest();254 expect(inputEl.val()).toBe('1983-01-10');255 });256 it('closes the dropdown when a day is clicked', function() {257 expect(dropdownEl.length).toBe(1);258 clickOption(17);259 assignElements(wrapElement);260 expect(dropdownEl.length).toBe(0);261 });262 it('updates the model & calendar when input value changes', function() {263 changeInputValueTo(inputEl, '2010-09-15');264 expect($rootScope.date.getFullYear()).toEqual(2010);265 expect($rootScope.date.getMonth()).toEqual(8);266 expect($rootScope.date.getDate()).toEqual(15);267 expect(getOptions(true)).toEqual([268 ['29', '30', '31', '01', '02', '03', '04'],269 ['05', '06', '07', '08', '09', '10', '11'],270 ['12', '13', '14', '15', '16', '17', '18'],271 ['19', '20', '21', '22', '23', '24', '25'],272 ['26', '27', '28', '29', '30', '01', '02'],273 ['03', '04', '05', '06', '07', '08', '09']274 ]);275 expectSelectedElement(17);276 });277 it('closes when click outside of calendar', function() {278 expect(dropdownEl.length).toBe(1);279 $timeout.flush(0);280 $document.find('body').click();281 assignElements(wrapElement);282 expect(dropdownEl.length).toBe(0);283 });284 it('sets `ng-invalid` for invalid input', function() {285 changeInputValueTo(inputEl, 'pizza');286 expect(inputEl).toHaveClass('ng-invalid');287 expect(inputEl).toHaveClass('ng-invalid-date');288 expect($rootScope.date).toBeUndefined();289 expect(inputEl.val()).toBe('pizza');290 });291 it('unsets `ng-invalid` for valid input', function() {292 changeInputValueTo(inputEl, 'pizza');293 expect(inputEl).toHaveClass('ng-invalid-date');294 $rootScope.date = new Date('August 11, 2013');295 $rootScope.$digest();296 expect(inputEl).not.toHaveClass('ng-invalid');297 expect(inputEl).not.toHaveClass('ng-invalid-date');298 });299 describe('focus', function () {300 beforeEach(function() {301 var body = $document.find('body');302 body.append(inputEl);303 body.append(dropdownEl);304 });305 afterEach(function() {306 inputEl.remove();307 dropdownEl.remove();308 });309 it('returns to the input when ESC key is pressed in the popup and closes', function() {310 expect(dropdownEl.length).toBe(1);311 dropdownEl.find('button').eq(0).focus();312 expect(document.activeElement.tagName).toBe('BUTTON');313 triggerKeyDown(dropdownEl, 'esc');314 assignElements(wrapElement);315 expect(dropdownEl.length).toBe(0);316 expect(document.activeElement.tagName).toBe('INPUT');317 });318 it('returns to the input when ESC key is pressed in the input and closes', function() {319 expect(dropdownEl.length).toBe(1);320 dropdownEl.find('button').eq(0).focus();321 expect(document.activeElement.tagName).toBe('BUTTON');322 triggerKeyDown(inputEl, 'esc');323 $rootScope.$digest();324 assignElements(wrapElement);325 expect(dropdownEl.length).toBe(0);326 expect(document.activeElement.tagName).toBe('INPUT');327 });328 it('stops the ESC key from propagating if the dropdown is open, but not when closed', function() {329 var documentKey = -1;330 var getKey = function(evt) { documentKey = evt.which; };331 $document.bind('keydown', getKey);332 triggerKeyDown(inputEl, 'esc');333 expect(documentKey).toBe(-1);334 triggerKeyDown(inputEl, 'esc');335 expect(documentKey).toBe(27);336 $document.unbind('keydown', getKey);337 });338 });339 describe('works with HTML5 date input types', function() {340 var date2 = new Date('October 1, 2010 12:34:56.789');341 beforeEach(inject(function(_$document_) {342 $document = _$document_;343 $rootScope.isopen = true;344 $rootScope.date = new Date('September 30, 2010 15:30:00');345 }));346 it('works as date', function() {347 setupInputWithType('date');348 expect(dropdownEl.length).toBe(1);349 expect(inputEl.val()).toBe('2010-09-30');350 changeInputValueTo(inputEl, '1980-03-05');351 expect($rootScope.date.getFullYear()).toEqual(1980);352 expect($rootScope.date.getMonth()).toEqual(2);353 expect($rootScope.date.getDate()).toEqual(5);354 expect(getOptions(true)).toEqual([355 ['24', '25', '26', '27', '28', '29', '01'],356 ['02', '03', '04', '05', '06', '07', '08'],357 ['09', '10', '11', '12', '13', '14', '15'],358 ['16', '17', '18', '19', '20', '21', '22'],359 ['23', '24', '25', '26', '27', '28', '29'],360 ['30', '31', '01', '02', '03', '04', '05']361 ]);362 expect(selectedElementIndex()).toEqual(10);363 });364 it('works as datetime-local', function() {365 setupInputWithType('datetime-local');366 expect(inputEl.val()).toBe('2010-09-30T15:30:00.000');367 changeInputValueTo(inputEl, '1980-03-05T12:34:56.000');368 expect($rootScope.date.getFullYear()).toEqual(1980);369 expect($rootScope.date.getMonth()).toEqual(2);370 expect($rootScope.date.getDate()).toEqual(5);371 expect(getOptions(true)).toEqual([372 ['24', '25', '26', '27', '28', '29', '01'],373 ['02', '03', '04', '05', '06', '07', '08'],374 ['09', '10', '11', '12', '13', '14', '15'],375 ['16', '17', '18', '19', '20', '21', '22'],376 ['23', '24', '25', '26', '27', '28', '29'],377 ['30', '31', '01', '02', '03', '04', '05']378 ]);379 expect(selectedElementIndex()).toEqual(10);380 });381 it('works as month', function() {382 setupInputWithType('month');383 expect(inputEl.val()).toBe('2010-09');384 changeInputValueTo(inputEl, '1980-03');385 expect($rootScope.date.getFullYear()).toEqual(1980);386 expect($rootScope.date.getMonth()).toEqual(2);387 expect($rootScope.date.getDate()).toEqual(30);388 expect(getOptions()).toEqual([389 ['January', 'February', 'March'],390 ['April', 'May', 'June'],391 ['July', 'August', 'September'],392 ['October', 'November', 'December']393 ]);394 expect(selectedElementIndex()).toEqual(2);395 });396 function setupInputWithType(type) {397 var wrapElement = $compile('<div><input type="' +398 type + '" ng-model="date" uib-datepicker-popup is-open="isopen"><div>')($rootScope);399 $rootScope.$digest();400 assignElements(wrapElement);401 }402 });403 });404 describe('works with ngModelOptions', function() {405 var $timeout;406 beforeEach(inject(function(_$document_, _$sniffer_, _$timeout_) {407 $document = _$document_;408 $timeout = _$timeout_;409 $rootScope.isopen = true;410 $rootScope.date = new Date('September 30, 2010 15:30:00');411 var wrapElement = $compile('<div><input ng-model="date" ' +412 'ng-model-options="{ debounce: 10000 }" ' +413 'uib-datepicker-popup is-open="isopen"><div>')($rootScope);414 $rootScope.$digest();415 assignElements(wrapElement);416 }));417 it('should change model and update calendar after debounce timeout', function() {418 changeInputValueTo(inputEl, '1980-03-05');419 expect($rootScope.date.getFullYear()).toEqual(2010);420 expect($rootScope.date.getMonth()).toEqual(9 - 1);421 expect($rootScope.date.getDate()).toEqual(30);422 expect(getOptions(true)).toEqual([423 ['29', '30', '31', '01', '02', '03', '04'],424 ['05', '06', '07', '08', '09', '10', '11'],425 ['12', '13', '14', '15', '16', '17', '18'],426 ['19', '20', '21', '22', '23', '24', '25'],427 ['26', '27', '28', '29', '30', '01', '02'],428 ['03', '04', '05', '06', '07', '08', '09']429 ]);430 // No changes yet431 $timeout.flush(2000);432 expect($rootScope.date.getFullYear()).toEqual(2010);433 expect($rootScope.date.getMonth()).toEqual(9 - 1);434 expect($rootScope.date.getDate()).toEqual(30);435 expect(getOptions(true)).toEqual([436 ['29', '30', '31', '01', '02', '03', '04'],437 ['05', '06', '07', '08', '09', '10', '11'],438 ['12', '13', '14', '15', '16', '17', '18'],439 ['19', '20', '21', '22', '23', '24', '25'],440 ['26', '27', '28', '29', '30', '01', '02'],441 ['03', '04', '05', '06', '07', '08', '09']442 ]);443 $timeout.flush(10000);444 expect($rootScope.date.getFullYear()).toEqual(1980);445 expect($rootScope.date.getMonth()).toEqual(2);446 expect($rootScope.date.getDate()).toEqual(5);447 expect(getOptions(true)).toEqual([448 ['24', '25', '26', '27', '28', '29', '01'],449 ['02', '03', '04', '05', '06', '07', '08'],450 ['09', '10', '11', '12', '13', '14', '15'],451 ['16', '17', '18', '19', '20', '21', '22'],452 ['23', '24', '25', '26', '27', '28', '29'],453 ['30', '31', '01', '02', '03', '04', '05']454 ]);455 expectSelectedElement( 10 );456 });457 });458 describe('works with ngModelOptions updateOn : "default"', function() {459 var $timeout, wrapElement;460 beforeEach(inject(function(_$document_, _$sniffer_, _$timeout_) {461 $document = _$document_;462 $timeout = _$timeout_;463 $rootScope.isopen = true;464 $rootScope.date = new Date('2010-09-30T10:00:00.000Z');465 wrapElement = $compile('<div><input ng-model="date" ' +466 'ng-model-options="{ updateOn: \'default\' }" ' +467 'uib-datepicker-popup is-open="isopen"><div>')($rootScope);468 $rootScope.$digest();469 assignElements(wrapElement);470 }));471 it('should close the popup and update the input when a day is clicked', function() {472 clickOption(17);473 assignElements(wrapElement);474 expect(dropdownEl.length).toBe(0);475 expect(inputEl.val()).toBe('2010-09-15');476 expect($rootScope.date).toEqual(new Date('2010-09-15T10:00:00.000Z'));477 });478 });479 describe('attribute `datepickerOptions`', function() {480 describe('show-weeks', function() {481 beforeEach(function() {482 $rootScope.opts = {483 showWeeks: false484 };485 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);486 $rootScope.$digest();487 assignElements(wrapElement);488 });489 it('hides week numbers based on variable', function() {490 expect(getLabelsRow().find('th').length).toEqual(7);491 var tr = element.find('tbody').find('tr');492 for (var i = 0; i < 5; i++) {493 expect(tr.eq(i).find('td').length).toEqual(7);494 }495 });496 });497 describe('init-date', function(){498 beforeEach(function() {499 $rootScope.date = null;500 $rootScope.opts = {501 initDate: new Date('November 9, 1980')502 };503 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);504 $rootScope.$digest();505 assignElements(wrapElement);506 });507 it('does not alter the model', function() {508 expect($rootScope.date).toBe(null);509 });510 it('shows the correct title', function() {511 expect(getTitle()).toBe('November 1980');512 });513 });514 describe('min-date', function() {515 it('should be able to specify a min-date through options', function() {516 $rootScope.opts = {517 minDate: new Date('September 12, 2010'),518 shortcutPropagation: 'dog'519 };520 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);521 $rootScope.$digest();522 assignElements(wrapElement);523 var buttons = getAllOptionsEl();524 angular.forEach(buttons, function(button, index) {525 expect(angular.element(button).prop('disabled')).toBe(index < 14);526 });527 $rootScope.opts.minDate = new Date('September 13, 2010');528 $rootScope.$digest();529 buttons = getAllOptionsEl();530 angular.forEach(buttons, function(button, index) {531 expect(angular.element(button).prop('disabled')).toBe(index < 15);532 });533 });534 });535 describe('max-date', function() {536 it('should be able to specify a max-date through options', function() {537 $rootScope.opts = {538 maxDate: new Date('September 25, 2010')539 };540 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);541 $rootScope.$digest();542 assignElements(wrapElement);543 var buttons = getAllOptionsEl();544 angular.forEach(buttons, function(button, index) {545 expect(angular.element(button).prop('disabled')).toBe(index > 27);546 });547 $rootScope.opts.maxDate = new Date('September 15, 2010');548 $rootScope.$digest();549 buttons = getAllOptionsEl();550 angular.forEach(buttons, function(button, index) {551 expect(angular.element(button).prop('disabled')).toBe(index > 17);552 });553 });554 });555 describe('min-mode', function() {556 it('should be able to specify min-mode through options', function() {557 $rootScope.opts = {558 minMode: 'month'559 };560 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);561 $rootScope.$digest();562 assignElements(wrapElement);563 expect(getTitle()).toBe('2010');564 });565 });566 describe('max-mode', function() {567 it('should be able to specify max-mode through options', function() {568 $rootScope.opts = {569 maxMode: 'month'570 };571 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);572 $rootScope.$digest();573 assignElements(wrapElement);574 expect(getTitle()).toBe('September 2010');575 clickTitleButton();576 assignElements(wrapElement);577 expect(getTitle()).toBe('2010');578 clickTitleButton();579 assignElements(wrapElement);580 expect(getTitle()).toBe('2010');581 });582 });583 describe('datepicker-mode', function() {584 beforeEach(inject(function() {585 $rootScope.date = new Date('August 11, 2013');586 $rootScope.opts = {587 datepickerMode: 'month'588 };589 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);590 $rootScope.$digest();591 assignElements(wrapElement);592 }));593 it('shows the correct title', function() {594 expect(getTitle()).toBe('2013');595 });596 it('updates binding', function() {597 clickTitleButton();598 expect($rootScope.opts.datepickerMode).toBe('year');599 });600 });601 });602 describe('option `init-date`', function() {603 beforeEach(function() {604 $rootScope.date = null;605 $rootScope.options = {606 initDate: new Date('November 9, 1980')607 };608 });609 describe('when initially set', function() {610 beforeEach(function() {611 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"></div>')($rootScope);612 $rootScope.$digest();613 assignElements(wrapElement);614 });615 it('does not alter the model', function() {616 expect($rootScope.date).toBe(null);617 });618 it('shows the correct title', function() {619 expect(getTitle()).toBe('November 1980');620 });621 });622 describe('when modified before date selected.', function() {623 beforeEach(function() {624 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"></div>')($rootScope);625 $rootScope.$digest();626 assignElements(wrapElement);627 $rootScope.options.initDate = new Date('December 20, 1981');628 $rootScope.$digest();629 });630 it('does not alter the model', function() {631 expect($rootScope.date).toBe(null);632 });633 it('shows the correct title', function() {634 expect(getTitle()).toBe('December 1981');635 });636 });637 describe('when modified after date selected.', function() {638 beforeEach(function() {639 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"></div>')($rootScope);640 $rootScope.$digest();641 assignElements(wrapElement);642 $rootScope.date = new Date('April 1, 1982');643 $rootScope.options.initDate = new Date('December 20, 1981');644 $rootScope.$digest();645 });646 it('does not alter the model', function() {647 expect($rootScope.date).toEqual(new Date('April 1, 1982'));648 });649 it('shows the correct title', function() {650 expect(getTitle()).toBe('April 1982');651 });652 });653 });654 describe('toggles programatically by `open` attribute', function() {655 var wrapElement;656 beforeEach(inject(function() {657 $rootScope.open = true;658 wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="open"><div>')($rootScope);659 $rootScope.$digest();660 assignElements(wrapElement);661 }));662 it('to display initially', function() {663 expect(dropdownEl.length).toBe(1);664 });665 it('to close / open from scope variable', function() {666 expect(dropdownEl.length).toBe(1);667 $rootScope.open = false;668 $rootScope.$digest();669 assignElements(wrapElement);670 expect(dropdownEl.length).toBe(0);671 $rootScope.open = true;672 $rootScope.$digest();673 assignElements(wrapElement);674 expect(dropdownEl.length).toBe(1);675 });676 });677 describe('custom format', function() {678 beforeEach(inject(function() {679 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="dd-MMMM-yyyy" is-open="true"><div>')($rootScope);680 $rootScope.$digest();681 assignElements(wrapElement);682 }));683 it('to display the correct value in input', function() {684 expect(inputEl.val()).toBe('30-September-2010');685 });686 it('updates the input when a day is clicked', function() {687 clickOption(17);688 expect(inputEl.val()).toBe('15-September-2010');689 expect($rootScope.date).toEqual(new Date('September 15, 2010 15:30:00'));690 });691 it('updates the input correctly when model changes', function() {692 $rootScope.date = new Date('January 10, 1983 10:00:00');693 $rootScope.$digest();694 expect(inputEl.val()).toBe('10-January-1983');695 });696 });697 describe('custom format with time', function() {698 beforeEach(inject(function() {699 var wrapElement = $compile('<div><input type="text" ng-model="date" uib-datepicker-popup="MMM-d-yyyy h:mm a" is-open="false"><div>')($rootScope);700 $rootScope.$digest();701 assignElements(wrapElement);702 }));703 it('updates the model correctly when the input value changes', function() {704 $rootScope.date = new Date(2015, 10, 24, 10, 0);705 $rootScope.$digest();706 expect(inputEl.val()).toBe('Nov-24-2015 10:00 AM');707 inputEl.val('Nov-24-2015 11:00 AM').trigger('input');708 $rootScope.$digest();709 expect($rootScope.date).toEqual(new Date(2015, 10, 24, 11, 0));710 });711 });712 describe('custom format with optional leading zeroes', function() {713 beforeEach(inject(function() {714 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="d!-M!-yyyy" is-open="true"><div>')($rootScope);715 $rootScope.$digest();716 assignElements(wrapElement);717 }));718 it('to display the correct value in input', function() {719 expect(inputEl.val()).toBe('30-09-2010');720 });721 it('updates the input when a day is clicked', function() {722 clickOption(10);723 expect(inputEl.val()).toBe('08-09-2010');724 expect($rootScope.date).toEqual(new Date('September 8, 2010 15:30:00'));725 });726 it('updates the input correctly when model changes', function() {727 $rootScope.date = new Date('December 25, 1983 10:00:00');728 $rootScope.$digest();729 expect(inputEl.val()).toBe('25-12-1983');730 });731 });732 describe('dynamic custom format', function() {733 beforeEach(inject(function() {734 $rootScope.format = 'dd-MMMM-yyyy';735 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="{{format}}" is-open="true"><div>')($rootScope);736 $rootScope.$digest();737 assignElements(wrapElement);738 }));739 it('to display the correct value in input', function() {740 expect(inputEl.val()).toBe('30-September-2010');741 });742 it('updates the input when a day is clicked', function() {743 clickOption(17);744 expect(inputEl.val()).toBe('15-September-2010');745 expect($rootScope.date).toEqual(new Date('September 15, 2010 15:30:00'));746 });747 it('updates the input correctly when model changes', function() {748 $rootScope.date = new Date('August 11, 2013 09:09:00');749 $rootScope.$digest();750 expect(inputEl.val()).toBe('11-August-2013');751 });752 it('updates the input correctly when format changes', function() {753 $rootScope.format = 'dd/MM/yyyy';754 $rootScope.$digest();755 expect(inputEl.val()).toBe('30/09/2010');756 });757 });758 describe('format errors', function() {759 var originalConfig = {};760 beforeEach(inject(function(uibDatepickerPopupConfig) {761 angular.extend(originalConfig, uibDatepickerPopupConfig);762 uibDatepickerPopupConfig.datepickerPopup = null;763 }));764 afterEach(inject(function(uibDatepickerPopupConfig) {765 // return it to the original state766 angular.extend(uibDatepickerPopupConfig, originalConfig);767 }));768 it('should throw an error if there is no format', function() {769 expect(function() {770 $compile('<div><input ng-model="date" uib-datepicker-popup><div>')($rootScope);771 }).toThrow(new Error('uibDatepickerPopup must have a date format specified.'));772 });773 it('should throw an error if the format changes to null without fallback', function() {774 $rootScope.format = 'dd-MMMM-yyyy';775 $compile('<div><input ng-model="date" uib-datepicker-popup="{{format}}"><div>')($rootScope);776 $rootScope.$digest();777 expect(function() {778 $rootScope.format = null;779 $rootScope.$digest();780 }).toThrow(new Error('uibDatepickerPopup must have a date format specified.'));781 });782 it('should thrown an error on date inputs with custom formats', function() {783 expect(function() {784 $compile('<div><input type="date" ng-model="date" uib-datepicker-popup="dd-yyyy-MMM"><div>')($rootScope);785 }).toThrow(new Error('HTML5 date input types do not support custom formats.'));786 });787 });788 describe('european format', function() {789 it('dd.MM.yyyy', function() {790 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="dd.MM.yyyy"><div>')($rootScope);791 $rootScope.$digest();792 assignElements(wrapElement);793 changeInputValueTo(inputEl, '11.08.2013');794 expect($rootScope.date.getFullYear()).toEqual(2013);795 expect($rootScope.date.getMonth()).toEqual(7);796 expect($rootScope.date.getDate()).toEqual(11);797 });798 });799 describe('`close-on-date-selection` attribute', function() {800 var wrapElement;801 beforeEach(inject(function() {802 $rootScope.close = false;803 wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup close-on-date-selection="close" is-open="true"><div>')($rootScope);804 $rootScope.$digest();805 assignElements(wrapElement);806 }));807 it('does not close the dropdown when a day is clicked', function() {808 clickOption(17);809 assignElements(wrapElement);810 expect(dropdownEl.length).toBe(1);811 });812 });813 describe('button bar', function() {814 var buttons, buttonBarElement;815 function assignButtonBar() {816 buttonBarElement = dropdownEl.find('li').eq(-1);817 buttons = buttonBarElement.find('button');818 }819 describe('', function() {820 var wrapElement;821 beforeEach(inject(function() {822 $rootScope.isopen = true;823 wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="isopen"><div>')($rootScope);824 $rootScope.$digest();825 assignElements(wrapElement);826 assignButtonBar();827 }));828 it('should exist', function() {829 expect(dropdownEl.length).toBe(1);830 expect(dropdownEl.find('li').length).toBe(2);831 });832 it('should have three buttons', function() {833 expect(buttons.length).toBe(3);834 expect(buttons.eq(0).text()).toBe('Today');835 expect(buttons.eq(1).text()).toBe('Clear');836 expect(buttons.eq(2).text()).toBe('Done');837 });838 it('should have a button to set today date without altering time part', function() {839 var today = new Date();840 buttons.eq(0).click();841 expect($rootScope.date.getFullYear()).toBe(today.getFullYear());842 expect($rootScope.date.getMonth()).toBe(today.getMonth());843 expect($rootScope.date.getDate()).toBe(today.getDate());844 expect($rootScope.date.getHours()).toBe(15);845 expect($rootScope.date.getMinutes()).toBe(30);846 expect($rootScope.date.getSeconds()).toBe(0);847 });848 it('should have a button to set today date if blank', function() {849 $rootScope.date = null;850 $rootScope.$digest();851 var today = new Date();852 buttons.eq(0).click();853 expect($rootScope.date.getFullYear()).toBe(today.getFullYear());854 expect($rootScope.date.getMonth()).toBe(today.getMonth());855 expect($rootScope.date.getDate()).toBe(today.getDate());856 expect($rootScope.date.getHours()).toBe(0);857 expect($rootScope.date.getMinutes()).toBe(0);858 expect($rootScope.date.getSeconds()).toBe(0);859 });860 it('should have a button to clear value', function() {861 buttons.eq(1).click();862 expect($rootScope.date).toBe(null);863 });864 it('should have a button to close calendar', function() {865 buttons.eq(2).click();866 assignElements(wrapElement);867 expect(dropdownEl.length).toBe(0);868 });869 });870 describe('customization', function() {871 it('should change text from attributes', function() {872 $rootScope.clearText = 'Null it!';873 $rootScope.close = 'Close';874 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup current-text="Now" clear-text="{{clearText}}" close-text="{{close}}ME" is-open="true"><div>')($rootScope);875 $rootScope.$digest();876 assignElements(wrapElement);877 assignButtonBar();878 expect(buttons.eq(0).text()).toBe('Now');879 expect(buttons.eq(1).text()).toBe('Null it!');880 expect(buttons.eq(2).text()).toBe('CloseME');881 });882 it('should disable today button if before min date', function() {883 var date = new Date();884 date.setDate(new Date().getDate() + 1);885 $rootScope.options = {886 minDate: date887 };888 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"><div>')($rootScope);889 $rootScope.$digest();890 assignElements(wrapElement);891 assignButtonBar();892 expect(buttons.eq(0).prop('disabled')).toBe(true);893 });894 it('should disable today button if before min date, yyyy-MM-dd case', inject(function(dateFilter) {895 var date = new Date();896 date.setDate(new Date().getDate() + 1);897 var literalMinDate = dateFilter(date, 'yyyy-MM-dd');898 $rootScope.options = {899 minDate: literalMinDate900 };901 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="yyyy-MM-dd" datepicker-options="options" is-open="true"><div>')($rootScope);902 $rootScope.$digest();903 assignElements(wrapElement);904 assignButtonBar();905 expect(buttons.eq(0).prop('disabled')).toBe(true);906 }));907 it('should not disable any button if min date is null', function() {908 $rootScope.options = {909 minDate: null910 };911 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"><div>')($rootScope);912 $rootScope.$digest();913 assignElements(wrapElement);914 assignButtonBar();915 for (var i = 0; i < buttons.length; i++) {916 expect(buttons.eq(i).prop('disabled')).toBe(false);917 }918 });919 it('should disable today button if after max date', function() {920 var date = new Date();921 date.setDate(new Date().getDate() - 2);922 $rootScope.options = {923 maxDate: date924 };925 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"><div>')($rootScope);926 $rootScope.$digest();927 assignElements(wrapElement);928 assignButtonBar();929 expect(buttons.eq(0).prop('disabled')).toBe(true);930 });931 it('should not disable any button if max date is null', function() {932 $rootScope.options = {933 maxDate: null934 };935 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"><div>')($rootScope);936 $rootScope.$digest();937 assignElements(wrapElement);938 assignButtonBar();939 for (var i = 0; i < buttons.length; i++) {940 expect(buttons.eq(i).prop('disabled')).toBe(false);941 }942 });943 it('should remove bar', function() {944 $rootScope.showBar = false;945 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup show-button-bar="showBar" is-open="true"><div>')($rootScope);946 $rootScope.$digest();947 assignElements(wrapElement);948 expect(dropdownEl.find('li').length).toBe(1);949 });950 it('should hide weeks column on popup', function() {951 $rootScope.options = {952 showWeeks: false953 };954 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"><div>')($rootScope);955 $rootScope.$digest();956 assignElements(wrapElement);957 expect(getLabelsRow().find('th').length).toEqual(7);958 var tr = element.find('tbody').find('tr');959 for (var i = 0; i < 5; i++) {960 expect(tr.eq(i).find('td').length).toEqual(7);961 }962 });963 it('should show weeks column on popup', function() {964 $rootScope.options = {965 showWeeks: true966 };967 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"><div>')($rootScope);968 $rootScope.$digest();969 assignElements(wrapElement);970 expect(getLabelsRow().find('th').eq(0)).not.toBeHidden();971 var tr = element.find('tbody').find('tr');972 for (var i = 0; i < 5; i++) {973 expect(tr.eq(i).find('td').eq(0)).not.toBeHidden();974 }975 });976 });977 describe('`ng-change`', function() {978 beforeEach(inject(function() {979 $rootScope.changeHandler = jasmine.createSpy('changeHandler');980 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-change="changeHandler()" is-open="true"><div>')($rootScope);981 $rootScope.$digest();982 assignElements(wrapElement);983 assignButtonBar();984 }));985 it('should be called when `today` is clicked', function() {986 buttons.eq(0).click();987 expect($rootScope.changeHandler).toHaveBeenCalled();988 });989 it('should be called when `clear` is clicked', function() {990 buttons.eq(1).click();991 expect($rootScope.changeHandler).toHaveBeenCalled();992 });993 it('should not be called when `close` is clicked', function() {994 buttons.eq(2).click();995 expect($rootScope.changeHandler).not.toHaveBeenCalled();996 });997 });998 });999 describe('use with `ng-required` directive', function() {1000 describe('`ng-required is true`', function() {1001 beforeEach(inject(function() {1002 $rootScope.date = '';1003 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true"><div>')($rootScope);1004 $rootScope.$digest();1005 assignElements(wrapElement);1006 }));1007 it('should be invalid initially and when no date', function() {1008 expect(inputEl.hasClass('ng-invalid')).toBeTruthy();1009 });1010 it('should be valid if model has been specified', function() {1011 $rootScope.date = new Date();1012 $rootScope.$digest();1013 expect(inputEl.hasClass('ng-valid')).toBeTruthy();1014 });1015 it('should be valid if model value is a valid timestamp', function() {1016 $rootScope.date = Date.now();1017 $rootScope.$digest();1018 expect(inputEl.hasClass('ng-valid')).toBeTruthy();1019 });1020 });1021 describe('`ng-required is false`', function() {1022 beforeEach(inject(function() {1023 $rootScope.date = '';1024 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="false"><div>')($rootScope);1025 $rootScope.$digest();1026 assignElements(wrapElement);1027 }));1028 it('should be valid initially and when no date', function() {1029 expect(inputEl.hasClass('ng-valid')).toBeTruthy();1030 });1031 });1032 });1033 describe('use with `ng-change` directive', function() {1034 beforeEach(inject(function() {1035 $rootScope.changeHandler = jasmine.createSpy('changeHandler');1036 $rootScope.date = new Date('09/16/2010');1037 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true" ng-change="changeHandler()" is-open="true"><div>')($rootScope);1038 $rootScope.$digest();1039 assignElements(wrapElement);1040 }));1041 it('should not be called initially', function() {1042 expect($rootScope.changeHandler).not.toHaveBeenCalled();1043 });1044 it('should be called when a day is clicked', function() {1045 clickOption(17);1046 expect($rootScope.changeHandler).toHaveBeenCalled();1047 });1048 it('should not be called when model changes programatically', function() {1049 $rootScope.date = new Date();1050 $rootScope.$digest();1051 expect($rootScope.changeHandler).not.toHaveBeenCalled();1052 });1053 });1054 describe('with disabled', function() {1055 var wrapElement;1056 beforeEach(function() {1057 $rootScope.isOpen = false;1058 wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true" ng-change="changeHandler()" is-open="isOpen" disabled><div>')($rootScope);1059 $rootScope.$digest();1060 });1061 it('should not open the popup', function() {1062 $rootScope.isOpen = true;1063 $rootScope.$digest();1064 expect($rootScope.isOpen).toBe(false);1065 expect(wrapElement.find('ul').length).toBe(0);1066 });1067 });1068 describe('with ng-disabled', function() {1069 var wrapElement;1070 beforeEach(function() {1071 $rootScope.disabled = false;1072 $rootScope.isOpen = false;1073 wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true" ng-change="changeHandler()" is-open="isOpen" ng-disabled="disabled"><div>')($rootScope);1074 $rootScope.$digest();1075 });1076 it('should not open the popup when disabled', function() {1077 $rootScope.isOpen = true;1078 $rootScope.$digest();1079 expect($rootScope.isOpen).toBe(true);1080 expect(wrapElement.find('ul').length).toBe(1);1081 $rootScope.isOpen = false;1082 $rootScope.$digest();1083 expect($rootScope.isOpen).toBe(false);1084 expect(wrapElement.find('ul').length).toBe(0);1085 $rootScope.disabled = true;1086 $rootScope.isOpen = true;1087 $rootScope.$digest();1088 expect($rootScope.isOpen).toBe(false);1089 expect(wrapElement.find('ul').length).toBe(0);1090 $rootScope.disabled = false;1091 $rootScope.isOpen = true;1092 $rootScope.$digest();1093 expect($rootScope.isOpen).toBe(true);1094 expect(wrapElement.find('ul').length).toBe(1);1095 });1096 });1097 describe('with datepicker-popup-template-url', function() {1098 beforeEach(function() {1099 $rootScope.date = new Date();1100 });1101 afterEach(function () {1102 $document.find('body').find('.dropdown-menu').remove();1103 });1104 it('should allow custom templates for the popup', function() {1105 $templateCache.put('foo/bar.html', '<div>baz</div>');1106 var elm = angular.element('<div><input ng-model="date" uib-datepicker-popup datepicker-popup-template-url="foo/bar.html" is-open="true"></div>');1107 $compile(elm)($rootScope);1108 $rootScope.$digest();1109 expect(elm.children().eq(1).html()).toBe('baz');1110 });1111 });1112 describe('with datepicker-template-url', function() {1113 beforeEach(function() {1114 $rootScope.date = new Date();1115 });1116 afterEach(function() {1117 $document.find('body').find('.dropdown-menu').remove();1118 });1119 it('should allow custom templates for the datepicker', function() {1120 $templateCache.put('foo/bar.html', '<div>baz</div>');1121 var elm = angular.element('<div><input ng-model="date" uib-datepicker-popup datepicker-template-url="foo/bar.html" is-open="true"></div>');1122 $compile(elm)($rootScope);1123 $rootScope.$digest();1124 var datepicker = elm.find('[uib-datepicker]');1125 expect(datepicker.html()).toBe('baz');1126 });1127 });1128 describe('with an append-to-body attribute', function() {1129 beforeEach(function() {1130 $rootScope.date = new Date();1131 });1132 afterEach(function() {1133 $document.find('body').children().remove();1134 });1135 it('should append to the body', function() {1136 var $body = $document.find('body'),1137 bodyLength = $body.children().length,1138 elm = angular.element(1139 '<div><input uib-datepicker-popup ng-model="date" datepicker-append-to-body="true" is-open="true" /></div>'1140 );1141 $compile(elm)($rootScope);1142 $rootScope.$digest();1143 expect($body.children().length).toEqual(bodyLength + 1);1144 expect(elm.children().length).toEqual(1);1145 });1146 it('should be removed on scope destroy', function() {1147 var $body = $document.find('body'),1148 bodyLength = $body.children().length,1149 isolatedScope = $rootScope.$new(),1150 elm = angular.element(1151 '<input uib-datepicker-popup ng-model="date" datepicker-append-to-body="true" is-open="true" />'1152 );1153 $compile(elm)(isolatedScope);1154 isolatedScope.$digest();1155 expect($body.children().length).toEqual(bodyLength + 1);1156 isolatedScope.$destroy();1157 expect($body.children().length).toEqual(bodyLength);1158 });1159 });1160 describe('with setting datepickerConfig.showWeeks to false', function() {1161 var originalConfig = {};1162 beforeEach(inject(function(uibDatepickerConfig) {1163 angular.extend(originalConfig, uibDatepickerConfig);1164 uibDatepickerConfig.showWeeks = false;1165 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="true"><div>')($rootScope);1166 $rootScope.$digest();1167 assignElements(wrapElement);1168 }));1169 afterEach(inject(function(uibDatepickerConfig) {1170 // return it to the original state1171 angular.extend(uibDatepickerConfig, originalConfig);1172 }));1173 it('changes initial visibility for weeks', function() {1174 expect(getLabelsRow().find('th').length).toEqual(7);1175 var tr = element.find('tbody').find('tr');1176 for (var i = 0; i < 5; i++) {1177 expect(tr.eq(i).find('td').length).toEqual(7);1178 }1179 });1180 });1181 describe('`datepicker-mode`', function() {1182 beforeEach(inject(function() {1183 $rootScope.date = new Date('August 11, 2013');1184 $rootScope.options = {1185 datepickerMode: 'month'1186 };1187 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="true"></div>')($rootScope);1188 $rootScope.$digest();1189 assignElements(wrapElement);1190 }));1191 it('shows the correct title', function() {1192 expect(getTitle()).toBe('2013');1193 });1194 it('updates binding', function() {1195 clickTitleButton();1196 expect($rootScope.options.datepickerMode).toBe('year');1197 });1198 });1199 describe('attribute `onOpenFocus`', function() {1200 beforeEach(function() {1201 $rootScope.date = null;1202 $rootScope.isopen = false;1203 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup on-open-focus="false" is-open="isopen"></div>')($rootScope);1204 $rootScope.$digest();1205 assignElements(wrapElement);1206 });1207 it('should remain focused on the input', function() {1208 var focused = true;1209 expect(dropdownEl.length).toBe(0);1210 inputEl[0].focus();1211 inputEl.on('blur', function() {1212 focused = false;1213 });1214 $rootScope.isopen = true;1215 $rootScope.$digest();1216 expect(inputEl.parent().find('.dropdown-menu').length).toBe(1);1217 expect(focused).toBe(true);1218 });1219 });1220 describe('altInputFormats', function() {1221 describe('datepickerPopupConfig.altInputFormats', function() {1222 var originalConfig = {};1223 beforeEach(inject(function(uibDatepickerPopupConfig) {1224 $rootScope.date = new Date('November 9, 1980');1225 angular.extend(originalConfig, uibDatepickerPopupConfig);1226 uibDatepickerPopupConfig.datepickerPopup = 'MM-dd-yyyy';1227 uibDatepickerPopupConfig.altInputFormats = ['M!/d!/yyyy'];1228 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="true"></div>')($rootScope);1229 $rootScope.$digest();1230 assignElements(wrapElement);1231 }));1232 afterEach(inject(function(uibDatepickerPopupConfig) {1233 // return it to the original state1234 angular.extend(uibDatepickerPopupConfig, originalConfig);1235 }));1236 it('changes date format', function() {1237 changeInputValueTo(inputEl, '11/8/1980');1238 expect($rootScope.date.getFullYear()).toEqual(1980);1239 expect($rootScope.date.getMonth()).toEqual(10);1240 expect($rootScope.date.getDate()).toEqual(8);1241 });1242 it('changes the datepicker', function() {1243 expect(selectedElementIndex()).toEqual(14);1244 changeInputValueTo(inputEl, '11/8/1980');1245 expect(selectedElementIndex()).toEqual(13);1246 });1247 });1248 describe('attribute `alt-input-formats`', function() {1249 beforeEach(function() {1250 $rootScope.date = new Date('November 9, 1980');1251 var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="MMMM d yyyy" alt-input-formats="[\'M!/d!/yyyy\']" is-open="true"></div>')($rootScope);1252 $rootScope.$digest();1253 assignElements(wrapElement);1254 });1255 it('should accept alternate input formats', function() {1256 changeInputValueTo(inputEl, '11/8/1980');1257 expect($rootScope.date.getFullYear()).toEqual(1980);1258 expect($rootScope.date.getMonth()).toEqual(10);1259 expect($rootScope.date.getDate()).toEqual(8);1260 });1261 it('changes the datepicker', function() {1262 expect(selectedElementIndex()).toEqual(14);1263 changeInputValueTo(inputEl, '11/8/1980');1264 expect(selectedElementIndex()).toEqual(13);1265 });1266 });1267 });1268 describe('uibDatepickerConfig ngModelOptions', function() {1269 var inputEl, dropdownEl;1270 function assignElements(wrapElement) {1271 inputEl = wrapElement.find('input');1272 dropdownEl = wrapElement.find('ul');1273 element = dropdownEl.find('table');1274 }1275 beforeEach(inject(function(uibDatepickerConfig) {1276 uibDatepickerConfig.ngModelOptions = { timezone: '+600' };1277 $rootScope.date = new Date('2010-09-30T10:00:00.000Z');1278 $rootScope.isopen = true;1279 }));1280 afterEach(inject(function(uibDatepickerConfig) {1281 uibDatepickerConfig.ngModelOptions = {};1282 }));1283 describe('timezone', function() {1284 beforeEach(inject(function(uibDatepickerConfig) {1285 var wrapper = $compile('<div><input ng-model="date" uib-datepicker-popup="MM/dd/yyyy" is-open="isopen"></div>')($rootScope);1286 $rootScope.$digest();1287 assignElements(wrapper);1288 }));1289 it('interprets the date appropriately', function() {1290 expect(inputEl.val()).toBe('09/30/2010');1291 });1292 it('updates the input when a day is clicked', function() {1293 clickOption(17);1294 expect(inputEl.val()).toBe('09/15/2010');1295 expect($rootScope.date).toEqual(new Date('2010-09-15T10:00:00.000Z'));1296 });1297 it('shows the correct title', function() {1298 expect(getTitle()).toBe('September 2010');1299 });1300 });1301 it('timezone interprets init date appropriately', function() {1302 $rootScope.options = {1303 initDate: new Date('2010-09-30T23:00:00.000Z')1304 };1305 $rootScope.date = null;1306 var wrapper = $compile('<div><input ng-model="date" uib-datepicker-popup="yyyy-MM-dd" datepicker-options="options" is-open="true"><div>')($rootScope);1307 $rootScope.$digest();1308 assignElements(wrapper);1309 expect(getTitle()).toBe('October 2010');1310 });1311 it('timezone interprets min date appropriately', function() {1312 $rootScope.options = {1313 minDate: new Date('2010-10-01T00:00:00.000Z')1314 };1315 var wrapper = $compile('<div><input ng-model="date" uib-datepicker-popup="yyyy-MM-dd" datepicker-options="options" is-open="true"><div>')($rootScope);1316 $rootScope.$digest();1317 assignElements(wrapper);1318 expect(getSelectedElement().prop('disabled')).toBe(true);1319 });1320 });1321 describe('ng-model-options', function() {1322 describe('timezone', function() {1323 var inputEl, dropdownEl, $document, $sniffer, $timeout;1324 function assignElements(wrapElement) {1325 inputEl = wrapElement.find('input');1326 dropdownEl = wrapElement.find('ul');1327 element = dropdownEl.find('table');1328 }1329 beforeEach(function() {1330 $rootScope.date = new Date('2010-09-30T10:00:00.000Z');1331 $rootScope.ngModelOptions = { timezone: '+600' };1332 $rootScope.isopen = true;1333 var wrapper = $compile('<div><input ng-model="date" uib-datepicker-popup="MM/dd/yyyy" ng-model-options="ngModelOptions" is-open="isopen"></div>')($rootScope);1334 $rootScope.$digest();1335 assignElements(wrapper);1336 });1337 it('interprets the date appropriately', function() {1338 expect(inputEl.val()).toBe('09/30/2010');1339 });1340 it('has `selected` only the correct day', function() {1341 expectSelectedElement(32);1342 });1343 it('updates the input when a day is clicked', function() {1344 clickOption(17);1345 expect(inputEl.val()).toBe('09/15/2010');1346 expect($rootScope.date).toEqual(new Date('2010-09-15T10:00:00.000Z'));1347 });1348 });1349 describe('timezone HTML5 date input', function() {1350 var inputEl, dropdownEl, $document, $sniffer, $timeout;1351 function assignElements(wrapElement) {1352 inputEl = wrapElement.find('input');1353 dropdownEl = wrapElement.find('ul');1354 element = dropdownEl.find('table');1355 }1356 beforeEach(function() {1357 $rootScope.date = new Date('2010-09-30T10:00:00.000Z');1358 $rootScope.ngModelOptions = { timezone: '+600' };1359 $rootScope.isopen = true;1360 var wrapper = $compile('<div><input type="date" ng-model="date" uib-datepicker-popup ng-model-options="ngModelOptions" is-open="isopen"></div>')($rootScope);1361 $rootScope.$digest();1362 assignElements(wrapper);1363 });1364 it('interprets the date appropriately', function() {1365 expect(inputEl.val()).toBe('2010-09-30');1366 });1367 it('has `selected` only the correct day', function() {1368 expectSelectedElement(32);1369 });1370 it('updates the input when a day is clicked', function() {1371 clickOption(17);1372 expect(inputEl.val()).toBe('2010-09-15');1373 expect($rootScope.date).toEqual(new Date('2010-09-15T10:00:00.000Z'));1374 });1375 });1376 });...
noSelecting.js
Source:noSelecting.js
1//Setting map on warious screens2//Landscape screens3if(screen.width > window.innerWidth)4{5 let correctWidth = window.innerWidth;6}7else8{9 let correctWidth = screen.width;10}11if(correctWidth > screen.height)12{13 if(screen.width < 1200)14 {15 document.getElementById('zoom-container').style.width = correctWidth - 60 + 'px';16 document.getElementById('zoom-container').style.height = (correctWidth - 60) / 2 + 'px';17 document.getElementById('wrap-zoom').style.width = correctWidth - 60 + 'px';18 document.getElementById('wrap-zoom').style.height = (correctWidth - 60) / 2 + 'px';19 document.getElementById('img-map').style.width = correctWidth - 60 + 'px';20 document.getElementById('img-map').style.height = correctWidth - 60 / 2 + 'px';21 }22}23// Portrait screens24else25{26 document.getElementById('img-map').src = 'https://uploads-ssl.webflow.com/60e6c9a6b5e67e31c5e15e06/60e6c9a6b5e67e5d84e15fd1_Map_more_area_vertical.png';27 if((correctWidth - 60) * 2 < screen.height)28 {29 document.getElementById('zoom-container').style.width = correctWidth - 60 + 'px';30 document.getElementById('zoom-container').style.height = (correctWidth - 60) * 2 + 'px';31 document.getElementById('wrap-zoom').style.width = correctWidth - 60 + 'px';32 document.getElementById('wrap-zoom').style.height = (correctWidth - 60) * 2 + 'px';33 document.getElementById('img-map').style.width = correctWidth - 60 + 'px';34 document.getElementById('img-map').style.height = (correctWidth - 60) * 2 + 'px';35 }36 else37 {38 document.getElementById('zoom-container').style.width = (screen.height / 2) - 60 + 'px';39 document.getElementById('zoom-container').style.height = (screen.height / 2 - 60) * 2 + 'px';40 document.getElementById('wrap-zoom').style.width = screen.height / 2 - 60 + 'px';41 document.getElementById('wrap-zoom').style.height = (screen.height / 2 - 60) * 2 + 'px';42 document.getElementById('img-map').style.width = screen.height / 2 - 60 + 'px';43 document.getElementById('img-map').style.height = (screen.height / 2 - 60) * 2 + 'px';44 }45}46// Zoom and pan47var zoomer = (function () {48 var wrapElement = null,49 x_cursor = 0,50 y_cursor = 0,51 x_wrapElement = 0,52 y_wrapElement = 0,53 orig_width = document.getElementById('wrap-zoom').getBoundingClientRect().width,54 orig_height = document.getElementById('wrap-zoom').getBoundingClientRect().height,55 current_top = 0,56 current_left = 0,57 zoom_factor = 2.0,58 mapImg = document.getElementById('img-map');59 var new_width = (orig_width * zoom_factor);60 var new_heigth = (orig_height * zoom_factor);61 wrapElement = document.getElementById('wrap-zoom');62 wrapElement.style.width = new_width + 'px';63 wrapElement.style.height = new_heigth + 'px';64 if(correctWidth > screen.height)65 {66 wrapElement.style.left = '-528px';67 wrapElement.style.top = '-414px';68 }69 else70 {71 wrapElement.style.left = '-141px';72 wrapElement.style.top = '-596px';73 }74 mapImg.style.width = new_width + 'px';75 mapImg.style.height = new_heigth + 'px';76 wrapElement = null;77 return {78 zoom: function (zoomincrement) {79 wrapElement = document.getElementById('wrap-zoom');80 zoom_factor = zoom_factor + zoomincrement;81 if (zoom_factor <= 1.0)82 {83 zoom_factor = 1.0;84 wrapElement.style.top = '0px';85 wrapElement.style.left = '0px';86 }87 if(zoom_factor > 5.0)88 {89 zoom_factor = 5.0;90 }91 new_width = (orig_width * zoom_factor);92 new_heigth = (orig_height * zoom_factor);93 if (current_left < (orig_width - new_width))94 {95 current_left = (orig_width - new_width);96 }97 if (current_top < (orig_height - new_heigth))98 {99 current_top = (orig_height - new_heigth);100 }101 wrapElement.style.left = current_left + 'px';102 wrapElement.style.top = current_top + 'px';103 wrapElement.style.width = new_width + 'px';104 wrapElement.style.height = new_heigth + 'px';105 mapImg.style.width = new_width + 'px';106 mapImg.style.height = new_heigth + 'px';107 wrapElement = null;108 },109 start_drag: function () {110 if (zoom_factor <= 1.0)111 {112 return;113 }114 wrapElement = this;115 x_wrapElement = window.event.clientX - document.getElementById('wrap-zoom').offsetLeft;116 y_wrapElement = window.event.clientY - document.getElementById('wrap-zoom').offsetTop;117 },118 startDragTouch: function () {119 if (zoom_factor <= 1.0)120 {121 return;122 }123 event.preventDefault();124 var touch = event.touches[0];125 wrapElement = this;126 x_wrapElement = touch.clientX - document.getElementById('wrap-zoom').offsetLeft;127 y_wrapElement = touch.clientY - document.getElementById('wrap-zoom').offsetTop;128 },129 stop_drag: function () {130 if (wrapElement !== null) {131 if (zoom_factor <= 1.0)132 {133 wrapElement.style.left = '0px';134 wrapElement.style.top = '0px';135 }136 }137 wrapElement = null;138 },139 stopDragTouch: function () {140 if (wrapElement !== null) {141 event.preventDefault();142 if (zoom_factor <= 1.0)143 {144 wrapElement.style.left = '0px';145 wrapElement.style.top = '0px';146 }147 }148 wrapElement = null;149 },150 while_drag: function () {151 if (wrapElement !== null)152 {153 var x_cursor = window.event.clientX;154 var y_cursor = window.event.clientY;155 var new_left = (x_cursor - x_wrapElement);156 if (new_left > 0)157 {158 new_left = 0;159 }160 if (new_left < (orig_width - wrapElement.offsetWidth))161 {162 new_left = (orig_width - wrapElement.offsetWidth);163 }164 var new_top = ( y_cursor - y_wrapElement);165 if (new_top > 0)166 {167 new_top = 0;168 }169 if (new_top < (orig_height - wrapElement.offsetHeight))170 {171 new_top = (orig_height - wrapElement.offsetHeight);172 }173 current_left = new_left;174 wrapElement.style.left = new_left + 'px';175 current_top = new_top;176 wrapElement.style.top = new_top + 'px';177 }178 },179 whileDragTouch: function () {180 event.preventDefault();181 if (wrapElement !== null)182 {183 var touch = event.touches[0];184 var x_cursor = touch.clientX;185 var y_cursor = touch.clientY;186 var new_left = (x_cursor - x_wrapElement);187 if (new_left > 0)188 {189 new_left = 0;190 }191 if (new_left < (orig_width - wrapElement.offsetWidth))192 {193 new_left = (orig_width - wrapElement.offsetWidth);194 }195 var new_top = ( y_cursor - y_wrapElement);196 if (new_top > 0)197 {198 new_top = 0;199 }200 if (new_top < (orig_height - wrapElement.offsetHeight))201 {202 new_top = (orig_height - wrapElement.offsetHeight);203 }204 current_left = new_left;205 wrapElement.style.left = new_left + 'px';206 current_top = new_top;207 wrapElement.style.top = new_top + 'px';208 }209 }210 };211} ());212document.getElementById('zoomout').addEventListener('click', function() {213 zoomer.zoom(-0.25);214});215document.getElementById('zoomin').addEventListener('click', function() {216 zoomer.zoom(0.25);217});218document.getElementById('wrap-zoom').addEventListener('mousedown', zoomer.start_drag);219document.getElementById('zoom-container').addEventListener('mousemove', zoomer.while_drag);220document.getElementById('zoom-container').addEventListener('mouseup', zoomer.stop_drag);221document.getElementById('zoom-container').addEventListener('mouseout', zoomer.stop_drag);222// Touch devices223document.getElementById('wrap-zoom').addEventListener('touchstart', zoomer.startDragTouch);224document.getElementById('zoom-container').addEventListener('touchmove', zoomer.whileDragTouch);225document.getElementById('zoom-container').addEventListener('touchend', zoomer.stopDragTouch);226// popWraps and pins227let objectInfo = document.getElementsByClassName('olimpiade__object-info');228const mapInfo = [];229for(let i = 0; i < objectInfo.length; i++)230{231 mapInfo.push([]);232 for(let j = 0; j < objectInfo[i].children.length; j++)233 {234 mapInfo[i].push(objectInfo[i].children[j].innerHTML);235 }236}237let selectedPin = '';238// Putting pins239let map = document.getElementById('wrap-zoom');240let pinHight = 44;241let pinWidthCorrection = 15;242function putPins ()243{244 let dropDown = document.getElementById('selectedobject');245 for(let i = 0; i < mapInfo.length; i++)246 {247 let pin = document.createElement('div');248 let pinImg = document.createElement('img');249 pinImg.src = 'https://uploads-ssl.webflow.com/60e6c9a6b5e67e31c5e15e06/60e6c9a6b5e67e2021e160a8_ff7f00%20.svg';250 pinImg.className = 'map__img-pin';251 pin.className = 'map__pin';252 pin.id = 'pin_' + i;253 pin.style.top = 'calc(' + mapInfo[i][3] + '% - ' + pinHight + 'px)';254 pin.style.left = 'calc(' + mapInfo[i][4] + '% - ' + pinWidthCorrection + 'px)';255 pin.append(pinImg);256 // Creating pin number257 let pinNum = document.createElement('div');258 pinNum.className = 'map__pin-num';259 pinNum.innerHTML = (i + 1);260 pin.append(pinNum);261 map.append(pin);262 }263}264function createPopup(id)265{266 let mapModal = document.createElement('div');267 mapModal.className = 'modal';268 mapModal.style.display = 'block';269 let mapModalContent = document.createElement('div');270 mapModalContent.className = 'modal__content';271 mapModal.append(mapModalContent);272 let popWrap = document.createElement('div');273 popWrap.className = 'map__wrap-popup';274 let popHeading = document.createElement('h3');275 popHeading.className = 'olimpiade__heading_strech';276 popHeading.innerHTML = mapInfo[id][0];277 popWrap.append(popHeading);278 let popImg = document.createElement('img');279 popImg.className = 'map__img-popup';280 popImg.src = mapInfo[id][2];281 let popImgWrap = document.createElement('div');282 popImgWrap.className = 'map__wrap-img mb_20';283 popImgWrap.append(popImg);284 popWrap.append(popImgWrap);285 let popInfo = document.createElement('div');286 popInfo.className = 'olimpiade_paragraph txt_align_justify';287 popInfo.innerHTML = mapInfo[id][1];288 popWrap.append(popInfo);289 // Close btn290 let popClose = document.createElement('div');291 popClose.className = 'wrap-btn-close popup__wrap-btn-close';292 let popCloseBarA = document.createElement('div');293 popCloseBarA.className = 'wrap-btn-close__bar wrap-btn-close__bar_top';294 popClose.append(popCloseBarA);295 let popCloseBarB = document.createElement('div');296 popCloseBarB.className = 'wrap-btn-close__bar wrap-btn-close__bar_bottom';297 popClose.append(popCloseBarB);298 mapModalContent.append(popClose);299 // Add to body300 mapModalContent.append(popWrap);301 document.body.append(mapModal);302 // Closeing popup303 mapModal.addEventListener('click', (e) =>304 {305 document.body.removeChild(mapModal);306 });307}308putPins();309let pins = document.getElementsByClassName('map__pin');310for(let i = 0; i < pins.length; i++)311{312 pins[i].addEventListener('click', (e) =>313 {314 createPopup(e.target.parentNode.id.split('_')[1]);315 });316 pins[i].addEventListener('touchstart', (e) =>317 {318 createPopup(e.target.parentNode.id.split('_')[1]);319 });...
DragItemUtil.js
Source:DragItemUtil.js
1import DOM from '@/scripts/DOM.js'2// ãã©ãã°ï¼ããããã®ã©ã¤ãã©ãªã¯ã©ã¹3export default class DragItemUtil {4 constructor (options) {5 // ãã©ãã°å¯¾è±¡ã®DOMè¦ç´ (å®éã«ã¯cloneããè¦ç´ ã表示ã«ä½¿ã)6 const target = options.targetElement7 this.dragTargetElement = target.cloneNode(true)8 const wrap = document.createElement('div')9 wrap.appendChild(this.dragTargetElement)10 this.wrapElement = wrap11 this.wrapElement.style.position = 'absolute'12 this.wrapElement.style.top = '0px'13 this.wrapElement.style.left = '0px'14 this.wrapElement.style.pointerEvents = 'none'15 this.wrapElement.style.boxSizing = 'border-box'16 this.wrapElement.style.transition = 'opacity .2s'17 this.wrapElement.style.zIndex = '1000'18 this.wrapElement.style.cursor = 'grabbing'19 this.wrapElement.opacity = 020 this.dragStartEvent = options.dragStartEvent21 // ãã©ãã°ã¤ã¡ã¼ã¸ãå
å«ããDOMè¦ç´ 22 this.parentElement = options.parentElement23 24 // ãã©ãã°å¯¾è±¡ã®è¦ç´ ã®ä½ç½®ãè¨é²25 this.srcPosition = DOM.position(target, this.parentElement)26 this.startPosition = {x: options.dragStartEvent.pageX, y: options.dragStartEvent.pageY}27 28 if (options.draggingClass) {29 // ã¯ã©ã¹ã®æå®ãããã°ããã©ãã°å¯¾è±¡ã®è¦ç´ ã«ã¯ã©ã¹ãè¨å®ãã30 setTimeout(()=>{31 this.dragTargetElement.classList.add(options.draggingClass)32 },0 )33 }34 // ãã©ãã°ã¤ã¡ã¼ã¸ã®ãµã¤ãºãä½ç½®ã調æ´ãã¦åæåãã35 this.dragTargetElement.style.width = target.offsetWidth + 'px'36 this.dragTargetElement.style.height = target.offsetHeight + 'px'37 this.parentElement.appendChild(this.wrapElement)38 this.dragover(this.dragStartEvent)39 // ãã©ãã°æã®è¡¨ç¤ºå¶å¾¡ã®ããã®ããã¼ç»å40 const dummy = document.createElement('div')41 dummy.style.position = 'absolute'42 dummy.style.opacity = '0'43 dummy.style.width = '1px'44 dummy.style.height = '1px'45 dummy.style.pointerEvents = 'none'46 this.parentElement.appendChild(dummy)47 this.dragStartEvent.dataTransfer.setDragImage(dummy, 0, 0)48 this.dragoverFunc = ev => {49 this.dragover(ev)50 }51 document.addEventListener('dragover', this.dragoverFunc)52 }53 // ãã©ãã°ãªã¼ãã¼å¦ç54 dragover (ev) {55 const dx = ev.pageX - this.startPosition.x56 const dy = ev.pageY - this.startPosition.y57 const x = this.srcPosition.x + dx58 const y = this.srcPosition.y + dy59 this.wrapElement.style.transform = `translate(${x}px, ${y}px)`60 }61 // ç ´æ£æã®å¦ç62 destroy () {63 this.wrapElement.style.opacity = 164 this.wrapElement.style.transition = 'opacity .2s'65 this.wrapElement.style.opacity = 066 setTimeout(()=>{67 this.wrapElement.remove()68 },200)69 document.removeEventListener('dragover', this.dragoverFunc)70 }...
Using AI Code Generation
1import { Selector } from 'testcafe';2test('My first test', async t => {3 .typeText('#developer-name', 'John Smith')4 .click('#submit-button');5 const articleHeader = await Selector('.result-content').find('h1');6 let headerText = await articleHeader.innerText;7});
Using AI Code Generation
1import { Selector } from 'testcafe';2test('My test', async t => {3 const button = Selector('#submit-button');4 await t.click(button);5});6import { Selector } from 'testcafe';7test('My test', async t => {8 const button = Selector('#submit-button');9 await t.click(button);10});11import { Selector } from 'testcafe';12test('My test', async t => {13 const button = Selector('#submit-button');14 await t.click(button);15});16import { Selector } from 'testcafe';17test('My test', async t => {18 const button = Selector('#submit-button');19 await t.click(button);20});21import { Selector } from 'testcafe';22test('My test', async t => {23 const button = Selector('#submit-button');24 await t.click(button);25});26import { Selector } from 'testcafe';27test('My test', async t => {28 const button = Selector('#submit-button');29 await t.click(button);30});31import { Selector } from 'testcafe';32test('My test', async t => {33 const button = Selector('#submit-button');34 await t.click(button);35});36import { Selector } from 'testcafe';
Using AI Code Generation
1import { Selector, t } from 'testcafe';2test('My first test', async t => {3 const wrapElement = Selector('span').withText('Wrap element');4 await t.click(wrapElement);5});6import { Selector, t } from 'testcafe';7test('My first test', async t => {8 const wrapElement = Selector('span').withText('Wrap element');9 await t.click(wrapElement);10});
Using AI Code Generation
1import { Selector } from 'testcafe';2test('My first test', async t => {3 const developerName = Selector('#developer-name');4 .typeText(developerName, 'Peter Parker')5 .expect(developerName.value).eql('Peter Parker');6});7const getIframe = Selector('iframe').withAttribute('id', 'frame');8const iframe = await getIframe();9const body = Selector('body').with({ boundTestRun: t, visibilityCheck: true }).wrapElement(iframe);10 .click(body.find('a').withText('My Account'))11 .expect(body.find('h1').withText('My Account').exists).ok()12 .expect(body.find('div').withText('You are not logged in.').exists).ok()13 .expect(body.find('div').withText('Please login to view your account information.').exists).ok();
Using AI Code Generation
1import { Selector } from 'testcafe';2test('My Test', async t => {3 const element = Selector('.feature-list').find('li').withText('Support for testing on remote devices');4 await t.expect(element.visible).ok();5 await t.click(element);6});7import { Selector } from 'testcafe';8test('My Test', async t => {9 const element = Selector('.feature-list').find('li').withText('Support for testing on remote devices');10 await t.expect(element.visible).ok();11 await t.click(element);12});13import { Selector } from 'testcafe';14test('My Test', async t => {15 const element = Selector('.feature-list').find('li').withText('Support for testing on remote devices');16 await t.expect(element.visible).ok();17 await t.click(element);18});19import { Selector } from 'testcafe';20test('My Test', async t => {21 const element = Selector('.feature-list').find('li').withText('Support for testing on remote devices');22 await t.expect(element.visible).ok();23 await t.click(element);24});25import { Selector } from 'testcafe';26test('My Test', async t => {27 const element = Selector('.feature-list').find('li').withText('Support for testing on remote devices');28 await t.expect(element.visible).ok();29 await t.click(element);30});31import { Selector } from 'testcafe';32test('My Test', async t => {
Using AI Code Generation
1import { Selector } from 'testcafe';2const element = Selector('div').withText('Hello, world!');3test('My test', async t => {4 .click(element)5 .expect(element.value).eql('Hello, world!');6});7import { Selector } from 'testcafe';8const element = Selector('div').withText('Hello, world!');9test('My test', async t => {10 .click(element)11 .expect(element.value).eql('Hello, world!');12});13import { Selector } from 'testcafe';14const element = Selector('div').withText('Hello, world!');15test('My test', async t => {16 .click(element)17 .expect(element.value).eql('Hello, world!');18});19import { Selector } from 'testcafe';20const element = Selector('div').withText('Hello, world!');21test('My test', async t => {22 .click(element)23 .expect(element.value).eql('Hello, world!');24});25import { Selector } from 'testcafe';26const element = Selector('div').withText('Hello, world!');27test('My test', async t => {28 .click(element)29 .expect(element.value).eql('Hello, world!');30});31import { Selector } from 'testcafe';
Using AI Code Generation
1import {Selector} from 'testcafe';2fixture('My Fixture')3test('My Test', async t => {4 const selector = Selector('.column.col-2').with({ boundTestRun: t });5 const wrap = selector.wrapElement('div', { id: 'wrap' });6 await t.expect(wrap.getAttribute('id')).eql('wrap');7});8import {Selector} from 'testcafe';9fixture('My Fixture')10test('My Test', async t => {11 const selector = Selector('.column.col-2').with({ boundTestRun: t });12 const wrap = selector.wrapElement('div', { id: 'wrap' });13 await t.expect(wrap.getAttribute('id')).eql('wrap');14});15import {Selector} from 'testcafe';16fixture('My Fixture')17test('My Test', async t => {18 const selector = Selector('.column.col-2').with({ boundTestRun: t });19 const wrap = selector.wrapElement('div', { id: 'wrap' });20 await t.expect(wrap.getAttribute('id')).eql('wrap');21});22import {Selector} from 'testcafe';23fixture('My Fixture')24test('My Test', async t => {25 const selector = Selector('.column.col-2').with({ boundTestRun: t });26 const wrap = selector.wrapElement('div', { id: 'wrap' });27 await t.expect(wrap.getAttribute('id')).eql('wrap');28});29import {Selector} from 'testcafe';30fixture('My Fixture')31test('My Test', async t => {32 const selector = Selector('.column.col-
Using AI Code Generation
1import { ClientFunction } from 'testcafe';2import { Selector } from 'testcafe';3const wrapElement = ClientFunction((selector) => {4 return selector().wrap('<div id="test">');5});6const selector = Selector('#test');7test('My test', async t => {8 await wrapElement(selector);9 await t.expect(selector.exists).ok();10});11import { ClientFunction } from 'testcafe';12import { Selector } from 'testcafe';13const wrapElement = ClientFunction((selector) => {14 return selector().wrap('<div id="test">');15});16const selector = Selector('#test');17test('My test', async t => {18 await wrapElement(selector);19 await t.expect(selector.exists).ok();20});21const wrapElement = ClientFunction((selector) => {22 const element = document.createElement('div');23 element.id = 'test';24 selector().wrap(element);25});
Using AI Code Generation
1import { Selector } from 'testcafe';2const wrapElement = Selector((el, text) => {3 return el.querySelector(`[data-testid="${text}"]`);4});5export { wrapElement };6import { wrapElement } from './test.js';7test('My test', async t => {8 .click(wrapElement('#main-form', 'submit-button'));9});10import { wrapElement } from './test.js';11test('My test', async t => {12 .click(wrapElement('#main-form', 'submit-button'));13});14import { wrapElement } from './test.js';15test('My test', async t => {16 .click(wrapElement('#main-form', 'submit-button'));17});18import { wrapElement } from './test.js';19test('My test', async t => {20 .click(wrapElement('#main-form', 'submit-button'));21});22import { wrapElement } from './test.js';23test('My test', async t => {24 .click(wrapElement('#main-form', 'submit-button'));25});26import { wrapElement } from './test.js';27test('My test',
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run Testcafe automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
