Testing and Bug logs for TB Guide UI updates

[sande11]

UI/UX Testing - Figma Design Implementation

Overview

This issue tracks testing for major UI/UX updates implemented to align the app with Figma designs. Multiple significant changes have been made across light/dark modes, navigation, content structure, and user interactions.

Testing Scope

Core UI Changes

• Light Mode Updates - UI elements and styling changes
• Dark Mode Updates - UI elements and styling changes
• Notes List Migration - Moved to bottom modal presentation
• WebView Content - New content implementation
• Bookmarks UI Differentiation - Chart (green sidebar) vs Sub-chapter(blue sidebar) bookmark styling
• Search Functionality - New search view with counter in body fragment
• Note submission - User can submit a note as a feedback
• VIew in Chapter - User can navigate from any chart to the chapter where that chart is found by clicking View in Chapter
• [ ]

Testing Instructions

Setup

1. Download the app using the invitation link you will receive in your emails
2. Test on both light and dark themes
3. Test on different screen sizes if possible
4. Test areas highlighted in the "Testing Scope" above
5. when you find a bug, leave a comment below this issue using the "Bug Repoting Template" below

Test Scenarios

Navigation & Dialogs

• Navigate between fragments (main → body → home)
• Test bookmark creation/editing/deletion flow
• Test note creation/editing/deletion flow
• Verify keyboard dismissal when navigating home
• [ ]

Search Functionality

• Search content in body fragment
• Verify search counter accuracy
• Test search navigation (next/previous)
• Clear search functionality

Notes & Bookmarks

• Create notes and verify bottom modal presentation
• Edit/delete notes with confirmation dialogs
• Create bookmarks from charts vs sub-chapters
• Verify bookmark UI differentiation
• Test note feedback submission to Pendo

Bug Reporting Template

When reporting bugs, please use this format:

### Bug: [Brief Description]

**Steps to Reproduce:**
1. 
2. 
3. 

**Expected Behavior:**
- 

**Actual Behavior:**
- 


**Screenshots/Logs:**
- [Attach if relevant]

**Severity:** High/Medium/Low

Testing Checklist

Critical Path Testing

• App launches successfully
• Navigation between all fragments works
• Search functionality operates correctly
• Notes and bookmarks can be created/edited/deleted
• No crashes during normal usage

Edge Cases

• Rapid navigation between screens
• Canceling dialogs at various stages
• Memory usage during extended sessions

Visual Regression

• UI elements match Figma designs
• Consistent spacing and alignment
• Proper color usage in both themes
• Loading states and animations

Note: Please test thoroughly and report any issues using the bug template above.

[sande11]

Bug: Missing content for Chapter - Community Tuberculosis Control, subchapters C,D,E

Steps to Reproduce:

1. Navigate to to chapter Community Tuberculosis Contro
2. Select either of subchapter C or D or E

Expected Behavior:

• it should display content for these subchapters

Actual Behavior:

• it is displaying webpage not available

Screenshots/Logs:

Severity: High

[hopemadziakapita]

Bug: Content Missing For Chart

Steps to Reproduce:

1. Go to charts
2. Select table 17

Expected Behavior:

• Display a chart

Actual Behavior:

• displaying an error

Screenshots/Logs:

• 

Severity: Medium

[Naomi-Nyama]

1. The keyboard doesn't dismiss after clicking X on the search bar, and it's still functional
   Steps to reproduce:

• Click the search card(keyboard pops on screen)
• click x to dismiss search
• keyboard stays on screen
  Expected Behaviour:
• When the user clicks the X button, the keyboard should be dismissed as well
  https://github.com/user-attachments/assets/ed8759bc-744e-468d-b2e5-48e05a27cdea

2. Text on the chapter and chart title is cut off
   Steps to reproduce:

• Go to the Tuberculin Skin Test(TST)
  -The note button is hiding the chapter title
  

3. result number cut off
   -Go to the search tab
   -type the search word in the search card
   -results number cut off
   

4. search loading indicator stays on screen:
   -on the search page, search for any word,
   -click the search button on the keyboard
   -loading indicator still on screen
   https://github.com/user-attachments/assets/49a8c920-df0c-40aa-bc12-a9ff2fddb8fb

5. Creating a lengthy note: There is no way for you to view it, since the card cuts the note to two lines:

https://github.com/user-attachments/assets/2a4f0353-ea2e-4791-8090-3d23f2edc23a
Expected behaviour:
-The user should be able to view the entire note on the note card(it should expand when clicked )

6. Increasing phone font to max:
   -Text cutoff on home page cards
   -Bottom Navigation words
   -search page content cutoff

[Wiza-Munthali]

Bug: Bookmark Edit Dialog Cut

The pop-up dialog is cut, and the user isn't able to see the full dialog

Steps to Reproduce:

1. Go to any chapter or chart and bookmark it.
2. Proceed to the bookmark page on the main page
3. Edit the bookmark

Expected Behavior:

• The pop-up shows up in it's entirety

Actual Behavior:

• Pop-up is cut

Screenshots/Logs:

Severity: Medium

Device: Pixel 4a

[Wiza-Munthali]

Bug: Bookmark Delete Dialog Not Fully Highlighted

The highlighted part(the name of the bookmark) of the pop up is segmentated

Steps to Reproduce:

1. Go to any chapter or chart and bookmark it.
2. Proceed to the bookmark page on the main page
3. delete the bookmark

Expected Behavior:

• The whole bookmarks name is highlighted in blue

Actual Behavior:

• The bookmarks' name is highlighted in blue, apart from the last character

Screenshots/Logs:

Severity: Low

Device: Pixel 4a