Improve test coverage with integration tests to catch UI/model integration issues

[evanwon]

Title

Improve test coverage with integration tests to catch UI/model integration issues

Description

Our current unit tests are well-structured but overly mock internal functionality, which allowed a recent change (switching from dynamic format previews to static placeholders) to pass all tests despite being a functional change. We need to add integration tests that verify the actual behavior of components working together.

Background

Recent changes to the popup preview functionality revealed that our tests have a gap:

• Changed popup.js from calling config.format(title, url) with actual page data to just displaying config.example placeholders
• Tests passed because they mock the FancyLinkFormatRegistry instead of using the real one
• Tests verify DOM structure but not the actual content/behavior of previews

Current State

What we have (working well):

• Unit tests for individual components in isolation
• Good coverage of error handling and edge cases
• Fast, reliable test execution

What's missing:

• Tests that verify components work correctly together
• Validation that format functions are called with real data
• Tests that actual formatted content appears in the UI (not just placeholders)

Proposed Solution

Phase 1: Add Integration Tests (High Priority)

Create new integration test directory and files:

// test/integration/popup-formatting.test.js
describe('Popup Formatting Integration', () => {
  beforeEach(() => {
    // Use REAL format registry, not mocked
    const formatRegistry = require('../../src/formats/format-registry.js');
    global.FancyLinkFormatRegistry = formatRegistry;
  });

  test('displays actual formatted previews with current tab data', async () => {
    // Setup real tab data
    browser.tabs.query.mockResolvedValue([{
      title: 'Test Page',
      url: 'https://example.com'
    }]);

    // Load popup
    // Verify previews show "[Test Page](https://example.com)" not "[Title](URL)"
  });

  test('format functions are called when tab exists', async () => {
    // Verify format() functions are invoked with actual tab title/URL
  });

  test('updates previews when cleanUrls setting changes', async () => {
    // Test interaction between browser.storage settings and preview display
  });
});

Phase 2: Enhance Existing Unit Tests (Medium Priority)

Small improvements to test/popup/popup.test.js:

1. Add preview content assertions:

test('updatePreviews shows placeholder text', async () => {
  // After changing to placeholder approach
  const markdownPreview = document.querySelector('#preview-markdown');
  expect(markdownPreview.textContent).toBe('[Title](URL)'); // Not dynamic content
});

2. Add test for format function invocation:

test('format functions are called when current tab exists', async () => {
  browser.tabs.query.mockResolvedValue([{ title: 'Test', url: 'https://test.com' }]);
  // ... trigger update
  expect(formatRegistry.formatConfig.markdown.format).toHaveBeenCalledWith('Test', 'https://test.com');
});

Phase 3: Consider E2E Tests (Low Priority/Future)

For critical user paths, consider adding Puppeteer/Playwright tests that:

• Load the extension in real Firefox
• Click format buttons
• Verify clipboard contents
• Test keyboard shortcuts

Benefits

1. Catch integration issues - Would have caught the recent preview regression
2. Maintain fast unit tests - Keep existing tests for fast feedback
3. Better confidence - Know that components work together correctly
4. Follow test pyramid - Many unit tests, some integration, few E2E

Implementation Notes

• Keep existing unit tests mostly as-is (they're valuable for testing in isolation)
• Integration tests should use real dependencies where possible
• Consider adding npm script: npm run test:integration
• Update CI to run both unit and integration tests

Acceptance Criteria

• Integration test file created at test/integration/popup-formatting.test.js
• At least 3 integration tests covering popup + format registry interaction
• Tests verify actual formatted content, not just DOM structure
• Tests would fail if we reverted to showing placeholders instead of formatted content
• All existing unit tests still pass
• Documentation updated to explain test strategy

Labels

• enhancement
• testing
• priority: medium