Merge pull request #32 from pinanks/config-validation

pinanks · web-flow · commit 4945b33ae9ea · 2024-01-02T23:26:39.000+05:30
Add config validation
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
     "@types/cross-spawn": "^6.0.4",
     "@types/node": "^20.8.9",
     "@types/which": "^3.0.2",
+    "ajv": "^8.12.0",
+    "ajv-errors": "^3.0.0",
     "axios": "^1.6.0",
     "chalk": "^4.1.2",
     "commander": "^11.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/commander/capture.ts b/src/commander/capture.ts
@@ -8,6 +8,7 @@ import getGitInfo from '../tasks/getGitInfo.js'
 import createBuild from '../tasks/createBuild.js'
 import captureScreenshots from '../tasks/captureScreenshots.js'
 import finalizeBuild from '../tasks/finalizeBuild.js'
+import { validateWebStaticConfig } from '../lib/schemaValidation.js'
 
 const command = new Command();
 
@@ -18,6 +19,18 @@ command
     .action(async function(file, _, command) {
         let ctx: Context = ctxInit(command.optsWithGlobals());
 
+        if (!fs.existsSync(file)) {
+            console.log(`Error: Web Static Config file ${file} not found.`);
+            return;
+        }
+        try {
+            ctx.webStaticConfig = JSON.parse(fs.readFileSync(file, 'utf8'));
+            if (!validateWebStaticConfig(ctx.webStaticConfig)) throw new Error(validateWebStaticConfig.errors[0].message);
+        } catch (error: any) {
+            console.log(`[smartui] Error: Invalid Web Static Config; ${error.message}`);
+            return;
+        }
+
         let tasks = new Listr<Context>(
             [
                 auth(ctx),
@@ -39,12 +52,6 @@ command
         )
 
         try {
-            if (!fs.existsSync(file)) {
-                console.log(`Error: Config file ${file} not found.`);
-                return;
-            }
-            ctx.staticConfig = JSON.parse(fs.readFileSync(file, 'utf8'));
-
             await tasks.run(ctx);
         } catch (error) {
             console.log('\nRefer docs: https://www.lambdatest.com/support/docs/smart-visual-regression-testing/');
diff --git a/src/commander/config.ts b/src/commander/config.ts
@@ -1,19 +1,19 @@
 import { Command } from 'commander'
-import { createWebConfig, createWebStaticConfig } from '../lib/config.js'
+import { createConfig, createWebStaticConfig } from '../lib/config.js'
 
 export const configWeb = new Command();
 export const configStatic = new Command();
 
 configWeb
-    .name('config:create-web')
-    .description('Create SmartUI Web config file')
+    .name('config:create')
+    .description('Create SmartUI config file')
     .argument('[filepath]', 'Optional config filepath')
     .action(async function(filepath, options) {
-        createWebConfig(filepath);
+        createConfig(filepath);
     })
 
 configStatic
-    .name('config:web-static')
+    .name('config:create-web-static')
     .description('Create Web Static config file')
     .argument('[filepath]', 'Optional config filepath')
     .action(async function(filepath, options) {
diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -1,8 +1,8 @@
 import path from 'path'
 import fs from 'fs'
-import { WebConfigSchema, WebStaticConfigSchema } from '../types.js'
+import { Config, WebStaticConfig } from '../types.js'
 
-export const DEFAULT_WEB_STATIC_CONFIG: WebStaticConfigSchema = [
+export const DEFAULT_WEB_STATIC_CONFIG: WebStaticConfig = [
     {
         "name": "lambdatest-home-page",
         "url": "https://www.lambdatest.com",
@@ -14,7 +14,7 @@ export const DEFAULT_WEB_STATIC_CONFIG: WebStaticConfigSchema = [
     }
 ]
 
-export const DEFAULT_WEB_CONFIG: WebConfigSchema = {
+export const DEFAULT_CONFIG: Config = {
     web: {
         browsers: [
             'chrome',
@@ -27,13 +27,13 @@ export const DEFAULT_WEB_CONFIG: WebConfigSchema = {
             [1366, 768],
             [360, 640],
         ],
-        waitForTimeout: 0,
+        waitForTimeout: 1000,
     }
 };
 
-export function createWebConfig(filepath: string) {
+export function createConfig(filepath: string) {
     // default filepath
-    filepath = filepath || 'smartui-web.json';
+    filepath = filepath || '.smartui.json';
     let filetype = path.extname(filepath);
     if (filetype != '.json') {
         console.log('Error: Config file must have .json extension');
@@ -42,15 +42,15 @@ export function createWebConfig(filepath: string) {
 
     // verify the file does not already exist
     if (fs.existsSync(filepath)) {
-        console.log(`Error: SmartUI Web Config already exists: ${filepath}`);
-        console.log(`To create a new file, please specify the file name like: 'smartui config:create-web webConfig.json'`);
+        console.log(`Error: SmartUI Config already exists: ${filepath}`);
+        console.log(`To create a new file, please specify the file name like: 'smartui config:create .smartui-config.json'`);
         return
     }
 
     // write stringified default config options to the filepath
     fs.mkdirSync(path.dirname(filepath), { recursive: true });
-    fs.writeFileSync(filepath, JSON.stringify(DEFAULT_WEB_CONFIG, null, 2) + '\n');
-    console.log(`Created SmartUI Web Config: ${filepath}`);
+    fs.writeFileSync(filepath, JSON.stringify(DEFAULT_CONFIG, null, 2) + '\n');
+    console.log(`Created SmartUI Config: ${filepath}`);
 };
 
 export function createWebStaticConfig(filepath: string) {
@@ -65,7 +65,7 @@ export function createWebStaticConfig(filepath: string) {
     // verify the file does not already exist
     if (fs.existsSync(filepath)) {
         console.log(`Error: web-static config already exists: ${filepath}`);
-        console.log(`To create a new file, please specify the file name like: 'smartui config:create-web links.json'`);
+        console.log(`To create a new file, please specify the file name like: 'smartui config:create-web-static links.json'`);
         return
     }
 
diff --git a/src/lib/ctx.ts b/src/lib/ctx.ts
@@ -1,6 +1,7 @@
-import { Context, Env, WebConfigSchema, WebStaticConfigSchema } from '../types.js'
-import { DEFAULT_WEB_CONFIG, DEFAULT_WEB_STATIC_CONFIG } from './config.js'
+import { Context, Env, Config } from '../types.js'
+import { DEFAULT_CONFIG } from './config.js'
 import { version } from '../../package.json'
+import { validateConfig } from './schemaValidation.js'
 import logger from '../lib/logger.js'
 import getEnv from '../lib/env.js'
 import httpClient from './httpClient.js'
@@ -9,31 +10,37 @@ import fs from 'fs'
 export default (options: Record<string, string>): Context => {
     let env: Env = getEnv();
     let viewports: Array<{width: number, height: number}> = []
-    let webConfig: WebConfigSchema = DEFAULT_WEB_CONFIG;
+    let config: Config = DEFAULT_CONFIG;
 
     try {
         if (options.config) {
-            webConfig = JSON.parse(fs.readFileSync(options.config, 'utf-8'));
-        }
-        for (let viewport of webConfig.web.resolutions || webConfig.web.viewports) {
-            viewports.push({ width: viewport[0], height: viewport[1]})
+            config = JSON.parse(fs.readFileSync(options.config, 'utf-8'));
+            // resolutions supported for backward compatibility
+            if (config.web.resolutions) {
+                config.web.viewports = config.web.resolutions;
+                delete config.web.resolutions;
+            }
         }
+        
+        // validate config
+        if (!validateConfig(config)) throw new Error(validateConfig.errors[0].message);
     } catch (error: any) {
-        throw new Error(error.message);
+        console.log(`[smartui] Error: ${error.message}`);
+        process.exit();
     }
-    // TODO: validate config
 
+    for (let viewport of config.web.viewports) viewports.push({ width: viewport[0], height: viewport[1]});
     return {
         env: env,
         log: logger,
         client: new httpClient(env),
-        config: {
-            browsers: webConfig.web.browsers,
+        webConfig: {
+            browsers: config.web.browsers,
             viewports: viewports,
-            waitForPageRender: webConfig.web.waitForPageRender || 0,
-            waitForTimeout: webConfig.web.waitForTimeout || 0
+            waitForPageRender: config.web.waitForPageRender || 0,
+            waitForTimeout: config.web.waitForTimeout || 0
         },
-        staticConfig: [],
+        webStaticConfig: [],
         git: {
             branch: '',
             commitId: '',
diff --git a/src/lib/schemaValidation.ts b/src/lib/schemaValidation.ts
@@ -0,0 +1,100 @@
+import { WebStaticConfig } from '../types.js'
+import Ajv, { JSONSchemaType } from 'ajv'
+import addErrors from 'ajv-errors'
+
+const ajv = new Ajv({ allErrors: true });
+ajv.addFormat('web-url', {
+    type: 'string',
+    validate: (url: string) => {
+        const urlPattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+            '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+            '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+            '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+        return urlPattern.test(url);
+    }
+});
+addErrors(ajv);
+
+const ConfigSchema = {
+    type: "object",
+    properties: {
+        web: {
+			type: "object",
+    		properties: {
+				browsers: {
+					type: "array",
+					items: { type: "string", enum: ["chrome", "firefox", "edge", "safari"] },
+					uniqueItems: true,
+					maxItems: 4,
+                    errorMessage: "Invalid config; allowed browsers - chrome, firefox, edge, safari"
+				},
+				viewports: {
+					type: "array",
+					items: {
+						type: "array",
+						items: [
+							{ type: "number", minimum: 320, maximum: 7680 },
+							{ type: "number", minimum: 320, maximum: 7680 } 
+						],
+						additionalItems: false,
+						minItems: 2,
+						maxItems: 2
+					},
+					uniqueItems: true,
+					maxItems: 5,
+                    errorMessage: "Invalid config; width/height must be >= 320 and <= 7680; max viewports allowed - 5"
+				},
+				waitForPageRender: {
+                    type: "number",
+                    minimum: 0,
+                    maximum: 300000,
+                    errorMessage: "Invalid config; waitForPageRender must be > 0 and <= 300000"
+                },
+				waitForTimeout: {
+                    type: "number",
+                    minimum: 0,
+                    maximum: 30000,
+                    errorMessage: "Invalid config; waitForTimeout must be > 0 and <= 30000"
+                },
+    		},
+			required: ["browsers", "viewports"],
+			additionalProperties: false
+		}
+    },
+    required: ["web"],
+    additionalProperties: false
+}
+
+const WebStaticConfigSchema: JSONSchemaType<WebStaticConfig> = {
+    type: "array",
+    items: {
+        type: "object",
+        properties: {
+            name: {
+                type: "string",
+                minLength: 1,
+                errorMessage: "name is mandatory and cannot be empty"
+            },
+            url: {
+                type: "string", 
+                format: "web-url",
+                errorMessage: "url is mandatory and must be a valid web URL"
+            },
+            waitForTimeout: {
+                type: "number",
+                nullable: true,
+                minimum: 0,
+                maximum: 30000,
+                errorMessage: "waitForTimeout must be > 0 and <= 30000"
+            },
+        },
+        required: ["name", "url"],
+		additionalProperties: false
+    },
+    uniqueItems: true
+}
+
+export const validateConfig = ajv.compile(ConfigSchema);
+export const validateWebStaticConfig = ajv.compile(WebStaticConfigSchema);
diff --git a/src/lib/screenshot.ts b/src/lib/screenshot.ts
@@ -1,5 +1,5 @@
 import { chromium, firefox, webkit, Browser } from "@playwright/test"
-import { Context, WebStaticConfigSchema } from "../types.js"
+import { Context, WebStaticConfig } from "../types.js"
 import { delDir } from "./utils.js"
 
 const BROWSER_CHROME = 'chrome';
@@ -9,16 +9,16 @@ const BROWSER_EDGE = 'edge';
 const EDGE_CHANNEL = 'msedge';
 const PW_WEBKIT = 'webkit';
 
-export async function captureScreenshots(ctx: Context, screenshots: WebStaticConfigSchema): Promise<number> {
+export async function captureScreenshots(ctx: Context, screenshots: WebStaticConfig): Promise<number> {
     // Clean up directory to store screenshots
     delDir('screenshots');
 
     // Capture screenshots for every browser-viewport and upload them
-    let totalBrowsers: number = ctx.config.browsers.length;
-    let totalViewports: number = ctx.config.viewports.length;
+    let totalBrowsers: number = ctx.webConfig.browsers.length;
+    let totalViewports: number = ctx.webConfig.viewports.length;
     let totalScreenshots: number = screenshots.length
     for (let i = 0; i < totalBrowsers; i++) {
-        let browserName = ctx.config.browsers[i]?.toLowerCase();
+        let browserName = ctx.webConfig.browsers[i]?.toLowerCase();
         let browser: Browser;
         let launchOptions: Record<string, any> = { headless: true };
         let pageOptions = { waitUntil: process.env.SMARTUI_PAGE_WAIT_UNTIL_EVENT || 'load' }
@@ -50,7 +50,7 @@ export async function captureScreenshots(ctx: Context, screenshots: WebStaticCon
                 await page.waitForTimeout(screenshot.waitForTimeout || 0)
 
                 for (let k = 0; k < totalViewports; k++) {
-                    let { width, height } = ctx.config.viewports[k];
+                    let { width, height } = ctx.webConfig.viewports[k];
                     let ssName = `${browserName}-${width}x${height}-${screenshotId}.png`
                     let ssPath = `screenshots/${screenshotId}/${ssName}.png`
                     await page.setViewportSize({ width, height})
diff --git a/src/tasks/captureScreenshots.ts b/src/tasks/captureScreenshots.ts
@@ -8,7 +8,7 @@ export default (ctx: Context): ListrTask<Context, ListrRendererFactory, ListrRen
         title: 'Capturing screenshots',
         task: async (ctx, task): Promise<void> => {
             try {
-                let { staticConfig: screenshots } = ctx;
+                let { webStaticConfig: screenshots } = ctx;
 
                 let totalScreenshots = await captureScreenshots(ctx, screenshots);
                 task.title = 'Screenshots captured successfully'
diff --git a/src/tasks/createBuild.ts b/src/tasks/createBuild.ts
@@ -10,7 +10,7 @@ export default (ctx: Context): ListrTask<Context, ListrRendererFactory, ListrRen
             updateLogContext({task: 'createBuild'});
 
             try {
-                let resp = await ctx.client.createBuild(ctx.git, ctx.config, ctx.log);
+                let resp = await ctx.client.createBuild(ctx.git, ctx.webConfig, ctx.log);
                 ctx.build = {
                     id: resp.data.buildId,
                     name: resp.data.buildName,
diff --git a/src/types.ts b/src/types.ts
