add full material ui list demo

Author: bahmutov

cypress/component/component tests/advanced/material-ui-example/list-demo.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Divider from '@material-ui/core/Divider'
+import InboxIcon from '@material-ui/icons/Inbox'
+import DraftsIcon from '@material-ui/icons/Drafts'
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+}))
+
+function ListItemLink(props) {
+ return <ListItem button component="a" {...props} />
+}
+
+export default function SimpleList() {
+ const classes = useStyles()
+
+ return (
+ <div className={classes.root}>
+ <List component="nav" aria-label="main mailbox folders">
+ <ListItem button>
+ <ListItemIcon>
+ <InboxIcon />
+ </ListItemIcon>
+ <ListItemText primary="Inbox" />
+ </ListItem>
+ <ListItem button>
+ <ListItemIcon>
+ <DraftsIcon />
+ </ListItemIcon>
+ <ListItemText primary="Drafts" />
+ </ListItem>
+ </List>
+ <Divider />
+ <List component="nav" aria-label="secondary mailbox folders">
+ <ListItem button>
+ <ListItemText primary="Trash" />
+ </ListItem>
+ <ListItemLink href="#simple-list">
+ <ListItemText primary="Spam" />
+ </ListItemLink>
+ </List>
+ </div>
+ )
+}

cypress/component/component tests/advanced/material-ui-example/list-item-spec.js

@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import ListItem from '@material-ui/core/ListItem'
+import { ListItemText } from '@material-ui/core'
+import SimpleList from './list-demo'
+
+it('renders a list item', () => {
+ const Demo = () => (
+ <ListItem>
+ <ListItemText primary={'my example list item'} />
+ </ListItem>
+ )
+ mount(<Demo />)
+ cy.contains('my example list item')
+})
+
+// demo from https://material-ui.com/components/lists/
+it('renders full list', () => {
+ cy.viewport(500, 800)
+ mount(<SimpleList />)
+ cy.contains('Drafts')
+ .click()
+ .wait(1000)
+ .click()
+ .wait(1000)
+ .click()
+})