How to use focused method in Cypress

Best JavaScript code snippet using cypress

Run Cypress automation tests on LambdaTest cloud grid

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

app.js

Source: app.js Github

copy
1(function(){
2
3	let MenuTpl =
4		'<div id="menu_{{_namespace}}_{{_name}}" class="menu{{#align}} align-{{align}}{{/align}}">' +
5			'<div class="head"><span>{{{title}}}</span></div>' +
6				'<div class="menu-items">' + 
7					'{{#elements}}' +
8						'<div class="menu-item {{#selected}}selected{{/selected}}">' +
9							'{{{label}}}{{#isSlider}} : &lt;{{{sliderLabel}}}&gt;{{/isSlider}}' +
10						'</div>' +
11					'{{/elements}}' +
12				'</div>'+
13			'</div>' +
14		'</div>'
15	;
16
17	window.ESX_MENU       = {};
18	ESX_MENU.ResourceName = 'esx_menu_default';
19	ESX_MENU.opened       = {};
20	ESX_MENU.focus        = [];
21	ESX_MENU.pos          = {};
22
23	ESX_MENU.open = function(namespace, name, data) {
24
25		if (typeof ESX_MENU.opened[namespace] == 'undefined') {
26			ESX_MENU.opened[namespace] = {};
27		}
28
29		if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
30			ESX_MENU.close(namespace, name);
31		}
32
33		if (typeof ESX_MENU.pos[namespace] == 'undefined') {
34			ESX_MENU.pos[namespace] = {};
35		}
36
37		for (let i=0; i<data.elements.length; i++) {
38			if (typeof data.elements[i].type == 'undefined') {
39				data.elements[i].type = 'default';
40			}
41		}
42
43		data._index     = ESX_MENU.focus.length;
44		data._namespace = namespace;
45		data._name      = name;
46
47		for (let i=0; i<data.elements.length; i++) {
48			data.elements[i]._namespace = namespace;
49			data.elements[i]._name      = name;
50		}
51
52		ESX_MENU.opened[namespace][name] = data;
53		ESX_MENU.pos   [namespace][name] = 0;
54
55		for (let i=0; i<data.elements.length; i++) {
56			if (data.elements[i].selected) {
57				ESX_MENU.pos[namespace][name] = i;
58			} else {
59				data.elements[i].selected = false;
60			}
61		}
62
63		ESX_MENU.focus.push({
64			namespace: namespace,
65			name     : name
66		});
67		
68		ESX_MENU.render();
69		$('#menu_' + namespace + '_' + name).find('.menu-item.selected')[0].scrollIntoView();
70	};
71
72	ESX_MENU.close = function(namespace, name) {
73		
74		delete ESX_MENU.opened[namespace][name];
75
76		for (let i=0; i<ESX_MENU.focus.length; i++) {
77			if (ESX_MENU.focus[i].namespace == namespace && ESX_MENU.focus[i].name == name) {
78				ESX_MENU.focus.splice(i, 1);
79				break;
80			}
81		}
82
83		ESX_MENU.render();
84
85	};
86
87	ESX_MENU.render = function() {
88
89		let menuContainer       = document.getElementById('menus');
90		let focused             = ESX_MENU.getFocused();
91		menuContainer.innerHTML = '';
92
93		$(menuContainer).hide();
94
95		for (let namespace in ESX_MENU.opened) {
96			for (let name in ESX_MENU.opened[namespace]) {
97
98				let menuData = ESX_MENU.opened[namespace][name];
99				let view     = JSON.parse(JSON.stringify(menuData));
100
101				for (let i=0; i<menuData.elements.length; i++) {
102					let element = view.elements[i];
103
104					switch (element.type) {
105						case 'default' : break;
106
107						case 'slider' : {
108							element.isSlider    = true;
109							element.sliderLabel = (typeof element.options == 'undefined') ? element.value : element.options[element.value];
110
111							break;
112						}
113
114						default : break;
115					}
116
117					if (i == ESX_MENU.pos[namespace][name]) {
118						element.selected = true;
119					}
120				}
121
122				let menu = $(Mustache.render(MenuTpl, view))[0];
123				$(menu).hide();
124				menuContainer.appendChild(menu);
125			}
126		}
127
128		if (typeof focused != 'undefined') {
129			$('#menu_' + focused.namespace + '_' + focused.name).show();
130		}
131
132		$(menuContainer).show();
133
134	};
135
136	ESX_MENU.submit = function(namespace, name, data) {
137		$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify({
138			_namespace: namespace,
139			_name     : name,
140			current   : data,
141			elements  : ESX_MENU.opened[namespace][name].elements
142		}));
143	};
144
145	ESX_MENU.cancel = function(namespace, name) {
146		$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify({
147			_namespace: namespace,
148			_name     : name
149		}));
150	};
151
152	ESX_MENU.change = function(namespace, name, data) {
153		$.post('http://' + ESX_MENU.ResourceName + '/menu_change', JSON.stringify({
154			_namespace: namespace,
155			_name     : name,
156			current   : data,
157			elements  : ESX_MENU.opened[namespace][name].elements
158		}));
159	};
160
161	ESX_MENU.getFocused = function() {
162		return ESX_MENU.focus[ESX_MENU.focus.length - 1];
163	};
164
165	window.onData = (data) => {
166
167		switch (data.action) {
168
169			case 'openMenu': {
170				ESX_MENU.open(data.namespace, data.name, data.data);
171				break;
172			}
173
174			case 'closeMenu': {
175				ESX_MENU.close(data.namespace, data.name);
176				break;
177			}
178
179			case 'controlPressed': {
180
181				switch (data.control) {
182
183					case 'ENTER': {
184						let focused = ESX_MENU.getFocused();
185
186						if (typeof focused != 'undefined') {
187							let menu    = ESX_MENU.opened[focused.namespace][focused.name];
188							let pos     = ESX_MENU.pos[focused.namespace][focused.name];
189							let elem    = menu.elements[pos];
190
191							if (menu.elements.length > 0) {
192								ESX_MENU.submit(focused.namespace, focused.name, elem);
193							}
194						}
195
196						break;
197					}
198
199					case 'BACKSPACE': {
200						let focused = ESX_MENU.getFocused();
201
202						if (typeof focused != 'undefined') {
203							ESX_MENU.cancel(focused.namespace, focused.name);
204						}
205
206						break;
207					}
208
209					case 'TOP': {
210
211						let focused = ESX_MENU.getFocused();
212
213						if (typeof focused != 'undefined') {
214
215							let menu = ESX_MENU.opened[focused.namespace][focused.name];
216							let pos  = ESX_MENU.pos[focused.namespace][focused.name];
217
218							if (pos > 0) {
219								ESX_MENU.pos[focused.namespace][focused.name]--;
220							} else {
221								ESX_MENU.pos[focused.namespace][focused.name] = menu.elements.length - 1;
222							}
223
224							let elem = menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
225
226							for (let i=0; i<menu.elements.length; i++) {
227								if (i == ESX_MENU.pos[focused.namespace][focused.name]) {
228									menu.elements[i].selected = true;
229								} else {
230									menu.elements[i].selected = false;
231								}
232							}
233
234							ESX_MENU.change(focused.namespace, focused.name, elem);
235							ESX_MENU.render();
236
237							$('#menu_' + focused.namespace + '_' + focused.name).find('.menu-item.selected')[0].scrollIntoView();
238						}
239
240						break;
241
242					}
243
244					case 'DOWN' : {
245
246						let focused = ESX_MENU.getFocused();
247
248						if (typeof focused != 'undefined') {
249							let menu   = ESX_MENU.opened[focused.namespace][focused.name];
250							let pos    = ESX_MENU.pos[focused.namespace][focused.name];
251							let length = menu.elements.length;
252
253							if (pos < length - 1) {
254								ESX_MENU.pos[focused.namespace][focused.name]++;
255							} else {
256								ESX_MENU.pos[focused.namespace][focused.name] = 0;
257							}
258
259							let elem = menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
260
261							for (let i=0; i<menu.elements.length; i++) {
262								if (i == ESX_MENU.pos[focused.namespace][focused.name]) {
263									menu.elements[i].selected = true;
264								} else {
265									menu.elements[i].selected = false;
266								}
267							}
268
269							ESX_MENU.change(focused.namespace, focused.name, elem);
270							ESX_MENU.render();
271
272							$('#menu_' + focused.namespace + '_' + focused.name).find('.menu-item.selected')[0].scrollIntoView();
273						}
274
275						break;
276					}
277
278					case 'LEFT' : {
279
280						let focused = ESX_MENU.getFocused();
281
282						if (typeof focused != 'undefined') {
283							let menu = ESX_MENU.opened[focused.namespace][focused.name];
284							let pos  = ESX_MENU.pos[focused.namespace][focused.name];
285							let elem = menu.elements[pos];
286
287							switch(elem.type) {
288								case 'default': break;
289
290								case 'slider': {
291									let min = (typeof elem.min == 'undefined') ? 0 : elem.min;
292
293									if (elem.value > min) {
294										elem.value--;
295										ESX_MENU.change(focused.namespace, focused.name, elem);
296									}
297
298									ESX_MENU.render();
299									break;
300								}
301
302								default: break;
303							}
304
305							$('#menu_' + focused.namespace + '_' + focused.name).find('.menu-item.selected')[0].scrollIntoView();
306						}
307
308						break;
309					}
310
311					case 'RIGHT' : {
312
313						let focused = ESX_MENU.getFocused();
314
315						if (typeof focused != 'undefined') {
316							let menu = ESX_MENU.opened[focused.namespace][focused.name];
317							let pos  = ESX_MENU.pos[focused.namespace][focused.name];
318							let elem = menu.elements[pos];
319
320							switch(elem.type) {
321								case 'default': break;
322
323								case 'slider': {
324									if (typeof elem.options != 'undefined' && elem.value < elem.options.length - 1) {
325										elem.value++;
326										ESX_MENU.change(focused.namespace, focused.name, elem);
327									}
328
329									if (typeof elem.max != 'undefined' && elem.value < elem.max) {
330										elem.value++;
331										ESX_MENU.change(focused.namespace, focused.name, elem);
332									}
333
334									ESX_MENU.render();
335									break;
336								}
337
338								default: break;
339							}
340
341							$('#menu_' + focused.namespace + '_' + focused.name).find('.menu-item.selected')[0].scrollIntoView();
342						}
343
344						break;
345					}
346
347					default : break;
348
349				}
350
351				break;
352			}
353
354		}
355
356	};
357
358	window.onload = function(e){
359		window.addEventListener('message', (event) => {
360			onData(event.data);
361		});
362	};
363
364})();
Full Screen

