From c9d25224a1f7032afde0771b3e937ef2b8dd7a91 Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Thu, 13 Jun 2024 06:01:16 +0500 Subject: [PATCH 1/3] fix(tldr): unable to take a screenshot on mac --- src/components/Modal/__tests__/index.tsx | 93 ++++++++++++++++++++++++ src/components/Modal/index.tsx | 13 +++- 2 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 src/components/Modal/__tests__/index.tsx diff --git a/src/components/Modal/__tests__/index.tsx b/src/components/Modal/__tests__/index.tsx new file mode 100644 index 000000000..c6fd9a43a --- /dev/null +++ b/src/components/Modal/__tests__/index.tsx @@ -0,0 +1,93 @@ +/* eslint-disable padding-line-between-statements */ +import '@testing-library/jest-dom' +import { fireEvent, render, waitFor } from '@testing-library/react' +import React from 'react' +import { BaseModal } from '../index' + +describe('BaseModal', () => { + it('closes on pressing Escape', () => { + const closeMock = jest.fn() + render() + + fireEvent.keyDown(document, { + key: 'Escape', + keyCode: 27, + }) + + waitFor(() => { + expect(closeMock).toHaveBeenCalled() + }) + }) + + it('does not close on Command+Control+4', () => { + const closeMock = jest.fn() + render() + + fireEvent.keyDown(document, { + key: '4', + keyCode: 52, + metaKey: true, + ctrlKey: true, + }) + + expect(closeMock).not.toHaveBeenCalled() + }) + + it('does not close on Command+Control+3', () => { + const closeMock = jest.fn() + render() + + fireEvent.keyDown(document, { + key: '3', + keyCode: 51, + metaKey: true, + ctrlKey: true, + }) + + expect(closeMock).not.toHaveBeenCalled() + }) + + it('does not close on irrelevant keys', () => { + const closeMock = jest.fn() + render() + + fireEvent.keyDown(document, { + key: 'A', + keyCode: 65, + }) + + expect(closeMock).not.toHaveBeenCalled() + }) + + it('does nothing when not visible', () => { + const closeMock = jest.fn() + render() + + fireEvent.keyDown(document, { + key: 'Escape', + keyCode: 27, + }) + + expect(closeMock).not.toHaveBeenCalled() + }) + + it('handles multiple key presses correctly', () => { + const closeMock = jest.fn() + render() + + fireEvent.keyDown(document, { + key: 'Escape', + keyCode: 27, + }) + fireEvent.keyDown(document, { + key: '4', + keyCode: 52, + metaKey: true, + ctrlKey: true, + }) + + waitFor(() => { + expect(closeMock).toHaveBeenCalledTimes(1) + }) + }) +}) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 7ab72e816..5a65b9d70 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -134,12 +134,23 @@ export const BaseModal = ({ } } + const handleSpecialKeys = (e: KeyboardEvent) => { + const keyCombination = e.metaKey && e.ctrlKey && (e.key === '4' || e.key === '3') + + if (keyCombination) { + e.stopPropagation() + e.preventDefault() + } + } + if (visible) { document.addEventListener('keydown', handleEsc) + document.addEventListener('keydown', handleSpecialKeys) } return () => { - document.removeEventListener('keydown', handleEsc) // Cleanup + document.removeEventListener('keydown', handleEsc) + document.removeEventListener('keydown', handleSpecialKeys) } }, [visible, close]) From 8cacc7febffa824b344288f25962d5141e34578d Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Fri, 14 Jun 2024 14:22:19 +0500 Subject: [PATCH 2/3] fix(tldr): unable to take a screenshot on mac --- .../BriefDescriptionModal/__tests__/index.tsx | 18 ++++ .../Trending/BriefDescriptionModal/index.tsx | 19 +++- src/components/Modal/__tests__/index.tsx | 93 ------------------- src/components/Modal/index.tsx | 13 +-- 4 files changed, 35 insertions(+), 108 deletions(-) delete mode 100644 src/components/Modal/__tests__/index.tsx diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/__tests__/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/__tests__/index.tsx index 1fee07d71..28269f99f 100644 --- a/src/components/App/SideBar/Trending/BriefDescriptionModal/__tests__/index.tsx +++ b/src/components/App/SideBar/Trending/BriefDescriptionModal/__tests__/index.tsx @@ -1,3 +1,5 @@ +/* eslint-disable padding-line-between-statements */ +import '@testing-library/jest-dom' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import React from 'react' import { BriefDescription } from '..' @@ -117,4 +119,20 @@ describe('BriefDescription Component Tests', () => { expect(onCloseMock).toHaveBeenCalled() }, 0) }) + + it('does not close the modal on Command+Control+3 or Command+Control+4', () => { + const { getByTestId } = render() + + waitFor(() => { + const modal = getByTestId('brief-description-modal') + + // With Command+Control+3 + fireEvent.keyDown(window, { key: '3', ctrlKey: true, metaKey: true }) + expect(modal).toBeInTheDocument() + + // With Command+Control+4 + fireEvent.keyDown(window, { key: '4', ctrlKey: true, metaKey: true }) + expect(modal).toBeInTheDocument() + }) + }) }) diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx index d58d71e13..52d90e711 100644 --- a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx +++ b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx @@ -63,18 +63,24 @@ export const BriefDescription: FC = ({ trend, onClose, selectTrending }) const audioElement = audioRef.current const onAudioPlaybackComplete = () => setIsPlaying(false) + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + handleClose() + } + } + if (audioElement) { audioElement.addEventListener('ended', onAudioPlaybackComplete) } - window.addEventListener('keydown', handleClose) + window.addEventListener('keydown', handleKeyDown) return () => { if (audioElement) { audioElement.removeEventListener('ended', onAudioPlaybackComplete) } - window.removeEventListener('keydown', handleClose) + window.removeEventListener('keydown', handleKeyDown) } }, [handleClose]) @@ -82,7 +88,14 @@ export const BriefDescription: FC = ({ trend, onClose, selectTrending }) (currentPlayingAudio?.current?.src === trend.audio_EN && !currentPlayingAudio?.current?.paused) || isPlaying return ( - + {trend.audio_EN ? ( <> diff --git a/src/components/Modal/__tests__/index.tsx b/src/components/Modal/__tests__/index.tsx deleted file mode 100644 index c6fd9a43a..000000000 --- a/src/components/Modal/__tests__/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -/* eslint-disable padding-line-between-statements */ -import '@testing-library/jest-dom' -import { fireEvent, render, waitFor } from '@testing-library/react' -import React from 'react' -import { BaseModal } from '../index' - -describe('BaseModal', () => { - it('closes on pressing Escape', () => { - const closeMock = jest.fn() - render() - - fireEvent.keyDown(document, { - key: 'Escape', - keyCode: 27, - }) - - waitFor(() => { - expect(closeMock).toHaveBeenCalled() - }) - }) - - it('does not close on Command+Control+4', () => { - const closeMock = jest.fn() - render() - - fireEvent.keyDown(document, { - key: '4', - keyCode: 52, - metaKey: true, - ctrlKey: true, - }) - - expect(closeMock).not.toHaveBeenCalled() - }) - - it('does not close on Command+Control+3', () => { - const closeMock = jest.fn() - render() - - fireEvent.keyDown(document, { - key: '3', - keyCode: 51, - metaKey: true, - ctrlKey: true, - }) - - expect(closeMock).not.toHaveBeenCalled() - }) - - it('does not close on irrelevant keys', () => { - const closeMock = jest.fn() - render() - - fireEvent.keyDown(document, { - key: 'A', - keyCode: 65, - }) - - expect(closeMock).not.toHaveBeenCalled() - }) - - it('does nothing when not visible', () => { - const closeMock = jest.fn() - render() - - fireEvent.keyDown(document, { - key: 'Escape', - keyCode: 27, - }) - - expect(closeMock).not.toHaveBeenCalled() - }) - - it('handles multiple key presses correctly', () => { - const closeMock = jest.fn() - render() - - fireEvent.keyDown(document, { - key: 'Escape', - keyCode: 27, - }) - fireEvent.keyDown(document, { - key: '4', - keyCode: 52, - metaKey: true, - ctrlKey: true, - }) - - waitFor(() => { - expect(closeMock).toHaveBeenCalledTimes(1) - }) - }) -}) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 5a65b9d70..7ab72e816 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -134,23 +134,12 @@ export const BaseModal = ({ } } - const handleSpecialKeys = (e: KeyboardEvent) => { - const keyCombination = e.metaKey && e.ctrlKey && (e.key === '4' || e.key === '3') - - if (keyCombination) { - e.stopPropagation() - e.preventDefault() - } - } - if (visible) { document.addEventListener('keydown', handleEsc) - document.addEventListener('keydown', handleSpecialKeys) } return () => { - document.removeEventListener('keydown', handleEsc) - document.removeEventListener('keydown', handleSpecialKeys) + document.removeEventListener('keydown', handleEsc) // Cleanup } }, [visible, close]) From 2b5f1c8efc17ad7017abbac98850a0d5f0f76b0c Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Tue, 18 Jun 2024 13:27:48 +0500 Subject: [PATCH 3/3] fix(tldr): remove keydown --- .../Trending/BriefDescriptionModal/index.tsx | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx index 52d90e711..4c2d72156 100644 --- a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx +++ b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx @@ -60,29 +60,23 @@ export const BriefDescription: FC = ({ trend, onClose, selectTrending }) } useEffect(() => { - const audioElement = audioRef.current - const onAudioPlaybackComplete = () => setIsPlaying(false) + const audioElement = audioRef.current; - const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - handleClose() - } - } + const onAudioPlaybackComplete = () => { + setIsPlaying(false); + setCurrentPlayingAudio(null); + }; if (audioElement) { - audioElement.addEventListener('ended', onAudioPlaybackComplete) + audioElement.addEventListener('ended', onAudioPlaybackComplete); } - window.addEventListener('keydown', handleKeyDown) - return () => { if (audioElement) { - audioElement.removeEventListener('ended', onAudioPlaybackComplete) + audioElement.removeEventListener('ended', onAudioPlaybackComplete); } - - window.removeEventListener('keydown', handleKeyDown) - } - }, [handleClose]) + }; + }, [setCurrentPlayingAudio]); const showPlayBtn = (currentPlayingAudio?.current?.src === trend.audio_EN && !currentPlayingAudio?.current?.paused) || isPlaying