How to use doClose 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.

PusherNotification.js

Source: PusherNotification.js Github

copy
1import React, { useCallback, useState, useEffect, useRef } from 'react';
2import ReactDOM from 'react-dom';
3import PropTypes from 'prop-types';
4
5import Portal from '../Portal';
6import { bottomLeftNode, bottomRightNode, topLeftNode, topRightNode } from '../Portal/register';
7import { uniqueId } from '../../utils/helpers';
8
9const mapDefaultNode = {
10  'bottom-left': bottomLeftNode,
11  'bottom-right': bottomRightNode,
12  'top-left': topLeftNode,
13  'top-right': topRightNode,
14};
15
16const notificationRef = {
17  max: 3,
18  update: ({ max }) => {
19    notificationRef.max = max || notificationRef.max;
20  },
21  nodes: {},
22  instances: new Map(),
23  isDuplicate: (id) => {
24    return id && notificationRef.instances.has(id);
25  },
26  keepMax: () => {
27    if (notificationRef.instances.size > notificationRef.max - 1) {
28      let counter = 0;
29      const willClose = [];
30      for (const [key, { doClose }] of notificationRef.instances) {
31        if (counter <= notificationRef.instances.size - notificationRef.max) {
32          willClose.push({
33            key,
34            doClose,
35          });
36        }
37        counter++;
38      }
39      willClose.forEach(({ doClose }) => doClose());
40    }
41  },
42  closeAll: () => {
43    const willClose = [];
44    for (const [key, { doClose }] of notificationRef.instances) {
45      willClose.push({
46        key,
47        doClose,
48      });
49    }
50    willClose.forEach(({ doClose }) => doClose());
51  },
52  closeById: (id) => {
53    const notiInstance = notificationRef.instances.get(id);
54    if (notiInstance) {
55      notiInstance.doClose();
56    }
57  },
58};
59
60const PusherNotification = ({ id, renderFunc, autoClose, onUnmounted, placement, ...otherProps }) => {
61  const ref = useRef();
62  const [isOpen, setIsOpen] = useState(true);
63  const doClose = useCallback(() => setIsOpen(false), [setIsOpen]);
64
65  useEffect(() => {
66    if (autoClose) {
67      ref.current = setTimeout(() => doClose(), autoClose);
68      return () => clearTimeout(ref.current);
69    }
70  }, [autoClose, doClose, ref]);
71
72  useEffect(() => {
73    if (isOpen) {
74      notificationRef.instances.set(id, {
75        doClose,
76      });
77    }
78  }, [id, isOpen, doClose]);
79
80  useEffect(() => {
81    if (!isOpen) {
82      notificationRef.instances.delete(id);
83    }
84    return () => notificationRef.instances.delete(id);
85  }, []);
86
87  useEffect(() => {
88    if (!isOpen && onUnmounted) {
89      onUnmounted();
90    }
91  }, [isOpen, onUnmounted]);
92
93  if (isOpen) {
94    return (
95      <Portal {...otherProps} node={mapDefaultNode[placement]}>
96        {renderFunc({ doClose })}
97      </Portal>
98    );
99  }
100  return null;
101};
102
103PusherNotification.propTypes = {
104  id: PropTypes.string.isRequired,
105  renderFunc: PropTypes.func.isRequired,
106  autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
107  onUnmounted: PropTypes.func,
108  placement: PropTypes.oneOf(['bottom-left', 'bottom-right', 'top-left', 'top-right'])
109};
110PusherNotification.defaultProps = {
111  autoClose: 9000,
112  onUnmounted: f => f,
113  placement: 'bottom-left',
114};
115
116notificationRef.push = (renderFunc, params) => {
117  const { id, ...otherProps } = params || {};
118  const _id = id || uniqueId();
119  const isDuplicate = notificationRef.isDuplicate(_id);
120  const node = window.document.createElement('div');
121  const onUnmounted = () => ReactDOM.unmountComponentAtNode(node);
122
123  if (isDuplicate) {
124    ReactDOM.unmountComponentAtNode(notificationRef.nodes[_id]);
125    notificationRef.instances.delete(_id);
126  }
127  
128  notificationRef.keepMax();
129  notificationRef.nodes[_id] = node;
130  ReactDOM.render((
131    <PusherNotification
132      renderFunc={renderFunc}
133      onUnmounted={onUnmounted}
134      id={_id}
135      {...otherProps}
136    />
137  ), node);
138};
139
140export { notificationRef };
141export default PusherNotification;
142
Full Screen

