Back to Repositories

Testing CoverPresenter Image Asset Generation in 30-seconds-of-code

This test suite validates the CoverPresenter class functionality for handling image cover URLs and srcsets in the 30-seconds-of-code repository. It ensures proper generation of image assets with different sizes and formats for both snippets and collections.

Test Coverage Overview

The test suite provides comprehensive coverage of the CoverPresenter’s core functionality for managing image assets. Key areas tested include:

URL generation for snippet and collection covers
Srcset generation with multiple image sizes
Full-size image handling
Different asset path handling for snippets vs collections

Implementation Analysis

The testing approach utilizes Jest’s describe/it blocks for organized test grouping. The implementation leverages factory patterns through CollectionFactory and SnippetFactory for test data setup. Vitest is used as the testing framework with modern ES6 import syntax.

Tests verify both standard and full-size image scenarios with specific URL patterns and WebP format handling.

Technical Details

Testing Framework: Jest/Vitest
Module System: ES Modules
Test Dependencies: Loader, CoverPresenter
Factory Pattern Implementation
Asset Path Validation
WebP Image Format Testing

Best Practices Demonstrated

The test suite exhibits several testing best practices including proper test isolation, descriptive test cases, and comprehensive edge case coverage. Notable practices include:

Factory pattern for test data generation
Separate test cases for different image sizes
Clear test case organization
Consistent assertion patterns

chalarangelo/30-seconds-of-code

spec/presenters/coverPresenter.test.js

            
import { describe, it, expect } from 'vitest';
import Loader from '#src/lib/loader.js';
import CoverPresenter from '#src/presenters/coverPresenter.js';

describe('CoverPresenter', () => {
  Loader.loadModules();
  const { CollectionFactory, SnippetFactory } = Loader.buildFactories();

  const snippet = SnippetFactory.create({ cover: 'snippet-cover' });
  const collection = CollectionFactory.create({ cover: 'collection-cover' });

  const snippetPresenter = new CoverPresenter(snippet);
  const collectionPresenter = new CoverPresenter(collection);

  describe('coverUrl', () => {
    it('returns the cover url for a snippet', () => {
      expect(snippetPresenter.coverUrl()).toEqual(
        '/assets/cover/snippet-cover-400.webp'
      );
    });

    it('returns the cover url for a snippet with full size', () => {
      expect(snippetPresenter.coverUrl(true)).toEqual(
        '/assets/cover/snippet-cover-800.webp'
      );
    });

    it('returns the cover url for a collection', () => {
      expect(collectionPresenter.coverUrl()).toEqual(
        '/assets/splash/collection-cover-600.webp'
      );
    });
  });

  describe('coverSrcset', () => {
    it('returns the cover srcset for a snippet', () => {
      expect(snippetPresenter.coverSrcset()).toEqual([
        '/assets/cover/snippet-cover-400.webp 400w',
        '/assets/cover/snippet-cover-800.webp 800w',
      ]);
    });

    it('returns the cover srcset for a snippet with full size', () => {
      expect(snippetPresenter.coverSrcset(true)).toEqual([
        '/assets/cover/snippet-cover-800.webp 800w',
        '/assets/cover/snippet-cover-400.webp 400w',
        '/assets/cover/snippet-cover-1200.webp 1200w',
      ]);
    });

    it('returns the cover srcset for a collection', () => {
      expect(collectionPresenter.coverSrcset()).toEqual([
        '/assets/splash/collection-cover-600.webp 600w',
        '/assets/splash/collection-cover-400.webp 400w',
      ]);
    });
  });
});