📚

My Lokal Docs

Your internal knowledge base

📚 QA Test Cases

Overview

This document outlines the complete QA test cases for the Documentation Module's page rendering and navigation logic.

Prerequisites

  • Clear browser cache before testing
  • Use Chrome, Firefox, or Safari for testing
  • Ensure you have access to the documentation module

Test Environment

Base URL: http://localhost/Mylokal-A/documentation

Test Case 1: Default Page Load

Test Steps

  1. Clear browser cache
  2. Navigate to: http://localhost/Mylokal-A/documentation
  3. Wait for page to fully load

Expected Results

✅ Tab Selection:

  • First available tab should be automatically selected
  • Tab should be highlighted/visually distinct

✅ Document Selection:

  • First document within the selected tab should be loaded
  • Document should be highlighted in the list

✅ Content Display:

  • Document content should be visible in the main content area
  • No error messages should appear

✅ URL:

  • URL should show /documentation or /documentation/{firstTabId}

✅ Visual State:

  • Right sidebar should show all available tabs
  • Selected tab and document should be clearly visible

Reference Screenshot

on-load.png

Test Case 2: Tab ID Only

Test Steps

  1. Navigate to: http://localhost/Mylokal-A/documentation/{tabId}
    • Example: http://localhost/Mylokal-A/documentation/getting-started
  2. Wait for page to load

Expected Results

✅ Tab Selection:

  • The specified tab should be selected and highlighted

✅ Document Selection:

  • First document in the specified tab should be loaded
  • Document should be highlighted

✅ Content Display:

  • Document content should appear correctly
  • No empty page

✅ URL:

  • URL should show /documentation/{tabId} or /documentation/{tabId}/{firstFileName}

✅ If Tab Has No Documents:

  • Empty state message should appear
  • Tab should still be selected

Reference Screenshot

tabid-selected.png

Test Examples

http://localhost/Mylokal-A/documentation/getting-started
http://localhost/Mylokal-A/documentation/api-reference
http://localhost/Mylokal-A/documentation/tutorials
http://localhost/Mylokal-A/documentation/faq

Test Case 3: Tab ID and File Name Match

Test Steps

  1. Navigate to: http://localhost/Mylokal-A/documentation/{tabId}/{fileName}
    • Example: http://localhost/Mylokal-A/documentation/getting-started/installation.md
  2. Wait for page to load

Expected Results

✅ Tab Selection:

  • Specified tab should be selected and highlighted

✅ Document Selection:

  • Specified document should be loaded and highlighted
  • Other documents in the same tab should be visible but not active

✅ Content Display:

  • Correct document content should appear
  • Content should match the specified file

✅ URL:

  • URL should remain as /documentation/{tabId}/{fileName}

Reference Screenshot

tab-filename-match.png

Test Examples

http://localhost/Mylokal-A/documentation/getting-started/installation.md
http://localhost/Mylokal-A/documentation/getting-started/quick-start.md
http://localhost/Mylokal-A/documentation/api-reference/authentication.md
http://localhost/Mylokal-A/documentation/tutorials/basic-setup.md

Test Case 4: Tab ID and File Name Mismatch

Test Steps

  1. Navigate to a URL where the file name does NOT belong to the specified tab
  2. Example: http://localhost/Mylokal-A/documentation/getting-started/authentication.md
    • Where authentication.md belongs to api-reference, not getting-started

Expected Results

✅ Fallback Behavior:

  • System should NOT display the incorrect document
  • System should show the default page or first document

✅ Tab Selection:

  • First available tab should be selected OR
  • The specified tab should be selected with its first document

✅ Content Display:

  • Valid document content should appear
  • No error page or broken content

✅ URL:

  • URL should update to show the correct state

Reference Screenshot

tab-filename-not-match.png

Test Examples

http://localhost/Mylokal-A/documentation/getting-started/database-config.md
http://localhost/Mylokal-A/documentation/api-reference/installation.md
http://localhost/Mylokal-A/documentation/tutorials/api-endpoints.md

Test Case 5: File Name Only

Test Steps

  1. Navigate to: http://localhost/Mylokal-A/documentation/{fileName}
    • Example: http://localhost/Mylokal-A/documentation/installation.md
  2. Wait for page to load

Expected Results

✅ Page Behavior:

  • Document should NOT be loaded
  • System should show default page

✅ Tab Selection:

  • No tab should be active OR
  • First tab should be selected (default)

✅ Document Selection:

  • No document should be selected OR
  • First document in first tab should be selected (default)

✅ URL:

  • URL should update to valid state (e.g., /documentation)

Reference Screenshot

file-name.png

Test Examples

http://localhost/Mylokal-A/documentation/installation.md
http://localhost/Mylokal-A/documentation/api-guide.md
http://localhost/Mylokal-A/documentation/faq.md

Test Case 6: Document Click Behavior

Test Steps

Step 1: Initial Load

  1. Navigate to: http://localhost/Mylokal-A/documentation
  2. Wait for default document to load

Step 2: Click Different Document

  1. Click on another document in the same tab
  2. Observe the changes

Step 3: Verify URL

  1. Check if browser address bar updated
  2. Note the new URL

Step 4: Test Reload

  1. Press F5 to reload the page
  2. Verify the same document is still selected

Expected Results

✅ URL Update:

  • Browser URL should change to /documentation/{tabId}/{fileName}
  • Page should NOT fully reload

✅ Content Update:

  • New document content should appear
  • Content should change smoothly

✅ Highlighting:

  • Clicked document should be highlighted
  • Previous document should no longer be highlighted

✅ After Reload:

  • Same document should remain selected
  • Content should match the URL

✅ Browser Back/Forward:

  • Back button should go to previous document
  • Forward button should go to next document

Test Case 7: Right Sidebar Navigation

Test Steps

Step 1: Default State

  1. Load the documentation page
  2. Note which tab and document are currently active

Step 2: Click Different Tab

  1. Click on a different tab in the right sidebar
  2. Observe what happens

Step 3: Test Multiple Tab Switches

  1. Click through 3-4 different tabs
  2. Verify each change

Expected Results

✅ Tab Click:

  • Clicked tab should become highlighted immediately
  • Previous tab should no longer be highlighted

✅ Document Load:

  • First document in the clicked tab should load automatically
  • Document should be highlighted

✅ URL Update:

  • URL should change to /documentation/{clickedTabId}

✅ State Management:

  • Only one tab should be highlighted at a time
  • Only one document should be highlighted at a time

✅ Empty Tab:

  • If tab has no documents, show empty state message
  • Tab should still be selectable

Test Flow Example

1. Load /documentation (Tab A, Doc 1)
2. Click Tab B → Should load Tab B, Doc 1
3. Click Tab C → Should load Tab C, Doc 1
4. Click Back → Should return to Tab B
5. Reload → Should stay on Tab B, Doc 1

Test Case 8: Invalid Parameters

Scenario A: Non-Existent Tab ID

Test URL:

http://localhost/Mylokal-A/documentation/non-existent-tab

Expected Results:

  • ✅ System shows first available tab
  • ✅ First document in the tab is loaded
  • ✅ URL updates to valid state
  • ✅ No error page appears

Scenario B: Non-Existent File Name

Test URL:

http://localhost/Mylokal-A/documentation/getting-started/non-existent-file.md

Expected Results:

  • ✅ System shows first document in the specified tab
  • ✅ Valid content appears
  • ✅ URL updates to valid state

Scenario C: Special Characters in URL

Test URLs:

http://localhost/Mylokal-A/documentation/tab%20with%20spaces

Expected Results:

  • ✅ System handles the input safely
  • ✅ Fallback behavior triggers
  • ✅ No unexpected behavior

Scenario D: Case Sensitivity

Test URLs:

Original: http://localhost/Mylokal-A/documentation/getting-started/installation.md
Test: http://localhost/Mylokal-A/documentation/Getting-Started/installation.md
Test: http://localhost/Mylokal-A/documentation/getting-started/INSTALLATION.MD

Expected Results:

  • ✅ URLs are case-sensitive
  • ✅ Incorrect case triggers fallback to default page

Scenario E: Missing File Extension

Test URL:

http://localhost/Mylokal-A/documentation/getting-started/installation

Expected Results:

  • ✅ File is not found
  • ✅ Fallback behavior triggers
  • ✅ Default document loads

Use / to focus search. Press Enter to run. Esc clears.