How to test React Material UI Drawer Component attribute value in Cypress

user_9055240 0
Viewed 259

Given this MUI implementation within my react component:

 <Box sx={{ display: 'flex' }}>
      <Drawer
        name="permDrawer"
        open={openSideDrawer}
        style={{ zIndex: -1000 }}
        variant="permanent"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <Toolbar />
        <Box>
          <List
            sx={{
              [`& .active, & .${listItemClasses.root}:hover`]: {
                color: '#2196f3',
                fontWeight: 'bold',
                fontSize: '30'
              }
            }}
          >
            <ListItem>
              <ListItemButton
                sx={{
                  minHeight: 48,
                  justifyContent: open ? 'initial' : 'center',
                  px: 2.5,
                  paddingLeft: open ? 1 : 5
                }}
              >
                <ListItemIcon>
                  <HomeOutlined />
                </ListItemIcon>
                <ListItemText primary="Dashboard" sx={{ opeacity: open ? 0 : 1 }} />
              </ListItemButton>
            </ListItem>
          </List>
        </Box>
      </Drawer>
    </Box>

Im trying to test if the Drawer opens or not and I can successfully fire the click event and I see the expected behavior in my Cypress Test Runner. However I want to check the open attribute of the Drawer component as it changes from false to true because this is a more accurate test. But I am not able to get access to the open attribute given :

describe('When testing sideMenu', () => {
    
it('it should open sideMenu', () => {
  cy.readFile('./secrets/swb-shell/cypress-e2e.json').then((testConfig) => {
    cy.visit('/')

    cy.get('[data-automation-id="uname"]').type(testConfig.users[0].userid, { log: false })
    cy.get('[data-automation-id="pwd"]').type(testConfig.users[0].password, { log: false })
    cy.get('[data-automation-id="loginBtn"]').click()

    cy.get('[name="permDrawer"]').should('have.attr','open','false');
    cy.get('.MuiToolbar-root > :nth-child(1) > .MuiButtonBase-root').click()
    cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.visible');
 

  })
})

})

As I understand it MUI obfuscates the markup and it is recommended to use additional libraries in order to properly test. Am I missing a dependency in my testing or is there another way I should go about this? This is my first time testing within cypress and I havent worked with react in 3 years so Id really appreciate some context and help! Ty !

e2e-testing material-ui react-native cypress reactjs
1 Answers

Indeed the open attribute in the source is not present in the page at runtime.

You might try this to be "symmetrical"

cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.not.visible');
cy.get('.MuiToolbar-root > :nth-child(1) > .MuiButtonBase-root').click()
cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.visible');

but I think the drawer is actually added/removed rather than made visible/invisible, so

cy.get('.MuiDrawer-root > .MuiPaper-root').should('not.exist');
cy.get('.MuiToolbar-root > :nth-child(1) > .MuiButtonBase-root').click()
cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.visible');  // existence is implied

Checking openSideDrawer

You can add your own attribute for openSideDrawer

<Drawer
  name="permDrawer"
  open={openSideDrawer}
  data-cy-open={openSideDrawer}

cy.get('[name="permDrawer"]').should('have.attr','data-cy-open','false');
user_169977070
Related