Use the har to make snapshots.

Author: nedtwigg

browser-extension/tests/lib/enhancers/github.test.ts

@@ -1,84 +1,114 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { EnhancerRegistry } from '../../../src/lib/registries'
+import { PAGES } from '../../har-index'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 // Mock WXT's defineContentScript global
 vi.stubGlobal('defineContentScript', vi.fn())
 
-describe('GitHubHandler', () => {
-  let enhancers: EnhancerRegistry
-  let mockTextarea: HTMLTextAreaElement
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-  beforeEach(() => {
-    // Reset DOM and registries for each test
-    document.body.innerHTML = ''
-    enhancers = new EnhancerRegistry()
-
-    // Mock window.location for GitHub PR page
-    Object.defineProperty(window, 'location', {
-      value: {
-        hostname: 'github.com',
-        href: 'https://github.com/diffplug/selfie/pull/517',
-        pathname: '/diffplug/selfie/pull/517',
-      },
-      writable: true,
-    })
+// Helper function to load and extract HTML from HAR files
+async function loadHarHtml(key: string): Promise<string> {
+  const harPath = path.join(__dirname, '../../har', `${key}.har`)
+  const harContent = await fs.readFile(harPath, 'utf-8')
+  const harData = JSON.parse(harContent)
 
-    // Create a mock textarea element that mimics GitHub's PR comment box
-    mockTextarea = document.createElement('textarea')
-    mockTextarea.name = 'comment[body]'
-    mockTextarea.placeholder = 'Leave a comment'
-    mockTextarea.className = 'form-control markdown-body'
+  // Find the main HTML response (same logic as har-view.ts)
+  const mainEntry = harData.log.entries.find((entry: any) => 
+    entry.request.url.includes('github.com') && 
+    entry.response.content.mimeType?.includes('text/html') &&
+    entry.response.content.text
+  )
 
-    // Add it to a typical GitHub comment form structure
-    const commentForm = document.createElement('div')
-    commentForm.className = 'js-new-comment-form'
-    commentForm.appendChild(mockTextarea)
-    document.body.appendChild(commentForm)
-  })
+  if (!mainEntry) {
+    throw new Error(`No HTML content found in HAR file: ${key}.har`)
+  }
 
-  it('should identify GitHub PR textarea and register it in TextareaRegistry', () => {
-    // Simulate the content script's enhanceMaybe function
-    // const enhancedTextarea = enhancers.tryToEnhance(mockTextarea)
-    // expect(enhancedTextarea).toBeTruthy()
-    // expect(enhancedTextarea?.textarea).toBe(mockTextarea)
-    // expect(enhancedTextarea?.spot.type).toBe('GH_PR_ADD_COMMENT')
-    // // Register the enhanced textarea
-    // if (enhancedTextarea) {
-    //   enhancedTextareas.register(enhancedTextarea)
-    // }
-    // // Verify it's in the registry
-    // const registeredTextarea = enhancedTextareas.get(mockTextarea)
-    // expect(registeredTextarea).toBeTruthy()
-    // expect(registeredTextarea?.textarea).toBe(mockTextarea)
-  })
+  return mainEntry.response.content.text
+}
 
-  it('should create correct GitHubContext spot for PR comment', () => {
-    // const _enhancedTextarea = enhancers.tryToEnhance(mockTextarea)
-    // expect(enhancedTextarea).toBeTruthy()
-    // Snapshot test on the spot value
-    // expect(enhancedTextarea?.spot).toMatchSnapshot('github-pr-517-spot')
-    // Also verify specific expected values
-    // expect(enhancedTextarea?.spot).toMatchObject({
-    //   domain: 'github.com',
-    //   number: 517,
-    //   slug: 'diffplug/selfie',
-    //   type: 'GH_PR_ADD_COMMENT',
-    //   unique_key: 'github:diffplug/selfie:pull:517',
-    // })
+describe('github', () => {
+  beforeEach(() => {
+    // Reset DOM between tests
+    document.body.innerHTML = ''
+    
+    // Mock console methods to avoid noise
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
   })
 
-  it('should not enhance textarea on non-GitHub pages', () => {
-    // Change location to non-GitHub site
-    Object.defineProperty(window, 'location', {
-      value: {
-        hostname: 'example.com',
-        href: 'https://example.com/some/page',
-        pathname: '/some/page',
-      },
-      writable: true,
+  // Helper to setup DOM environment with location mocking
+  function setupDOMEnvironment(url: string, html: string) {
+    // Set up the HTML content
+    document.body.innerHTML = html
+    
+    // Mock window.location.pathname for GitHub enhancer
+    Object.defineProperty(window.location, 'pathname', {
+      value: new URL(url).pathname,
+      configurable: true
     })
+    
+    // Add GitHub hostname meta tag (for the enhancer's new hostname check)
+    const meta = document.createElement('meta')
+    meta.name = 'hostname'
+    meta.content = 'github.com'
+    document.head.appendChild(meta)
+  }
 
-    const enhancedTextarea = enhancers.tryToEnhance(mockTextarea)
-    expect(enhancedTextarea).toBeNull()
+  it('should identify gh_pr textarea and create proper spot object', async () => {
+    const enhancers = new EnhancerRegistry()
+    const url = PAGES.gh_pr
+    
+    // Load the HTML from HAR file
+    const html = await loadHarHtml('gh_pr')
+    
+    // Setup DOM environment with proper location
+    setupDOMEnvironment(url, html)
+    
+    // Get all textarea elements from the page
+    const textareas = document.querySelectorAll('textarea')
+    
+    // Try to enhance each textarea - should find at least one GitHub textarea
+    let enhancedCount = 0
+    let lastEnhancedResult: any = null
+    
+    for (const textarea of textareas) {
+      const enhancedTextarea = enhancers.tryToEnhance(textarea as HTMLTextAreaElement)
+      if (enhancedTextarea) {
+        enhancedCount++
+        lastEnhancedResult = enhancedTextarea
+      }
+    }
+    
+    expect(enhancedCount).toBeGreaterThan(0)
+    expect(lastEnhancedResult).toBeTruthy()
+    
+    // Snapshot test on the spot object structure
+    expect(lastEnhancedResult.spot).toMatchInlineSnapshot(`
+      {
+        "domain": "github.com",
+        "number": 517,
+        "slug": "diffplug/selfie",
+        "type": "GH_PR_ADD_COMMENT",
+        "unique_key": "github.com:diffplug/selfie:517",
+      }
+    `)
+    
+    // Verify specific fields based on the URL
+    const urlObj = new URL(url)
+    const match = urlObj.pathname.match(/^\/([^/]+)\/([^/]+)\/(?:pull|issues)\/(\d+)/)
+    expect(match).toBeTruthy() // Ensure URL pattern matches
+    
+    const [, owner, repo, numberStr] = match!
+    
+    expect(owner).toBeDefined()
+    expect(repo).toBeDefined()
+    expect(numberStr).toBeDefined()
+    
+    expect(lastEnhancedResult.spot.slug).toBe(`${owner}/${repo}`)
+    expect(lastEnhancedResult.spot.number).toBe(parseInt(numberStr!, 10))
+    expect(lastEnhancedResult.spot.unique_key).toBe(`github.com:${owner}/${repo}:${numberStr}`)
   })
 })