How to use windowFocus 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
1import React, { PropTypes } from 'react';
2import { connect } from 'react-redux';
3
4import './app.scss';
5
6import user from '../action/user';
7import ui from '../action/pc';
8import socket from '../socket';
9import api, { publicApi } from '../api';
10
11import Notification from '../common/notification';
12import MaskLayout from '../common/maskLayout';
13import ImageViewer from '../common/imageViewer';
14
15window.KoajsReactChat = publicApi;
16
17class App extends React.Component {
18    static propTypes = {
19        state: PropTypes.object.isRequired,
20        children: PropTypes.element,
21        location: PropTypes.object.isRequired,
22        windowFocus: PropTypes.bool,
23        desktopNotification: PropTypes.bool,
24        soundNotification: PropTypes.bool,
25    };
26
27    static contextTypes = {
28        router: React.PropTypes.object.isRequired,
29    }
30
31    constructor(props, context) {
32        super(props, context);
33        api.init(this);
34    }
35
36    componentWillMount() {
37        // force to root path
38        this.context.router.push('/');
39
40        // try auto login
41        const token = window.localStorage.getItem('token');
42        if (token && token !== '') {
43            user
44            .reConnect(token)
45            .then(result => {
46                if (result.status === 201) {
47                    user.online();
48                    if (this.props.location.pathname === '/') {
49                        this.context.router.push('/main');
50                    }
51                }
52            });
53        }
54
55        // register server event
56        socket.on('groupMessage', data => {
57            api.emit('rawMessage', data);
58            user.addGroupMessage(data);
59
60            if (this.props.soundNotification) {
61                this.sound.play();
62            }
63
64            if (!api.getVirtualMessageName(data.content) && window.Notification && window.Notification.permission === 'granted' && !this.props.windowFocus && this.props.desktopNotification) {
65                const notification = new window.Notification(
66                    `${data.from.username} - 发来消息:`,
67                    {
68                        icon: data.from.avatar,
69                        body: data.type === 'text' ? data.content : `[${data.type}]`,
70                        tag: data.from.id,
71                    }
72                );
73                notification.onclick = function () {
74                    window.blur();
75                    window.focus();
76                    this.close();
77                };
78                // auto close
79                setTimeout(notification.close.bind(notification), 3000);
80            }
81        });
82
83        socket.on('message', data => {
84            api.emit('rawMessage', data);
85            user.addMessage(data);
86
87            if (this.props.soundNotification) {
88                this.sound.play();
89            }
90
91            if (!api.getVirtualMessageName(data.content) && window.Notification && window.Notification.permission === 'granted' && !this.props.windowFocus && this.props.desktopNotification) {
92                const notification = new window.Notification(
93                    `${data.from.username} - 发来消息:`,
94                    {
95                        icon: data.from.avatar,
96                        body: data.type === 'text' ? data.content : `[${data.type}]`,
97                        tag: data.from.id,
98                    }
99                );
100                notification.onclick = function () {
101                    this.close();
102                    window.blur();
103                    setTimeout(() => {
104                        window.focus();
105                    }, 0);
106                };
107                // auto close
108                setTimeout(notification.close.bind(notification), 3000);
109            }
110        });
111
112        socket.on('disconnect', () => {
113            user.offline();
114        });
115        socket.on('reconnect', () => {
116            user
117            .reConnect()
118            .then(result => {
119                if (result.status === 201) {
120                    user.online();
121                }
122            });
123        });
124
125        // html5 notification
126        if (window.Notification && (window.Notification.permission === 'default' || window.Notification.permission === 'denied')) {
127            window.Notification.requestPermission();
128        }
129    }
130
131    componentDidMount() {
132        window.onfocus = () => ui.windowFocus(true);
133        window.onblur = () => ui.windowFocus(false);
134    }
135
136    render() {
137        // for debug
138        // console.log(this.props.state.toJS());
139        const width = window.screen.width;
140        const height = window.screen.height;
141
142        return (
143            <div className="window">
144                <div
145                    className="background"
146                    style={{ backgroundSize: `${width}px ${height - 50}px` }}
147                >
148                    {
149                    /^\/main/.test(this.props.location.pathname) ?
150                        <div style={{ backgroundSize: `${width}px ${height - 50}px` }} />
151                    :
152                        null
153                }
154                </div>
155                <Notification />
156                <MaskLayout />
157                <ImageViewer />
158                <audio
159                    ref={sound => this.sound = sound}
160                >
161                    <source src="http://assets.suisuijiang.com/message_sound.mp3" type="audio/mp3" />
162                    <source src="http://assets.suisuijiang.com/message_sound.ogg" type="audio/ogg" />
163                    <source src="http://assets.suisuijiang.com/message_sound.wav" type="audio/wav" />
164                </audio>
165                { this.props.children }
166            </div>
167        );
168    }
169}
170
171export default connect(
172    state => ({
173        state: state,
174        windowFocus: state.getIn(['pc', 'windowFocus']),
175        desktopNotification: state.getIn(['pc', 'desktopNotification']),
176        soundNotification: state.getIn(['pc', 'soundNotification']),
177    })
178)(App);
179
Full Screen

