test(ui-drawer-layout): migrate old DrawerLayout tests

Closes: INSTUI-4206
instructure · Oct 1, 2024 · e1a4af5 · e1a4af5
1 parent ff2618e
commit e1a4af5
Show file tree

Hide file tree

Showing 14 changed files with 644 additions and 606 deletions.
diff --git a/cypress/component/Dialog.cy.tsx b/cypress/component/Dialog.cy.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React, { useState, useRef } from 'react'
-import { Dialog } from '../../packages/ui'
+import { Dialog } from '@instructure/ui'
 import 'cypress-real-events'
 
 import '../support/component'
@@ -96,7 +96,7 @@ describe('<Dialog/>', () => {
 
         cy.get('[data-testid="nested-input-one"]').click().should('have.focus')
 
-        cy.realPress(['Shift', 'Tab'])
+        cy.realPress(['Shift', 'Tab']).wait(100)
         cy.get('[data-testid="nested-input-two"]').should('have.focus')
         cy.wrap(onBlur).should('not.have.been.called')
       })
@@ -114,7 +114,7 @@ describe('<Dialog/>', () => {
 
         cy.get('[data-testid="nested-input-two"]').click().should('have.focus')
 
-        cy.realPress(['Tab'])
+        cy.realPress(['Tab']).wait(100)
         cy.wrap(onBlur).should('have.been.called')
       })
 