focused.jsx

Source: focused.jsx Github

copy
1import * as style from "./style/focusedStyle";
2import FocusedTitle from "./focusedTitle"
3import FocusedHistory from "./focusedHistory";
4import FocusedProfile from "./focusedProfile"
5
6//Extends Main
7export default function Focused({focused, setFocused, locationHierarchy, rawData, profileChanges}) {
8  try {
9    //Disables focused for LAS and DID items as they have no individual profiles//
10    if (!focused[0] || focused[1] === "las" || focused[1] === "did") return <div></div>
11    
12    let focusedItem = rawData[focused[1]].filter(x => x.profile === focused[0])[0]
13    let profileHistory = profileChanges.filter(x => focusedItem.pkid === x.pkid)[0]
14
15    return (
16      <div style={style.container}>
17        <FocusedTitle
18            style             = {style}
19            setFocused        = {setFocused} 
20            focusedItem       = {focusedItem} 
21            locationHierarchy = {locationHierarchy}/>
22  
23        <FocusedProfile
24            style       = {style}
25            focusedItem = {focusedItem}/>
26  
27        <FocusedHistory style={style} profileHistory={profileHistory}/>
28      </div>
29    )
30  } catch { // Catches non-existent item if removed from api while focused //
31    return <div></div>
32  }
33}
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 Cypress 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)