Frontend Testing Fundamentals: What It Is and Why It Matters Quiz

1. Understanding Frontend Testing

   Which statement best describes frontend testing in the context of a web application that renders forms, buttons, and dynamic content?

   1. It verifies that the user interface and client-side behavior work as intended across interactions and states.
   2. It compiles backend services into machine code for faster execution.
   3. It replaces design decisions such as color choices with automated algorithms.
   4. It encrypts all traffic between client and server by default.
   5. It stores user data in a scalable database.

2. Why It Matters

   Why is frontend testing important for delivering a reliable user experience, for example when a user submits a form and expects a confirmation message?

   1. It helps catch UI bugs before users see them, increasing confidence and reducing costly regressions.
   2. It guarantees zero defects regardless of code changes.
   3. It eliminates the need for manual exploratory testing.
   4. It primarily reduces server hosting costs.
   5. It automatically writes product requirements.

3. Unit Testing Focus

   Which type of frontend test is most appropriate for verifying that a date-formatting function returns '01/02/2025' when given a specific input?

   1. Unit testing
   2. End-to-end testing
   3. Load testting
   4. Visual regression testing
   5. Usabiliity review

4. End-to-End Scenario

   Which scenario is an example of an end-to-end frontend test for an online shop?

   1. A test that simulates a user logging in, adding an item to the cart, and completing checkout.
   2. A test that checks whether a helper function trims whitespace.
   3. A linter that enforces code style rules.
   4. A stress test that measures server CPU usage.
   5. A build step that minifies images.

5. Accessibility Goals

   What does accessibility testing aim to ensure in a page with forms, links, and buttons?

   1. That users can navigate via keyboard, labels are descriptive, and color contrast meets guidelines.
   2. That all images are compressed to the smallest possible size.
   3. That the database schema is normalized to third normal form.
   4. That every page uses a single font family for consistency.
   5. That server logs rotate on a fixed schedule.

6. Visual Regression

   What is the main purpose of visual regression testing after a CSS change adjusts spacing and colors?

   1. To detect unintended changes in the appearance of the user interface by comparing renderings.
   2. To ensure API endpoints return the correct JSON payload.
   3. To verify that code is formatted according to style guides.
   4. To measure network bandwidth usage over time.
   5. To test cryptographic key rotation policies.

7. Interaction and State

   When testing that clicking a 'Submit' button shows a spinner and disables the button until a response arrives, what aspect of frontend behavior is being verified?

   1. User interaction handling and UI state updates
   2. Database sharding strategy
   3. Operating system package management
   4. Ethernet cable integrity
   5. Static code analyzis

8. Mocks and Stubs

   In a frontend test for a search component, what is the purpose of using a mock or stub for the network request?

   1. To simulate predictable responses without calling a real backend, making the test fast and reliable.
   2. To increase the bundle size so caching is tested thoroughly.
   3. To automatically improve the app's search engine ranking.
   4. To inject real ads for realistic revenue testing.
   5. To disable all error handling paths at runtime.

9. Flaky Tests

   Which situation commonly causes flaky frontend tests when verifying a modal opens after an animation?

   1. Tests rely on real network timing or arbitrary timeouts instead of waiting for UI conditions.
   2. Tests run on a developer's machine at the same time every day.
   3. Tests render static HTML with no dynamic content.
   4. Tests use a consistent, pinned dependency version.
   5. Tests avoid any asynchronous operations.

10. Cross-Browser Coverage

    What is the goal of cross-browser frontend testing for a responsive site viewed on different devices?

    1. To ensure the interface behaves and looks consistent across supported browsers and screen sizes.
    2. To rename all CSS classes to shorter identifiers.
    3. To measure the server's disk input/output speed.
    4. To remove all vendor prefixes from styles.
    5. To compress audio files used in the site.