tessl/npm-storybook--addon-backgrounds

Deprecated Storybook addon that throws migration errors directing users to the new package structure in Storybook 9.0

1.08x

Overview

Eval results

Files

Call Tracking Debugger

Name: tessl/npm-storybook--addon-backgrounds
Rating: 0.86 (1 reviews)
Author: tessl

Build a lightweight call tracking system for debugging function execution flows in a UI component library. The system should track function calls, their arguments, and return values during component interactions.

Requirements

You need to implement:

Call Tracker (src/tracker.ts):
- Create a function that wraps objects and their methods to enable call tracking
- Track each method invocation with: method name, arguments, and return value
- Preserve the original behavior of wrapped methods
Test Suite (src/tracker.test.ts):
- Verify basic method call tracking (single call)
- Verify multiple sequential calls are tracked in order
- Verify argument capturing for different types (primitives, objects, arrays)
- Verify return value capturing

Expected Behavior

When a method is called on a tracked object:

The method should execute normally
Call details should be recorded including: method name, arguments passed, and value returned
Original object functionality must remain intact

Example Usage

// Example of what the system should support
const calculator = {
  add: (a: number, b: number) => a + b,
  multiply: (a: number, b: number) => a * b
};

// Wrap the calculator to track calls
const tracked = wrapForTracking(calculator);

// Use normally
tracked.add(2, 3); // Returns 5
tracked.multiply(4, 5); // Returns 20

// Retrieve call history
const calls = getCallHistory();
// Should show:
// - add was called with [2, 3] and returned 5
// - multiply was called with [4, 5] and returned 20

Test Cases { .test-cases }

Test 1: Basic call tracking { .test-case @test }

// Given: A simple object with a method
const obj = { getValue: () => 42 };
const tracked = wrapForTracking(obj);

// When: The method is called
const result = tracked.getValue();

// Then:
// - Result should be 42
// - Call history should contain one entry with method name "getValue"
// - Entry should show no arguments and return value of 42

Test 2: Multiple calls tracking { .test-case @test }

// Given: An object with a method
const counter = {
  increment: (val: number) => val + 1
};
const tracked = wrapForTracking(counter);

// When: Method is called multiple times
tracked.increment(1);
tracked.increment(2);
tracked.increment(3);

// Then:
// - Call history should contain 3 entries in order
// - First entry: arguments [1], return value 2
// - Second entry: arguments [2], return value 3
// - Third entry: arguments [3], return value 4

Test 3: Argument capture { .test-case @test }

// Given: An object with a method that takes complex arguments
const processor = {
  process: (config: {name: string, count: number}) => config.count * 2
};
const tracked = wrapForTracking(processor);

// When: Method is called with object argument
const result = tracked.process({name: "test", count: 5});

// Then:
// - Result should be 10
// - Call history entry should capture the full config object
// - Arguments should be [{name: "test", count: 5}]

Dependencies { .dependencies }

@storybook/instrumenter { .dependency }

Provides debugging and call tracking functionality for interactive testing.

Constraints

Use TypeScript for implementation
Must preserve original object behavior
Call history should be retrievable at any time
Support synchronous functions only

Install with Tessl CLI

npx tessl i tessl/npm-storybook--addon-backgrounds