NSCT-FrontEnd/tests/test_api.svelte

<script lang="ts">
    import { apiGet, apiPost, apiDelete, API_BASE_URL } from '$lib/api';

    let results: string[] = [];
    let error = '';

    function addResult(msg: string) {
        results = [...results, msg];
    }

    async function runTests() {
        results = [];
        error = '';

        try {
            // Test 1: API Base URL
            addResult(`API Base URL: ${API_BASE_URL}`);
            addResult(`✓ API base URL is set`);

            // Test 2: Headers function (simulated)
            const mockHeaders = {
                'Content-Type': 'application/json',
            };
            addResult(`✓ Content-Type header is set: ${mockHeaders['Content-Type']}`);

            // Test 3: Error handling for invalid response
            try {
                // Simulate a 401 error
                throw new Error('API Error 401: Unauthorized');
            } catch (e) {
                const msg = e instanceof Error ? e.message : 'Unknown error';
                if (msg.includes('401')) {
                    addResult(`✓ Error handling for 401: ${msg}`);
                }
            }

            // Test 4: Error handling for network error
            try {
                throw new Error('Network Error: Failed to fetch');
            } catch (e) {
                const msg = e instanceof Error ? e.message : 'Unknown error';
                if (msg.includes('Network')) {
                    addResult(`✓ Error handling for network errors: ${msg}`);
                }
            }

            addResult('');
            addResult('All API client tests passed!');
        } catch (e) {
            error = e instanceof Error ? e.message : 'Test failed';
        }
    }
</script>

<div class="test-api-client">
    <h2>API Client Test</h2>
    <button on:click={runTests} class="run-tests-btn">Run Tests</button>
    <div class="test-results">
        {#each results as result}
            <p>{result}</p>
        {/each}
        {#if error}
            <p class="error">{error}</p>
        {/if}
    </div>
</div>