PusherAlert.js

Source: PusherAlert.js Github

copy
1import React, { useState, useCallback, useEffect, useRef } from 'react';
2import ReactDOM from 'react-dom';
3import PropTypes from 'prop-types';
4import Portal from '../Portal';
5import { uniqueId } from '../../utils/helpers';
6import {
7  bottomLeftNode,
8  bottomRightNode,
9  topLeftNode,
10  topRightNode,
11  topCenterNode,
12  bottomCenterNode,
13} from '../Portal/register';
14
15const mapDefaultNode = {
16  'bottom-left': bottomLeftNode,
17  'bottom-right': bottomRightNode,
18  'top-left': topLeftNode,
19  'top-right': topRightNode,
20  'top-center': topCenterNode,
21  'bottom-center': bottomCenterNode,
22};
23
24const alertRef = {
25  max: 9,
26  update: ({ max }) => {
27    alertRef.max = max || alertRef.max;
28  },
29  nodes: {},
30  instances: new Map(),
31  isDuplicate: (id) => {
32    return id && alertRef.instances.has(id);
33  },
34  keepMax: () => {
35    if (alertRef.instances.size > alertRef.max - 1) {
36      let counter = 0;
37      const willClose = [];
38      for (const [key, { doClose }] of alertRef.instances) {
39        if (counter <= alertRef.instances.size - alertRef.max) {
40          willClose.push({
41            key,
42            doClose,
43          });
44        }
45        counter++;
46      }
47      willClose.forEach(({ doClose }) => doClose());
48    }
49  },
50  closeAll: () => {
51    const willClose = [];
52    for (const [key, { doClose }] of alertRef.instances) {
53      willClose.push({
54        key,
55        doClose,
56      });
57    }
58    willClose.forEach(({ doClose }) => doClose());
59  },
60  closeById: (id) => {
61    const alertInstance = alertRef.instances.get(id);
62    if (alertInstance) {
63      alertInstance.doClose();
64    }
65  },
66};
67
68const PusherAlert = ({ id, renderFunc, placement, onUnmounted, autoClose, ...otherProps }) => {
69  const ref = useRef();
70  const [isOpen, setIsOpen] = useState(true);
71  const doClose = useCallback(() => setIsOpen(false), [setIsOpen]);
72
73  useEffect(() => {
74    if (autoClose) {
75      ref.current = setTimeout(() => doClose(), autoClose);
76      return () => clearTimeout(ref.current);
77    }
78  }, [autoClose, doClose, ref]);
79
80  useEffect(() => {
81    if (isOpen) {
82      alertRef.instances.set(id, {
83        doClose,
84      });
85    }
86  }, [id, isOpen, doClose]);
87
88  useEffect(() => {
89    if (!isOpen) {
90      alertRef.instances.delete(id);
91    }
92    return () => alertRef.instances.delete(id);
93  }, []);
94
95  useEffect(() => {
96    if (!isOpen && onUnmounted) {
97      onUnmounted();
98    }
99  }, [isOpen, onUnmounted]);
100
101  if (isOpen) {
102    return (
103      <Portal {...otherProps} node={mapDefaultNode[placement]}>
104        <div className="fpusher-alert-wrapper">
105          {renderFunc({ doClose })}
106        </div>
107      </Portal>
108    );
109  }
110  return null;
111};
112
113PusherAlert.propTypes = {
114  id: PropTypes.string.isRequired,
115  renderFunc: PropTypes.func.isRequired,
116  autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
117  onUnmounted: PropTypes.func,
118  placement: PropTypes.oneOf(['bottom-left', 'bottom-right', 'top-left', 'top-right', 'top-center', 'bottom-center'])
119};
120PusherAlert.defaultProps = {
121  autoClose: 9000,
122  onUnmounted: f => f,
123  placement: 'top-center',
124};
125
126alertRef.push = (renderFunc, params) => {
127  const { id, ...otherProps } = params || {};
128  const _id = id || uniqueId();
129  const isDuplicate = alertRef.isDuplicate(_id);
130  const node = window.document.createElement('div');
131  const onUnmounted = () => ReactDOM.unmountComponentAtNode(node);
132
133  if (isDuplicate) {
134    ReactDOM.unmountComponentAtNode(alertRef.nodes[_id]);
135    alertRef.instances.delete(_id);
136  }
137  alertRef.keepMax();
138  alertRef.nodes[_id] = node;
139  ReactDOM.render((
140    <PusherAlert
141      id={_id}
142      renderFunc={renderFunc}
143      onUnmounted={onUnmounted}
144      {...otherProps}
145    />
146  ), node);
147};
148
149export { alertRef };
150export default PusherAlert;
151
Full Screen

