feat: add Cypress

.sonarcloud.properties

@@ -1,4 +1,4 @@
 # Disable specific file since it would introduce more complexity to reduce it - mainly code complexity and complex template literals
-sonar.exclusions=apps/studio/public/js/monaco/**,apps/studio/src/tailwind.css,apps/studio/src/components/SplitPane/**
+sonar.exclusions=apps/studio/public/js/monaco/**,apps/studio/src/tailwind.css,apps/studio/src/components/SplitPane/**,apps/studio-next/cypress/**,apps/studio-next/Dockerfile
 # Disable duplicate code in tests since it would introduce more complexity to reduce it.
-sonar.cpd.exclusions=apps/studio/**,apps/studio-next/src/components/Navigationv3.tsx,apps/studio-next/src/components/Navigation.tsx
+sonar.cpd.exclusions=apps/studio/**,apps/studio-next/src/components/Navigationv3.tsx,apps/studio-next/src/components/Navigation.tsx,apps/studio-next/cypress/**

apps/studio-next/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

apps/studio-next/Dockerfile

@@ -0,0 +1,58 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json ./
+RUN npm install [email protected] --global
+#  yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN corepack enable pnpm && pnpm i
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN corepack enable pnpm && pnpm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3001
+
+ENV PORT 3001
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js

apps/studio-next/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3001',
+    retries: {
+      runMode: 1,
+      openMode: 1,
+    },
+  },
+});

apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts

@@ -0,0 +1,136 @@
+// import { isV3 } from "../../src/components/Sidebar";
+const isV3Test = 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');
+  });
+
+  it('Button "Navigation" should display tooltip "Navigation" on hover', () => {
+    cy.get('[data-test="button-navigation"]').trigger('mouseenter');
+    cy.contains('Navigation').should('be.visible');
+  });
+
+  it('Button "Editor" should be visible in the UI', () => {
+    cy.get('[data-test="button-editor"]').should('be.visible');
+  });
+
+  it('Button "Editor" should display tooltip "Editor" on hover', () => {
+    cy.get('[data-test="button-editor"]').trigger('mouseenter');
+    cy.contains('Editor').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 "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 (!isV3Test) { // review the need of v2 testing in general
+    it('Button "Blocks visualiser" should be visible in the UI', () => {
+      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-blocks-visualiser"]').trigger('mouseenter');
+      cy.contains('Blocks visualiser').should('be.visible');
+    });
+  }
+
+  it('Button "New file" should be visible in the UI', () => {
+    cy.get('[data-test="button-new-file"]').should('be.visible');
+  });
+
+  it('Button "New file" should display tooltip "New file" on hover', () => {
+    cy.get('[data-test="button-new-file"]').trigger('mouseenter');
+    cy.contains('New file').should('be.visible');
+  });
+
+  it('Button "Settings" should be visible in the UI', () => {
+    cy.get('[data-test="button-settings"]').should('be.visible');
+  });
+
+  it('Button "Settings" should display tooltip "Studio settings" on hover', () => {
+    cy.get('[data-test="button-settings"]').trigger('mouseenter');
+    cy.contains('Studio settings').should('be.visible');
+  });
+
+  it('Button "Share" should be visible in the UI', () => {
+    cy.get('[data-test="button-share"]').should('be.visible');
+  });
+
+  it('Button "Share" should display tooltip "Share link" on hover', () => {
+    cy.get('[data-test="button-share"]').trigger('mouseenter');
+    cy.contains('Share link').should('be.visible');
+  });
+
+  it('Button "Dropdown" should be visible in the UI', () => {
+    cy.get('[data-test="button-dropdown"]').should('be.visible');
+  });
+
+  it('Dropdown menu should contain 8 elements with predefined text', () => {
+    cy.get('[data-test="button-dropdown"]').click();
+    cy.contains('Import from URL');
+    cy.contains('Import File');
+    cy.contains('Import from Base64');
+    cy.contains('Generate code/docs');
+    cy.contains('Save as YAML');
+    cy.contains('Convert and save as JSON');
+    cy.contains('Convert to JSON');
+    cy.contains('Convert document');
+  });
+
+  it('Click on Dropdown menu\'s element "Generate code/docs" should open Modal window "Generate code/docs based on your AsyncAPI Document"', () => {
+    cy.get('[data-test="button-dropdown"]').click();
+    cy.contains('Generate code/docs').click();
+    cy.contains('Generate code/docs based on your AsyncAPI Document');
+  });
+});

apps/studio-next/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/studio-next/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

apps/studio-next/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

apps/studio-next/next.config.js

@@ -7,9 +7,9 @@ const nextConfig = {
     config.module.rules.push({
       test: /\.yml$/i,
       type: 'asset/source',
-    })
+    });
 
-    if (isServer) return config
+    if (isServer) return config;
     // Important: return the modified config
     config.resolve.fallback = {
       ...config.resolve.fallback,
@@ -25,7 +25,7 @@ const nextConfig = {
       debug: false,
       canvas: false,
       fs: false,
-    }
+    };
 
     config.plugins.push(
       new webpack.ProvidePlugin({
@@ -34,8 +34,9 @@ const nextConfig = {
       })
     );
 
-    return config
+    return config;
   },
-}
+  output: 'standalone'
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

apps/studio-next/package.json

@@ -6,7 +6,14 @@
     "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "echo 'No linting configured'"
+    "lint": "next lint",
+    "docker:build": "docker build -t asyncapi/studio:latest .",
+    "cy:e2e:chrome": "cypress run --e2e --browser chrome",
+    "cy:e2e:chromium": "cypress run --e2e --browser chromium",
+    "cy:e2e:edge": "cypress run --e2e --browser edge",
+    "cy:e2e:electron": "cypress run --e2e --browser electron",
+    "cy:e2e:firefox": "cypress run --e2e --browser firefox",
+    "cy:open": "cypress open"
   },
   "dependencies": {
     "@asyncapi/avro-schema-parser": "^3.0.19",
@@ -30,12 +37,10 @@
     "react-icons": "^4.6.0",
     "reactflow": "^11.2.0",
     "@stoplight/yaml": "^4.3.0",
-    "@codemirror/view": "^6.26.3",
     "@types/node": "20.4.6",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
-    "codemirror": "^6.0.1",
     "eslint-config-next": "13.4.12",
     "next": "14.2.3",
     "postcss": "8.4.31",
@@ -72,6 +77,7 @@
     "autoprefixer": "^10.4.13",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
+    "cypress": "^13.10.0",
     "eslint-config-next": "14.1.4",
     "eslint-plugin-security": "^1.5.0",
     "eslint-plugin-sonarjs": "^0.16.0",
@@ -88,5 +94,6 @@
     "util": "^0.12.5",
     "web-vitals": "^3.1.0",
     "webpack": "^5.75.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

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);
 

apps/studio-next/src/app/api/v1/generate/route.tsx

@@ -0,0 +1,6 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const response = await request.json();
+  return new NextResponse(`route POST -> ${JSON.stringify(response)}`, {status: 201});
+}