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

MainListItems.js

Source: MainListItems.js Github

copy
1import React, { useContext, useEffect, useState } from "react";
2import { Link as RouterLink } from "react-router-dom";
3
4import ListItem from "@material-ui/core/ListItem";
5import ListItemIcon from "@material-ui/core/ListItemIcon";
6import ListItemText from "@material-ui/core/ListItemText";
7import ListSubheader from "@material-ui/core/ListSubheader";
8import Divider from "@material-ui/core/Divider";
9import { Badge } from "@material-ui/core";
10import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
11import WhatsAppIcon from "@material-ui/icons/WhatsApp";
12import SyncAltIcon from "@material-ui/icons/SyncAlt";
13import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
14import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
15import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
16import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
17import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
18
19import { i18n } from "../translate/i18n";
20import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
21import { AuthContext } from "../context/Auth/AuthContext";
22import { Can } from "../components/Can";
23
24function ListItemLink(props) {
25  const { icon, primary, to, className } = props;
26
27  const renderLink = React.useMemo(
28    () =>
29      React.forwardRef((itemProps, ref) => (
30        <RouterLink to={to} ref={ref} {...itemProps} />
31      )),
32    [to]
33  );
34
35  return (
36    <li>
37      <ListItem button component={renderLink} className={className}>
38        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
39        <ListItemText primary={primary} />
40      </ListItem>
41    </li>
42  );
43}
44
45const MainListItems = (props) => {
46  const { drawerClose } = props;
47  const { whatsApps } = useContext(WhatsAppsContext);
48  const { user } = useContext(AuthContext);
49  const [connectionWarning, setConnectionWarning] = useState(false);
50
51  useEffect(() => {
52    const delayDebounceFn = setTimeout(() => {
53      if (whatsApps.length > 0) {
54        const offlineWhats = whatsApps.filter((whats) => {
55          return (
56            whats.status === "qrcode" ||
57            whats.status === "PAIRING" ||
58            whats.status === "DISCONNECTED" ||
59            whats.status === "TIMEOUT" ||
60            whats.status === "OPENING"
61          );
62        });
63        if (offlineWhats.length > 0) {
64          setConnectionWarning(true);
65        } else {
66          setConnectionWarning(false);
67        }
68      }
69    }, 2000);
70    return () => clearTimeout(delayDebounceFn);
71  }, [whatsApps]);
72
73  return (
74    <div onClick={drawerClose}>
75      <ListItemLink
76        to="/"
77        primary="Dashboard"
78        icon={<DashboardOutlinedIcon />}
79      />
80      <ListItemLink
81        to="/connections"
82        primary={i18n.t("mainDrawer.listItems.connections")}
83        icon={
84          <Badge badgeContent={connectionWarning ? "!" : 0} color="error">
85            <SyncAltIcon />
86          </Badge>
87        }
88      />
89      <ListItemLink
90        to="/tickets"
91        primary={i18n.t("mainDrawer.listItems.tickets")}
92        icon={<WhatsAppIcon />}
93      />
94
95      <ListItemLink
96        to="/contacts"
97        primary={i18n.t("mainDrawer.listItems.contacts")}
98        icon={<ContactPhoneOutlinedIcon />}
99      />
100      <ListItemLink
101        to="/quickAnswers"
102        primary={i18n.t("mainDrawer.listItems.quickAnswers")}
103        icon={<QuestionAnswerOutlinedIcon />}
104      />
105      <Can
106        role={user.profile}
107        perform="drawer-admin-items:view"
108        yes={() => (
109          <>
110            <Divider />
111            <ListSubheader inset>
112              {i18n.t("mainDrawer.listItems.administration")}
113            </ListSubheader>
114            <ListItemLink
115              to="/users"
116              primary={i18n.t("mainDrawer.listItems.users")}
117              icon={<PeopleAltOutlinedIcon />}
118            />
119            <ListItemLink
120              to="/queues"
121              primary={i18n.t("mainDrawer.listItems.queues")}
122              icon={<AccountTreeOutlinedIcon />}
123            />
124            <ListItemLink
125              to="/settings"
126              primary={i18n.t("mainDrawer.listItems.settings")}
127              icon={<SettingsOutlinedIcon />}
128            />
129          </>
130        )}
131      />
132    </div>
133  );
134};
135
136export default MainListItems;
137
Full Screen

listItems.js

Source: listItems.js Github

