Merge pull request #28 from gabrielbarth/sdx

gabrielbarth · web-flow · commit dc3355411eb9 · 2025-04-21T17:16:20.000-04:00
feat: implements event label formatting string options; sets test and lint workflow
diff --git a/.github/workflows/test_and_lint.yml b/.github/workflows/test_and_lint.yml
@@ -0,0 +1,34 @@
+name: Test and Lint
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "src/**"
+  pull_request:
+    paths:
+      - "src/**"
+  workflow_dispatch:
+
+jobs:
+  test-and-lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run lint
+        run: npm run lint
+
+      - name: Run unit tests
+        run: npm test -- --coverage
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,17 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  {
+    ignores: ["**/dist/**"],
+    rules: {
+      "no-console": "off",
+      eqeqeq: ["error", "always"],
+      semi: ["error", "always"],
+    },
+  }
+);
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,13 @@
+export default {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  testMatch: ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(test).ts?(x)"],
+  transform: {
+    "^.+\\.(js|ts)$": "ts-jest",
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.js$",
+    "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.ts$",
+    "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.tsx$",
+  ],
+};
diff --git a/package.json b/package.json
@@ -1,15 +1,18 @@
 {
   "name": "analytics-event-factory",
   "description": "Analytics Event Factory",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc"
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "build": "tsc",
+    "lint": "eslint . --ext .ts,.js --ignore-pattern dist/"
   },
   "keywords": [
     "event",
@@ -30,8 +33,18 @@
     "@babel/cli": "^7.25.6",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
+    "@eslint/js": "^9.25.1",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.5.5",
-    "typescript": "^5.6.2"
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
+    "eslint": "^9.25.1",
+    "globals": "^16.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.3.2",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.31.0"
   },
   "repository": {
     "type": "git",
diff --git a/src/examples/basic.ts b/src/examples/basic.ts
@@ -11,7 +11,9 @@ function logEvent(eventMetadata: unknown): unknown {
 }
 
 // usage example
-const eventHandler = eventCreator(logEvent);
+const eventHandler = eventCreator({
+  callback: logEvent,
+});
 
 eventHandler.button.click({
   id: "btn-1",
diff --git a/src/features/eventCreator/index.test.ts b/src/features/eventCreator/index.test.ts
@@ -0,0 +1,132 @@
+import { eventCreator } from "./index";
+import { EventHandler } from "../../types/event/EventHandlers";
+import { EventCreatorParams } from "../../types/event/EventCreatorParams";
+
+describe("eventCreator", () => {
+  const mockCallback = jest.fn();
+
+  const defaultParams: EventCreatorParams = {
+    callback: mockCallback,
+    options: {
+      page: {
+        currentPage: "Home",
+        showOnLabel: true,
+        showOnMetadata: true,
+      },
+      action: {
+        possibleActions: ["click", "scroll"],
+        showOnMetadata: true,
+      },
+      element: {
+        possibleElements: ["button", "link"],
+        showOnMetadata: true,
+        showElementIdOnLabel: true,
+      },
+      labelOptions: {
+        stringCase: "capitalize",
+        stringFormat: "snake_case",
+      },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should create handlers for all elements and actions", () => {
+    const handlers: EventHandler = eventCreator(defaultParams);
+
+    expect(handlers).toHaveProperty("button");
+    expect(handlers).toHaveProperty("link");
+    expect(handlers.button).toHaveProperty("click");
+    expect(handlers.button).toHaveProperty("scroll");
+    expect(handlers.link).toHaveProperty("click");
+    expect(handlers.link).toHaveProperty("scroll");
+  });
+
+  it("should call the callback with the correct label and metadata", () => {
+    const handlers: EventHandler = eventCreator(defaultParams);
+
+    const eventMetadata = { elementId: "123", customData: "test" };
+    handlers.button.click(eventMetadata);
+
+    expect(mockCallback).toHaveBeenCalledWith({
+      label: "Home_Button_Click_123",
+      metadata: {
+        ...eventMetadata,
+        page: "Home",
+        element: "button",
+        action: "click",
+      },
+    });
+  });
+
+  it("should exclude page from metadata if showOnMetadata is false", () => {
+    const params = {
+      ...defaultParams,
+      options: {
+        ...defaultParams.options,
+        page: {
+          ...defaultParams.options?.page,
+          showOnMetadata: false,
+        },
+      },
+    };
+
+    const handlers: EventHandler = eventCreator(params);
+
+    const eventMetadata = { elementId: "789" };
+    handlers.button.click(eventMetadata);
+
+    expect(mockCallback).toHaveBeenCalledWith({
+      label: "Home_Button_Click_789",
+      metadata: {
+        ...eventMetadata,
+        element: "button",
+        action: "click",
+      },
+    });
+  });
+
+  it("should handle default actions and elements if none are provided", () => {
+    const params = {
+      callback: mockCallback,
+      options: {},
+    };
+
+    const handlers: EventHandler = eventCreator(params);
+
+    expect(Object.keys(handlers).length).toBeGreaterThan(0);
+    expect(
+      Object.keys(handlers[Object.keys(handlers)[0]]).length
+    ).toBeGreaterThan(0);
+  });
+
+  it("should format the label correctly with stringFormat set to 'noCase'", () => {
+    const params: EventCreatorParams = {
+      ...defaultParams,
+      options: {
+        ...defaultParams.options,
+        labelOptions: {
+          stringCase: "lowercase",
+          stringFormat: "noCase",
+        },
+      },
+    };
+
+    const handlers: EventHandler = eventCreator(params);
+
+    const eventMetadata = { elementId: "456" };
+    handlers.link.click(eventMetadata);
+
+    expect(mockCallback).toHaveBeenCalledWith({
+      label: "home link click 456",
+      metadata: {
+        ...eventMetadata,
+        page: "Home",
+        element: "link",
+        action: "click",
+      },
+    });
+  });
+});
diff --git a/src/features/eventCreator/index.ts b/src/features/eventCreator/index.ts
@@ -1,9 +1,11 @@
+import { EventAction } from "../../types/event/EventAction";
 import { EventCreatorParams } from "../../types/event/EventCreatorParams";
 import { EventElement } from "../../types/event/EventElement";
 import { EventHandler } from "../../types/event/EventHandlers";
 import { EventMetadata } from "../../types/event/EventMetadata";
-import { eventActions } from "../../utils/constants/eventActions";
-import { eventElements } from "../../utils/constants/eventElements";
+import { eventActions as defaultEventActions } from "../../utils/constants/eventActions";
+import { eventElements as defaultEventElements } from "../../utils/constants/eventElements";
+import { formatString } from "../../utils/helpers/formatString";
 
 // function to create an object structure [element][action] and returns callback
 export function eventCreator({
@@ -13,29 +15,41 @@ export function eventCreator({
   const handlers: EventHandler = {} as EventHandler;
 
   const page = options?.page?.showOnLabel
-    ? `${options?.page?.currentPage?.trim()}.`
+    ? `${options?.page?.currentPage?.trim()}`
     : "";
   const showPageOnMetadata = options?.page?.showOnMetadata;
   const showElementIdOnLabel = options?.element?.showElementIdOnLabel;
+  const labelOptions = options?.labelOptions;
+
+  const eventElements =
+    options?.element?.possibleElements || defaultEventElements;
+  const eventActions = options?.action?.possibleActions || defaultEventActions;
 
   // iterate over each element
-  eventElements.forEach((element) => {
+  eventElements.forEach((element: EventElement) => {
     handlers[element] = {} as EventHandler[EventElement];
 
     // iterate over each action
-    eventActions.forEach((action) => {
+    eventActions.forEach((action: EventAction) => {
       // define an action handler that receives event metadata
       handlers[element][action] = (eventMetadata: EventMetadata) => {
         const isShowElementId =
           eventMetadata?.elementId && showElementIdOnLabel;
         const elementId = isShowElementId
-          ? `.${eventMetadata?.elementId?.trim()}`
+          ? ` ${eventMetadata?.elementId?.trim()}`
           : "";
+
         callback({
-          label: `${page}${element}.${action}${elementId}`,
+          label: formatString({
+            str: `${page} ${element.trim()} ${action.trim()}${elementId}`,
+            stringCase: labelOptions?.stringCase,
+            stringFormat: labelOptions?.stringFormat,
+          }),
           metadata: {
             ...eventMetadata,
-            ...(showPageOnMetadata ? { page: page.slice(0, -1) } : {}),
+            ...(showPageOnMetadata ? { page: page } : {}),
+            ...(options?.element?.showOnMetadata ? { element: element } : {}),
+            ...(options?.action?.showOnMetadata ? { action: action } : {}),
           },
         });
       };
diff --git a/src/types/event/EventCreatorParams.ts b/src/types/event/EventCreatorParams.ts
@@ -1,31 +1,29 @@
-type StringFormat =
+export type StringFormat =
   | "camelCase"
-  | "pascalCase"
-  | "snakeCase"
+  | "PascalCase"
+  | "snake_case"
+  | "kebab-case"
   | "dotCase"
-  | "kebabCase"
   | "noCase";
 
-type StringCase = "lowercase" | "uppercase";
+export type StringCase = "lowercase" | "uppercase" | "capitalize";
 
 type EventCreatorParamsOptions = {
-  page?: {
-    currentPage?: string;
+  labelOptions?: {
     stringCase?: StringCase;
     stringFormat?: StringFormat;
+  };
+  page?: {
+    currentPage?: string;
     showOnLabel?: boolean;
     showOnMetadata?: boolean;
   };
   action?: {
     possibleActions?: string[];
-    stringCase?: StringCase;
-    stringFormat?: StringFormat;
     showOnMetadata?: boolean;
   };
   element?: {
     possibleElements?: string[];
-    stringCase?: StringCase;
-    stringFormat?: StringFormat;
     showOnMetadata?: boolean;
     showElementIdOnLabel?: boolean;
   };
diff --git a/src/utils/helpers/formatString.test.ts b/src/utils/helpers/formatString.test.ts
diff --git a/src/utils/helpers/formatString.ts b/src/utils/helpers/formatString.ts

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,9 @@ function logEvent(eventMetadata: unknown): unknown {`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`// usage example`
`14`		`-const eventHandler = eventCreator(logEvent);`
	`14`	`+const eventHandler = eventCreator({`
	`15`	`+ callback: logEvent,`
	`16`	`+});`
`15`	`17`
`16`	`18`	`eventHandler.button.click({`
`17`	`19`	`id: "btn-1",`