Merge pull request #11 from LambdaTest/stage

Release v1.1.0

Author: sushobhit-lt

README.md

@@ -46,12 +46,14 @@ smartui config create .smartui.json
 ```
 
 ## Step 3: Execute tests
-Run the following command to run tests on your Storybook stories. Provide your storybook url, build name and config file (Default config used if no config file provided)
+Run the following command to run visual regression tests on your Storybook components.
 
 ```bash
-smartui storybook http://localhost:6006 --buildname Build1 --config .smartui.json
+smartui storybook http://localhost:6006 --config .smartui.json
 ```
 
+You can also provide path to the storybook-static directory instead of the local Storybook URL. Use `--help` for more information on usage.
+
 # About LambdaTest
 
 [LambdaTest](https://www.lambdatest.com/) is a cloud based selenium grid infrastructure that can help you run automated cross browser compatibility tests on 2000+ different browser and operating system environments. LambdaTest supports all programming languages and frameworks that are supported with Selenium, and have easy integrations with all popular CI/CD platforms. It's a perfect solution to bring your [selenium automation testing](https://www.lambdatest.com/selenium-automation) to cloud based infrastructure that not only helps you increase your test coverage over multiple desktop and mobile browsers, but also allows you to cut down your test execution time by running tests on parallel.

commands/storybook.js

@@ -1,13 +1,22 @@
 const { default: axios } = require('axios')
 const fs = require('fs');
 const { sendDoM } = require('./utils/dom')
-const { validateStorybookUrl } = require('./utils/validate')
+const { validateStorybookUrl, validateStorybookDir } = require('./utils/validate')
 const { defaultSmartUIConfig } = require('./utils/config')
 const { skipStory } = require('./utils/story')
+const { createStaticServer } = require('./utils/server')
 
-async function storybook(url, options) {
-    // Check connection with storybook url
-    await validateStorybookUrl(url);
+async function storybook(serve, options) {
+    let server, url;
+    let type = /^https?:\/\//.test(serve) ? 'url' : 'dir'
+    if (type === 'url') {
+        await validateStorybookUrl(serve);
+        url = serve;
+    } else {
+        await validateStorybookDir(serve);
+        server = await createStaticServer(serve);
+        url = `http://localhost:${server.address().port}`;
+    }
 
     // TODO: modularize this and separate check for file exists
     let storybookConfig = defaultSmartUIConfig.storybook; 
