Skip to content

[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 4 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 235 additions & 0 deletions src/hooks/usePermission.test.tsx
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(
'이 브라우저는 위치 정보 접근 권한을 지원하지 않습니다.'
);
});
});
});
110 changes: 110 additions & 0 deletions src/hooks/usePermission.ts
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 };
};

// 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;
Loading