From e1a4af5230ceee5e1f3ea3d2d3d0508d7a3fbaa4 Mon Sep 17 00:00:00 2001 From: Nandor_Czegledi Date: Fri, 13 Sep 2024 19:13:59 +0200 Subject: [PATCH] test(ui-drawer-layout): migrate old DrawerLayout tests Closes: INSTUI-4206 --- cypress/component/Dialog.cy.tsx | 6 +- cypress/component/DrawerLayout.cy.tsx | 201 +++++++++++++ cypress/component/DrawerTray.cy.tsx | 138 +++++++++ package-lock.json | 61 +++- packages/ui-drawer-layout/package.json | 6 +- .../DrawerContent/DrawerContentLocator.ts | 30 -- .../DrawerContent.test.tsx | 59 ++-- .../DrawerTray/DrawerTrayLocator.ts | 30 -- .../__new-tests__/DrawerTray.test.tsx | 187 ++++++++++++ .../DrawerTray/__tests__/DrawerTray.test.tsx | 266 ------------------ .../DrawerLayout.test.tsx} | 41 +-- .../__tests__/DrawerLayout.test.tsx | 194 ------------- .../src/DrawerLayout/locator.ts | 30 -- packages/ui-drawer-layout/tsconfig.build.json | 1 - 14 files changed, 644 insertions(+), 606 deletions(-) create mode 100644 cypress/component/DrawerLayout.cy.tsx create mode 100644 cypress/component/DrawerTray.cy.tsx delete mode 100644 packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/DrawerContentLocator.ts rename packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/{__tests__ => __new-tests__}/DrawerContent.test.tsx (60%) delete mode 100644 packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/DrawerTrayLocator.ts create mode 100644 packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__new-tests__/DrawerTray.test.tsx delete mode 100644 packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__tests__/DrawerTray.test.tsx rename packages/ui-drawer-layout/src/DrawerLayout/{DrawerLayoutLocator.ts => __new-tests__/DrawerLayout.test.tsx} (54%) delete mode 100644 packages/ui-drawer-layout/src/DrawerLayout/__tests__/DrawerLayout.test.tsx delete mode 100644 packages/ui-drawer-layout/src/DrawerLayout/locator.ts diff --git a/cypress/component/Dialog.cy.tsx b/cypress/component/Dialog.cy.tsx index 84ce06a345..4e0d08d3f5 100644 --- 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('', () => { 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('', () => { 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 new file mode 100644 index 0000000000..3efedd2f54 --- /dev/null +++ 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('', () => { + it('with no overlay, layout content should have margin equal to tray width with placement=start', () => { + cy.mount( + + ) + + 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( + + ) + + 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( + + ) + + 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( + + ) + + 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( + + ) + + // set prop layoutWidth + cy.mount( + + ) + + 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( + + ) + + // set prop layoutWidth + cy.mount( + + ) + + 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( + + ) + + // set prop open + cy.mount( + + ) + + 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( + + ) + + // set prop open + cy.mount( + + ) + + cy.wrap(onOverlayTrayChange).should('have.been.calledWith', false) + }) +}) diff --git a/cypress/component/DrawerTray.cy.tsx b/cypress/component/DrawerTray.cy.tsx new file mode 100644 index 0000000000..ac5fb2ad32 --- /dev/null +++ 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('', () => { + it('should render tray content when open', async () => { + cy.mount( + { + 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( + { + 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( + { + 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( + { + 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( + { + 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( + + + { + return 'Hello from layout tray' + }} + /> + + + ) + 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' + ) + }) +}) diff --git a/package-lock.json b/package-lock.json index 95b90c1ca5..47ca96e482 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42710,13 +42710,70 @@ }, "devDependencies": { "@instructure/ui-babel-preset": "10.2.2", - "@instructure/ui-test-locator": "10.2.2", - "@instructure/ui-themes": "10.2.2" + "@instructure/ui-themes": "10.2.2", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^15.0.7", + "vitest": "^2.0.2" }, "peerDependencies": { "react": ">=16.8 <=18" } }, + "packages/ui-drawer-layout/node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "packages/ui-drawer-layout/node_modules/@testing-library/react": { + "version": "15.0.7", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-15.0.7.tgz", + "integrity": "sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@testing-library/dom": "^10.0.0", + "@types/react-dom": "^18.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/react": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "packages/ui-drawer-layout/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "dequal": "^2.0.3" + } + }, "packages/ui-drilldown": { "name": "@instructure/ui-drilldown", "version": "10.2.2", diff --git a/packages/ui-drawer-layout/package.json b/packages/ui-drawer-layout/package.json index 3e9f7a856e..b1e98b3f18 100644 --- a/packages/ui-drawer-layout/package.json +++ b/packages/ui-drawer-layout/package.json @@ -45,8 +45,10 @@ }, "devDependencies": { "@instructure/ui-babel-preset": "10.2.2", - "@instructure/ui-test-locator": "10.2.2", - "@instructure/ui-themes": "10.2.2" + "@instructure/ui-themes": "10.2.2", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^15.0.7", + "vitest": "^2.0.2" }, "peerDependencies": { "react": ">=16.8 <=18" diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/DrawerContentLocator.ts b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/DrawerContentLocator.ts deleted file mode 100644 index 76016199dc..0000000000 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/DrawerContentLocator.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* - * 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 { locator } from '@instructure/ui-test-locator' - -import { DrawerContent } from './index' - -// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message -export const DrawerContentLocator = locator(DrawerContent.selector) diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/__tests__/DrawerContent.test.tsx b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/__new-tests__/DrawerContent.test.tsx similarity index 60% rename from packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/__tests__/DrawerContent.test.tsx rename to packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/__new-tests__/DrawerContent.test.tsx index 4661166109..73f969f79f 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/__tests__/DrawerContent.test.tsx +++ b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/__new-tests__/DrawerContent.test.tsx @@ -22,50 +22,49 @@ * SOFTWARE. */ import React from 'react' - -import { expect, mount, stub, wait } from '@instructure/ui-test-utils' +import { render, screen, waitFor } from '@testing-library/react' +import { vi } from 'vitest' +import '@testing-library/jest-dom' import { DrawerContent } from '../index' -import { DrawerContentLocator } from '../DrawerContentLocator' - -describe('', async () => { +describe('', () => { it('should render', async () => { - await mount( - Hello World + render(Hello World) + const drawerContent = screen.getByLabelText('DrawerContentTest') + + expect(drawerContent).toBeInTheDocument() + expect(drawerContent).toHaveTextContent('Hello World') + }) + + it('should call the content ref', async () => { + const contentRef = vi.fn() + render( + + Hello World + ) - const drawerContent = await DrawerContentLocator.find() + const drawerContent = screen.getByLabelText('DrawerContentTest') - expect(drawerContent).to.exist() + expect(contentRef).toHaveBeenCalledWith(drawerContent) }) it('should not transition on mount, just on update', async () => { - const subject = await mount( + const { rerender } = render( Hello World ) + const drawerContent = screen.getByLabelText('DrawerContentTest') - const style = getComputedStyle(subject.getDOMNode()) - expect(style.transition).to.equal('all') + const styleOnMount = getComputedStyle(drawerContent) + expect(styleOnMount.transition).toBe('') - subject.setProps({ - label: 'test' - }) + rerender(Hello World) - await wait(() => { - const style = getComputedStyle(subject.getDOMNode()) - expect(style.transition).to.not.equal('all') - }) - }) - - it('should call the content ref', async () => { - const contentRef = stub() - await mount( - - Hello World - - ) - const drawerContent = (await DrawerContentLocator.find()).getDOMNode() + await waitFor(() => { + const drawerContentUpdated = screen.getByLabelText('test') + const updatedStyle = getComputedStyle(drawerContentUpdated) - expect(contentRef).to.have.been.calledWith(drawerContent) + expect(updatedStyle.transition).not.toBe('') + }) }) }) diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/DrawerTrayLocator.ts b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/DrawerTrayLocator.ts deleted file mode 100644 index 5f79ea65b8..0000000000 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/DrawerTrayLocator.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* - * 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 { locator } from '@instructure/ui-test-locator' - -import { DrawerTray } from './index' - -// @ts-ignore: property 'selector' does not exist on typeof DrawerTray -export const DrawerTrayLocator = locator(DrawerTray.selector) diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__new-tests__/DrawerTray.test.tsx b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__new-tests__/DrawerTray.test.tsx new file mode 100644 index 0000000000..b09c4aa992 --- /dev/null +++ b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__new-tests__/DrawerTray.test.tsx @@ -0,0 +1,187 @@ +/* + * 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 { render, screen, waitFor } from '@testing-library/react' +import { vi } from 'vitest' +import '@testing-library/jest-dom' + +import { DrawerTray } from '../index' +import { DrawerLayoutContext } from '../../index' + +describe('', () => { + it('should render tray content when open', async () => { + render( + { + return 'Hello from layout tray' + }} + /> + ) + const drawerTray = screen.getByLabelText('DrawerTray Example') + + expect(drawerTray).toBeInTheDocument() + expect(drawerTray).toHaveTextContent('Hello from layout tray') + }) + + it('should call the contentRef', async () => { + const contentRef = vi.fn() + render( + { + return 'Hello from layout tray' + }} + /> + ) + const drawerTray = screen.getByLabelText('DrawerTray Example') + + expect(contentRef).toHaveBeenCalledWith(drawerTray.parentElement) + }) + + it('should call onOpen', async () => { + const onOpen = vi.fn() + + const { rerender } = render( + { + return 'Hello from layout tray' + }} + /> + ) + + expect(onOpen).not.toHaveBeenCalled() + + // set prop open + rerender( + { + return 'Hello from layout tray' + }} + /> + ) + + await waitFor(() => { + expect(onOpen).toHaveBeenCalled() + }) + }) + + it('should call onOpen when open initially', async () => { + const onOpen = vi.fn() + render( + { + return 'Hello from layout tray' + }} + /> + ) + + await waitFor(() => { + expect(onOpen).toHaveBeenCalled() + }) + }) + + it('should call onClose', async () => { + const onClose = vi.fn() + + const { rerender } = render( + { + return 'Hello from layout tray' + }} + /> + ) + + expect(onClose).not.toHaveBeenCalled() + + // set prop open + rerender( + { + return 'Hello from layout tray' + }} + /> + ) + + await waitFor(() => { + expect(onClose).toHaveBeenCalled() + }) + }) + + describe('should apply the a11y attributes', () => { + it("when it doesn't overlay the content", async () => { + render( + + { + return 'Hello from layout tray' + }} + /> + + ) + const drawerTray = screen.getByLabelText('a tray test') + + expect(drawerTray).toBeInTheDocument() + expect(drawerTray).toHaveAttribute('role', 'region') + }) + + it('when it overlays the content', async () => { + render( + + { + return 'Hello from layout tray' + }} + /> + + ) + const drawerTray = screen.getByLabelText('a tray test') + + expect(drawerTray).toBeInTheDocument() + expect(drawerTray).toHaveAttribute('role', 'dialog') + }) + }) +}) diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__tests__/DrawerTray.test.tsx b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__tests__/DrawerTray.test.tsx deleted file mode 100644 index d453bfa849..0000000000 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/__tests__/DrawerTray.test.tsx +++ /dev/null @@ -1,266 +0,0 @@ -/* - * 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, mount, stub, wait } from '@instructure/ui-test-utils' -import { DrawerTray } from '../index' -import { DrawerTrayLocator } from '../DrawerTrayLocator' -import { InstUISettingsProvider } from '@instructure/emotion' -import canvas from '@instructure/ui-themes' -import { DrawerLayoutContext } from '../../index' - -describe('', async () => { - it(`should place the tray correctly with placement=start`, async () => { - await mount( - { - return 'Hello from layout tray' - }} - /> - ) - const drawerTray = await DrawerTrayLocator.find() - expect(drawerTray).to.exist() - await wait(() => { - expect(drawerTray.getComputedStyle().left).to.equal('0px') - }) - }) - - it(`should place the tray correctly with placement=end`, async () => { - await mount( - { - return 'Hello from layout tray' - }} - /> - ) - const drawerTray = await DrawerTrayLocator.find() - expect(drawerTray).to.exist() - await wait(() => { - expect(drawerTray.getComputedStyle().right).to.equal('0px') - }) - }) - - it('should render tray content when open', async () => { - await mount( - { - return 'Hello from layout tray' - }} - /> - ) - const drawerTray = await DrawerTrayLocator.find( - ':label(DrawerTray Example):contains(Hello from layout tray)' - ) - - expect(drawerTray).to.exist() - }) - - it('should not render tray content when closed', async () => { - await mount( - { - return 'Hello from layout tray' - }} - /> - ) - const drawerTray = await DrawerTrayLocator.find({ expectEmpty: true }) - - expect(drawerTray).to.not.exist() - }) - - it('should apply theme overrides when open', async () => { - await mount( - { - return 'Hello from layout tray' - }} - /> - ) - const drawerTray = await DrawerTrayLocator.find() - - expect(drawerTray).to.exist() - expect(drawerTray.getComputedStyle().zIndex).to.equal('333') - }) - - it('should call the contentRef', async () => { - const contentRef = stub() - await mount( - { - return 'Hello from layout tray' - }} - /> - ) - const drawerTray = (await DrawerTrayLocator.find()).getDOMNode() - - expect(contentRef).to.have.been.calledWith(drawerTray) - }) - - it('should call onOpen ', async () => { - const onOpen = stub() - - const subject = await mount( - { - return 'Hello from layout tray' - }} - /> - ) - - expect(onOpen).to.not.have.been.called() - - subject.setProps({ - open: true - }) - - await wait(() => { - expect(onOpen).to.have.been.called() - }) - }) - - it('should call onOpen when open initially', async () => { - const onOpen = stub() - await mount( - { - return 'Hello from layout tray' - }} - /> - ) - - await wait(() => { - expect(onOpen).to.have.been.called() - }) - }) - - it('should call onClose ', async () => { - const onClose = stub() - - const subject = await mount( - { - return 'Hello from layout tray' - }} - /> - ) - - expect(onClose).to.not.have.been.called() - - subject.setProps({ - open: false - }) - - await wait(() => { - expect(onClose).to.have.been.called() - }) - }) - - it('drops a shadow if the prop is set, and it is overlaying content', async () => { - const onEntered = stub() - await mount( - - - { - return 'Hello from layout tray' - }} - /> - - - ) - const drawerTray = await DrawerTrayLocator.find() - - expect(drawerTray.getComputedStyle().boxShadow.toString()).to.not.equal( - 'none' - ) - }) - - describe('should apply the a11y attributes', async () => { - it("when it doesn't overlay the content", async () => { - await mount( - - { - return 'Hello from layout tray' - }} - /> - - ) - const drawerTray = await DrawerTrayLocator.find() - const dialog = await drawerTray.find(':label(a tray test)') - - expect(dialog).to.exist() - expect(dialog.getAttribute('role')).to.equal('region') - }) - - it('when it overlays the content', async () => { - await mount( - - { - return 'Hello from layout tray' - }} - /> - - ) - const drawerTray = await DrawerTrayLocator.find() - const dialog = await drawerTray.find(':label(a tray test)') - - expect(dialog).to.exist() - expect(dialog.getAttribute('role')).to.equal('dialog') - }) - }) -}) diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerLayoutLocator.ts b/packages/ui-drawer-layout/src/DrawerLayout/__new-tests__/DrawerLayout.test.tsx similarity index 54% rename from packages/ui-drawer-layout/src/DrawerLayout/DrawerLayoutLocator.ts rename to packages/ui-drawer-layout/src/DrawerLayout/__new-tests__/DrawerLayout.test.tsx index 8377faa90f..125cb8e4ae 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerLayoutLocator.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/__new-tests__/DrawerLayout.test.tsx @@ -21,28 +21,33 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ +import React from 'react' +import { render, screen } from '@testing-library/react' +import '@testing-library/jest-dom' -import { locator } from '@instructure/ui-test-locator' +import DrawerLayoutFixture from '../__fixtures__/DrawerLayout.fixture' -import { DrawerLayout } from './index' +describe('', () => { + it('should render', () => { + const { container } = render() -import { DrawerContentLocator } from './DrawerContent/DrawerContentLocator' -import { DrawerTrayLocator } from './DrawerTray/DrawerTrayLocator' + const layout = container.querySelector('div[class$="-drawerLayout"]') -export { DrawerContentLocator, DrawerTrayLocator } + expect(layout).toBeInTheDocument() + }) -// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message -export const DrawerLayoutLocator = locator(DrawerLayout.selector, { - findContent: (...args: any[]) => DrawerContentLocator.find(...args), + it('should render a DrawerTray and DrawerContent', async () => { + const { container } = render( + + ) - findTray: (element: any, ...args: any[]) => { - if (element && element.getAttribute) { - const id = element.getAttribute(DrawerLayout.locatorAttribute) - return locator(`[${DrawerLayout.Tray.locatorAttribute}="${id}"]`).find( - ...args - ) - } else { - return null - } - } + const tray = screen.getByText('Hello from tray') + const contentWrapper = container.querySelector( + 'div[class$="drawerLayout__content"]' + ) + + expect(tray).toBeInTheDocument() + expect(contentWrapper).toHaveTextContent('Hello from content') + expect(contentWrapper).toHaveAttribute('aria-label', 'Test DrawerContent') + }) }) diff --git a/packages/ui-drawer-layout/src/DrawerLayout/__tests__/DrawerLayout.test.tsx b/packages/ui-drawer-layout/src/DrawerLayout/__tests__/DrawerLayout.test.tsx deleted file mode 100644 index c9580e1b9e..0000000000 --- a/packages/ui-drawer-layout/src/DrawerLayout/__tests__/DrawerLayout.test.tsx +++ /dev/null @@ -1,194 +0,0 @@ -/* - * 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 { px, within } from '@instructure/ui-utils' -import { expect, mount, stub, wait } from '@instructure/ui-test-utils' - -import DrawerLayoutFixture from '../__fixtures__/DrawerLayout.fixture' -import { DrawerLayoutLocator } from '../DrawerLayoutLocator' - -describe('', async () => { - it('should render', async () => { - await mount() - const layout = await DrawerLayoutLocator.find() - - expect(layout).to.exist() - }) - - it('should render a DrawerTray and DrawerContent', async () => { - await mount( - - ) - - const layout = await DrawerLayoutLocator.find() - const tray = await layout.findTray(':contains(Hello from tray)') - const content = await layout.findContent(':label(Test DrawerContent)') - - expect(tray).to.exist() - expect(content).to.exist() - }) - - it(`with no overlay, layout content should have margin equal to tray width with placement=start`, async () => { - await mount( - - ) - - const layout = await DrawerLayoutLocator.find() - const content = await layout.findContent() - - await wait(() => { - const margin = px(content.getComputedStyle().marginLeft) - expect(within(margin, 250, 2)).to.be.true() - }) - }) - - it(`with no overlay, layout content should have margin equal to tray width with placement=end`, async () => { - await mount( - - ) - - const layout = await DrawerLayoutLocator.find() - const content = await layout.findContent() - - await wait(() => { - const margin = px(content.getComputedStyle().marginRight) - expect(within(margin, 250, 2)).to.be.true() - }) - }) - - it(`with overlay, layout content should have a margin of zero with placement=start`, async () => { - await mount( - - ) - - const layout = await DrawerLayoutLocator.find() - const content = await layout.findContent() - - await wait(() => { - const margin = px(content.getComputedStyle().marginLeft) - expect(margin).to.equal(0) - }) - }) - - it(`with overlay, layout content should have a margin of zero with placement=end`, async () => { - await mount( - - ) - - const layout = await DrawerLayoutLocator.find() - const content = await layout.findContent(':label(Test DrawerContent)') - - await wait(() => { - const margin = px(content.getComputedStyle().marginRight) - expect(margin).to.equal(0) - }) - }) - - it('the tray should overlay the content when the content is less than the minWidth', async () => { - const onOverlayTrayChange = stub() - - const subject = await mount( - - ) - - subject.setProps({ - layoutWidth: '295px' - }) - - await wait(() => { - expect(onOverlayTrayChange.lastCall.args[0]).to.be.true() - }) - }) - - it('the tray should stop overlaying the content when there is enough space for the content', async () => { - const onOverlayTrayChange = stub() - - const subject = await mount( - - ) - - subject.setProps({ - layoutWidth: '705px' - }) - - await wait(() => { - expect(onOverlayTrayChange.lastCall.args[0]).to.be.false() - }) - }) - - it('the tray should be set to overlay when it is opened and there is not enough space', async () => { - const onOverlayTrayChange = stub() - - const subject = await mount( - - ) - - subject.setProps({ open: true }) - - await wait(() => { - expect(onOverlayTrayChange.lastCall.args[0]).to.be.true() - }) - }) - - it('the tray should not overlay on open when there is enough space', async () => { - const onOverlayTrayChange = stub() - - const subject = await mount( - - ) - - subject.setProps({ open: true }) - - await wait(() => { - expect(onOverlayTrayChange.lastCall.args[0]).to.be.false() - }) - }) -}) diff --git a/packages/ui-drawer-layout/src/DrawerLayout/locator.ts b/packages/ui-drawer-layout/src/DrawerLayout/locator.ts deleted file mode 100644 index 1946decd6e..0000000000 --- a/packages/ui-drawer-layout/src/DrawerLayout/locator.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* - * 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 { DrawerLayoutLocator } from './DrawerLayoutLocator' - -export { DrawerContentLocator, DrawerTrayLocator } from './DrawerLayoutLocator' - -export { DrawerLayoutLocator } -export default DrawerLayoutLocator diff --git a/packages/ui-drawer-layout/tsconfig.build.json b/packages/ui-drawer-layout/tsconfig.build.json index 7ab2649771..105f332175 100644 --- a/packages/ui-drawer-layout/tsconfig.build.json +++ b/packages/ui-drawer-layout/tsconfig.build.json @@ -25,7 +25,6 @@ { "path": "../ui-view/tsconfig.build.json" }, { "path": "../uid/tsconfig.build.json" }, { "path": "../ui-babel-preset/tsconfig.build.json" }, - { "path": "../ui-test-locator/tsconfig.build.json" }, { "path": "../ui-themes/tsconfig.build.json" } ] }