@@ -37,8 +46,8 @@ async function storybook(url, options) {
     storybookConfig.browsers = (!storybookConfig.browsers.length) ? 'all' : storybookConfig.browsers.toString();
 
     // Get stories object from stories.json and add url corresponding to every story ID 
-    axios.get(new URL('stories.json', url).href)
-        .then(function (response) {
+    await axios.get(new URL('stories.json', url).href)
+        .then(async function (response) {
             let stories = {}
             for (const [storyId, storyInfo] of Object.entries(response.data.stories)) {
                 if (!skipStory(storyInfo.name, storybookConfig)) {
@@ -59,7 +68,7 @@ async function storybook(url, options) {
                 }
             }
             // Capture DoM of every story and send it to renderer API
-            sendDoM(url, stories, storybookConfig, options);
+            await sendDoM(url, stories, storybookConfig, options);
         })
         .catch(function (error) {
             if (error.response) {
@@ -69,8 +78,11 @@ async function storybook(url, options) {
             } else {
                 console.log('[smartui] Error: Cannot fetch Storybook stories');
             }
-            process.exit(0);
         });
+    
+    // Close static server
+    if (server) server?.close();
+    
 };
 
 module.exports = { storybook };

commands/utils/constants.js

@@ -1,9 +1,11 @@
 var constants = {}
 
-constants.env = 'prod';
 constants.stage = {
     AUTH_URL: "https://stage-api.lambdatestinternal.com/storybook/auth",
-    RENDER_API_URL: "https://stage-api.lambdatestinternal.com/storybook/render"
+    RENDER_API_URL: "https://stage-api.lambdatestinternal.com/storybook/render",
+    BUILD_STATUS_URL: "https://stage-api.lambdatestinternal.com/storybook/status",
+    BASE_URL: "https://stage-api.lambdatestinternal.com",
+    SB_BUILD_VALIDATE_PATH: "/storybook/validate"
 };
 constants.prod = {
     AUTH_URL: "https://api.lambdatest.com/storybook/auth",

commands/utils/dom.js

@@ -3,7 +3,12 @@ const fs = require('fs');
 const path = require('path')
 const formData = require('form-data');
 const { JSDOM } = require("jsdom");
+const Table = require('cli-table3');
 var { constants } = require('./constants');
+const { getLastCommit } = require('./git');
+
+var INTERVAL = 2000
+const MAX_INTERVAL = 512000
 
 async function sendDoM(storybookUrl, stories, storybookConfig, options) {
     const createBrowser = require('browserless')
@@ -20,16 +25,24 @@ async function sendDoM(storybookUrl, stories, storybookConfig, options) {
         const browserless = await browser.createContext()
         const html = await browserless.html(storyInfo.url)
 
-        dom = new JSDOM(html);
-        for(element of dom.window.document.querySelectorAll('img')) {
+        dom = new JSDOM(html, {
+            url: storybookUrl,
+            resources: 'usable'
+        });
+        clone = new JSDOM(html);
+
+        // Serialize DOM
+        for(element of clone.window.document.querySelectorAll('img')) {
             let image = new URL(element.getAttribute('src'), storybookUrl).href;
             let format = path.extname(image).replace(/^./, '');
             format = format === 'svg' ? 'svg+xml' : format
             let imageAsBase64 = await getBase64(image);
             element.setAttribute('src', 'data:image/'+format+';base64,'+imageAsBase64);
         }
+        await serializeCSSOM(dom, clone);
+
         try {
-            fs.writeFileSync('doms/' + storyId + '.html', dom.serialize());
+            fs.writeFileSync('doms/' + storyId + '.html', clone.serialize());
         } catch (err) {
             console.error(err);
         }
@@ -38,41 +51,120 @@ async function sendDoM(storybookUrl, stories, storybookConfig, options) {
     }
     await browser.close()
 
-    // Send html files to the renderer API
+    // Create form
+    // let commit = await getLastCommit();
     const form = new formData();
     for (const [storyId, storyInfo] of Object.entries(stories)) {
         const file = fs.readFileSync('doms/' + storyId + '.html');
-        form.append('html', file, storyInfo.kind + ': ' + storyInfo.name + '.html');
+        form.append('files', file, storyInfo.kind + ': ' + storyInfo.name + '.html');
     }
     form.append('resolution', storybookConfig.resolutions);
     form.append('browser', storybookConfig.browsers);
     form.append('projectToken', process.env.PROJECT_TOKEN);
-    form.append('buildName', options.buildname);
-    axios.post(constants[constants.env].RENDER_API_URL, form, {
+    // form.append('branch', commit.branch);
+    // form.append('commitId', commit.shortHash);
+    // form.append('commitAuthor', commit.author.name);
+    // form.append('commitMessage', commit.subject);
+
+    // Send DOM to render API
+    await axios.post(constants[options.env].RENDER_API_URL, form, {
         headers: {
             ...form.getHeaders()
         }
         })
-        .then(function (response) {
-            console.log('[smartui] Build successful')
+        .then(async function (response) {
+            console.log('[smartui] Build in progress...');
+            await shortPolling(response.data.buildId, 0, options);
         })
         .catch(function (error) {
-            fs.rm('doms', {recursive: true}, (err) => {
-                if (err) {
-                    return console.error(err);
-                }
-            });
-            console.log('[smartui] Build failed: Error: ', error.message);
-            process.exit(0);
+            if (error.response) {
+                console.log('[smartui] Build failed: Error: ', error.response.data.message);
+            } else {
+                console.log('[smartui] Build failed: Error: ', error.message);
+            }       
         });
-
+    
     fs.rm('doms', {recursive: true}, (err) => {
         if (err) {
             return console.error(err);
         }
     });
 };
 
+async function shortPolling(buildId, retries = 0, options) {
+    await axios.get(new URL('?buildId=' + buildId, constants[options.env].BUILD_STATUS_URL).href, {
+        headers: {
+            projectToken: process.env.PROJECT_TOKEN
+        }})
+        .then(function (response) {
+            if (response.data) {
+                if (response.data.buildStatus === 'completed') {
+                    console.log('[smartui] Build successful\n');
+                    console.log('[smartui] Build details:\n',
+                        'Build URL: ', response.data.buildURL, '\n',
+                        'Build Name: ', response.data.buildName, '\n',
+                        'Total Screenshots: ', response.data.totalScreenshots, '\n',
+                        'Approved: ', response.data.buildResults.approved, '\n',
+                        'Changes found: ', response.data.buildResults.changesFound, '\n'
+                    );
+                    
+                    if (response.data.screenshots && response.data.screenshots.length > 0) {
+                        import('chalk').then((chalk) => {
+                            const table = new Table({
+                                head: [
+                                    {content: chalk.default.white('Story'), hAlign: 'center'},
+                                    {content: chalk.default.white('Mis-match %'), hAlign: 'center'},
+                                ]
+                            });
+                            response.data.screenshots.forEach(screenshot => {
+                                let mismatch = screenshot.mismatchPercentage
+                                table.push([
+                                    chalk.default.yellow(screenshot.storyName),
+                                    mismatch > 0 ? chalk.default.red(mismatch) : chalk.default.green(mismatch)
+                                ])
+                            });
+                            console.log(table.toString());
+                        })
+                    } else {
+                        if (response.data.baseline) {
+                            console.log('No comparisons run. This is a baseline build.');
+                        } else {
+                            console.log('No comparisons run. No screenshot in the current build has the corresponding screenshot in baseline build.');
+                        }
+                    }
+                    return;
+                } else {
+                    if (response.data.screenshots && response.data.screenshots.length > 0) {
+                        // TODO: show Screenshots processed current/total 
+                        console.log('[smartui] Screenshots compared: ', response.data.screenshots.length)
+                    }
+                }
+            }
+            
+            // Double the INTERVAL, up to the maximum INTERVAL of 512 secs (so ~15 mins in total)
+            INTERVAL = Math.min(INTERVAL * 2, MAX_INTERVAL);
+            if (INTERVAL == MAX_INTERVAL) {
+                console.log('[smartui] Please check the build status on LambdaTest SmartUI.');
+                return;
+            }
+
+            setTimeout(function () {
+                shortPolling(buildId, 0, options)
+            }, INTERVAL);
+        })
+        .catch(function (error) {
+            if (retries >= 3) {
+                console.log('[smartui] Error: Failed getting build status.', error.message);
+                console.log('[smartui] Please check the build status on LambdaTest SmartUI.');
+                return;
+            }
+
+            setTimeout(function () {
+                shortPolling(buildId, retries+1, options);
+            }, 2000);
+        });
+};
+
 function getBase64(url) {
     return axios.get(url, {
             responseType: "text",
@@ -85,4 +177,19 @@ function getBase64(url) {
         });
 }
 
+async function serializeCSSOM(dom, clone) {
+    return new Promise(resolve => {
+        dom.window.addEventListener("load", () => {
+            for (let styleSheet of dom.window.document.styleSheets) {
+                let style = clone.window.document.createElement('style');
+                style.type = 'text/css';
+                style.innerHTML = Array.from(styleSheet.cssRules)
+                    .map(cssRule => cssRule.cssText).join('\n');
+                clone.window.document.head.appendChild(style);
+            }
+            resolve();
+        });
+    });
+}
+
 module.exports = { sendDoM };

commands/utils/git.js

@@ -0,0 +1,58 @@
+const cp = require('child_process');
+
+function executeCommand(command, options) {
+	let dst = process.cwd()
+
+  	if(!!options && options.dst) {
+    	dst = options.dst
+  	}
+
+	try {
+		return cp.execSync(command, {
+			cwd: dst,
+			stdio: ['ignore', 'pipe', 'ignore'],
+			encoding: 'utf-8'
+		});
+	} catch (error) {
+		return '';
+	}
+}  
+
+async function getLastCommit(options) {
+	const splitCharacter = '<##>';
+	const prettyFormat = ["%h", "%H", "%s", "%f", "%b", "%at", "%ct", "%an", "%ae", "%cn", "%ce", "%N", ""];
+	const command = 'git log -1 --pretty=format:"' + prettyFormat.join(splitCharacter) + '"' +
+		' && git rev-parse --abbrev-ref HEAD' +
+		' && git tag --contains HEAD'
+
+  	res = executeCommand(command, options);
+	res = res.split(splitCharacter);
+
+	// e.g. master\n or master\nv1.1\n or master\nv1.1\nv1.2\n
+	var branchAndTags = res[res.length-1].split('\n').filter(n => n);
+	var branch = branchAndTags[0];
+	var tags = branchAndTags.slice(1);
+
+ 	return {
+		shortHash: res[0] || '',
+		hash: res[1] || '',
+		subject: res[2] || '',
+		sanitizedSubject: res[3] || '',
+		body: res[4] || '',
+		authoredOn: res[5] || '',
+		committedOn: res[6] || '',
+		author: {
+			name: res[7] || '',
+			email: res[8] || '',
+		},
+		committer: {
+			name: res[9] || '',
+			email: res[10] || ''
+		},
+		notes: res[11] || '',
+		branch: branch || '',
+		tags: tags || []
+    };
+}
+
+module.exports = { getLastCommit }

commands/utils/server.js

@@ -0,0 +1,15 @@
+var http = require('http');
+var finalhandler = require('finalhandler');
+var serveStatic = require('serve-static');
+
+async function createStaticServer(staticPath) {
+    var serve = serveStatic(staticPath, {'index': false});
+    var server = http.createServer(function(req, res){
+        var done = finalhandler(req, res);
+        serve(req, res, done);
+    })
+    
+    return server.listen();
+}
+
+module.exports = { createStaticServer }