@akinon/pz-click-collect 2.0.10 → 2.0.11-rc.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @akinon/pz-click-collect
 
+## 2.0.11-rc.0
+
+### Patch Changes
+
+- 823a4449: ZERO-4193: Upgrade TypeScript to version 5.2.2 across multiple packages
+- 00b9f488: ZERO-4207: Add Jest configuration and initial tests for ClickCollect component
+
 ## 2.0.10
 
 ## 2.0.9

package/jest.config.js

@@ -0,0 +1,20 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testMatch: ['**/?(*.)+(test).tsx'],
+  testPathIgnorePatterns: ['/node_modules/', '/src/__tests__/mocks/'],
+  moduleNameMapper: {
+    '^redux/store$': '<rootDir>/src/__tests__/mocks/redux-store.ts'
+  },
+  transform: {
+    '^.+.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.test.json',
+        diagnostics: false
+      }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+};

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@akinon/pz-click-collect",
-  "version": "2.0.10",
+  "version": "2.0.11-rc.0",
   "main": "./src/index.tsx",
   "module": "./src/index.tsx",
   "license": "MIT",
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
   "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/node": "^18.7.8",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "react": "19.2.5",

package/src/__tests__/click-collect.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ClickCollect, ClickCollectTranslationsProps } from '../index';
+
+const state = {
+  checkout: {
+    deliveryOptions: [
+      { pk: 1, delivery_option_type: 'customer' },
+      { pk: 2, delivery_option_type: 'retail_store' }
+    ],
+    retailStores: [],
+    preOrder: {
+      billing_address: { pk: 10 },
+      shipping_address: { pk: 11 },
+      retail_store: null,
+      delivery_option: { pk: 1 }
+    }
+  }
+};
+
+const setDeliveryOption = jest.fn();
+const setRetailStore = jest.fn();
+const setShippingOption = jest.fn();
+const setAddresses = jest.fn();
+
+jest.mock('@akinon/next/components', () => ({
+  Icon: ({ name }: { name: string }) => <span data-icon={name}>{name}</span>,
+  LoaderSpinner: () => <span data-testid="click-collect-loader">loading</span>
+}));
+
+jest.mock('@akinon/next/redux/hooks', () => ({
+  useAppSelector: (selector: (mockState: typeof state) => unknown) =>
+    selector(state)
+}));
+
+jest.mock('@akinon/next/data/client/checkout', () => ({
+  useSetDeliveryOptionMutation: () => [setDeliveryOption, { isLoading: false }],
+  useSetRetailStoreMutation: () => [setRetailStore, { isLoading: false }],
+  useSetShippingOptionMutation: () => [setShippingOption, { isLoading: false }],
+  useSetAddressesMutation: () => [setAddresses, { isLoading: false }]
+}));
+
+jest.mock('redux/store', () => ({}), { virtual: true });
+
+describe('ClickCollect', () => {
+  beforeEach(() => {
+    setDeliveryOption.mockReset();
+    setRetailStore.mockReset();
+    setShippingOption.mockReset();
+    setAddresses.mockReset();
+  });
+
+  it('renders the default inactive state when no custom renderer is provided', () => {
+    const html = renderToStaticMarkup(
+      <ClickCollect
+        addressTypeParam="shippingAddressPk"
+        translations={{} as ClickCollectTranslationsProps}
+      />
+    );
+
+    expect(html).toContain('DELIVERY FROM THE STORE');
+    expect(html).toContain('click-collect-add-new-address');
+  });
+
+  it('passes merged translations and inactive status to custom renderers', () => {
+    let capturedIsActive: boolean | null = null;
+    let capturedTranslations: ClickCollectTranslationsProps | null = null;
+
+    const html = renderToStaticMarkup(
+      <ClickCollect
+        addressTypeParam="shippingAddressPk"
+        translations={{
+          deliveryFromTheStore: 'Magazadan teslim',
+          deliveryStore: 'Teslim magazasi'
+        }}
+        renderer={{
+          renderContainer: ({ children, isActive }) => {
+            capturedIsActive = isActive;
+            return <section>{children}</section>;
+          },
+          renderInactiveState: ({ translations }) => {
+            capturedTranslations = translations;
+            return <span>{translations.deliveryFromTheStore}</span>;
+          }
+        }}
+      />
+    );
+
+    expect(capturedIsActive).toBe(false);
+    expect(capturedTranslations).toEqual({
+      deliveryFromTheStore: 'Magazadan teslim',
+      deliveryStore: 'Teslim magazasi'
+    });
+    expect(html).toContain('Magazadan teslim');
+  });
+});

package/src/__tests__/mocks/redux-store.ts

@@ -0,0 +1,3 @@
+export type RootState = {
+  checkout: unknown;
+};

package/tsconfig.test.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "baseUrl": ".",
+    "paths": {
+      "redux/store": ["src/__tests__/mocks/redux-store.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}