Testing Strategies - bounswe/bounswe2024group6 GitHub Wiki

Frontend Testing Strategy Documentation

Overview

This document outlines our comprehensive testing approach for frontend components, focusing on unit tests, integration tests, and end-to-end testing strategies.

Test Implementation

1. Forum Component Tests (forum.test.tsx)

The forum component test suite validates core functionality of the forum interface:

  • Navigation Elements

    • Proper rendering of navigation bar components
    • Verification of routing links and paths
    • Menu item interaction testing

  • Post Components

    • Post card rendering and layout
    • Dynamic content population
    • Interactive element functionality

2. Forum Compose Tests (forumCompose.test.tsx)

Tests focusing on post creation functionality:

  • Form Validation

    • Required field verification
    • Character limit enforcement
    • Input sanitization checks
    • Error message display

  • Submission Process

    • Form data collection
    • Loading state management
    • Success/error handling

3. Profile Edit Tests (profileEdit.test.tsx)

Profile management test suite covering:

  • Form Components

    • Input field rendering
    • Validation rule implementation
    • Dynamic field updates

  • User Data Management

    • Profile information updates
    • Bio character limitations
    • Experience level selection
    • Avatar upload handling

Test Results

yunusozdemir@192 frontend % npm run test
> [email protected] test
> vitest

 DEV  v2.1.6 /Users/yunusozdemir/bounswe/bounswe2024group6/frontend
 ✓ src/pages/forum.test.tsx (4) 552ms
 ✓ src/pages/forumCompose.test.tsx (5) 1144ms
 ✓ src/pages/profileEdit.test.tsx (3) 569ms
 Test Files  3 passed (3)
      Tests  12 passed (12)
   Start at  10:35:56
   Duration  2.45s

Mock Implementation

MSW (Mock Service Worker) Setup

Mock service worker is implemented to simulate API interactions during testing:

Mocked Endpoints:

  • GET /feed: Returns simulated forum feed data
  • POST /post/like/: Handles post interaction events
  • GET /user/profile: Retrieves mock user data
  • PUT /user/profile: Processes profile updates

Handler Configuration

rest.get('/api/feed', (req, res, ctx) => {
  return res(
    ctx.status(200),
    ctx.json({
      posts: [
        {
          id: 1,
          title: 'Test Post',
          content: 'Test Content',
          likes: 10
        }
        // Additional mock posts...
      ]
    })
  )
})

Testing Tools & Libraries

  • Vitest: Primary test runner and assertion library
  • React Testing Library: Component testing utilities
  • MSW: API mocking
  • jest-dom: DOM testing assertions
  • user-event: User interaction simulation

Coverage Requirements

  • Unit Test Coverage: Minimum 60%
  • Integration Test Coverage: Minimum 50%

Mobile Testing Documentation

Overview

This document outlines the comprehensive testing process conducted on the mobile application's core components and features, with a focus on functionality, user interaction, and data display accuracy.

Component Testing

1. Core Components Tested

  • CommentCard

    • Comment content rendering
    • User interaction handling

  • PostCard

    • Content presentation
    • Interactive element functionality

  • QuizCard

    • Difficulty level indication
    • User engagement metrics

  • UserCard

    • Profile information display
    • Interaction states
    • Follow functionality

2. Interactive Features

User Interaction Testing

  • Like button functionality
  • Bookmark feature validation
  • Follow/unfollow state management
  • Navigation controls

Quiz Review Interface

  • Question navigation
  • Color-coded feedback system
    • Correct answers: Green
    • Incorrect answers: Red
  • Error state management

Data Display Validation

Content Verification

  • Username display
  • Comment text rendering
  • Post title and content
  • Tag system implementation
  • Quiz information accuracy
    • Title
    • Author information

Error Handling

  • API failure scenarios
  • Error message display

Test Results

 RUNS  **tests**/postcard.test.tsx
 RUNS  **tests**/commentcard.test.tsx
 RUNS  **tests**/quizReview.test.tsx
 RUNS  **tests**/quizCard.test.tsx
 RUNS  **tests**/userCard.test.tsx
 PASS  **tests**/postcard.test.tsx
 PASS  **tests**/quizCard.test.tsx
 PASS  **tests**/quizReview.test.tsx
 PASS  **tests**/commentcard.test.tsx
 PASS  **tests**/userCard.test.tsx (6.567 s)

Test Suites: 5 passed, 5 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        7.164 s

Testing Tools & Libraries

  • testing-library/react-native

Key Testing Metrics

  • Test Suites: 100% pass rate (5/5)
  • Individual Tests: 100% pass rate (13/13)
  • Execution Time: 7.164 seconds

Coverage Requirements

  • Unit Test Coverage: Minimum 60%
  • Integration Test Coverage: Minimum 50%

Functional Testing

  • Component rendering
  • User interaction handling
  • Navigation functionality
  • Error state management

Visual Validation

  • UI element placement
  • Color scheme implementation
  • Responsive design
  • Feedback indicators

Data Integration

  • API interaction
  • Data presentation
  • State management
  • Error handling

Conclusion

The testing phase demonstrates robust functionality across all tested components. The application shows reliable performance in:

  • User interaction handling
  • Data display accuracy
  • Error management
  • Visual feedback systems

The successful completion of all test suites indicates the application's readiness for deployment, with strong reliability in both core functionality and user experience features.

Backend Testing Strategies

Unit Testing

We have implemented unit testing for the endpoints that we have implemented in backend. For this purpose we have utilized built-in testing library of Django. In the Backend folder next to the manage.py file we have tests.py in which we put our unit tests. We have implemented a considerable number of them and we will continue to implement them. How those tests work are as follows. For example for logout. First it registers a user and then log in utilizing signup and login endpoints then tries the logout function with multiple test scenarios.

Integration Testing

In order to test the functionality overall, we are planning to apply integration tests. We are planning to use big bang approach, we will test it with a method where all components are integrated simultaneously. To apply integration testing we are going to use Django Rest build in test library again.

Coverage Requirements

  • Unit Test Coverage: Minimum 70%
  • Integration Test Coverage: Minimum 80%

Related Issues

Fronted

#680
#572
#577
#690

Backend

#688
#672

Mobile

#586
#682

Related PRs

Frontend

PR #684
PR #576
PR #587
PR #694

Backend

PR #695
PR #673

Mobile

PR #591
PR #687