Added Vitest to SDK's (#94)

.github/workflows/tests.yml

@@ -0,0 +1,31 @@
+name: Everfund CI
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+
+jobs:
+  build:
+    name: Run Tests
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
+    steps:
+    - uses: actions/checkout@v3
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 8
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      run: pnpm install
+
+    - name: Run tests
+      run: pnpm test

examples/next/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "examples:build": "vite build",
-    "examples:dev": "vite",
-    "examples:serve": "vite preview",
-    "examples:start": "vite"
+    "examples:build": "next build",
+    "examples:dev": "next dev",
+    "examples:serve": "next preview",
+    "examples:start": "next"
   },
   "dependencies": {
     "@everfund/example-css": "workspace:*",

examples/react/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "examples:build": "next build",
-    "examples:dev": "next dev",
-    "examples:serve": "next serve",
-    "examples:start": "next"
+    "examples:build": "vite build",
+    "examples:dev": "vite",
+    "examples:serve": "vite serve",
+    "examples:start": "vite"
   },
   "dependencies": {
     "@everfund/example-css": "workspace:*",

package.json

@@ -5,15 +5,18 @@
     "build": "turbo run build",
     "dev": "turbo run dev --concurrency=20",
     "format": "prettier --write \"**/*\"",
-    "lint": "turbo run lint"
+    "lint": "turbo run lint",
+    "test": "turbo run test"
   },
   "devDependencies": {
     "@everfund/eslint-config-everfund": "workspace:*",
     "@everfund/prettier": "workspace:*",
     "eslint": "^8.46.0",
     "prettier": "^3.0.1",
     "tsup": "^7.2.0",
-    "turbo": "1.10.12"
+    "turbo": "1.10.12",
+    "vite": "^4.4.8",
+    "vitest": "^0.33.0"
   },
   "namespace": "@everfund"
 }

packages/js-sdk/package.json

@@ -16,7 +16,8 @@
   ],
   "scripts": {
     "build": "tsup --config ./tsup.config.json --dts",
-    "lint": "eslint \"**/*.ts\""
+    "lint": "eslint \"**/*.ts\"",
+    "test": "vitest"
   },
   "dependencies": {
     "body-scroll-lock": "^4.0.0-beta.0",
@@ -26,9 +27,11 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/element-closest": "^3.0.0",
     "genversion": "^3.1.1",
+    "jsdom": "^22.1.0",
     "tsconfig": "workspace:*",
     "tsup": "^7.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
   },
   "publishConfig": {
     "access": "public",

packages/js-sdk/src/index.test.ts

@@ -0,0 +1,159 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import everfund from './index';
+import type { SuccessResponse } from './types';
+
+describe('everfund', () => {
+  const code = 'some-code';
+
+  afterEach(() => {
+    document.getElementsByTagName('html')[0].innerHTML = '';
+  });
+
+  it('should be defined', () => {
+    expect(everfund).toBeDefined();
+  });
+
+  it('should have a version', () => {
+    expect(everfund.version).toBeDefined();
+  });
+
+  it('should have a donationWidget method', () => {
+    expect(everfund.donationWidget).toBeDefined();
+  });
+
+  it('renders iframe with correct src', () => {
+    everfund.donationWidget({
+      code,
+      onSuccess: () => {},
+      onFailure: () => {},
+      onClose: () => {},
+    });
+
+    const iframe = document.getElementById('ef-modal') as HTMLIFrameElement;
+
+    expect(iframe).toBeDefined();
+    expect(iframe.src).toEqual(
+      `https://evr.fund/${code}/modal?embed_origin=http://localhost:3000&embeded=true`
+    );
+  });
+
+  it('renders iframe with attributes', () => {
+    everfund.donationWidget({
+      code,
+      onSuccess: () => {},
+      onFailure: () => {},
+      onClose: () => {},
+    });
+
+    const iframe = document.getElementById('ef-modal') as HTMLIFrameElement;
+
+    expect(iframe).toBeDefined();
+
+    console.log(document.getElementsByTagName('html')[0].innerHTML);
+
+    expect(iframe.ariaModal).toBe('true');
+    expect(iframe.ariaLabel).toBe('Everfund Donation Modal');
+    expect(iframe.getAttribute('role')).toBe('donation-modal');
+  });
+
+  it('renders iframe with correct src with custom domain', () => {
+    everfund.donationWidget({
+      code,
+      domain: 'https://new.domain',
+      onSuccess: () => {},
+      onFailure: () => {},
+      onClose: () => {},
+    });
+
+    const iframe = document.getElementById('ef-modal') as HTMLIFrameElement;
+
+    expect(iframe).toBeDefined();
+    expect(iframe.src).toEqual(
+      `https://new.domain/${code}/modal?embed_origin=http://localhost:3000&embeded=true`
+    );
+  });
+
+  it('renders iframe with closeOnSuccess on src', () => {
+    everfund.donationWidget({
+      code,
+      closeOnSuccess: true,
+      onSuccess: () => {},
+      onFailure: () => {},
+      onClose: () => {},
+    });
+
+    const iframe = document.getElementById('ef-modal') as HTMLIFrameElement;
+
+    expect(iframe).toBeDefined();
+    expect(iframe.src).toEqual(
+      `https://evr.fund/${code}/modal?embed_origin=http://localhost:3000&embeded=true&close_on_success=true`
+    );
+  });
+
+  it('onSuccess is called', () => {
+    const mockSuccessResponse: SuccessResponse = {
+      id: 'fake-id',
+      agreededToGiftAid: false,
+      contactByPhone: false,
+      contactByPost: false,
+      contactByEmail: false,
+    };
+    const onSuccess = vi.fn();
+    everfund.donationWidget({
+      code,
+      onSuccess,
+      onFailure: () => {},
+      onClose: () => {},
+    });
+
+    everfund['onSuccess'](mockSuccessResponse);
+
+    expect(onSuccess).toHaveBeenCalledWith(mockSuccessResponse);
+  });
+
+  it('onFailure is called', () => {
+    const mockFailureResponse: Record<string, unknown> = {
+      id: 'fake-id',
+    };
+    const onFailure = vi.fn();
+    everfund.donationWidget({
+      code,
+      onSuccess: () => {},
+      onFailure,
+      onClose: () => {},
+    });
+
+    everfund['onFailure'](mockFailureResponse);
+
+    expect(onFailure).toHaveBeenCalledWith(mockFailureResponse);
+  });
+
+  it('onClose is called', () => {
+    const onClose = vi.fn();
+    everfund.donationWidget({
+      code,
+      onSuccess: () => {},
+      onFailure: () => {},
+      onClose,
+    });
+
+    everfund['onClose']();
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should match snapshot', () => {
+    everfund.donationWidget({
+      code,
+      onSuccess: () => {},
+      onFailure: () => {},
+      onClose: () => {},
+    });
+
+    const html = document.getElementsByTagName('html')[0].innerHTML;
+
+    expect(html).toMatchInlineSnapshot(
+      '"<head><style id=\\"_goober\\"> .go2719887912{border:none;width:100%;margin:0;height:100%;}</style><style id=\\"_goober\\"> .go635390755{pointer-events:all;z-index:9999999;display:flex;width:100%;transform:opacity(0);transition:transform 0.3s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%;}</style><style id=\\"_goober\\"> @keyframes go2097899587{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}</style><style id=\\"_goober\\"> .go2771443547{display:inline-block;position:absolute;left:calc(50% - 32px);top:calc(50% - 32px);width:64px;height:64px;}.go2771443547 div{box-sizing:border-box;display:block;position:absolute;width:51px;height:51px;margin:6px;border:6px solid white;border-radius:50%;animation:go2097899587 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:white transparent transparent transparent;}.go2771443547 div:nth-child(1){animation-delay: -0.45s;}.go2771443547 div:nth-child(2){animation-delay: -0.3s;}.go2771443547 div:nth-child(3){animation-delay: -0.15s;}</style><style id=\\"_goober\\"> .go371890835{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.7);z-index:9999998;display:flex;justify-content:space-around;align-items:stretch;backdrop-filter:blur(8px);}</style></head><body><div class=\\"embedContainer go371890835\\"><div class=\\"ldsRing go2771443547\\"><div></div></div><div class=\\"embedModal go635390755\\"><iframe src=\\"https://evr.fund/some-code/modal?embed_origin=http://localhost:3000&amp;embeded=true\\" id=\\"ef-modal\\" class=\\"go2719887912\\" role=\\"donation-modal\\" tabindex=\\"0\\"></iframe></div></div></body>"'
+    );
+  });
+});

packages/js-sdk/src/index.ts

@@ -31,27 +31,6 @@ class EverfundClient {
     }
   }
 
