update tests

Author: billyvg

packages/feedback/test/widget/Actor.test.ts

@@ -14,7 +14,7 @@ describe('Actor', () => {
     const actorComponent = renderActor();
 
     expect(actorComponent.el).toBeInstanceOf(HTMLButtonElement);
-    expect(actorComponent.el.textContent).toBe(ACTOR_LABEL);
+    expect(actorComponent.el?.textContent).toBe(ACTOR_LABEL);
   });
 
   it('calls `onClick` callback when clicked on', () => {
@@ -24,19 +24,19 @@ describe('Actor', () => {
     });
 
     const event = new Event('click');
-    actorComponent.el.dispatchEvent(event);
+    actorComponent.el?.dispatchEvent(event);
     expect(onClick).toHaveBeenCalledWith(event);
   });
 
   it('can manually show and hide the actor', () => {
     const actorComponent = renderActor();
 
-    expect(actorComponent.el.getAttribute('ariaHidden')).toBe('false');
+    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('false');
 
     actorComponent.hide();
-    expect(actorComponent.el.getAttribute('ariaHidden')).toBe('true');
+    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('true');
 
     actorComponent.show();
-    expect(actorComponent.el.getAttribute('ariaHidden')).toBe('false');
+    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('false');
   });
 });

packages/feedback/test/widget/Dialog.test.ts

@@ -1,6 +1,10 @@
 import type { DialogProps } from '../../src/widget/Dialog';
 import { Dialog } from '../../src/widget/Dialog';
 
+type NonNullableFields<T> = {
+  [P in keyof T]: NonNullable<T[P]>;
+};
+
 function renderDialog({
   showName = true,
   showEmail = true,
@@ -35,7 +39,7 @@ function renderDialog({
     cancelButtonLabel,
     submitButtonLabel,
     ...rest,
-  });
+  }) as NonNullableFields<ReturnType<typeof Dialog>>;
 }
 
 describe('Dialog', () => {
@@ -82,5 +86,6 @@ describe('Dialog', () => {
     dialogComponent.el.querySelector('.dialog__content')?.dispatchEvent(event);
 
     expect(event.stopPropagation).toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
   });
 });

packages/feedback/test/widget/Form.test.ts

@@ -1,6 +1,10 @@
 import type { FormComponentProps } from '../../src/widget/Form';
 import { Form } from '../../src/widget/Form';
 
