-
Notifications
You must be signed in to change notification settings - Fork 0
[URH-62] usePermission 신규 #49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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,235 @@ | ||
import { | ||
act, | ||
fireEvent, | ||
render, | ||
renderHook, | ||
screen, | ||
} from '@testing-library/react'; | ||
import usePermission from './usePermission'; | ||
import React, { useState } from 'react'; | ||
import '@testing-library/jest-dom'; | ||
|
||
let originalNavigator: typeof window.navigator; | ||
|
||
beforeEach(() => { | ||
originalNavigator = global.navigator; | ||
Object.assign(navigator, { | ||
permissions: { | ||
query: jest.fn().mockResolvedValue({ | ||
state: 'prompt', | ||
onchange: null, | ||
}), | ||
}, | ||
geolocation: { | ||
getCurrentPosition: ( | ||
fn: (arg: { coords: { latitude: number; longitude: number } }) => void | ||
) => { | ||
fn({ | ||
coords: { | ||
latitude: 11111111, | ||
longitude: 22222222, | ||
}, | ||
}); | ||
}, | ||
}, | ||
}); | ||
}); | ||
|
||
afterEach(() => { | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
(global.navigator.permissions as any) = originalNavigator; | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
describe('usePermission hook spec', () => { | ||
test('훅 초기 상태는 "prompt" 상태이어야 한다.', async () => { | ||
const { result } = renderHook(() => | ||
usePermission({ permission: 'geolocation' }) | ||
); | ||
|
||
await act(async () => { | ||
expect(result.current.status).toBe('prompt'); | ||
}); | ||
}); | ||
|
||
test('Permissions API가 지원되지 않는 경우 “notSupported”를 반환해야 한다.', async () => { | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
(global.navigator.permissions as any) = undefined; | ||
|
||
const { result } = renderHook(() => | ||
usePermission({ permission: 'geolocation' }) | ||
); | ||
|
||
await act(async () => { | ||
expect(result.current.status).toBe('notSupported'); | ||
}); | ||
}); | ||
|
||
test('권한 상태에 따라 상태를 업데이트해야 한다.', async () => { | ||
Object.assign(navigator, { | ||
permissions: { | ||
query: jest.fn().mockResolvedValue({ | ||
state: 'granted', | ||
onchange: null, | ||
}), | ||
}, | ||
}); | ||
const setStatusSpy = jest.spyOn(React, 'useState'); | ||
|
||
const { result } = renderHook(() => | ||
usePermission({ permission: 'geolocation' }) | ||
); | ||
|
||
await act(async () => {}); | ||
|
||
const permissionsQuery = await navigator.permissions.query({ | ||
name: 'geolocation', | ||
}); | ||
|
||
expect(typeof permissionsQuery.onchange).toBe('function'); | ||
expect(result.current.status).toBe('granted'); | ||
expect(setStatusSpy).toHaveBeenCalledTimes(2); | ||
}); | ||
|
||
test('인수로 전달된 권한이름이 존재하지 않는다면 "notSupported" 상태를 반환해야 한다.', async () => { | ||
Object.assign(navigator, { | ||
permissions: { | ||
query: jest.fn().mockRejectedValue(undefined), | ||
}, | ||
}); | ||
|
||
const { result } = renderHook(() => | ||
usePermission({ permission: 'geolocation' }) | ||
); | ||
|
||
await act(async () => {}); | ||
|
||
expect(result.current.status).toBe('notSupported'); | ||
}); | ||
}); | ||
|
||
describe('usePermission를 사용한 컴포넌트 테스트', () => { | ||
const TestComponent = () => { | ||
const { status } = usePermission({ permission: 'geolocation' }); | ||
const [location, setLocation] = useState<{ | ||
latitude: number; | ||
longitude: number; | ||
} | null>(null); | ||
|
||
const handleGetLocation = () => { | ||
if (status === 'prompt' || status === 'granted') { | ||
navigator.geolocation.getCurrentPosition( | ||
(position) => { | ||
setLocation({ | ||
latitude: position.coords.latitude, | ||
longitude: position.coords.longitude, | ||
}); | ||
}, | ||
(error) => { | ||
console.error('위치 정보를 가져오는데 실패했습니다.', error); | ||
} | ||
); | ||
} | ||
}; | ||
|
||
return ( | ||
<div> | ||
<h2 aria-label="permission-display">위치 정보 권한 상태: {status}</h2> | ||
<button onClick={handleGetLocation}>위치 정보 가져오기</button> | ||
{location && ( | ||
<div> | ||
<p aria-label="latitude-display">위도: {location.latitude}</p> | ||
<p aria-label="longitude-display">경도: {location.longitude}</p> | ||
</div> | ||
)} | ||
{status === 'prompt' && ( | ||
<p aria-label="loading-display"> | ||
위치 정보 접근 권한을 요청 중입니다... | ||
</p> | ||
)} | ||
{status === 'denied' && ( | ||
<p aria-label="error-display"> | ||
위치 정보 접근 권한이 거부되었습니다. 설정에서 권한을 허용해 주세요. | ||
</p> | ||
)} | ||
{status === 'notSupported' && ( | ||
<p aria-label="notSupported-display"> | ||
이 브라우저는 위치 정보 접근 권한을 지원하지 않습니다. | ||
</p> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
describe('전달된 권한에 대한 상태에 따라 상태를 변화시켜야 한다.', () => { | ||
test('prompt', async () => { | ||
render(<TestComponent />); | ||
|
||
expect(screen.getByLabelText('loading-display')).toHaveTextContent( | ||
'위치 정보 접근 권한을 요청 중입니다...' | ||
); | ||
|
||
await act(async () => {}); | ||
|
||
expect(screen.getByLabelText('permission-display')).toHaveTextContent( | ||
'위치 정보 권한 상태: prompt' | ||
); | ||
|
||
fireEvent.click(screen.getByText('위치 정보 가져오기')); | ||
|
||
expect( | ||
await screen.findByLabelText('latitude-display') | ||
).toHaveTextContent('위도: 11111111'); | ||
expect( | ||
await screen.findByLabelText('longitude-display') | ||
).toHaveTextContent('경도: 22222222'); | ||
}); | ||
|
||
test('denied', async () => { | ||
Object.assign(navigator, { | ||
permissions: { | ||
query: jest.fn().mockResolvedValue({ | ||
state: 'denied', | ||
onchange: null, | ||
}), | ||
}, | ||
}); | ||
|
||
render(<TestComponent />); | ||
|
||
await act(async () => {}); | ||
|
||
expect(screen.getByLabelText('permission-display')).toHaveTextContent( | ||
'위치 정보 권한 상태: denied' | ||
); | ||
|
||
fireEvent.click(screen.getByText('위치 정보 가져오기')); | ||
|
||
expect(await screen.findByLabelText('error-display')).toHaveTextContent( | ||
'위치 정보 접근 권한이 거부되었습니다. 설정에서 권한을 허용해 주세요.' | ||
); | ||
}); | ||
|
||
test('notSupported', async () => { | ||
Object.assign(navigator, { | ||
permissions: undefined, | ||
}); | ||
|
||
render(<TestComponent />); | ||
|
||
await act(async () => {}); | ||
|
||
expect(screen.getByLabelText('permission-display')).toHaveTextContent( | ||
'위치 정보 권한 상태: notSupported' | ||
); | ||
|
||
fireEvent.click(screen.getByText('위치 정보 가져오기')); | ||
|
||
expect( | ||
await screen.findByLabelText('notSupported-display') | ||
).toHaveTextContent( | ||
'이 브라우저는 위치 정보 접근 권한을 지원하지 않습니다.' | ||
); | ||
}); | ||
}); | ||
}); |
This file contains hidden or 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,110 @@ | ||
import { useEffect, useState } from 'react'; | ||
import { validators } from '../utils'; | ||
|
||
interface UsePermissionProps { | ||
permission: Permission; // 정의된 타입과 문자열 타입 모두 허용 | ||
} | ||
|
||
interface UsePermissionReturns { | ||
status: PermissionState; | ||
} | ||
|
||
type PermissionState = 'granted' | 'prompt' | 'denied' | 'notSupported'; | ||
|
||
/** | ||
* 사용자의 권한 상태를 확인하고 추적하는 커스텀 훅. | ||
* | ||
* @param {object} props permission {Permission}: 확인하려는 권한의 이름. | ||
* | ||
* @returns {object} | ||
* - `status`: 현재 권한의 상태. ‘granted’, ‘prompt’, ‘denied’, ‘notSupported’ | ||
* | ||
* @description | ||
* - 이 훅은 주어진 권한에 대한 상태를 확인하고, 권한 상태가 변경될 때마다 업데이트합니다. | ||
*/ | ||
const usePermission = ({ | ||
permission, | ||
}: UsePermissionProps): UsePermissionReturns => { | ||
const [status, setStatus] = useState<PermissionState>('prompt'); | ||
|
||
const monitorPermissionStatus = async (permission: PermissionName) => { | ||
const updateStatusOnPermissionChange = ( | ||
permissionStatus: PermissionStatus | ||
) => { | ||
setStatus(permissionStatus.state); | ||
|
||
permissionStatus.onchange = () => { | ||
setStatus(permissionStatus.state); | ||
}; | ||
}; | ||
|
||
try { | ||
if (!validators.isClient() || !navigator.permissions) { | ||
throw new PermissionError('The Permissions API is not supported.'); | ||
} | ||
|
||
const permissionStatus = await navigator.permissions.query({ | ||
name: permission, | ||
}); | ||
|
||
updateStatusOnPermissionChange(permissionStatus); | ||
} catch { | ||
setStatus('notSupported'); | ||
} | ||
}; | ||
|
||
useEffect(() => { | ||
monitorPermissionStatus(permission as PermissionName); | ||
}, [permission]); | ||
|
||
return { status }; | ||
foresec marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}; | ||
|
||
// eslint-disable-next-line @typescript-eslint/ban-types | ||
type Permission = PredefinedPermissionName | (string & {}); | ||
|
||
// Firefox, Chromium, WebKit | ||
type PredefinedPermissionName = | ||
| 'accessibility-events' | ||
| 'accelerometer' | ||
| 'ambient-light-sensor' | ||
| 'background-fetch' | ||
| 'background-sync' | ||
| 'bluetooth' | ||
| 'camera' | ||
| 'captured-surface-control' | ||
| 'clipboard-read' | ||
| 'clipboard-write' | ||
| 'display-capture' | ||
| 'fullscreen' | ||
| 'geolocation' | ||
| 'gyroscope' | ||
| 'idle-detection' | ||
| 'keyboard-lock' | ||
| 'local-fonts' | ||
| 'magnetometer' | ||
| 'microphone' | ||
| 'midi' | ||
| 'nfc' | ||
| 'notifications' | ||
| 'payment-handler' | ||
| 'periodic-background-sync' | ||
| 'persistent-storage' | ||
| 'pointer-lock' | ||
| 'push' | ||
| 'screen-wake-lock' | ||
| 'speaker-selection' | ||
| 'storage-access' | ||
| 'system-wake-lock' | ||
| 'top-level-storage-access' | ||
| 'window-management'; | ||
|
||
class PermissionError extends Error { | ||
constructor(message: string) { | ||
super(message); | ||
this.message = message; | ||
this.name = 'PermissionError'; | ||
} | ||
} | ||
|
||
export default usePermission; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.