helixml / demo-recipes

Testing

This outline describes the testing approach for the demo-recipes application.

End-to-End Testing

End-to-end (E2E) tests verify the complete user workflow, including interactions between the frontend and backend. These tests are crucial for validating the application’s overall functionality and ensuring a seamless user experience. E2E tests are implemented using Cypress.

Example:

  • Test a user’s ability to create a recipe:
    • Visit the recipe creation page.
    • Fill in the recipe form.
    • Submit the form.
    • Verify that the recipe is created and displayed on the recipe list.

Cypress Configuration:

  • cypress.config.js: Configures Cypress for the project, including the test runner, test files, and browser settings.
// cypress/support/e2e.js
          import '@testing-library/cypress/add-commands';
          import 'cypress-real-events/support';
          import 'cypress-file-upload';
          import 'cypress-wait-until';
          
          // ... additional Cypress configuration
  • cypress/integration/recipes.spec.js: Contains the E2E test suites for recipe-related functionality.

Unit Testing

Unit tests focus on individual components or functions, ensuring they behave as expected in isolation. These tests provide granular coverage and help identify and fix bugs early in the development process. Unit tests are implemented using Jest.

Example:

  • Test the calculateRecipeTime() function:
    • Input different values for preparation time and cooking time.
    • Verify that the function returns the correct total time for each input.

Jest Configuration:

  • jest.config.js: Configures Jest for the project, including the test runner, test files, and coverage reporting.
// jest.config.js
          module.exports = {
            // ... jest configuration
            collectCoverageFrom: [
              "src/**/*.{js,jsx,ts,tsx}",
              "!src/**/*.d.ts",
              "!src/setupTests.ts",
              "!src/index.ts",
            ],
            coverageDirectory: "coverage",
            setupFilesAfterEnv: [
              "<rootDir>/src/setupTests.ts",
            ],
            testEnvironment: 'jsdom',
            transform: {
              '^.+\\.(ts|tsx)?$': 'ts-jest',
            },
          };
  • src/__tests__/recipe.test.js: Contains the unit test suites for the recipe module.

Testing Strategy

  • Focus on User Stories: Tests are designed to cover key user stories and flows.
  • Prioritize Critical Functionality: Tests are prioritized based on the importance and risk associated with each functionality.
  • Maintain Code Coverage: Strive for high test coverage to ensure all code paths are tested.
  • Automate Tests: Tests are integrated into the continuous integration (CI) pipeline to ensure consistent quality and early detection of issues.

Reference: