How to use toHaveCSS method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Stylus.browser.js

Source: Stylus.browser.js Github

copy
1/* global $ */
2describe('alchemy.lib.Stylus', function () {
3    'use strict';
4
5    var Stylus = require('./../../lib/Stylus');
6
7    beforeEach(function () {
8        setFixtures([
9            '<div id="foo">FOO',
10                '<div id="bar" class="bar">BAR',
11                    '<div id="baz" class="baz">BAZ</div>',
12                '</div>',
13            '</div>',
14        ].join());
15
16        this.testSubject = Stylus.brew();
17    });
18
19    afterEach(function () {
20        this.testSubject.dispose();
21        this.testSubject = null;
22    });
23
24    describe('dispose', function () {
25        it('clears the stored data', function () {
26            // prepare
27
28            // execute
29            this.testSubject.dispose();
30
31            // verify
32            expect(this.testSubject.sheet).toBeFalsy();
33            expect(this.testSubject.rules).toBeFalsy();
34        });
35
36        it('removes css rules when beeing disposed', function () {
37            // prepare
38            this.testSubject.setRules({
39                '#foo': {'color': '#FF0000'},
40                '#bar': {'color': '#00FF00'},
41                '#baz': {'color': '#0000FF'},
42            });
43            expect($('div#foo')).toHaveCss({color: 'rgb(255, 0, 0)'});
44            expect($('div#bar')).toHaveCss({color: 'rgb(0, 255, 0)'});
45            expect($('div#baz')).toHaveCss({color: 'rgb(0, 0, 255)'});
46
47            // execute
48            this.testSubject.dispose();
49
50            // verify
51            expect($('div#foo')).not.toHaveCss({color: 'rgb(255, 0, 0)'});
52            expect($('div#bar')).not.toHaveCss({color: 'rgb(0, 255, 0)'});
53            expect($('div#baz')).not.toHaveCss({color: 'rgb(0, 0, 255)'});
54        });
55    });
56
57    describe('setRules', function () {
58        it('allows to render css', function () {
59            // prepare
60
61            // execute
62            this.testSubject.setRules({
63                '#foo': {'color': '#FF0000'},
64                '#bar': {'color': '#00FF00'},
65                '#baz': {'color': '#0000FF'},
66            });
67
68            // verify
69            expect($('div#foo')).toHaveCss({color: 'rgb(255, 0, 0)'});
70            expect($('div#bar')).toHaveCss({color: 'rgb(0, 255, 0)'});
71            expect($('div#baz')).toHaveCss({color: 'rgb(0, 0, 255)'});
72        });
73
74        it('allows to override css rules', function () {
75            // prepare
76            this.testSubject.setRules({ '#foo': { 'color': '#00FF00', }, });
77
78            // execute
79            this.testSubject.setRules({ '#foo': {'color': '#FF00FF'}, });
80
81            // verify
82            expect($('div#foo')).toHaveCss({ 'color': 'rgb(255, 0, 255)', });
83        });
84
85        it('supports nested css rules', function () {
86            // prepare
87
88            // execute
89            this.testSubject.setRules({
90                '#foo': {
91                    'color': '#FF0000',
92
93                    '#bar': {
94                        'color': '#00FF00',
95
96                        '#baz': {
97                            'color': '#0000FF',
98                        },
99                    },
100                },
101            });
102
103            // verify
104            expect($('div#foo')).toHaveCss({color: 'rgb(255, 0, 0)'});
105            expect($('div#bar')).toHaveCss({color: 'rgb(0, 255, 0)'});
106            expect($('div#baz')).toHaveCss({color: 'rgb(0, 0, 255)'});
107        });
108
109        it('supports "&" in nested rules', function () {
110            // prepare
111
112            // execute
113            this.testSubject.setRules({
114                'div': {
115                    'color': '#FF0000',
116
117                    '&#bar': {
118                        'color': '#00FF00',
119                    },
120                },
121            });
122
123            // verify
124            expect($('div#foo')).toHaveCss({color: 'rgb(255, 0, 0)'});
125            expect($('div#bar')).toHaveCss({color: 'rgb(0, 255, 0)'});
126            expect($('div#baz')).toHaveCss({color: 'rgb(255, 0, 0)'});
127        });
128
129        it('supports "," in nested rules', function () {
130            // prepare
131
132            // execute
133            this.testSubject.setRules({
134                '#foo': {
135                    'color': '#FF0000',
136
137                    '#bar, #baz': {
138                        'color': '#00FF00',
139                    },
140                },
141            });
142
143            // verify
144            expect($('div#foo')).toHaveCss({color: 'rgb(255, 0, 0)'});
145            expect($('div#bar')).toHaveCss({color: 'rgb(0, 255, 0)'});
146            expect($('div#baz')).toHaveCss({color: 'rgb(0, 255, 0)'});
147        });
148    });
149});
150
Full Screen

jquery-impromptu_spec.js

Source: jquery-impromptu_spec.js Github

