feat: add Dockerfile, Cypress, code generation

asyncapi · May 13, 2024 · 880b47e · 880b47e
1 parent a3c141c
commit 880b47e
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 27 deletions.
diff --git a/apps/studio-next/cypress.config.ts b/apps/studio-next/cypress.config.ts
@@ -1,7 +1,11 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3001',
+    retries: {
+      runMode: 1,
+      openMode: 1,
+    },
   },
 });
diff --git a/apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts b/apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts
@@ -1,10 +1,51 @@
 const isV2 = false;
 const isV3 = true;
 
+/* Testing commented hovers is impossible even with `cypress-real-events` so
+testing of these hovers is postponed until either Cypress has better support for
+`mouseover`/`mouseenter` events or the architecture of `Studio` is changed to
+allow testing those. */
+
 describe('Studio UI spec', () => {
   beforeEach(() => {
     cy.visit('/');
   });
+
+  it('Logo should be visible in the UI', () => {
+    cy.get('[data-test="logo"]').should('be.visible');
+  });
+
+  // it('Logo should display tooltip "AsyncAPI Logo" on hover', () => {
+  //   cy.get('[data-test="logo"]').trigger('mouseenter');
+  //   cy.contains('AsyncAPI Logo').should('be.visible');
+  // });
+
+  it('Button "AsyncAPI Website" should be visible in the UI', () => {
+    cy.get('[data-test="button-website"]').should('be.visible');
+  });
+
+  // it('Button "AsyncAPI Website" should display tooltip "AsyncAPI Website" on hover', () => {
+  //   cy.get('[data-test="button-website"]').trigger('mouseenter');
+  //   cy.contains('AsyncAPI Website').should('be.visible');
+  // });
+
+  it('Button "AsyncAPI Github Organization" should be visible in the UI', () => {
+    cy.get('[data-test="button-github"]').should('be.visible');
+  });
+
+  // it('Button "AsyncAPI Github Organization" should display tooltip "AsyncAPI Github Organization" on hover', () => {
+  //   cy.get('[data-test="button-github"]').trigger('mouseenter');
+  //   cy.contains('AsyncAPI Github Organization').should('be.visible');
+  // });
+
+  it('Button "AsyncAPI Slack Workspace" should be visible in the UI', () => {
+    cy.get('[data-test="button-slack"]').should('be.visible');
+  });
+
+  // it('Button "AsyncAPI Slack Workspace" should display tooltip "AsyncAPI Slack Workspace" on hover', () => {
+  //   cy.get('[data-test="button-slack"]').trigger('mouseenter');
+  //   cy.contains('AsyncAPI Slack Workspace').should('be.visible');
+  // });
 
   it('Button "Navigation" should be visible in the UI', () => {
     cy.get('[data-test="button-navigation"]').should('be.visible');
@@ -24,22 +65,22 @@ describe('Studio UI spec', () => {
     cy.contains('Editor').should('be.visible');
   });
 
-  it('Button "HTML preview" should be visible in the UI', () => {
-    cy.get('[data-test="button-html-preview"]').should('be.visible');
+  it('Button "Template preview" should be visible in the UI', () => {
+    cy.get('[data-test="button-template-preview"]').should('be.visible');
   });
 
-  it('Button "HTML preview" should display tooltip "HTML preview" on hover', () => {
-    cy.get('[data-test="button-html-preview"]').trigger('mouseenter');
-    cy.contains('HTML preview').should('be.visible');
+  it('Button "Template preview" should display tooltip "Template preview" on hover', () => {
+    cy.get('[data-test="button-template-preview"]').trigger('mouseenter');
+    cy.contains('Template preview').should('be.visible');
   });
 
   if (isV2) {
     it('Button "Blocks visualiser" should be visible in the UI', () => {
-      cy.get('[data-test="button-visualiser"]').should('be.visible');
+      cy.get('[data-test="button-blocks-visualiser"]').should('be.visible');
     });
 
     it('Button "Blocks visualiser" should display tooltip "Blocks visualiser" on hover', () => {
-      cy.get('[data-test="button-visualiser"]').trigger('mouseenter');
+      cy.get('[data-test="button-blocks-visualiser"]').trigger('mouseenter');
       cy.contains('Blocks visualiser').should('be.visible');
     });
   }
@@ -54,7 +95,7 @@ describe('Studio UI spec', () => {
   });
 
   it('Button "Studio settings" should be visible in the UI', () => {
-    cy.get('[data-test="button-settings"]').should('be.visible');
+    cy.get('[data-test="button-studio-settings"]').should('be.visible');
   });
 
   it('Button "Studio settings" should display tooltip "Studio settings" on hover', () => {

diff --git a/apps/studio-next/scripts/template-parameters.ts b/apps/studio-next/scripts/template-parameters.ts
@@ -6,17 +6,19 @@ import { JSONSchema7 } from 'json-schema';
 
 const DESTINATION_JSON = path.join(__dirname, '../src/components/Modals/Generator/template-parameters.json');
 const TEMPLATES: Record<string, string> = {
-  '@asyncapi/dotnet-nats-template': '.NET Nats Project',
+  '@asyncapi/dotnet-nats-template': '.NET NATS Project',
+  '@asyncapi/dotnet-rabbitmq-template':	'.NET C# RabbitMQ Project',
   '@asyncapi/go-watermill-template': 'GO Lang Watermill Project',
   '@asyncapi/html-template': 'HTML website',
   '@asyncapi/java-spring-cloud-stream-template': 'Java Spring Cloud Stream Project',
   '@asyncapi/java-spring-template': 'Java Spring Project',
   '@asyncapi/java-template': 'Java Project',
   '@asyncapi/markdown-template': 'Markdown Documentation',
   '@asyncapi/nodejs-template': 'NodeJS Project',
-  '@asyncapi/nodejs-ws-template': 'NodeJS WebSocket Project',
+  '@asyncapi/nodejs-ws-template': 'NodeJS WebSocket Projects',
+  '@asyncapi/php-template':	'PHP RabbitMQ Project',
   '@asyncapi/python-paho-template': 'Python Paho Project',
-  '@asyncapi/ts-nats-template': 'Typescript Nats Project',
+  '@asyncapi/ts-nats-template': 'Typescript NATS Project',
 };
 const SUPPORTED_TEMPLATES = Object.keys(TEMPLATES);
 

diff --git a/apps/studio-next/src/components/Modals/Generator/GeneratorModal.tsx b/apps/studio-next/src/components/Modals/Generator/GeneratorModal.tsx
@@ -15,15 +15,14 @@ import templates from './template-parameters.json';
 
 const unsupportedGenerators = [
   '@asyncapi/dotnet-nats-template',
-  '@asyncapi/ts-nats-template',
-  '@asyncapi/python-paho-template',
-  '@asyncapi/nodejs-ws-template',
-  '@asyncapi/java-spring-cloud-stream-template',
   '@asyncapi/go-watermill-template',
+  '@asyncapi/java-spring-cloud-stream-template',
   '@asyncapi/java-spring-template',
   '@asyncapi/nodejs-template',
-  '@asyncapi/java-template',
-  '@asyncapi/php-template'
+  '@asyncapi/nodejs-ws-template',
+  '@asyncapi/php-template',
+  '@asyncapi/python-paho-template',
+  '@asyncapi/ts-nats-template',
 ];
 
 const renderOptions = (actualVersion: string) => {

diff --git a/apps/studio-next/src/components/Sidebar.tsx b/apps/studio-next/src/components/Sidebar.tsx
@@ -86,13 +86,13 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
     // template
     {
       name: 'template',
-      title: 'HTML preview',
+      title: 'Template preview',
       isActive: show.secondaryPanel && secondaryPanelType === 'template',
       onClick: () => updateState('secondaryPanel', 'template'),
       icon: <VscOpenPreview className="w-5 h-5" />,
-      tooltip: 'HTML preview',
+      tooltip: 'Template preview',
       enabled: true,
-      dataTest: 'button-html-preview',
+      dataTest: 'button-template-preview',
     },
     // visuliser
     {
@@ -103,7 +103,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       icon: <VscGraph className="w-5 h-5" />,
       tooltip: 'Blocks visualiser',
       enabled: !isV3,
-      dataTest: 'button-visualiser',
+      dataTest: 'button-blocks-visualiser',
     },
     // newFile
     {

diff --git a/apps/studio-next/src/components/Toolbar.tsx b/apps/studio-next/src/components/Toolbar.tsx
@@ -6,30 +6,30 @@ export function Toolbar() {
     <div>
       <div className="px-2 border-b border-gray-700 bg-gray-800">
         <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
+          <div className="flex items-center" data-test="logo">
             <div className="flex-shrink-0 ml-1.5">
               <img
                 className="inline-block h-16"
                 src={`${process.env.PUBLIC_URL || ''}/img/logo-studio.svg`}
-                alt="AsyncAPI Logo"
+                title="AsyncAPI Logo"
               />
               <span className="inline-block text-xs text-teal-500 font-normal ml-1 tracking-wider uppercase" style={{ transform: 'translateY(0.3125rem)' }}>
                 beta
               </span>
             </div>
           </div>
           <ul className="flex items-center text-pink-500 mr-2">
-            <li className="text-xl opacity-75 hover:opacity-100">
+            <li className="text-xl opacity-75 hover:opacity-100" data-test="button-website">
               <a href='https://asyncapi.com' title='AsyncAPI Website' target='_blank' rel="noreferrer">
                 <IoGlobeOutline />
               </a>
             </li>
-            <li className="text-xl ml-2 opacity-75 hover:opacity-100">
+            <li className="text-xl ml-2 opacity-75 hover:opacity-100" data-test="button-github">
               <a href='https://github.com/asyncapi' title='AsyncAPI Github Organization' target='_blank' rel="noreferrer">
                 <IoLogoGithub />
               </a>
             </li>
-            <li className="text-xl ml-2 opacity-75 hover:opacity-100">
+            <li className="text-xl ml-2 opacity-75 hover:opacity-100" data-test="button-slack">
               <a href='https://asyncapi.com/slack-invite' title='AsyncAPI Slack Workspace' target='_blank' rel="noreferrer">
                 <IoLogoSlack />
               </a>