-
Notifications
You must be signed in to change notification settings - Fork 26.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allowing hiding the ReactDevOverlay (#37417)
* Add hide button * Update label * Add data attributes for testing * Add e2e tests * update test Co-authored-by: JJ Kasper <jj@jjsweb.site>
- Loading branch information
1 parent
6914a25
commit be5dedf
Showing
6 changed files
with
163 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/react-dev-overlay/src/internal/icons/CloseIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import * as React from 'react' | ||
|
|
||
| const CloseIcon = () => { | ||
| return ( | ||
| <svg | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M18 6L6 18" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <path | ||
| d="M6 6L18 18" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export { CloseIcon } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react' | ||
|
|
||
| // Create a runtime error. | ||
| if ('window' in global) { | ||
| throw Error('example runtime error') | ||
| } | ||
|
|
||
| const Page = () => { | ||
| return <div>client-react-dev-overlay</div> | ||
| } | ||
|
|
||
| export default Page |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { createNext, FileRef } from 'e2e-utils' | ||
| import webdriver from 'next-webdriver' | ||
| import { NextInstance } from 'test/lib/next-modes/base' | ||
| import { join } from 'path' | ||
| import { BrowserInterface } from 'test/lib/browsers/base' | ||
| import { check } from 'next-test-utils' | ||
|
|
||
| describe('client-dev-overlay', () => { | ||
| let next: NextInstance | ||
| let browser: BrowserInterface | ||
|
|
||
| beforeAll(async () => { | ||
| next = await createNext({ | ||
| files: { | ||
| pages: new FileRef(join(__dirname, 'app/pages')), | ||
| }, | ||
| }) | ||
| }) | ||
| beforeEach(async () => { | ||
| browser = await webdriver(next.url, '') | ||
| }) | ||
| afterAll(() => next.destroy()) | ||
|
|
||
| // The `BrowserInterface.hasElementByCssSelector` cannot be used for elements inside a shadow DOM. | ||
| function elementExistsInNextJSPortalShadowDOM(selector: string) { | ||
| return browser.eval( | ||
| `!!document.querySelector('nextjs-portal').shadowRoot.querySelector('${selector}')` | ||
| ) as any | ||
| } | ||
| const selectors = { | ||
| fullScreenDialog: '[data-nextjs-dialog]', | ||
| toast: '[data-nextjs-toast]', | ||
| minimizeButton: '[data-nextjs-errors-dialog-left-right-close-button]', | ||
| hideButton: '[data-nextjs-toast-errors-hide-button]', | ||
| } | ||
| function getToast() { | ||
| return browser.elementByCss(selectors.toast) | ||
| } | ||
| function getMinimizeButton() { | ||
| return browser.elementByCss(selectors.minimizeButton) | ||
| } | ||
| function getHideButton() { | ||
| return browser.elementByCss(selectors.hideButton) | ||
| } | ||
|
|
||
| it('should be able to fullscreen the minimized overlay', async () => { | ||
| await getMinimizeButton().click() | ||
| await getToast().click() | ||
|
|
||
| await check(async () => { | ||
| return (await elementExistsInNextJSPortalShadowDOM( | ||
| selectors.fullScreenDialog | ||
| )) | ||
| ? 'success' | ||
| : 'missing' | ||
| }, 'success') | ||
| }) | ||
|
|
||
| it('should be able to minimize the fullscreen overlay', async () => { | ||
| await getMinimizeButton().click() | ||
| expect(await elementExistsInNextJSPortalShadowDOM(selectors.toast)).toBe( | ||
| true | ||
| ) | ||
| }) | ||
|
|
||
| it('should be able to hide the minimized overlay', async () => { | ||
| await getMinimizeButton().click() | ||
| await getHideButton().click() | ||
|
|
||
| await check(async () => { | ||
| const exists = await elementExistsInNextJSPortalShadowDOM('div') | ||
| return exists ? 'found' : 'success' | ||
| }, 'success') | ||
| }) | ||
| }) |