Fix unit test

Author: webstackdev

cover.jpg

@@ -144,7 +144,7 @@ describe('PrivacyForm behavior', () => {
         const elements = getPrivacyFormElements(element)
         const accessSubmitButton = elements.accessForm.querySelector('button[type="submit"]')
 
-        expect(elements.accessForm.dataset.privacyState).toBe('loading')
+        expect(elements.accessForm.dataset['privacyState']).toBe('loading')
         expect(elements.accessForm.getAttribute('aria-busy')).toBe('true')
         expect(accessSubmitButton).toBeInstanceOf(HTMLButtonElement)
         expect((accessSubmitButton as HTMLButtonElement).disabled).toBe(true)
@@ -155,7 +155,7 @@ describe('PrivacyForm behavior', () => {
         expect(accessLoadingToast?.textContent).toContain('Sending Request')
         expect(accessLoadingToast?.textContent).toContain('Your request is being prepared and submitted.')
 
-        expect(elements.deleteForm.dataset.privacyState).toBe('validation')
+        expect(elements.deleteForm.dataset['privacyState']).toBe('validation')
         expect(elements.deleteEmailInput.getAttribute('aria-invalid')).toBe('true')
         expect(elements.deleteConfirmCheckbox.getAttribute('aria-invalid')).toBe('true')
 

my-data-1776734445651.json

@@ -4,7 +4,12 @@ import { addScriptBreadcrumb, ClientScriptError } from '@components/scripts/erro
 import { handleScriptError } from '@components/scripts/errors/handler'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
-import { getPrivacyFormElements } from './selectors'
+import {
+  getPrivacyFormElements,
+  getPrivacyPreviewToastElement,
+  getPrivacyPreviewToastElements,
+  getPrivacySubmitButton,
+} from './selectors'
 
 type MessageType = 'success' | 'error' | 'info'
 type RequestType = 'ACCESS' | 'DELETE'
@@ -70,10 +75,7 @@ export class PrivacyFormElement extends LitElement {
   private deleteMessage!: HTMLElement
 
   private getPreviewToastElements(requestType: RequestType): HTMLElement[] {
-    const prefix = requestType === 'ACCESS' ? 'access' : 'delete'
-    return ['success', 'loading', 'error', 'validation']
-      .map(state => this.querySelector<HTMLElement>(`#${prefix}-preview-toast-${state}`))
-      .filter((el): el is HTMLElement => el !== null)
+    return getPrivacyPreviewToastElements(requestType, this)
   }
 
   override connectedCallback(): void {
@@ -160,7 +162,7 @@ export class PrivacyFormElement extends LitElement {
     state: RequestPreviewState | 'idle',
     requestType?: RequestType
   ): void {
-    form.dataset.privacyState = state
+    form.dataset['privacyState'] = state
     form.setAttribute('aria-busy', String(state === 'loading'))
 
     if (!requestType) {
@@ -172,8 +174,8 @@ export class PrivacyFormElement extends LitElement {
   }
 
   private setSubmitLoading(form: HTMLFormElement, loading: boolean): void {
-    const submitButton = form.querySelector('button[type="submit"]')
-    if (submitButton instanceof HTMLButtonElement) {
+    const submitButton = getPrivacySubmitButton(form)
+    if (submitButton) {
       submitButton.disabled = loading
     }
   }
@@ -397,13 +399,12 @@ export class PrivacyFormElement extends LitElement {
     const isAccessRequest = requestType === 'ACCESS'
     const form = isAccessRequest ? this.accessForm : this.deleteForm
     const emailInput = isAccessRequest ? this.accessEmailInput : this.deleteEmailInput
-    const prefix = isAccessRequest ? 'access' : 'delete'
 
     // Show only the matching static SSR preview toast; hide all others for this form.
     for (const el of this.getPreviewToastElements(requestType)) {
       el.classList.add('hidden')
     }
-    this.querySelector<HTMLElement>(`#${prefix}-preview-toast-${previewState}`)?.classList.remove('hidden')
+    getPrivacyPreviewToastElement(requestType, previewState, this)?.classList.remove('hidden')
 
     this.setRequestState(form, previewState, requestType)
     this.setSubmitLoading(form, previewState === 'loading')

src/components/Pages/MyData/client/__tests__/index.spec.ts

@@ -1,6 +1,7 @@
 /**
  * Selectors for PrivacyForm component elements
  */
+import { isButtonElement } from '@components/scripts/assertions/elements'
 import { ClientScriptError } from '@components/scripts/errors'
 
 type SelectorRoot = Document | DocumentFragment | Element
@@ -28,6 +29,19 @@ function queryRequiredElement<TElement extends Element>(
 
 const isHtmlElement = (element: Element): element is HTMLElement => element instanceof HTMLElement
 
+type RequestType = 'ACCESS' | 'DELETE'
+type RequestPreviewState = 'loading' | 'success' | 'error' | 'validation'
+
+const previewToastStates: RequestPreviewState[] = ['success', 'loading', 'error', 'validation']
+
+const getPreviewToastSelector = (
+  requestType: RequestType,
+  previewState: RequestPreviewState
+): string => {
+  const prefix = requestType === 'ACCESS' ? 'access' : 'delete'
+  return `#${prefix}-preview-toast-${previewState}`
+}
+
 export interface PrivacyFormElements {
   statusMessage: HTMLElement | undefined
 
@@ -93,3 +107,28 @@ export function getPrivacyFormElements(root?: SelectorRoot): PrivacyFormElements
     ),
   }
 }
+
+export function getPrivacyPreviewToastElements(
+  requestType: RequestType,
+  root?: SelectorRoot
+): HTMLElement[] {
+  const resolvedRoot = resolveRoot(root)
+
+  return previewToastStates
+    .map(previewState => resolvedRoot.querySelector(getPreviewToastSelector(requestType, previewState)))
+    .filter((element): element is HTMLElement => element instanceof HTMLElement)
+}
+
+export function getPrivacyPreviewToastElement(
+  requestType: RequestType,
+  previewState: RequestPreviewState,
+  root?: SelectorRoot
+): HTMLElement | undefined {
+  const element = resolveRoot(root).querySelector(getPreviewToastSelector(requestType, previewState))
+  return element instanceof HTMLElement ? element : undefined
+}
+
+export function getPrivacySubmitButton(form: HTMLFormElement): HTMLButtonElement | undefined {
+  const button = form.querySelector('button[type="submit"]')
+  return isButtonElement(button) ? button : undefined
+}

src/components/Pages/MyData/client/index.ts

@@ -387,7 +387,7 @@ const deletePreviewState = resolvePreviewState(Astro.url.searchParams.get('delet
               </div>
               <div>
                 <h3 class="mb-2 text-lg font-semibold text-danger">Check Your Details</h3>
-                <p class="text-sm">Enter a valid email address and confirm the deletion request befope submitting.</p>
+                <p class="text-sm">Enter a valid email address and confirm the deletion request before submitting.</p>
               </div>
             </div>
           </div>