copy
1describe('jquery-impromptu', function() {
2
3	// ====================================================================================
4	// ====================================================================================
5	describe('base structure', function(){
6
7		// ====================================================================================
8		describe('basic initialization', function() {
9
10			beforeEach(function() {			
11				$.fx.off = true; // for our testing lets turn off fx
12			});
13
14			afterEach(function() {
15				$.prompt.close();
16			});
17
18			it('should be defined', function() {
19				
20				expect($.prompt).not.toBeUndefined();
21			});
22
23			it('should generate markup', function() {
24				var expectedTitle = 'This is a title',
25					expectedText = 'This is a test';
26
27				$.prompt(expectedText, { title: expectedTitle });
28
29				expect($('.jqibox')).toExist();
30				expect($('.jqifade')).toExist();
31				expect($('.jqi')).toExist();
32				expect($('.jqi .jqititle')).toHaveText(expectedTitle);
33				expect($('.jqi .jqimessage')).toHaveText(expectedText);
34			});
35
36		});
37
38		// ====================================================================================
39		describe('instance initialization', function() {
40			var imp = new Impromptu();
41
42			beforeEach(function() {			
43				$.fx.off = true; // for our testing lets turn off fx
44			});
45
46			afterEach(function() {
47				imp.close();
48			});
49
50			it('should be defined', function() {
51				
52				expect(imp).not.toBeUndefined();
53			});
54
55			it('should generate markup', function() {
56				var expectedTitle = 'This is a title',
57					expectedText = 'This is a test';
58
59				imp.open(expectedText, { title: expectedTitle });
60
61				expect($('.jqibox')).toExist();
62				expect($('.jqifade')).toExist();
63				expect($('.jqi')).toExist();
64				expect($('.jqi .jqititle')).toHaveText(expectedTitle);
65				expect($('.jqi .jqimessage')).toHaveText(expectedText);
66			});
67
68		});
69
70
71		// ====================================================================================
72		describe('button creation', function() {
73
74			beforeEach(function() {			
75				$.fx.off = true; // for our testing lets turn off fx
76			});
77
78			afterEach(function() {
79				$.prompt.close();
80			});
81
82
83			it('should generate buttons from hash', function() {
84
85				$.prompt('This is a test', {
86					buttons: { Ok:true, Cancel:false }
87				});
88				var okBtn = $('button[name="jqi_state0_buttonOk"]'),
89					cancelBtn = $('button[name="jqi_state0_buttonCancel"]');
90
91				expect($('.jqibutton')).toHaveLength(2);
92
93				expect(okBtn).toExist();
94				expect(cancelBtn).toExist();
95
96				expect(okBtn).toHaveText('Ok');
97				expect(cancelBtn).toHaveText('Cancel');
98
99				expect(okBtn).toHaveValue('true');
100				expect(cancelBtn).toHaveValue('false');
101			});
102
103			it('should generate buttons from array', function() {
104
105				$.prompt('This is a test', {
106					buttons: [
107						{ title: 'Ok', value: true },
108						{ title: 'Cancel', value: false }
109					]
110				});
111				var okBtn = $('button[name="jqi_state0_buttonOk"]'),
112					cancelBtn = $('button[name="jqi_state0_buttonCancel"]');
113
114				expect($('.jqibutton')).toHaveLength(2);
115
116				expect(okBtn).toExist();
117				expect(cancelBtn).toExist();
118
119				expect(okBtn).toHaveText('Ok');
120				expect(cancelBtn).toHaveText('Cancel');
121
122				expect(okBtn.val()).toBe('true');
123				expect(cancelBtn.val()).toBe('false');
124			});
125
126			it('should add classes to buttons', function() {
127
128				$.prompt('This is a test', {
129					buttons: [
130						{ title: 'Ok', value: true, classes: ['ok1','ok2'] },
131						{ title: 'Cancel', value: false, classes: 'cancel1 cancel2' }
132					]
133				});
134				var okBtn = $('button[name="jqi_state0_buttonOk"]'),
135					cancelBtn = $('button[name="jqi_state0_buttonCancel"]');
136
137				expect(okBtn).toHaveClass('ok1');
138				expect(okBtn).toHaveClass('ok2');
139
140				expect(cancelBtn).toHaveClass('cancel1');
141				expect(cancelBtn).toHaveClass('cancel2');
142			});
143
144			it('should add classes to buttons from classes obj', function() {
145
146				$.prompt('This is a test', {
147					buttons: [
148						{ title: 'Ok', value: true, classes: ['ok1','ok2'] },
149						{ title: 'Cancel', value: false, classes: 'cancel1 cancel2' }
150					],
151					classes: { button: 'testclass' }
152				});
153				var okBtn = $('button[name="jqi_state0_buttonOk"]'),
154					cancelBtn = $('button[name="jqi_state0_buttonCancel"]');
155
156				expect(okBtn).toHaveClass('testclass');
157				expect(cancelBtn).toHaveClass('testclass');
158			});
159
160			it('should default correct button', function() {
161
162				$.prompt('This is a test', {
163					buttons: [
164						{ title: 'Ok', value: 1 },
165						{ title: 'Cancel', value: 2 },
166						{ title: 'Another', value: 3 }
167					],
168					focus: 1
169				});
170				var okBtn = $('button[name="jqi_state0_buttonOk"]'),
171					cancelBtn = $('button[name="jqi_state0_buttonCancel"]'),
172					anotherBtn = $('button[name="jqi_state0_buttonAnother"]');
173
174				expect(okBtn).not.toHaveClass('jqidefaultbutton');
175				expect(cancelBtn).toHaveClass('jqidefaultbutton');
176				expect(anotherBtn).not.toHaveClass('jqidefaultbutton');
177			});
178
179			it('should default correct button when focus on an input', function() {
180
181				$.prompt('This is a test <input type="text" id="testInput" />', {
182					buttons: [
183						{ title: 'Ok', value: 1 },
184						{ title: 'Cancel', value: 2 },
185						{ title: 'Another', value: 3 }
186					],
187					focus: '#testInput',
188					defaultButton: 1
189				});
190				var okBtn = $('button[name="jqi_state0_buttonOk"]'),
191					cancelBtn = $('button[name="jqi_state0_buttonCancel"]'),
192					anotherBtn = $('button[name="jqi_state0_buttonAnother"]');
193
194				expect(okBtn).not.toHaveClass('jqidefaultbutton');
195				expect(cancelBtn).toHaveClass('jqidefaultbutton');
196				expect(anotherBtn).not.toHaveClass('jqidefaultbutton');
197			});
198
199		});
200
201		// ====================================================================================
202		describe('state creation', function() {
203
204			beforeEach(function() {			
205				$.fx.off = true; // for our testing lets turn off fx
206			});
207
208			afterEach(function() {
209				$.prompt.close();
210			});
211
212			it('should create a single state from string', function() {
213
214				$.prompt('This is a test');
215				
216				expect($('.jqistate')).toExist();
217			});
218
219			it('should create states from hash', function() {
220				var states = {
221					s1: { html: 'state 1' },
222					s2: { html: 'state 2' },
223					s3: { html: 'state 3' }
224				};
225
226				$.prompt(states);
227				
228				expect($('.jqistate')).toHaveLength(3);
229
230				expect($('.jqistate[data-jqi-name="s1"] .jqimessage')).toHaveText(states.s1.html);
231				expect($('.jqistate[data-jqi-name="s2"] .jqimessage')).toHaveText(states.s2.html);
232				expect($('.jqistate[data-jqi-name="s3"] .jqimessage')).toHaveText(states.s3.html);
233			});
234
235			it('should create states from array', function() {
236				var states = [
237					{ html: 'state 1' },
238					{ html: 'state 2' },
239					{ html: 'state 3' }
240				];
241
242				$.prompt(states);
243				
244				expect($('.jqistate')).toHaveLength(3);
245
246				expect($('.jqistate[data-jqi-name="0"] .jqimessage')).toHaveText(states[0].html);
247				expect($('.jqistate[data-jqi-name="1"] .jqimessage')).toHaveText(states[1].html);
248				expect($('.jqistate[data-jqi-name="2"] .jqimessage')).toHaveText(states[2].html);
249			});
250
251			it('should show the first state automatically', function() {
252
253				// we can't reliably determine which entry is the first with a hash, js doesn't preserve order
254				var states = [
255					{ html: 'state 1' },
256					{ html: 'state 2' },
257					{ html: 'state 3' }
258				];
259
260				$.prompt(states);
261
262				expect($('.jqistate[data-jqi-name="0"]')).toHaveCss({display:'block'});
263				expect($('.jqistate[data-jqi-name="1"]')).toHaveCss({display:'none'});
264				expect($('.jqistate[data-jqi-name="2"]')).toHaveCss({display:'none'});
265			});
266
267			it('should name states properly when name specified', function() {
268				var states = [
269					{ name: 's1', html: 'state 1' },
270					{ name: 's2', html: 'state 2' },
271					{ name: 's3', html: 'state 3' }
272				];
273
274				$.prompt(states);
275				
276				expect($('.jqistate[data-jqi-name="s1"]')).toExist();
277				expect($('.jqistate[data-jqi-name="s2"]')).toExist();
278				expect($('.jqistate[data-jqi-name="s3"]')).toExist();
279			});
280		});
281
282	}); // base structure
283
284
285	// ====================================================================================
286	// ====================================================================================
287	describe('api methods', function() {
288		var states = [
289				{ name: 's1', html: 'state 1' },
290				{ name: 's2', html: 'state 2' },
291				{ name: 's3', html: 'state 3' }
292			];
293
294		beforeEach(function() {			
295			$.fx.off = true; // for our testing lets turn off fx
296		});
297
298		afterEach(function() {
299			$.prompt.close();
300		});
301
302		describe('static methods', function() {
303			// ====================================================================================
304			describe('$.prompt.setDefaults()', function() {
305				it('should change the default values', function() {
306					var origDefs = $.extend(true, {}, Impromptu.defaults),
307						overrides = { prefix: 'myjqi', classes: { box: 'boxclass' } };
308					
309					$.prompt.setDefaults(overrides);
310
311					expect(Impromptu.defaults.prefix).toBe(overrides.prefix);
312					expect(Impromptu.defaults.classes.box).toBe(overrides.classes.box);
313					expect(Impromptu.defaults.speed).toBe(origDefs.speed);
314
315					Impromptu.defaults = origDefs;
316				});
317			});
318			
319			// ====================================================================================
320			describe('$.prompt.setStateDefaults()', function() {
321				it('should change the default state values', function() {
322					var origDefs = $.extend(true, {}, Impromptu.defaults),
323						overrides = { title: 'My Title', position: { width: 123 } };
324					
325					$.prompt.setStateDefaults(overrides);
326
327					expect(Impromptu.defaults.state.title).toBe(overrides.title);
328					expect(Impromptu.defaults.state.position.width).toBe(overrides.position.width);
329					expect(Impromptu.defaults.state.focus).toBe(origDefs.state.focus);
330
331					Impromptu.defaults = origDefs;
332				});
333			});
334		});
335
336		describe('instance methods', function() {
337			// ====================================================================================
338			describe('$.prompt.getBox()', function() {
339				it('should return the box jquery object', function() {
340					
341					$.prompt('This is a test');
342
343					var actualResult = $.prompt.getBox(),
344						expectedResult = $('.jqibox');
345
346					expect(actualResult[0]).toBe(expectedResult[0]);
347				});
348			});
349
350			// ====================================================================================
351			describe('$.prompt.getPrompt()', function() {
352				it('should return the prompt jquery object', function() {
353					
354					$.prompt('This is a test');
355
356					var actualResult = $.prompt.getPrompt(),
357						expectedResult = $('.jqi');
358
359					expect(actualResult[0]).toBe(expectedResult[0]);
360				});
361			});
362
363			// ====================================================================================
364			describe('$.prompt.getState()', function() {
365				it('should return the state jquery object', function() {
366
367					$.prompt(states);
368					
369					var actualResult = $.prompt.getState('s2'),
370						expectedResult = $('.jqistate[data-jqi-name="s2"]');
371
372					expect(actualResult[0]).toBe(expectedResult[0]);
373				});
374			});
375
376			// ====================================================================================
377			describe('$.prompt.getCurrentState()', function() {
378				it('should return the current state jquery object', function() {
379
380					$.prompt(states);
381					
382					var actualResult = $.prompt.getCurrentState(),
383						expectedResult = $('.jqistate[data-jqi-name="s1"]');
384
385					expect(actualResult[0]).toBe(expectedResult[0]);
386				});
387
388				it('should return the current state jquery object after a state change', function() {
389
390					$.prompt(states);
391					$.prompt.goToState('s2');
392					var actualResult = $.prompt.getCurrentState(),
393						expectedResult = $('.jqistate[data-jqi-name="s2"]');
394
395					expect(actualResult[0]).toBe(expectedResult[0]);
396				});
397			});
398
399			// ====================================================================================
400			describe('$.prompt.getCurrentStateName()', function() {
401				it('should return the current state name', function() {
402
403					$.prompt(states);
404					
405					var actualResult = $.prompt.getCurrentStateName(),
406						expectedResult = 's1';
407
408					expect(actualResult).toBe(expectedResult);
409				});
410
411				it('should return the current state name after a state change', function() {
412
413					$.prompt(states);
414					$.prompt.goToState('s2');
415					var actualResult = $.prompt.getCurrentStateName(),
416						expectedResult = 's2';
417
418					expect(actualResult).toBe(expectedResult);
419				});
420			});
421
422			// ====================================================================================
423			describe('$.prompt.goToState()', function() {
424				it('should make the requested state visible', function() {
425
426					$.prompt(states);
427					
428					$.prompt.goToState('s3');
429
430					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'none'});
431					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'none'});
432					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'block'});
433				});
434
435				it('should do nothing if the state is not available', function() {
436
437					$.prompt(states);
438					
439					$.prompt.goToState('s4');
440
441					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'block'});
442					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'none'});
443					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'none'});
444				});
445
446				it('should handle substate option', function() {
447
448					$.prompt(states);
449					
450					$.prompt.goToState('s2',true);
451
452					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'block'});
453					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'block'});
454					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'none'});
455
456					expect($('.jqistate[data-jqi-name="s2"]')).toHaveClass('jqisubstate');
457				});
458			});
459
460			// ====================================================================================
461			describe('$.prompt.nextState()', function() {
462				it('should make the next state visible', function() {
463					
464					$.prompt(states);
465					
466					$.prompt.nextState();
467
468					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'none'});
469					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'block'});
470					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'none'});
471				});
472
473				it('should do nothing if the state is not available', function() {
474
475					$.prompt(states);
476					
477					$.prompt.goToState('s3');
478					$.prompt.nextState();
479
480					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'none'});
481					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'none'});
482					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'block'});
483				});
484			});
485
486			// ====================================================================================
487			describe('$.prompt.prevState()', function() {
488				it('should make the previous state visible', function() {
489					
490					$.prompt(states);
491					
492					$.prompt.goToState('s3');
493					$.prompt.prevState();
494
495					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'none'});
496					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'block'});
497					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'none'});
498				});
499
500				it('should do nothing if the state is not available', function() {
501
502					$.prompt(states);
503					
504					$.prompt.prevState();
505
506					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'block'});
507					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'none'});
508					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'none'});
509				});
510			});
511
512			// ====================================================================================
513			describe('$.prompt.addState()', function() {
514				it('should add a new state as the last state', function() {
515					var newState = {
516						name: 's4',
517						title: 's4',
518						html: 'testing s4',
519						buttons: { Ok:true,Cancel:false}
520					};
521
522					$.prompt(states);
523					
524					var $stateobj = $.prompt.addState(newState.name, newState);
525
526					// element created?
527					expect($stateobj).toExist();
528
529					// element in the right place?
530					expect($stateobj.prev().data('jqi-name')).toBe('s3');
531
532					// element visibility correct?
533					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'block'});
534					expect($stateobj).toHaveCss({display:'none'});
535
536					// content generated ok?
537					expect($stateobj.find('.jqimessage')).toHaveText(newState.html);
538					expect($stateobj.find('.jqititle')).toHaveText(newState.title);
539					expect($stateobj.find('.jqibutton')).toHaveLength(2);
540				});
541
542				it('should add a new state after specified state', function() {
543					var newState = {
544						name: 's4',
545						title: 's4',
546						html: 'testing s4',
547						buttons: { Ok:true,Cancel:false}
548					},
549					afterState = 's2';
550
551					$.prompt(states);
552					
553					var $stateobj = $.prompt.addState(newState.name, newState, afterState);
554
555					expect($stateobj.prev().data('jqi-name')).toBe(afterState);
556				});
557			});
558
559			// ====================================================================================
560			describe('$.prompt.removeState()', function() {
561				it('should remove the specified state', function() {
562					
563					$.prompt(states);
564					
565					$.prompt.removeState('s2');
566
567					expect($('.jqistate[data-jqi-name="s2"]')).not.toExist();
568				});
569				
570				it('should display requested state', function() {
571
572					$.prompt(states);
573					
574					$.prompt.removeState('s1','s3');
575
576					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'none'});
577					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'block'});
578				});
579				
580				it('should display next state', function() {
581
582					$.prompt(states);
583					
584					$.prompt.removeState('s1');
585
586					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'block'});
587					expect($('.jqistate[data-jqi-name="s3"]')).toHaveCss({display:'none'});
588				});
589				
590				it('should display previous state', function() {
591
592					$.prompt(states);
593					$.prompt.goToState('s3');
594					$.prompt.removeState('s3');
595
596					expect($('.jqistate[data-jqi-name="s1"]')).toHaveCss({display:'none'});
597					expect($('.jqistate[data-jqi-name="s2"]')).toHaveCss({display:'block'});
598				});
599				
600			});
601
602			// ====================================================================================
603			describe('$.prompt.disableStateButtons()', function() {
604				it('should disable the buttons in a state', function() {
605					
606					$.prompt(states);
607					
608					$.prompt.disableStateButtons();
609
610					expect($('.jqistate[data-jqi-name="s1"] button[disabled]').length).toBe(1);
611					expect($('.jqistate[data-jqi-name="s2"] button[disabled]').length).toBe(0);
612				});
613
614				it('should disable the buttons in a specific state', function() {
615					
616					$.prompt(states);
617					
618					$.prompt.disableStateButtons('s2');
619
620					expect($('.jqistate[data-jqi-name="s1"] button[disabled]').length).toBe(0);
621					expect($('.jqistate[data-jqi-name="s2"] button[disabled]').length).toBe(1);
622				});
623			});
624
625			// ====================================================================================
626			describe('$.prompt.enbleStateButtons()', function() {
627				it('should enable the buttons in a state', function() {
628					
629					$.prompt(states);
630					
631					$.prompt.disableStateButtons('s1');
632					$.prompt.disableStateButtons('s2');
633					$.prompt.enableStateButtons();
634
635					expect($('.jqistate[data-jqi-name="s1"] button[disabled]').length).toBe(0);
636					expect($('.jqistate[data-jqi-name="s2"] button[disabled]').length).toBe(1);
637				});
638
639				it('should enable the buttons in a specific state', function() {
640					
641					$.prompt(states);
642					
643					$.prompt.disableStateButtons('s1');
644					$.prompt.disableStateButtons('s2');
645					$.prompt.enableStateButtons('s2');
646
647					expect($('.jqistate[data-jqi-name="s1"] button[disabled]').length).toBe(1);
648					expect($('.jqistate[data-jqi-name="s2"] button[disabled]').length).toBe(0);
649				});
650			});
651
652			// ====================================================================================
653			describe('$.prompt.close()', function() {
654				it('should close the prompt', function() {
655					
656					$.prompt(states);
657					
658					$.prompt.close();
659
660					expect($('.jqibox')).not.toExist();
661				});
662
663			});
664		}); // end instance methods
665	}); // end api methods
666	
667	// ====================================================================================
668	// ====================================================================================
669	describe('api events', function() {
670		var states = [
671				{ name: 's1', html: 'state 1', buttons: { next: true, cancel: false } },
672				{ name: 's2', html: 'state 2', buttons: { back: -1, cancel: 0, next: 1 } },
673				{ name: 's3', html: 'state 3', buttons: { done: true} }
674			];
675
676		beforeEach(function() {
677			$.fx.off = true; // for our testing lets turn off fx
678		});
679
680		afterEach(function() {
681			$.prompt.close();
682			$('.jqibox').remove();
683		});
684
685		// ====================================================================================
686		describe('impromptu:loaded', function(){
687			describe('running through jquery event binding', function(){
688				var spyEventCalled;
689
690				beforeEach(function(done){
691					spyEventCalled = false;
692					$('body').on('impromptu:loaded', '.jqibox', function(){ spyEventCalled=true; done(); });
693					$.prompt(states);
694				});
695
696				it('should fire event', function(){
697					expect(spyEventCalled).toBe(true);
698				});
699			});
700
701			describe('passing loaded event through as option', function(){
702				var spyEventCalled;
703
704				beforeEach(function(done){
705					spyEventCalled = false;
706					$.prompt(states, { loaded: function(){ spyEventCalled = true; done(); } });
707				});
708
709				it('should allow event function as option parameter', function(){
710					expect(spyEventCalled).toBe(true);
711				});
712			});
713		});
714
715		// ====================================================================================
716		describe('impromptu:close', function(){
717
718			describe('running through jquery event binding', function(){
719				var spyEventCalled;
720
721				beforeEach(function(done){
722					spyEventCalled = false;
723					$('body').on('impromptu:close', '.jqibox', function(){ spyEventCalled=true; done(); });
724					$.prompt(states, {
725						loaded: function(){
726							$.prompt.close();
727						}
728					});
729				});
730
731				it('should fire event', function(){
732					expect(spyEventCalled).toBe(true);
733				});
734			});
735
736			describe('passing loaded event through as option', function(){
737				var spyEventCalled;
738
739				beforeEach(function(done){
740					spyEventCalled = false;
741					$.prompt(states, { 
742						loaded: function(){ $.prompt.close(); },
743						close: function(){ spyEventCalled = true; done(); }
744					});
745				});
746
747				it('should allow event function as option parameter', function(){
748					expect(spyEventCalled).toBe(true);
749				});
750			});
751
752		});
753
754		// ====================================================================================
755		describe('impromptu:statechanging', function(){
756
757			describe('running through jquery event binding', function(){
758				var spyEventCalled;
759
760				beforeEach(function(done){
761					spyEventCalled = false;
762
763					$('body').on('impromptu:statechanging', '.jqibox', function(){ spyEventCalled = true; done(); });
764					$.prompt(states, {
765						loaded: function(){
766							$.prompt.goToState('s2');
767						}
768					});
769				});
770
771				it('should fire event', function(){
772					expect(spyEventCalled).toBe(true);
773				});
774			});
775
776			describe('passing loaded event through as option', function(){
777				var spyEventCalled;
778
779				beforeEach(function(done){
780					spyEventCalled = false;
781
782					$.prompt(states, { 
783						loaded: function(){
784							$.prompt.goToState('s2');
785						},
786						statechanging: function(){ spyEventCalled = true; done(); }
787					});
788				});
789
790				it('should allow event function as option parameter', function(){
791					expect(spyEventCalled).toBe(true);
792				});
793			});
794
795
796			it('should allow preventDefault', function(){
797				var spyEvent = spyOnEvent('body', 'impromptu:statechanging');
798
799				$.prompt(states, { 
800					loaded: function(){
801						$.prompt.goToState('s2');
802					},
803					statechanging: function(e){
804						e.preventDefault();
805					}
806				});
807				
808				expect(spyEvent).toHaveBeenTriggered();
809				expect(spyEvent).toHaveBeenPrevented();
810			});
811
812		});
813
814		// ====================================================================================
815		describe('impromptu:statechanged', function(){
816
817			describe('running through jquery event binding', function(){
818				var spyEventCalled;
819
820				beforeEach(function(done){
821					spyEventCalled = false;
822
823					$('body').on('impromptu:statechanged', '.jqibox', function(){ spyEventCalled = true; done(); });
824					$.prompt(states, {
825						loaded: function(){
826							$.prompt.goToState('s2');
827						}
828					});
829				});
830
831				it('should fire event', function(){
832					expect(spyEventCalled).toBe(true);
833				});
834			});
835
836			describe('passing loaded event through as option', function(){
837				var spyEventCalled;
838
839				beforeEach(function(done){
840					spyEventCalled = false;
841
842					$.prompt(states, { 
843						loaded: function(){
844							$.prompt.goToState('s2');
845						},
846						statechanged: function(){ spyEventCalled = true; done(); }
847					});
848				});
849
850				it('should allow event function as option parameter', function(){
851					expect(spyEventCalled).toBe(true);
852				});
853			});
854
855		});
856
857		// ====================================================================================
858		describe('impromptu:submit', function(){
859
860			describe('running through jquery event binding', function(){
861				var spyEventCalled;
862
863				beforeEach(function(done){
864					spyEventCalled = false;
865
866					$('body').on('impromptu:submit', '.jqibox', function(){ spyEventCalled = true; done(); });
867					$.prompt(states, {
868						loaded: function(){
869							$.prompt.getState('s1').find('.jqibutton:first').click();
870						}
871					});
872				});
873
874				it('should fire event', function(){
875					expect(spyEventCalled).toBe(true);
876				});
877			});
878
879
880
881			describe('passing submit event through as option if string message', function(){
882				var spyEventCalled;
883
884				beforeEach(function(done){
885					spyEventCalled = false;
886
887					$.prompt('Test message', { 
888						loaded: function(){
889							$('.jqibutton:first').click();
890						},
891						submit: function(){ spyEventCalled = true; done(); }
892					});
893				});
894
895				it('should allow event function as option parameter', function(){
896					expect(spyEventCalled).toBe(true);
897				});
898			});
899
900
901			describe('should detect button clicked', function(){
902				var btnClicked,
903					msgReturned,
904					formVals;
905
906				beforeEach(function(done){
907
908					$('body').on('impromptu:submit', '.jqibox', function(e,v,m,f){ 
909						btnClicked = v; 
910						msgReturned = m;
911						formVals = f;
912						done();
913					});
914
915					$.prompt(states, {
916						loaded: function(){
917							$.prompt.getState('s1').find('button[value="false"]').click();
918						}
919					});
920				});
921
922				it('should detect button', function(){
923					expect(btnClicked).toBe(false);
924				});
925
926				it('should pass the state message', function(){
927					expect(msgReturned.is('.jqimessage')).toBe(true);
928				});
929			});
930
931			describe('verifying form values', function(){
932				var tmpStates = [],
933					btnClicked,
934					msgReturned,
935					formVals,
936					expectedValues = {
937						textInput: 'my text input',
938						selectSingle: 'select single 3',
939						selectMulti: ['select multi 2', 'select multi 3'],
940						radioInput: 'my radio yes',
941						chkInput: ['my chk no', 'my chk maybe'],
942						textareaInput: 'my textarea val'
943					};
944
945				tmpStates[0] = $.extend({}, states[0]);
946				tmpStates[0].html = '<input type="text" name="textInput" value="my text input" />'+
947									'<select name="selectSingle"><option value="select single 1">select single 1</option><option value="select single 2">select single 2</option><option value="select single 3" selected>select single 3</option></select>'+
948									'<select name="selectMulti" multiple><option value="select multi1">select multi 1</option><option value="select multi 2" selected>select multi 2</option><option value="select multi 3" selected>select multi 3</option></select>';
949				tmpStates[1] = $.extend({}, states[1]);
950				tmpStates[1].html = '<input type="radio" name="radioInput" value="my radio yes" checked />'+
951									'<input type="radio" name="radioInput" value="my radio no" />'+
952									'<input type="checkbox" name="chkInput" value="my chk no" checked />'+
953									'<input type="checkbox" name="chkInput" value="my chk yes" />'+
954									'<input type="checkbox" name="chkInput" value="my chk maybe" checked />';
955				tmpStates[3] = $.extend({}, states[3]);
956				tmpStates[3].html = '<textarea name="textareaInput">my textarea val</textarea>';
957
958				beforeEach(function(done){
959
960					$('body').on('impromptu:submit', '.jqibox', function(e,v,m,f){ 
961						btnClicked = v; 
962						msgReturned = m;
963						formVals = f;
964						done();
965					});
966
967					$.prompt(tmpStates, {
968						loaded: function(){
969							$.prompt.getState('s1').find('button[value="true"]').click();
970						}
971					});
972				});
973
974				it('should pass the correct form values', function(){
975					expect(formVals).toEqual(expectedValues);
976				});
977
978			});
979
980		});
981
982	}); // end api events
983
984	// ====================================================================================
985	// ====================================================================================
986	describe('native events', function() {
987		var states = [
988				{ name: 's1', html: 'state 1', buttons: [{ title:'One', value: 1}, { title:'Two', value: 2}, { title:'Three', value: 3 }], focus: 1 },
989				{ name: 's2', html: 'state 2', buttons: { back: -1, cancel: 0, next: 1 } },
990				{ name: 's3', html: 'state 3', buttons: { done: true} }
991			];
992
993		beforeEach(function() {			
994			$.fx.off = true; // for our testing lets turn off fx
995
996		});
997
998		afterEach(function() {
999			$.prompt.close();
1000		});
1001
1002		// ====================================================================================
1003		describe('keydown', function(){
1004
1005			describe('on fade when persistent option true', function(){
1006
1007				beforeEach(function(done){
1008
1009					$.prompt(states, { 
1010						loaded: function(){
1011							var e = $.Event('keydown');
1012							e.keyCode = 27;
1013							$.prompt.getBox().trigger(e);
1014							done();
1015						},
1016						persistent: true
1017					});
1018				});
1019
1020				it('should not close prompt', function(){
1021					expect($('.jqi')).toExist();
1022				});
1023			});
1024
1025
1026			describe('on fade when persistent option false', function(){
1027
1028				beforeEach(function(done){
1029
1030					$.prompt(states, { 
1031						loaded: function(){
1032							var e = $.Event('keydown');
1033							e.keyCode = 27;
1034							$.prompt.getBox().trigger(e);
1035							done();
1036						},
1037						persistent: false
1038					});
1039				});
1040
1041				it('should close prompt', function(){
1042					expect($('.jqi')).not.toExist();
1043				});
1044			});
1045
1046
1047			describe('enter key in prompt', function(){
1048				var buttonTriggered = null;
1049
1050				beforeEach(function(done){
1051
1052					$('body').on('impromptu:submit', function(e,v){
1053						buttonTriggered = v;
1054						done();
1055					});
1056
1057					$.prompt(states, { 
1058						loaded: function(){
1059							var e = $.Event('keydown');
1060							e.keyCode = 13;
1061							$.prompt.getPrompt().trigger(e);
1062						}
1063					});	
1064				});
1065
1066				it('should trigger click on the correct button', function(){
1067					expect(buttonTriggered).toBe(2);
1068				});
1069			});
1070			
1071		});
1072
1073		// ====================================================================================
1074		describe('click', function(){
1075
1076			describe('fade click', function(){
1077
1078				beforeEach(function(done){
1079					$.prompt(states, { 
1080						loaded: function(){
1081							var e = $.Event('click');
1082							$.prompt.getBox().trigger(e);
1083
1084							done();
1085						},
1086						persistent: true
1087					});
1088				});
1089
1090				it('should not close fade if persistent option true',function(){
1091					expect($('.jqi')).toExist();
1092				});
1093			});
1094			
1095		});
1096
1097	});// end native events
1098
1099});
1100
Full Screen