diff --git a/cypress/component/DrawerLayout.cy.tsx b/cypress/component/DrawerLayout.cy.tsx
@@ -0,0 +1,201 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import { expect } from 'chai'
+
+import '../support/component'
+import { px, within } from '@instructure/ui-utils'
+import DrawerLayoutFixture from '../../packages/ui-drawer-layout/src/DrawerLayout/__fixtures__/DrawerLayout.fixture'
+
+describe('<DrawerLayout/>', () => {
+  it('with no overlay, layout content should have margin equal to tray width with placement=start', () => {
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="800px"
+        trayWidth="250px"
+        placement="start"
+      />
+    )
+
+    cy.contains('div', 'Hello from tray').then(($tray) => {
+      const trayWidth = px($tray.css('width'))
+
+      cy.get('div[class$="-drawerLayout__content"]').should(($content) => {
+        const marginLeft = px($content.css('margin-left'))
+
+        expect(within(marginLeft, 250, 2)).to.equal(true)
+        expect(marginLeft).to.equal(trayWidth)
+      })
+    })
+  })
+
+  it(`with no overlay, layout content should have margin equal to tray width with placement=end`, async () => {
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        placement="end"
+        layoutWidth="800px"
+        trayWidth="250px"
+      />
+    )
+
+    cy.contains('div', 'Hello from tray').then(($tray) => {
+      const trayWidth = px($tray.css('width'))
+
+      cy.get('div[class$="-drawerLayout__content"]').should(($content) => {
+        const marginRight = px($content.css('margin-right'))
+
+        expect(within(marginRight, 250, 2)).to.equal(true)
+        expect(marginRight).to.equal(trayWidth)
+      })
+    })
+  })
+
+  it(`with overlay, layout content should have a margin of zero with placement=start`, async () => {
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="700px"
+        trayWidth="250px"
+        placement="start"
+      />
+    )
+
+    cy.get('div[class$="-drawerLayout__content"]').should(($content) => {
+      const marginLeft = px($content.css('margin-left'))
+
+      expect(marginLeft).to.equal(0)
+    })
+  })
+
+  it(`with overlay, layout content should have a margin of zero with placement=end`, async () => {
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        placement="end"
+        layoutWidth="700px"
+        trayWidth="250px"
+      />
+    )
+
+    cy.get('div[class$="-drawerLayout__content"]').should(($content) => {
+      const marginRight = px($content.css('margin-right'))
+
+      expect(marginRight).to.equal(0)
+    })
+  })
+
+  it('the tray should overlay the content when the content is less than the minWidth', async () => {
+    const onOverlayTrayChange = cy.spy()
+
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="800px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    // set prop layoutWidth
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="295px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    cy.wrap(onOverlayTrayChange).should('have.been.calledWith', true)
+  })
+
+  it('the tray should stop overlaying the content when there is enough space for the content', async () => {
+    const onOverlayTrayChange = cy.spy()
+
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="400px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    // set prop layoutWidth
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="705px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    cy.wrap(onOverlayTrayChange).should('have.been.calledWith', false)
+  })
+
+  it('the tray should be set to overlay when it is opened and there is not enough space', async () => {
+    const onOverlayTrayChange = cy.spy()
+
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="295px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    // set prop open
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="295px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    cy.wrap(onOverlayTrayChange).should('have.been.calledWith', true)
+  })
+
+  it('the tray should not overlay on open when there is enough space', async () => {
+    const onOverlayTrayChange = cy.spy()
+
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="705px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    // set prop open
+    cy.mount(
+      <DrawerLayoutFixture
+        open={true}
+        layoutWidth="705px"
+        onOverlayTrayChange={onOverlayTrayChange}
+      />
+    )
+
+    cy.wrap(onOverlayTrayChange).should('have.been.calledWith', false)
+  })
+})
diff --git a/cypress/component/DrawerTray.cy.tsx b/cypress/component/DrawerTray.cy.tsx
@@ -0,0 +1,138 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+
+import '../support/component'
+import canvas from '@instructure/ui-themes'
+import {
+  DrawerLayoutContext,
+  DrawerTray
+} from '@instructure/ui-drawer-layout/src/DrawerLayout'
+import { InstUISettingsProvider } from '@instructure/emotion'
+
+describe('<DrawerTray/>', () => {
+  it('should render tray content when open', async () => {
+    cy.mount(
+      <DrawerTray
+        label="DrawerTray Example"
+        open={true}
+        render={() => {
+          return 'Hello from layout tray'
+        }}
+      />
+    )
+    cy.get('div[class$="-drawerTray__content"]').should(
+      'have.text',
+      'Hello from layout tray'
+    )
+  })
+
+  it('should not render tray content when closed', async () => {
+    cy.mount(
+      <DrawerTray
+        label="DrawerTray Example"
+        render={() => {
+          return 'Hello from layout tray'
+        }}
+      />
+    )
+    cy.get('div[class$="-drawerTray__content"]').should('not.exist')
+  })
+
+  it(`should place the tray correctly with placement=start`, async () => {
+    cy.mount(
+      <DrawerTray
+        label="DrawerTray Example"
+        open={true}
+        placement="start"
+        render={() => {
+          return 'Hello from layout tray'
+        }}
+      />
+    )
+    cy.get('div[class$="-drawerTray__content"]')
+      .parent()
+      .should('have.css', 'left', '0px')
+  })
+
+  it(`should place the tray correctly with placement=end`, async () => {
+    cy.mount(
+      <DrawerTray
+        label="DrawerTray Example"
+        open={true}
+        placement="end"
+        render={() => {
+          return 'Hello from layout tray'
+        }}
+      />
+    )
+    cy.get('div[class$="-drawerTray__content"]')
+      .parent()
+      .should('have.css', 'right', '0px')
+  })
+
+  it('should apply theme overrides when open', async () => {
+    cy.mount(
+      <DrawerTray
+        label="DrawerTray Example"
+        open={true}
+        themeOverride={{ zIndex: 333 }}
+        render={() => {
+          return 'Hello from layout tray'
+        }}
+      />
+    )
+    cy.get('div[class$="-drawerTray__content"]')
+      .parent()
+      .should('have.css', 'z-index', '333')
+  })
+
+  it('drops a shadow if the prop is set, and it is overlaying content', async () => {
+    const onEntered = cy.spy()
+    cy.mount(
+      <DrawerLayoutContext.Provider value={true}>
+        <InstUISettingsProvider theme={canvas}>
+          <DrawerTray
+            label="DrawerTray Example"
+            open={true}
+            shadow={true}
+            onEntered={onEntered}
+            render={() => {
+              return 'Hello from layout tray'
+            }}
+          />
+        </InstUISettingsProvider>
+      </DrawerLayoutContext.Provider>
+    )
+    cy.get('div[class*="-drawerTray--with-shadow"]').should(
+      'have.css',
+      'box-shadow'
+    )
+    cy.get('div[class*="-drawerTray--with-shadow"]').should(
+      'not.have.css',
+      'box-shadow',
+      'none'
+    )
+  })
+})