Back to Repositories

Testing BreadcrumbPresenter Navigation System in 30-seconds-of-code

This test suite validates the BreadcrumbPresenter functionality in a JavaScript application, focusing on breadcrumb generation and collection recommendations. The tests ensure proper navigation hierarchy and related content suggestions.

Test Coverage Overview

The test suite provides comprehensive coverage of the BreadcrumbPresenter class functionality.

Key areas tested include:

Breadcrumb generation for nested navigation paths
Recommended collection determination
Integration with collection and snippet factories
Proper URL formatting and hierarchy maintenance

Implementation Analysis

The testing approach utilizes Jest’s describe/it blocks for clear test organization and factory patterns for test data setup.

Notable patterns include:

Factory method pattern for test data generation
Hierarchical test structure
Modular test setup with separate collection types
Mock data creation for different collection levels

Technical Details

Testing infrastructure includes:

Vitest as the testing framework
Custom Loader utility for module management
Factory classes for test data generation
Configuration settings integration
ESLint for code quality

Best Practices Demonstrated

The test suite exemplifies several testing best practices.

Notable examples include:

Clear test case isolation and organization
Comprehensive test data setup
Explicit expectations and assertions
Proper use of beforeEach for test setup
Maintainable and readable test structure

chalarangelo/30-seconds-of-code

spec/presenters/breadcrumbPresenter.test.js

            
/* eslint-disable no-unused-vars */
import { describe, it, expect } from 'vitest';
import Loader from '#src/lib/loader.js';
import BreadcrumbPresenter from '#src/presenters/breadcrumbPresenter.js';
import settings from '#src/config/settings.js';

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

  const mainCollection = CollectionFactory.create('main');
  const primaryCollection = CollectionFactory.create('primary', {
    id: 'js',
    miniTitle: 'JavaScript',
  });
  const secondaryCollection = CollectionFactory.create('secondary', {
    id: 'js/c/array',
    parentId: 'js',
    miniTitle: 'Array',
  });
  const otherSecondaryCollection = CollectionFactory.create('secondary', {
    id: 'js/c/object',
    parentId: 'js',
    miniTitle: 'Object',
  });

  const snippet = SnippetFactory.create({
    id: 'js/s/my-snippet',
    shortTitle: 'My snippet',
    tags: 'array;object',
  });

  const collectionSnippetPrimary = CollectionSnippetFactory.create({
    collectionId: primaryCollection.id,
    snippetId: snippet.id,
  });
  const collectionSnippetSecondary = CollectionSnippetFactory.create({
    collectionId: secondaryCollection.id,
    snippetId: snippet.id,
  });
  const collectionSnippetOtherSecondary = CollectionSnippetFactory.create({
    collectionId: otherSecondaryCollection.id,
    snippetId: snippet.id,
  });

  const snippetPresenter = new BreadcrumbPresenter(snippet);

  describe('breadcrumbs', () => {
    it('returns the breadcrumbs for a snippet', () => {
      expect(snippetPresenter.breadcrumbs).toEqual([
        settings.breadcrumbs.home,
        { url: '/js/p/1', name: 'JavaScript' },
        { url: '/js/c/array/p/1', name: 'Array' },
        { url: '/js/s/my-snippet', name: 'My snippet' },
      ]);
    });
  });

  describe('recommendedCollection', () => {
    it('returns the recommended collection for a snippet', () => {
      expect(snippetPresenter.recommendedCollection).toEqual(
        otherSecondaryCollection
      );
    });
  });
});