chore: add tests for studio and preview commands. (#1824)

Co-authored-by: Tushar Anand <tusharannand@gmail.com>
Co-authored-by: Shurtu-gal <ashishpadhy1729@gmail.com>

Author: neoandmatrix

package-lock.json

@@ -91,6 +91,7 @@
     "mocha": "^10.2.0",
     "nodemon": "^3.1.10",
     "nyc": "^15.1.0",
+    "puppeteer": "^24.17.0",
     "rimraf": "^3.0.2",
     "simple-git": "^3.16.0",
     "supertest": "^7.1.4",

package.json

@@ -44,6 +44,7 @@ export default class PreviewStudio extends Command {
       flags.xOrigin,
       flags.suppressLogs,
       previewPort,
+      flags.noBrowser
     );
   }
 }

src/apps/cli/commands/start/preview.ts

@@ -55,7 +55,7 @@ export default class StartStudio extends Command {
       }
     }
     this.metricsMetadata.port = port;
-    await startStudio(filePath as string, port);
+    startStudio(filePath as string, port,flags.noBrowser);
   }
 
   private async parseArgs(args: Record<string, any>, port?: string) {

src/apps/cli/commands/start/studio.ts

@@ -27,5 +27,6 @@ export const previewFlags = () => {
       description: 'Pass this to suppress the detiled error logs.',
       default: false,
     }),
+    noBrowser: Flags.boolean({char: 'B', description: 'Pass this to not open browser automatically upon running the command', default: false})
   };
 };

src/apps/cli/internal/flags/start/preview.flags.ts

@@ -13,10 +13,10 @@ export const studioFlags = () => {
       description: 'port in which to start Studio',
     }),
     'no-interactive': Flags.boolean({
-      description:
-        'disable prompts for this command which asks for file path if not passed via the arguments.',
+      description: 'disable prompts for this command which asks for file path if not passed via the arguments.',
       required: false,
       default: false,
     }),
+    noBrowser: Flags.boolean({char: 'B', description: 'Pass this to not open browser automatically upon running the command', default: false})
   };
 };

src/apps/cli/internal/flags/start/studio.flags.ts