utils.js

Source: utils.js Github

copy
1var FormUtils = {
2    displayError: function (returnMessage)
3    {
4        alert(returnMessage);
5    },
6    showConfirmMessageBox: function (msg, callback, type, buttontext)
7    {
8        if (buttontext !== null && buttontext !== undefined && buttontext !== '') {
9            $('#confirm-btn').text(buttontext);
10        }
11        var isConfirm = false;
12        $('#popup_confirm_message_box_content').text(msg);
13        $('#popup_confirm_message_box').show();
14        $('#popup_confirm_message_box_dim').click(function (e)
15        {
16            doClose();
17        });
18        $('#popup_confirm_message_box_close').click(function (e)
19        {
20            doClose();
21        });
22        $('#confirm-btn-cancel').click(function () {
23            isConfirm = false;
24            doClose();
25        });
26        $('#confirm-btn').click(function () {
27            isConfirm = true;
28            doClose();
29        });
30        function doClose()
31        {
32            $('#popup_confirm_message_box').hide();
33            if (callback !== undefined && callback !== null && isConfirm) {
34                callback();
35                callback = null;
36            }
37            $('#popup_confirm_message_box_dim').unbind("click");
38            $('#confirm-btn-cancel').unbind("click");
39            $('#confirm-btn-delete').unbind("click");
40            $('#popup_confirm_message_box_close').unbind("click");
41        }
42
43        switch (type)
44        {
45            case "error":
46                $('#popup_message_panel').attr("class", "panel panel-danger");
47                break;
48            case "success":
49                $('#popup_message_panel').attr("class", "panel panel-success");
50                break;
51            default:
52                $('#popup_message_panel').attr("class", "panel panel-default");
53                break;
54        }
55
56        $('#popup_confirm_message_box_dim').css('height', $(document).height() + 'px');
57    },
58    showMessageBox: function (msg, callback, type)
59    {
60        $('#msg_header').html("Thông báo");
61        $('#popup_message_box_content').text(msg);
62        $('#popup_message_box').show();
63        $('#popup_message_box_dim').click(function (e)
64        {
65            doClose();
66        });
67        $('#popup_message_box_close').click(function (e)
68        {
69            doClose();
70        });
71        function doClose()
72        {
73            $('#popup_message_box').hide();
74            if (callback !== undefined && callback !== null)
75                callback();
76        }
77
78        switch (type)
79        {
80            case "error":
81                $('#popup_message_panel').attr("class", "panel panel-danger");
82                break;
83            case "success":
84                $('#popup_message_panel').attr("class", "panel panel-success");
85                break;
86            default:
87                $('#popup_message_panel').attr("class", "panel panel-default");
88                break;
89        }
90
91        $('#popup_message_box_dim').css('height', $(document).height() + 'px');
92    },
93    showMessageBoxWithTitle: function (msg, title, callback, type)
94    {
95        $('#msg_header').html(title);
96        $('#popup_message_box_content').text(msg);
97        $('#popup_message_box').show();
98        $('#popup_message_box_dim').click(function (e)
99        {
100            doClose();
101        });
102        $('#popup_message_box_close').click(function (e)
103        {
104            doClose();
105        });
106        function doClose()
107        {
108            $('#popup_message_box').hide();
109            if (callback !== undefined && callback !== null)
110                callback();
111        }
112
113        switch (type)
114        {
115            case "error":
116                $('#popup_message_panel').attr("class", "panel panel-danger");
117                break;
118            case "success":
119                $('#popup_message_panel').attr("class", "panel panel-success");
120                break;
121            default:
122                $('#popup_message_panel').attr("class", "panel panel-default");
123                break;
124        }
125
126        $('#popup_message_box_dim').css('height', $(document).height() + 'px');
127    },
128     clearError: function () {
129         $("input").change(function () {
130             $(this).parent().parent().removeClass('has-error');
131             $(this).next().empty();
132         });
133         $("textarea").change(function () {
134             $(this).parent().parent().removeClass('has-error');
135             $(this).next().empty();
136         });
137         $("select").change(function () {
138             $(this).parent().parent().removeClass('has-error');
139             $(this).next().empty();
140         });
141     },
142};
143
144
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)