-  public modal({
-    code,
-    domain,
-    closeOnSuccess,
-    onSuccess,
-    onFailure,
-    onClose,
-  }: ModalProps) {
-    console.warn(
-      'everfund.modal is deprecated in the next update, please use everfund.donationWidget instead'
-    );
-    this.donationWidget({
-      code,
-      domain,
-      closeOnSuccess,
-      onSuccess,
-      onFailure,
-      onClose,
-    });
-  }
-
   public donationWidget({
     code,
     domain,
@@ -189,7 +168,7 @@ class EverfundClient {
       embedContainer.className = `embedContainer ${cssEmbedContainer}`;
       embedContainer.appendChild(loadingSpinner);
       embedContainer.appendChild(modalWrap);
-      
+
       document.body.appendChild(embedContainer);
       modalFrame.setAttribute('tabindex', '0');
       modalFrame.focus();

packages/js-sdk/src/libs/serializeQueryParams.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { serializeQueryParams } from './serializeQueryParams';
+
+describe('serializeQueryParams', () => {
+  it('should serialize query params', () => {
+    const params = {
+      foo: 'bar',
+      baz: 123,
+      qux: true,
+      corge: [1, 2, 3],
+    };
+
+    const result = serializeQueryParams(params);
+
+    expect(result).toBe('?foo=bar&baz=123&qux=true&corge=1,2,3');
+  });
+
+  it('should serialize query params with empty values', () => {
+    const params = {
+      foo: ''
+    };
+
+    const result = serializeQueryParams(params);
+
+    expect(result).toBe('?foo=');
+  });
+
+  it('should not serialize query params with undefined values', () => {
+    const params = {
+      foo: undefined
+    };
+
+    const result = serializeQueryParams(params);
+
+    expect(result).toBe('');
+  });
+});

packages/js-sdk/src/types.ts

@@ -31,8 +31,6 @@ export type SuccessResponse = {
 };
 
 export type ModalProps = {
-  /** @deprecated use code field instead */
-  donationLink?: string;
   /** Donation Widget Code get from the dashboard */
   code: string;
 

packages/js-sdk/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+  }
+});

packages/react-sdk/package.json

@@ -15,7 +15,8 @@
   ],
   "scripts": {
     "build": "tsup --config ./tsup.config.json --dts",
-    "lint": "eslint \"**/*.ts\""
+    "lint": "eslint \"**/*.ts\"",
+    "test": "vitest"
   },
   "peerDependencies": {
     "react": ">=16",
@@ -25,12 +26,15 @@
     "@everfund/js-sdk": "workspace:*"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.18",
+    "jsdom": "^22.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsconfig": "workspace:*",
     "tsup": "^7.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",