backgroundFade.js

Source: backgroundFade.js Github

copy
1/***********************************************************************************
2 * X2Engine Open Source Edition is a customer relationship management program developed by
3 * X2 Engine, Inc. Copyright (C) 2011-2019 X2 Engine Inc.
4 * 
5 * This program is free software; you can redistribute it and/or modify it under
6 * the terms of the GNU Affero General Public License version 3 as published by the
7 * Free Software Foundation with the addition of the following permission added
8 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
9 * IN WHICH THE COPYRIGHT IS OWNED BY X2ENGINE, X2ENGINE DISCLAIMS THE WARRANTY
10 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
11 * 
12 * This program is distributed in the hope that it will be useful, but WITHOUT
13 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
14 * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
15 * details.
16 * 
17 * You should have received a copy of the GNU Affero General Public License along with
18 * this program; if not, see http://www.gnu.org/licenses or write to the Free
19 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
20 * 02110-1301 USA.
21 * 
22 * You can contact X2Engine, Inc. P.O. Box 610121, Redwood City,
23 * California 94061, USA. or at email address contact@x2engine.com.
24 * 
25 * The interactive user interfaces in modified source and object code versions
26 * of this program must display Appropriate Legal Notices, as required under
27 * Section 5 of the GNU Affero General Public License version 3.
28 * 
29 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
30 * these Appropriate Legal Notices must retain the display of the "Powered by
31 * X2 Engine" logo. If the display of the logo is not reasonably feasible for
32 * technical reasons, the Appropriate Legal Notices must display the words
33 * "Powered by X2 Engine".
34 **********************************************************************************/
35
36
37
38
39// var windowFocus = false;
40
41$(function() {
42	
43
44	/* $(window).bind("focus", function() {
45		windowFocus = true;
46		setTimeout(function(){windowFocus = false;}, 500);
47	});
48	
49	$('img').bind('click',function(e) {
50		if($(this).attr('id') == 'bg' && !windowFocus) {
51			//$('#page').stop();
52			$('#page').fadeTo(500,0.2);
53		}
54		windowFocus = false;
55	});
56	$(document).bind('click',function(e) {
57		if($(e.target).attr('id')=='body-tag' && !windowFocus) {
58			//$('#page').stop();
59			$('#page').fadeTo(500,0.2);
60		}
61		windowFocus = false;
62	});
63	
64	var pageLeft = $('#page').offset().left;
65	var pageTop = $('#page').offset().top;
66	var pageRight = pageLeft + $('#page').width();
67	var pageBottom = pageTop + $('#page').height();
68	
69	$(document).bind('click', function(e) {
70		// if($('#transparency-slider').length)
71			// var opacity = $('#transparency-slider').slider('value');
72		// else
73			var opacity = 1;
74
75		if(e.pageX < pageRight && e.pageX > pageLeft && e.pageY > pageTop && e.pageY < pageBottom)
76			if($('#page').css('opacity') != opacity)
77				$('#page').fadeTo(500,opacity);
78	}); */
79	
80	var isHidden = false;
81	var hideTargets = $("#page").children().not("#header").add("#footer").add ('.qtip');
82	
83	$(document).click(function(e) {
84		if(isHidden) {
85			hideTargets.stop().animate({opacity:1},300);
86			isHidden = false;
87		}
88	});
89	
90	$("#page-fader").click(function(e) {
91		if(!isHidden) {
92			e.stopPropagation();
93			hideTargets.stop().animate({opacity:0},300);
94			isHidden = true;
95		}
96	});
97});
98
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)