@@ -25,11 +25,11 @@ function isValidFilePath(filePath: string): boolean {
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-export async function startPreview(filePath:string,base:string | undefined,baseDirectory:string | undefined ,xOrigin:boolean | undefined,suppressLogs:boolean|undefined,port: number = DEFAULT_PORT):Promise<void> {
+export function startPreview(filePath:string,base:string | undefined,baseDirectory:string | undefined ,xOrigin:boolean | undefined,suppressLogs:boolean|undefined,port: number = DEFAULT_PORT, noBrowser?: boolean):void {
   if (filePath && !isValidFilePath(filePath)) {
     throw new SpecificationFileNotFound(filePath);
   }
-
+  
   const baseDir = path.dirname(path.resolve(filePath));
   bundle(filePath).then((doc) => {
     if (doc) {
@@ -126,7 +126,23 @@ export async function startPreview(filePath:string,base:string | undefined,baseD
         }
       });
     }
-    const server = createServer((req, res) => handle(req, res));
+
+    const server = createServer((req, res) => {
+      if (req.url === '/close') {
+        res.writeHead(200, { 'Content-Type': 'text/plain' });
+        res.end('Shutting down server');
+        for (const socket of wsServer.clients) {
+          socket.close();
+        }
+        // Close the server
+        server.close(() => {
+          // eslint-disable-next-line no-process-exit
+          process.exit(0);
+        });
+        return;
+      }
+      handle(req, res);
+    });
 
     server.on('upgrade', (request, socket, head) => {
       if (request.url === '/preview-server' && request.headers['origin'] === `http://localhost:${port}`) {
@@ -158,7 +174,7 @@ export async function startPreview(filePath:string,base:string | undefined,baseD
             'Warning: No file was provided, and we couldn\'t find a default file (like "asyncapi.yaml" or "asyncapi.json") in the current folder. Starting Studio with a blank workspace.'
           );
         }
-        if (!bundleError) {
+        if (!bundleError && !noBrowser) {
           open(url);
         }
       }).on('error', (error) => {

src/domains/models/Preview.ts

@@ -21,7 +21,7 @@ function isValidFilePath(filePath: string): boolean {
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-export async function start(filePath: string, port: number = DEFAULT_PORT): Promise<void> {
+export function start(filePath: string, port: number = DEFAULT_PORT, noBrowser?:boolean): void {
   if (filePath && !isValidFilePath(filePath)) {
     throw new SpecificationFileNotFound(filePath);
   }
@@ -116,7 +116,22 @@ export async function start(filePath: string, port: number = DEFAULT_PORT): Prom
       });
     }
 
-    const server = createServer((req, res) => handle(req, res));
+    const server = createServer((req, res) => {
+      if (req.url === '/close') {
+        for (const socket of wsServer.clients) {
+          socket.close();
+        }
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ message: 'Server is shutting down' }));
+        // Close the server
+        server.close(() => {
+          // eslint-disable-next-line no-process-exit
+          process.exit(0);
+        });
+        return;
+      }
+      handle(req, res);
+    });
 
     server.on('upgrade', (request, socket, head) => {
       if (request.url === '/live-server') {
@@ -145,7 +160,9 @@ export async function start(filePath: string, port: number = DEFAULT_PORT): Prom
           'Warning: No file was provided, and we couldn\'t find a default file (like "asyncapi.yaml" or "asyncapi.json") in the current folder. Starting Studio with a blank workspace.',
         );
       }
-      open(url);
+      if (!noBrowser) {
+        open(url);
+      }
     }).on('error', (error) => {
       if (error.message.includes('EADDRINUSE')) {
         console.log(error);

src/domains/models/Studio.ts

@@ -4,6 +4,8 @@ import { IContextFile, CONTEXT_FILE_PATH } from '../../src/domains/models/Contex
 import SpecificationFile from '../../src/domains/models/SpecificationFile';
 import http from 'http';
 import rimraf from 'rimraf';
+import puppeteer from 'puppeteer';
+import { version as studioVersion } from '@asyncapi/studio/package.json';
 
 const ASYNCAPI_FILE_PATH = path.resolve(process.cwd(), 'specification.yaml');
 const SERVER_DIRECTORY= path.join(__dirname, '../fixtures/dummyspec');
@@ -77,6 +79,46 @@ export function fileCleanup(filepath: string) {
   unlinkSync(filepath);
 }
 
+export async function testStudio(){
+  const browser = await puppeteer.launch({
+    args: ['--no-sandbox']
+  });
+  const page = await browser.newPage();
+
+  await page.goto(`http://127.0.0.1:3210?liveServer=3210&studio-version=${studioVersion}`);
+  await page.setViewport({width: 1080, height: 1024});
+
+  const logo = await page.locator('body > div:nth-child(1) > div > div > div > div > img').waitHandle()
+  const sideBar = await page.locator('#sidebar').waitHandle()
+  const navigationPannel = await page.locator('#navigation-panel').waitHandle()
+  const editor = await page.locator('#editor').waitHandle()
+
+  const logoTitle = await logo?.evaluate((e:any) => e.title)
+  const sideBarId = await sideBar?.evaluate((e:any)=> e.id)
+  const navigationPannelId = await navigationPannel?.evaluate((e:any)=> e.id)
+  const editorId = await editor?.evaluate((e:any)=> e.id)
+  await browser.close();
+  return {logoTitle,sideBarId,navigationPannelId,editorId}
+}
+
+export async function testPreview(){
+  const browser = await puppeteer.launch({
+    args: ['--no-sandbox']
+  });
+  const page = await browser.newPage();
+
+  await page.goto(`http://127.0.0.1:4321?previewServer=4321&studio-version=${studioVersion}`);
+  await page.setViewport({width: 1080, height: 1024});
+
+  const logo = await page.locator('body > div:nth-child(1) > div > div > div > div > img').waitHandle()
+  const introductionSection = await page.locator('#introduction').waitHandle()
+
+  const logoTitle = await logo?.evaluate((e:any) => e.title)
+  const introductionSectionId = await introductionSection?.evaluate((e:any)=> e.id)
+
+  await browser.close();
+  return {logoTitle,introductionSectionId}
+}
 export function createMockServer (port = 8080) {
   server = http.createServer(async (req,res) => {
     if (req.method ==='GET') {
@@ -103,6 +145,19 @@ export function stopMockServer() {
   server.close();
 }
 
+export async function closeStudioServer(port = 3210): Promise<void> {
+  try {
+    const response = await fetch(`http://localhost:${port}/close`);
+    if (response.ok) {
+      const text = await response.text();
+    } else {
+      console.log(`Failed to close server. Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error('Error closing studio server:', error);
+  }
+}
+
 function getContentType(filePath:string):string {
   const extname = path.extname(filePath);
   switch (extname) {

test/helpers/index.ts

@@ -0,0 +1,31 @@
+import { test } from '@oclif/test';
+import { expect } from '@oclif/test';
+import { testPreview, testStudio } from '../helpers';
+
+describe('Test live studio', () => {
+  test
+    .stdout()
+    .command([
+      'start studio','-B','-p','3210','./test/fixtures/specification-v3.yml',
+    ])
+    .it('should successfully open and navigate the site', async () => {
+      const {logoTitle,sideBarId,navigationPannelId,editorId} = await testStudio();
+      expect(logoTitle).to.equal('AsyncAPI Logo');
+      expect(sideBarId).to.equal('sidebar');
+      expect(navigationPannelId).to.equal('navigation-panel');
+      expect(editorId).to.equal('editor');
+    });
+});
+
+describe('Test preview mode', () => {
+  test
+    .stdout()
+    .command([
+      'start preview','-B','-p','4321','./test/fixtures/asyncapi_v2.yml',
+    ])
+    .it('should successfully open and navigate the site', async () => {
+      const {logoTitle,introductionSectionId} = await testPreview();
+      expect(logoTitle).to.equal('AsyncAPI Logo');
+      expect(introductionSectionId).to.equal('introduction');
+    });
+});