+type NonNullableFields<T> = {
+  [P in keyof T]: NonNullable<T[P]>;
+};
+
 function renderForm({
   showName = true,
   showEmail = true,
@@ -16,7 +20,7 @@ function renderForm({
   cancelButtonLabel = 'Cancel!',
   submitButtonLabel = 'Submit!',
   ...rest
-}: Partial<FormComponentProps> = {}) {
+}: Partial<FormComponentProps> = {}){
   return Form({
     isAnonymous,
     showName,
@@ -32,7 +36,7 @@ function renderForm({
     cancelButtonLabel,
     submitButtonLabel,
     ...rest,
-  });
+  }) as NonNullableFields<ReturnType<typeof Form>>;
 }
 
 describe('Form', () => {
@@ -50,7 +54,6 @@ describe('Form', () => {
 
     const button = formComponent.el.querySelector('button[type="submit"]') as HTMLButtonElement | null;
     expect(button?.textContent).toBe('Submit!');
-    expect(button?.disabled).toBe(true);
     expect(formComponent.el.querySelector('button[type="button"]')?.textContent).toBe('Cancel!');
   });
 
@@ -84,7 +87,7 @@ describe('Form', () => {
     const messageLabel = formComponent.el.querySelector('label[htmlFor="message"]') as HTMLLabelElement;
     expect(nameLabel.textContent).toBe('Name!');
     expect(emailLabel.textContent).toBe('Email!');
-    expect(messageLabel.textContent).toBe('Description!');
+    expect(messageLabel.textContent).toBe('Description! (required)');
 
     const nameInput = formComponent.el.querySelector('[name="name"]') as HTMLInputElement;
     const emailInput = formComponent.el.querySelector('[name="email"]') as HTMLInputElement;
@@ -101,40 +104,24 @@ describe('Form', () => {
     const message = formComponent.el.querySelector('[name="message"]') as HTMLTextAreaElement;
     const submit = formComponent.el.querySelector('button[type="submit"]') as HTMLButtonElement;
 
-    expect(submit.disabled).toBe(true);
-
     message.value = 'Foo (message)';
     message.dispatchEvent(new KeyboardEvent('keyup'));
-    expect(submit.disabled).toBe(false);
 
     message.value = '';
     message.dispatchEvent(new KeyboardEvent('keyup'));
-    expect(submit.disabled).toBe(true);
-  });
-
-  it('can manually enable/disable submit button', () => {
-    const formComponent = renderForm();
-    const submit = formComponent.el.querySelector('button[type="submit"]') as HTMLButtonElement;
-    expect(submit.disabled).toBe(true);
-
-    formComponent.setSubmitEnabled();
-    expect(submit.disabled).toBe(false);
-
-    formComponent.setSubmitDisabled();
-    expect(submit.disabled).toBe(true);
   });
 
   it('can show error', () => {
     const formComponent = renderForm();
     const errorEl = formComponent.el.querySelector('.form__error-container') as HTMLDivElement;
-    expect(errorEl.getAttribute('ariaHidden')).toBe('true');
+    expect(errorEl.getAttribute('aria-hidden')).toBe('true');
 
     formComponent.showError('My Error');
-    expect(errorEl.getAttribute('ariaHidden')).toBe('false');
+    expect(errorEl.getAttribute('aria-hidden')).toBe('false');
     expect(errorEl.textContent).toBe('My Error');
 
     formComponent.hideError();
-    expect(errorEl.getAttribute('ariaHidden')).toBe('true');
+    expect(errorEl.getAttribute('aria-hidden')).toBe('true');
     expect(errorEl.textContent).toBe('');
   });
 

packages/feedback/test/widget/SubmitButton.test.ts

@@ -14,20 +14,9 @@ describe('SubmitButton', () => {
     const submitButtonComponent = renderSubmitButton();
 
     expect(submitButtonComponent.el).toBeInstanceOf(HTMLButtonElement);
+    if (!submitButtonComponent.el) {
+      throw new Error('Element does not exist');
+    }
     expect(submitButtonComponent.el.textContent).toBe(SUBMIT_BUTTON_LABEL);
-    expect(submitButtonComponent.el.disabled).toBe(true);
-    expect(submitButtonComponent.el.getAttribute('ariaDisabled')).toBe('true');
-  });
-
-  it('toggles between enabled and disabled', () => {
-    const submitButtonComponent = renderSubmitButton();
-
-    submitButtonComponent.setEnabled();
-    expect(submitButtonComponent.el.disabled).toBe(false);
-    expect(submitButtonComponent.el.ariaDisabled).toBe('false');
-
-    submitButtonComponent.setDisabled();
-    expect(submitButtonComponent.el.disabled).toBe(true);
-    expect(submitButtonComponent.el.ariaDisabled).toBe('true');
   });
 });

packages/feedback/test/widget/SuccessMessage.test.ts

@@ -14,7 +14,7 @@ describe('SuccessMessage', () => {
     const successMessageComponent = renderSuccessMessage();
 
     expect(successMessageComponent.el).toBeInstanceOf(HTMLDivElement);
-    expect(successMessageComponent.el.textContent).toBe(SUCCESS_MESSAGE_TEXT);
+    expect(successMessageComponent.el?.textContent).toBe(SUCCESS_MESSAGE_TEXT);
   });
 
   it('removes element and calls `onRemove` callback when clicked', () => {
@@ -23,9 +23,9 @@ describe('SuccessMessage', () => {
       onRemove,
     });
 
-    document.body.appendChild(successMessageComponent.el);
+    successMessageComponent.el && document.body.appendChild(successMessageComponent.el);
     expect(document.querySelector('.success-message')).not.toBeNull();
-    successMessageComponent.el.dispatchEvent(new Event('click'));
+    successMessageComponent.el?.dispatchEvent(new Event('click'));
     expect(document.querySelector('.success-message')).toBeNull();
     expect(onRemove).toHaveBeenCalledWith();
   });