copy
1import React from 'react';
2import ListItem from '@material-ui/core/ListItem';
3import ListItemIcon from '@material-ui/core/ListItemIcon';
4import ListItemText from '@material-ui/core/ListItemText';
5import ListSubheader from '@material-ui/core/ListSubheader';
6import DashboardIcon from '@material-ui/icons/Dashboard';
7import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
8import PeopleIcon from '@material-ui/icons/People';
9import BarChartIcon from '@material-ui/icons/BarChart';
10import LayersIcon from '@material-ui/icons/Layers';
11import AssignmentIcon from '@material-ui/icons/Assignment';
12
13function ListItemLink(props) {
14  return <ListItem button component="a" {...props} />;
15}
16
17export const mainListItems = (
18  <div>
19    <ListItem button>
20      <ListItemIcon>
21        <DashboardIcon />
22      </ListItemIcon>
23      <ListItemLink href="#/emailAdmin"><ListItemText primary="邮件列表" /></ListItemLink>
24    </ListItem>
25    <ListItem button>
26      <ListItemIcon>
27        <DashboardIcon />
28      </ListItemIcon>
29      <ListItemLink href="#/admin"><ListItemText primary="考试题列表" /></ListItemLink>
30    </ListItem>
31    <ListItem button>
32      <ListItemIcon>
33        <DashboardIcon />
34      </ListItemIcon>
35      <ListItemLink href="#/commonReplyAdmin"><ListItemText primary="常见问题列表" /></ListItemLink>
36    </ListItem>    
37    <ListItem button>
38      <ListItemIcon>
39        <DashboardIcon />
40      </ListItemIcon>
41      <ListItemLink href="#/courseAdmin"><ListItemText primary="课程列表" /></ListItemLink>
42    </ListItem>
43    <ListItem button>
44      <ListItemIcon>
45        <DashboardIcon />
46      </ListItemIcon>
47      <ListItemLink href="#/rateAdmin"><ListItemText primary="评分列表" /></ListItemLink>
48    </ListItem>
49    <ListItem button>
50      <ListItemIcon>
51        <DashboardIcon />
52      </ListItemIcon>
53      <ListItemLink href="#/videoAdmin"><ListItemText primary="视频列表" /></ListItemLink>
54    </ListItem>
55    <ListItem button>
56      <ListItemIcon>
57        <DashboardIcon />
58      </ListItemIcon>
59      <ListItemLink href="#/arrangeCoach"><ListItemText primary="分配教练" /></ListItemLink>
60    </ListItem>    
61    <ListItem button>
62      <ListItemIcon>
63        <DashboardIcon />
64      </ListItemIcon>
65      <ListItemLink href="#/coachAdmin"><ListItemText primary="教练列表" /></ListItemLink>
66    </ListItem>
67    <ListItem button>
68      <ListItemIcon>
69        <DashboardIcon />
70      </ListItemIcon>
71      <ListItemLink href="#/linkAdmin"><ListItemText primary="链接列表" /></ListItemLink>
72    </ListItem>
73    <ListItem button>
74      <ListItemIcon>
75        <DashboardIcon />
76      </ListItemIcon>
77      <ListItemLink href="#/translateAdmin"><ListItemText primary="翻译列表" /></ListItemLink>
78    </ListItem>
79    <ListItem button>
80      <ListItemIcon>
81        <DashboardIcon />
82      </ListItemIcon>
83      <ListItemLink href="#/websiteAdmin"><ListItemText primary="网站信息" /></ListItemLink>
84    </ListItem>
85    <ListItem button>
86      <ListItemIcon>
87        <DashboardIcon />
88      </ListItemIcon>
89      <ListItemLink href="#/couponAdmin"><ListItemText primary="优惠券列表" /></ListItemLink>
90    </ListItem>
91    <ListItem button>
92      <ListItemIcon>
93        <DashboardIcon />
94      </ListItemIcon>
95      <ListItemLink href="#/studentAdmin"><ListItemText primary="学生列表" /></ListItemLink>
96    </ListItem>
97    <ListItem button>
98      <ListItemIcon>
99        <DashboardIcon />
100      </ListItemIcon>
101      <ListItemLink href="#/classAdmin"><ListItemText primary="理论课时间添加" /></ListItemLink>
102    </ListItem>
103    <ListItem button>
104      <ListItemIcon>
105        <DashboardIcon />
106      </ListItemIcon>
107      <ListItemLink href="#/priceAdmin"><ListItemText primary="价格列表" /></ListItemLink>
108    </ListItem>
109    <ListItem button>
110      <ListItemIcon>
111        <DashboardIcon />
112      </ListItemIcon>
113      <ListItemLink href="#/reservationList"><ListItemText primary="学员课程列表" /></ListItemLink>
114    </ListItem>
115
116    {/* <ListItem button>
117      <ListItemIcon>
118        <ShoppingCartIcon />
119      </ListItemIcon>
120      <ListItemText primary="Orders" />
121    </ListItem>
122    <ListItem button>
123      <ListItemIcon>
124        <PeopleIcon />
125      </ListItemIcon>
126      <ListItemText primary="Customers" />
127    </ListItem>
128    <ListItem button>
129      <ListItemIcon>
130        <BarChartIcon />
131      </ListItemIcon>
132      <ListItemText primary="Reports" />
133    </ListItem>
134    <ListItem button>
135      <ListItemIcon>
136        <LayersIcon />
137      </ListItemIcon>
138      <ListItemText primary="Integrations" />
139    </ListItem> */}
140  </div>
141);
142
143export const secondaryListItems = (
144  <div>
145    <ListSubheader inset>Saved reports</ListSubheader>
146    <ListItem button>
147      <ListItemIcon>
148        <AssignmentIcon />
149      </ListItemIcon>
150      <ListItemText primary="Current month" />
151    </ListItem>
152    <ListItem button>
153      <ListItemIcon>
154        <AssignmentIcon />
155      </ListItemIcon>
156      <ListItemText primary="Last quarter" />
157    </ListItem>
158    <ListItem button>
159      <ListItemIcon>
160        <AssignmentIcon />
161      </ListItemIcon>
162      <ListItemText primary="Year-end sale" />
163    </ListItem>
164  </div>
165);
166
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)