Fix Add Contact

package.json

@@ -1,6 +1,6 @@
 {
   "name": "contacts-pane",
-  "version": "3.2.1-5",
+  "version": "3.2.1-6",
   "description": "Contacts Pane: Contacts manager for Address Book, Groups, and Individuals.",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",

src/contactsPane.js

@@ -10,7 +10,6 @@ to change its state according to an ontology, comment on it, etc.
 **
 */
 
-import { html } from 'lit'
 import { authn } from 'solid-logic'
 import { saveNewGroup } from './contactLogic'
 import * as UI from 'solid-ui'
@@ -29,7 +28,7 @@ import { alertDialog, complain, deleteThingAndDoc, setDom, setupResponsiveStacki
 import * as debug from './debug'
 import './styles/contactsRDFFormsEnforced.css'
 
-import './components/add-contact-modal'
+import AddContactModal from './components/add-contact-modal'
 
 const ns = UI.ns
 const utils = UI.utils
@@ -413,10 +412,11 @@ function buildHeaderSection (ctx) {
   newContactButton.addEventListener('click', async function (_event) {
     const { book, selectedGroups } = ctx
 
-    UI.showDialog(html`<solid-contacts-pane-add-contact-modal
-        .book=${book}
-        .selectedGroups=${selectedGroups}
-      ></solid-contacts-pane-add-contact-modal>`, {
+    UI.showDialog(AddContactModal, {
+      props: {
+        book,
+        selectedGroups
+      },
       onClose (person) {
         if (!person) {
           return

test/unit/pane.accessibility.test.ts

@@ -1,24 +1,54 @@
 // This code was generated by raptor mini in GitHub Copilot.
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { axe } from 'vitest-axe'
+import * as UI from 'solid-ui'
+import { authn, store } from 'solid-logic'
 import pane from '../../src/contactsPane'
 import { sym, parse } from 'rdflib'
-import { store } from 'solid-logic'
 import { context, doc, prefixes, web } from './setup'
 
 // ensure the store knows this is an AddressBook so asyncRender will build UI
 
 const base = doc.dir()?.uri || ''
 const book = sym(base + 'book.ttl#this')
+const group = sym(base + 'group.ttl#this')
+const person = sym(base + 'group.ttl#person')
+const webMap = web as Record<string, string>
+const originalByName = context.session.paneRegistry.byName
+const contactPaneRenderMock = vi.fn(() => {
+  const paneDiv = document.createElement('div')
+  paneDiv.textContent = 'mock contact pane'
+  return paneDiv
+})
 
-web[base + 'book.ttl'] = `
+webMap[base + 'book.ttl'] = `
 <#this> a vcard:AddressBook;
     vcard:fn "Test address book".
 `
-for (const uri in web) {
-  parse(prefixes + web[uri], store, uri)
+webMap[base + 'group.ttl'] = `
+<#this> a vcard:Group;
+    vcard:fn "Selected group";
+    vcard:hasMember <#person>.
+
+<#person> a vcard:Individual;
+    vcard:fn "Selected person".
+`
+for (const uri in webMap) {
+  parse(prefixes + webMap[uri], store, uri)
 }
 
+beforeEach(() => {
+  document.body.innerHTML = ''
+  vi.restoreAllMocks()
+  contactPaneRenderMock.mockClear()
+  context.session.paneRegistry.byName = (name: string) => {
+    if (name === 'contact') {
+      return { render: contactPaneRenderMock }
+    }
+    return originalByName(name)
+  }
+})
+
 describe('contacts-pane accessibility', () => {
   it('renders an empty UI of an address book', async () => {
     const div = pane.render(book, context)
@@ -32,6 +62,42 @@ describe('contacts-pane accessibility', () => {
     expect(axeResults.violations).toHaveLength(0)
   })
 
+  it('opens the add-contact dialog and updates the pane when it closes with a person', async () => {
+    const webId = 'https://janedoe.example/profile/card#me'
+    vi.spyOn(authn, 'currentUser').mockReturnValue(webId as any)
+    vi.spyOn(authn, 'checkUser').mockResolvedValue(webId as any)
+
+    let dialogConfig: any
+    const showDialogSpy = vi.spyOn(UI, 'showDialog').mockImplementation((DialogComponent, config) => {
+      expect((DialogComponent as { name?: string }).name).toBe('AddContactModal')
+      dialogConfig = config
+      return document.createElement('div') as any
+    })
+
+    const div = pane.render(book, context)
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    const newContactButton = (Array.from(div.querySelectorAll('button')) as HTMLButtonElement[])
+      .find((button) => button.textContent?.includes('New contact'))
+    expect(newContactButton).toBeTruthy()
+
+    newContactButton?.click()
+
+    expect(showDialogSpy).toHaveBeenCalledTimes(1)
+    expect(dialogConfig?.props).toEqual({
+      book,
+      selectedGroups: {}
+    })
+
+    dialogConfig.props.selectedGroups[group.uri] = true
+    dialogConfig.onClose(person)
+
+    expect(contactPaneRenderMock).toHaveBeenCalledWith(person, context)
+    expect(div.querySelector('.detailsSectionContent--wide')).toBeTruthy()
+    expect(div.querySelector('.detailsSectionContent')?.textContent).toContain('mock contact pane')
+    expect(div.querySelector('.personLi.selected')?.textContent).toContain('Selected person')
+  })
+
   it('includes a clear button in the search input and it works', async () => {
     const div = pane.render(book, context)
     // let asyncRender finish (it runs in a microtask)