Group session July 1st


Just keeping some notes here for the new elective area.

Ordering testing types by importance can be challenging because their significance often depends on the context of the project, the development methodology (e.g., Agile, Waterfall), and specific project requirements. However, I can group them into broader categories based on their focus areas and generally place them in a sequence that reflects their typical execution order in a software development lifecycle. It’s important to note that in practice, the importance and order might vary depending on project specifics.

Fundamental Testing Types (Core to Development)

the essence and hierarchy of these testing types within the software development lifecycle.

  1. Unit Tests:
    • Scope: The smallest units of code, typically individual functions or methods, tested in isolation from the rest of the system.
    • Purpose: To ensure that each unit performs as designed, catching low-level errors within the code base.
  2. Feature Tests (often referred to as Functional Tests):
    • Scope: Individual functionalities or features of the application, tested possibly in a slightly broader context than unit tests but still focused on specific functionalities.
    • Purpose: To verify that each feature operates according to the requirements and user expectations. These tests can be conducted with or without considering the user interface, depending on the application’s structure.
  3. Integration Tests:
    • Scope: How different units, components, or features work together. This includes testing the integration of different parts of the application to ensure they function collectively as expected.
    • Purpose: To detect issues in the interaction between integrated components or systems, ensuring that data flows correctly between them and that they operate harmoniously.
  4. End-to-End Tests:
    • Scope: The entire application, from the user interface through all the connected components and services, to the database and network interactions. These tests simulate real-world scenarios and complete user stories.
    • Purpose: To ensure the application behaves as intended in a production-like environment, covering all aspects of functionality, performance, and user experience. E2E tests validate the system’s integration and overall performance, ensuring that the entire workflow meets the business and technical requirements.

Your categorization effectively reflects a progression from the most granular level of testing to the most comprehensive, aligning with the testing pyramid concept where a larger quantity of tests is recommended at the lower levels (unit tests) and fewer, but more comprehensive, tests (e.g., end-to-end tests) at the top. This approach helps in efficiently identifying and isolating defects at different stages of the development process.



unit (just a simple function)

// Unit test in pseudo-code function testCalculateTotalWithoutDiscount() { const items = [{price: 10.00}, {price: 20.00}]; const total = calculateTotal(items, null); assert(total === 30.00); // Expect total to be the sum of item prices } function testCalculateTotalWithDiscount() { const items = [{price: 10.00}, {price: 20.00}]; const discountCode = ‘DISCOUNT10’; // Assuming this code applies a 10% discount const total = calculateTotal(items, discountCode); assert(total === 27.00); // Expect total to reflect a 10% discount }

unit a bit bigger / involving many sub functions

// Example unit test in pseudo-code function testAddItemToCart() { const cart = new ShoppingCart(); const product = { id: 1, name: ‘Product 1’, price: 10.00 }; cart.addItemToCart(product); assert(cart.items.length === 1); // Check if the product is added assert(cart.totalPrice === 10.00); // Check if the total price is updated }

// Example feature test in pseudo-code function testUpdateItemQuantityInCart() { navigateToCartPage(); addItemToCart(‘Product 1’); updateItemQuantity(‘Product 1’, 2); // Updating quantity assert(cartTotalPrice() === ‘Product 1’ price * 2); // Check if the total is correct }
What if they need to log in first and things though… – might need to mock that our (which brings up another point)

things like navigateToCartPage() will likely require a virtual dom like happydom or something to run it –


// Example integration test in pseudo-code function testCartToCheckoutIntegration() { addItemsToCart([‘Product 1’, ‘Product 2’]); navigateToCheckoutPage(); assert(checkoutPageShowsCorrectItemsAndTotal()); // Verify items and total are correct at checkout }

End to end
// Example end-to-end test in pseudo-code function testCompleteShoppingProcess() { loginAsExistingUser(); clearExistingCart(); addProductsToCart([‘Product 1’, ‘Product 2’]); proceedToCheckout(); enterPaymentDetails(); submitOrder(); assert(orderIsConfirmed()); // Verify the order is successfully placed assert(userReceivedOrderConfirmationEmail()); // Additional check for email confirmation }


other testing things…