rating.spec.js

Source: rating.spec.js Github

copy
1const { test, expect } = require("@playwright/test");
2
3test.describe("Rating", () => {
4  test("Should rate with one star", async ({ page }) => {
5    await page.goto("apps/rating/");
6    await expect(page.locator(".stars")).toBeVisible();
7
8    const emoji = page.locator("#star-1"); // Select first emoji
9    const stars = page.locator(".stars >> label");
10
11    await stars.nth(0).click(); // Click on the first star
12
13    // Assert selected stars
14    await expect(stars.nth(0)).toHaveCSS("color", "rgb(255, 221, 68)");
15
16    // Assert that the related emoji is displayed
17    await expect(emoji).toBeChecked();
18
19    // Assert message text for one star
20    let msg = await page.$eval(".footer >> .text", (elem) => {
21      // Get CSS computed content property
22      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
23    });
24    expect(msg).toMatch("I just hate it");
25
26    // Assert numerically represented rate
27    let rate = await page.$eval(".footer >> .numb", (elem) => {
28      // Get CSS computed content property
29      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
30    });
31    expect(rate).toMatch("1 out of 5");
32  });
33
34  test("Should rate with two stars", async ({ page }) => {
35    await page.goto("apps/rating/");
36    await expect(page.locator(".stars")).toBeVisible();
37
38    const emoji = page.locator("#star-2"); // Select second emoji
39    const emojiPosition = page.locator(".slideImg");
40    const stars = page.locator(".stars >> label");
41
42    await stars.nth(1).click(); // Click on the second star
43
44    // Assert selected stars
45    await expect(stars.nth(0)).toHaveCSS("color", "rgb(255, 221, 68)");
46    await expect(stars.nth(1)).toHaveCSS("color", "rgb(255, 221, 68)");
47
48    // Assert that the related emoji is displayed
49    expect(emoji).toBeChecked;
50    await expect(emojiPosition).toHaveCSS("margin-top", "-135px");
51
52    // Assert message text for one star
53    let msg = await page.$eval(".footer >> .text", (elem) => {
54      // Get CSS computed content property
55      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
56    });
57    expect(msg).toMatch("I don't like it");
58
59    // Assert numerically represented rate
60    let rate = await page.$eval(".footer >> .numb", (elem) => {
61      // Get CSS computed content property
62      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
63    });
64    expect(rate).toMatch("2 out of 5");
65  });
66
67  test("Should rate with three stars", async ({ page }) => {
68    await page.goto("apps/rating/");
69    await expect(page.locator(".stars")).toBeVisible();
70
71    const emoji = page.locator("#star-3"); // Select third emoji
72    const emojiPosition = page.locator(".slideImg");
73    const stars = page.locator(".stars >> label");
74
75    await stars.nth(2).click(); // Click on the third star
76
77    // Assert selected stars
78    await expect(stars.nth(0)).toHaveCSS("color", "rgb(255, 221, 68)");
79    await expect(stars.nth(1)).toHaveCSS("color", "rgb(255, 221, 68)");
80    await expect(stars.nth(2)).toHaveCSS("color", "rgb(255, 221, 68)");
81
82    // Assert that the related emoji is displayed
83    expect(emoji).toBeChecked;
84    await expect(emojiPosition).toHaveCSS("margin-top", "-270px");
85
86    // Assert message text for one star
87    let msg = await page.$eval(".footer >> .text", (elem) => {
88      // Get CSS computed content property
89      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
90    });
91    expect(msg).toMatch("This is awesome");
92
93    // Assert numerically represented rate
94    let rate = await page.$eval(".footer >> .numb", (elem) => {
95      // Get CSS computed content property
96      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
97    });
98    expect(rate).toMatch("3 out of 5");
99  });
100
101  test("Should rate with four stars", async ({ page }) => {
102    await page.goto("apps/rating/");
103    await expect(page.locator(".stars")).toBeVisible();
104
105    const emoji = page.locator("#star-4"); // Select fourth emoji
106    const emojiPosition = page.locator(".slideImg");
107    const stars = page.locator(".stars >> label");
108
109    await stars.nth(3).click(); // Click on the fourth star
110
111    // Assert selected stars
112    await expect(stars.nth(0)).toHaveCSS("color", "rgb(255, 221, 68)");
113    await expect(stars.nth(1)).toHaveCSS("color", "rgb(255, 221, 68)");
114    await expect(stars.nth(2)).toHaveCSS("color", "rgb(255, 221, 68)");
115    await expect(stars.nth(3)).toHaveCSS("color", "rgb(255, 221, 68)");
116
117    // Assert that the related emoji is displayed
118    expect(emoji).toBeChecked;
119    await expect(emojiPosition).toHaveCSS("margin-top", "-405px");
120
121    // Assert message text for one star
122    let msg = await page.$eval(".footer >> .text", (elem) => {
123      // Get CSS computed content property
124      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
125    });
126    expect(msg).toMatch("I just like it");
127
128    // Assert numerically represented rate
129    let rate = await page.$eval(".footer >> .numb", (elem) => {
130      // Get CSS computed content property
131      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
132    });
133    expect(rate).toMatch("4 out of 5");
134  });
135
136  test("Should rate with five stars", async ({ page }) => {
137    await page.goto("apps/rating/");
138    await expect(page.locator(".stars")).toBeVisible();
139
140    const emoji = page.locator("#star-5"); // Select fifth emoji
141    const emojiPosition = page.locator(".slideImg");
142    const stars = page.locator(".stars >> label");
143
144    await stars.nth(4).click(); // Click on the fifth star
145
146    // Assert selected stars
147    await expect(stars.nth(0)).toHaveCSS("color", "rgb(255, 221, 68)");
148    await expect(stars.nth(1)).toHaveCSS("color", "rgb(255, 221, 68)");
149    await expect(stars.nth(2)).toHaveCSS("color", "rgb(255, 221, 68)");
150    await expect(stars.nth(3)).toHaveCSS("color", "rgb(255, 221, 68)");
151    await expect(stars.nth(4)).toHaveCSS("color", "rgb(255, 221, 68)");
152
153    // Assert that the related emoji is displayed
154    expect(emoji).toBeChecked;
155    await expect(emojiPosition).toHaveCSS("margin-top", "-540px");
156
157    // Assert message text for one star
158    let msg = await page.$eval(".footer >> .text", (elem) => {
159      // Get CSS computed content property
160      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
161    });
162    expect(msg).toMatch("I just love it");
163
164    // Assert numerically represented rate
165    let rate = await page.$eval(".footer >> .numb", (elem) => {
166      // Get CSS computed content property
167      return window.getComputedStyle(elem, ":before").getPropertyValue("content");
168    });
169    expect(rate).toMatch("5 out of 5");
170  });
171});
172
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)