Added normalization function to make options case-insensitive

packages/core/src/snapshot.js

@@ -9,7 +9,8 @@ import {
   yieldTo,
   snapshotLogName,
   decodeAndEncodeURLWithLogging,
-  compareObjectTypes
+  compareObjectTypes,
+  normalizeOptions
 } from './utils.js';
 import { JobData } from './wait-for-job.js';
 
@@ -171,7 +172,6 @@ function getSnapshotOptions(options, { config, meta }) {
 // other invalid options which are also scrubbed from the returned migrated options.
 export function validateSnapshotOptions(options) {
   let log = logger('core:snapshot');
-
   // decide which schema to validate against
   let schema = (
     (['domSnapshot', 'dom-snapshot', 'dom_snapshot']
@@ -182,6 +182,8 @@ export function validateSnapshotOptions(options) {
     ('snapshots' in options && '/snapshot/list') ||
     ('/snapshot'));
 
+  options = normalizeOptions(options);
+
   let {
     // normalize, migrate, and remove certain properties from validating
     clientInfo, environmentInfo, snapshots, ...migrated
@@ -213,10 +215,8 @@ export function validateSnapshotOptions(options) {
     log.warn('Encountered snapshot serialization warnings:');
     for (let w of domWarnings) log.warn(`- ${w}`);
   }
-
   // warn on validation errors
   let errors = PercyConfig.validate(migrated, schema);
-
   if (errors?.length > 0) {
     log.warn('Invalid snapshot options:');
     for (let e of errors) log.warn(`- ${e.path}: ${e.message}`);

packages/core/src/utils.js

@@ -543,3 +543,34 @@ export function compareObjectTypes(obj1, obj2) {
 
   return true;
 }
+
+const OPTION_MAPPINGS = {
+  name: 'name',
+  widths: 'widths',
+  scope: 'scope',
+  scopeoptions: 'scopeOptions',
+  minheight: 'minHeight',
+  enablejavascript: 'enableJavaScript',
+  enablelayout: 'enableLayout',
+  clientinfo: 'clientInfo',
+  environmentinfo: 'environmentInfo',
+  sync: 'sync',
+  testcase: 'testCase',
+  labels: 'labels',
+  thtestcaseexecutionid: 'thTestCaseExecutionId',
+  resources: 'resources',
+  meta: 'meta',
+  snapshot: 'snapshot'
+};
+
+export function normalizeOptions(options) {
+  const normalizedOptions = {};
+
+  for (const key in options) {
+    const lowerCaseKey = key.toLowerCase().replace(/[-_]/g, '');
+    const normalizedKey = OPTION_MAPPINGS[lowerCaseKey] ? OPTION_MAPPINGS[lowerCaseKey] : key;
+    normalizedOptions[normalizedKey] = options[key];
+  }
+
+  return normalizedOptions;
+}

packages/core/test/percy.test.js

@@ -3,6 +3,7 @@ import { generatePromise, AbortController, base64encode } from '../src/utils.js'
 import Percy from '@percy/core';
 import Pako from 'pako';
 import DetectProxy from '@percy/client/detect-proxy';
+import { validateSnapshotOptions } from '../src/snapshot.js';
 
 describe('Percy', () => {
   let percy, server;
@@ -1713,4 +1714,106 @@ describe('Percy', () => {
       });
     });
   });
+  describe('#validateSnapshotOptions', () => {
+    it('normalizes snapshot options to camelCase and does not produce errors', async () => {
+      const options = {
+        name: 'Snapshot 1',
+        url: 'http://localhost:8000',
+        'scope-options': { scroll: true },
+        'min-height': 1024,
+        'enable-javascript': true,
+        'client-info': 'client-info',
+        'environment-info': 'env-info',
+        'test-case': 'testCase',
+        'th-test-case-execution-id': '12345'
+      };
+
+      const result = validateSnapshotOptions(options);
+      expect(result).toEqual({
+        clientInfo: 'client-info',
+        environmentInfo: 'env-info',
+        name: 'Snapshot 1',
+        url: 'http://localhost:8000',
+        scopeOptions: { scroll: true },
+        minHeight: 1024,
+        enableJavaScript: true,
+        testCase: 'testCase',
+        thTestCaseExecutionId: '12345'
+      });
+    });
+
+    it('handles different casing formats and does not produce errors', async () => {
+      const options = {
+        Name: 'Snapshot 1',
+        url: 'http://localhost:8000',
+        WIDTHS: [375, 1280],
+        Scope: '#app',
+        ScopeOptions: { scroll: true },
+        MinHeight: 1024,
+        EnableJavaScript: true,
+        EnableLayout: false,
+        ClientInfo: 'client-info',
+        EnvironmentInfo: 'env-info',
+        Sync: true,
+        TestCase: 'testCase',
+        Labels: 'label1',
+        ThTestCaseExecutionId: '12345'
+      };
+
+      const result = validateSnapshotOptions(options);
+      expect(result).toEqual({
+        clientInfo: 'client-info',
+        environmentInfo: 'env-info',
+        name: 'Snapshot 1',
+        url: 'http://localhost:8000',
+        widths: [375, 1280],
+        scope: '#app',
+        scopeOptions: { scroll: true },
+        minHeight: 1024,
+        enableJavaScript: true,
+        enableLayout: false,
+        sync: true,
+        testCase: 'testCase',
+        labels: 'label1',
+        thTestCaseExecutionId: '12345'
+      });
+    });
+
+    it('handles mixed casing and special characters and does not produce errors', async () => {
+      const options = {
+        nAmE: 'Snapshot 1',
+        url: 'http://localhost:8000',
+        WiDtHs: [375, 1280],
+        sCoPe: '#app',
+        sCoPeOpTiOnS: { scroll: true },
+        mInHeIgHt: 1024,
+        eNaBlEJaVaScRiPt: true,
+        eNaBlELaYoUt: false,
+        cLiEnTInFo: 'client-info',
+        eNvIrOnMeNtInFo: 'env-info',
+        sYnC: true,
+        tEsTcAsE: 'testCase',
+        lAbElS: 'label1',
+        tHtEsTcAsEeXeCuTiOnId: '12345'
+      };
+
+      const result = validateSnapshotOptions(options);
+      expect(result).toEqual({
+        clientInfo: 'client-info',
+        environmentInfo: 'env-info',
+        name: 'Snapshot 1',
+        url: 'http://localhost:8000',
+        widths: [375, 1280],
+        scope: '#app',
+        scopeOptions: { scroll: true },
+        minHeight: 1024,
+        enableJavaScript: true,
+        enableLayout: false,
+        sync: true,
+        testCase: 'testCase',
+        labels: 'label1',
+        thTestCaseExecutionId: '12345'
+      });
+    });
+  });
 });