Advanced Testing Types (Ensuring Robustness and Quality)

  1. System Tests
    • Focus: Entire system.
    • Importance: Validate the complete and integrated software product against requirements.
  2. Regression Tests
    • Focus: Existing functionality after changes.
    • Importance: Ensure new code changes do not adversely affect existing functionality.
  3. Performance Tests
    • Focus: Speed, responsiveness, and stability.
    • Importance: Critical for user satisfaction and system reliability under load.

Specialized Testing Types (Focused on Specific Aspects)

  1. Security Testing
    • Focus: Security vulnerabilities.
    • Importance: Essential for identifying and mitigating potential security threats.
  2. Usability Testing
    • Focus: User experience.
    • Importance: Key for ensuring the application is intuitive and user-friendly.
  3. Compatibility Testing
    • Focus: Different environments (OS, browsers, devices).
    • Importance: Ensures software operates across a range of platforms and devices.

Final Verification (Before and After Release)

  1. Smoke Tests
    • Focus: Basic functionality of a new build.
    • Importance: Preliminary test to ensure critical functionalities work before moving to detailed testing.
  2. Acceptance Tests (UAT)
    • Focus: Business requirements and user needs.
    • Importance: Final verification before the software is released; ensures software meets business and user requirements.
  3. Exploratory Testing
    • Focus: Unscripted testing to find unknown issues.
    • Importance: Complements structured testing by identifying issues that may not be covered by test cases.

This sequence starts with tests closest to the development phase and expands towards those that involve broader aspects of the system, ending with tests that are critical for final verification before and after release. It combines the logical progression of testing in a development cycle with an emphasis on both the technical and user-centric aspects of the software. Remember, the exact order and emphasis might vary, and often, many of these testing types will overlap or be conducted in parallel, especially in Agile and iterative development environments.

Figure out a nice mini app that has clear examples of all of these things.

Weigh each. Show versions with 100% coverage – vs just a few key tests that handle it.

Start with as little dependencies and connections as possible.

Add them as needed. Dom? Pinia? Auth? Database? (what is a good order here?)


here’s some stuff to consider — but we should really just let it unfold naturally – (Also consider Nuxt and TypeScript – and maybe Zod)


Revised Plan with v-test

1. Simple Start: Todo List Application

The Todo List remains a fitting choice for demonstrating testing strategies across different complexities.

2. Testing Stage 1: Unit Tests with v-test

Focus: Test Vue 3 components in isolation.

  • Components to Test: TodoItem, AddTodoForm.
  • Utility Functions: Any functions for date formatting, filtering todos, etc.

Given v-test is designed for Vue, it should offer straightforward ways to mount components and inspect their output, reacting to props, user inputs, and events.

3. Introduce Pinia for State Management

New Feature: Use Pinia for managing the state of the todo list (adding items, marking them as complete, filtering).

4. Testing Stage 2: Integration Tests with v-test

Focus: Ensure components interact correctly with the Pinia store.

  • Test the integration between AddTodoForm and the store, verifying that added todos are reflected in the application state and UI.

5. Add Authentication

Complexity Increase: Add user authentication to demonstrate session management and protected routes or features.

6. Testing Stage 3: Auth Logic and Mocking

Focus: Test components with authentication considerations.

  • Mocking authentication state to test user-specific features and access control.

7. External Dependencies: API Integration

Replace or supplement the static or Pinia-managed state with real API calls for CRUD operations on todos.

8. Testing Stage 4: API Integration Testing

Focus: Mock HTTP requests and ensure components handle data fetching, updates, and error states correctly.

  • Since v-test might not directly handle HTTP mocking, you may need to integrate a mocking library or use Vue 3’s composables to abstract and mock API calls.

9. Final Complexity: End-to-End Testing

Tool Choice: Even if using v-test for unit and integration testing, an E2E testing tool like Cypress remains invaluable for simulating real user interactions from start to finish.

Order of Introduction and Testing Focus:

  1. Core Vue Features: Start with basic todo list functionalities, testing with v-test.
  2. Pinia: Introduce state management, focusing on integration tests between components and state.
  3. Authentication: Add complexity with user sessions, testing access control and user-specific features.
  4. API Integration: Move to external data management, focusing on mocking and testing API calls.
  5. E2E Testing: Validate the entire application flow with Cypress, ensuring all pieces work together seamlessly.
Group session July 1st