Manual UI Testing

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• js/myJs.js
• css/style.css
• css/spinload.css
• img/iput-bg.jpg

Manual UI Testing for the yeuems.io project focuses on verifying the interactive elements, visual transitions, and response behaviors of a web-based "crush" proposal application. The testing scope includes the preloader animation, SweetAlert2 modal flows, and the dynamic evasion logic of interactive buttons.

The system relies on jQuery for DOM manipulation and SweetAlert2 for user notifications. Manual testers must verify that the application correctly handles user inputs and environmental conditions like screen width to ensure the intended "playful" user experience is maintained.

Core Interaction Flow

The application follows a linear progression triggered by user clicks and hover events. The logic resides primarily in js/myJs.js and is initialized upon document readiness.

The diagram above illustrates the sequence of states a user encounters, from initial loading to the final external redirection.
Sources: js/myJs.js:15-135, index.html:31-64

Initial Loading and Transitions

Manual testing begins with the preloader. The application uses a fixed-position overlay with a CSS-animated spinner.

1. Preloader Visibility: The #preloader element must stay on top of all other content with a z-index of 9999999.
2. Timing: The loading screen fades out after a 600ms delay defined in the setTimeout function.
3. Body Overflow: Testers must verify the body overflow changes to visible only after the preloader disappears to prevent scrolling during load.

Sources: css/spinload.css:2-10, js/myJs.js:17-25

Button Evasion Logic

A critical feature is the "No" button's inability to be clicked under normal circumstances. The testing must verify two distinct evasion behaviors based on the interaction count (n).

Interaction Stage	Event Type	Action	Behavior
First Interaction	mousemove	switchButton()	Swaps coordinates between 'Yes' and 'No' buttons
Subsequent Interactions	mousemove	moveButton()	Moves 'No' button to random X, Y coordinates
Desktop Click	click	switchButton()	Swaps positions if screen width >= 900px

Sources: js/myJs.js:68-82, js/myJs.js:84-88

Coordinate Randomization

The moveButton function calculates positions based on screen.width.

• If width <= 600 (Mobile): X range is 300, Y range is 500.
• If width > 600 (Desktop): X range is 500, Y range is 500.
  Testers must verify that the button stays within reachable viewport bounds during random movement.
  Sources: js/myJs.js:58-66

Modal and Input Interaction

The application utilizes SweetAlert2 (Swal) for three primary interaction points.

1. The First Question

Upon preloader exit, firstQuestion() executes.

• Visuals: Displays img/cuteCat.jpg (300x300).
• Behavior: The main .content div remains hidden until the user closes this initial popup.
  Sources: js/myJs.js:33-46

2. The Reason Input (Auto-Complete Simulation)

When the "Yes" button is clicked, a second popup appears containing a text input (#txtReason).

• Input Hijacking: The function textGenerate() intercepts user typing. Regardless of what the user types, the field populates with characters from textConfig.text9 ("Vì cậu đẹp try và dthuong vlll:>>").
• Verification: Testers should type arbitrary characters to ensure the pre-defined string is correctly appended.
  Sources: js/myJs.js:91-107, js/myJs.js:113-128

3. Final Confirmation and Redirection

The final step occurs after submitting the "Reason" popup.

• Configuration: Displays textConfig.text10 and textConfig.text11.
• Action: Upon closing the final alert (onClose), the browser must redirect the user to a specific Facebook profile.
  Sources: js/myJs.js:129-140

Visual and Responsive Design

Testing must ensure the UI adapts to different viewports using the defined CSS media queries.

The diagram represents how styles are overridden when the screen width drops below 500px.
Sources: css/style.css:35-71

Sound Effects

Manual testers must confirm audio triggers for specific actions:

• Button Swap: sound/duck.mp3 plays.
• Button Move: sound/Swish1.mp3 plays.
• Yes Click: sound/tick.mp3 plays.
• Background: sound/sound.mp3 plays automatically on load via the <audio> tag.
  Sources: js/myJs.js:50-51, js/myJs.js:59-60, index.html:66

Manual UI testing ensures the playful "evasion" logic functions as intended across devices while verifying that the input hijacking and redirection mechanisms provide the programmed user experience.