test(PAYMENTS-18172): add tests

src/core/guards/apple-pay/apple-pay-error.guard.spec.ts

@@ -0,0 +1,14 @@
+import 'reflect-metadata';
+import { isApplePayErrorEventMessage } from './apple-pay-error.guard';
+import { EventName } from '../../event-name.enum';
+
+describe('Event message type guard', () => {
+  it('Should return true', () => {
+    expect(
+      isApplePayErrorEventMessage({ name: EventName.applePayError })
+    ).toBeTruthy();
+  });
+  it('Should return false', () => {
+    expect(isApplePayErrorEventMessage({})).toBeFalsy();
+  });
+});

src/features/headless-checkout/post-messages-handlers/apple-pay/apple-pay-error.handler.spec.ts

@@ -1,29 +1,26 @@
 import { applePayErrorHandler } from './apple-pay-error.handler';
 import { Message } from '../../../../core/message.interface';
 import { EventName } from '../../../../core/event-name.enum';
-import { getUserBalanceValueHandler } from '../get-user-balance-value.handler';
 
-const mockData = {
-  fieldName: 'fieldName',
-};
-
-const mockMessage: Message<{ fieldName: string } | null | undefined> = {
-  name: EventName.finishLoadComponent,
+const mockMessage: Message<{ error: string } | null | undefined> = {
+  name: EventName.applePayError,
   data: {
-    fieldName: 'fieldName',
+    error: 'error',
   },
 };
 
-describe('finishLoadComponentHandler', () => {
+describe('applePayErrorHandler', () => {
   it('Should handle data', () => {
     expect(applePayErrorHandler(mockMessage)).toEqual({
       isHandled: true,
-      value: null,
+      value: {
+        error: 'error',
+      },
     });
   });
   it('Should return null', () => {
     expect(
-      getUserBalanceValueHandler({ name: EventName.getSavedMethods })
+      applePayErrorHandler({ name: EventName.getSavedMethods })
     ).toBeNull();
   });
 });

src/features/headless-checkout/web-components/apple-pay/apple-pay.component.spec.ts

@@ -0,0 +1,88 @@
+import { container } from 'tsyringe';
+import { WebComponentTagName } from '../../../../core/web-components/web-component-tag-name.enum';
+import { noopStub } from '../../../../tests/stubs/noop.stub';
+import { FormSpy } from '../../../../core/spy/form-spy/form-spy';
+import { HeadlessCheckout } from '../../headless-checkout';
+import { ApplePayComponent } from './apple-pay.component';
+import { EventName } from '../../../../core/event-name.enum';
+
+function createComponent(): HTMLElement {
+  const element = document.createElement(WebComponentTagName.ApplePayComponent);
+  (document.getElementById('container')! as HTMLElement).appendChild(element);
+  return element;
+}
+
+describe('ApplePayComponent', () => {
+  let headlessCheckout: HeadlessCheckout;
+  let formSpy: FormSpy;
+
+  window.customElements.define(
+    WebComponentTagName.ApplePayComponent,
+    ApplePayComponent
+  );
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="container"></div>';
+
+    headlessCheckout = {
+      form: {
+        onFieldsStatusChange: noopStub,
+      },
+      events: {
+        onCoreEvent: noopStub,
+      },
+    } as unknown as HeadlessCheckout;
+
+    formSpy = {
+      listenFormInit: noopStub,
+      get formWasInit() {
+        return;
+      },
+    } as unknown as FormSpy;
+
+    container.clearInstances();
+
+    container
+      .register<FormSpy>(FormSpy, {
+        useValue: formSpy,
+      })
+      .register<HeadlessCheckout>(HeadlessCheckout, {
+        useValue: headlessCheckout,
+      });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('Web component should be rendered', () => {
+    spyOnProperty(formSpy, 'formWasInit').and.returnValue(true);
+
+    createComponent();
+
+    expect(document.querySelector('iframe')).toBeDefined();
+  });
+
+  it('Should draw error', (done) => {
+    spyOnProperty(formSpy, 'formWasInit').and.returnValue(true);
+    // eslint-disable-next-line prefer-const
+    let element: HTMLElement;
+    spyOn(headlessCheckout.events, 'onCoreEvent').and.callFake((...args) => {
+      const eventName = args[0];
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      const callback: (value?: unknown) => void = args[2];
+      setTimeout(() => {
+        if (eventName === EventName.applePayError) {
+          callback({ error: 'paymentError' });
+          expect(element.querySelector('.apple-pay-error')).not.toBeNull();
+          done();
+        }
+      });
+      return noopStub;
+    });
+
+    element = createComponent();
+    expect(document.querySelector('iframe')).toBeDefined();
+  });
+});