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/.eslintrc

@@ -0,0 +1,9 @@
+{
+ "env": {
+ "es6": true,
+ "browser": true,
+ "node": true
+ },
+ "plugins": ["security"],
+ "extends":["eslint-config-custom", "eslint-config-custom/react"]
+}

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,11 +6,17 @@
  "dev": "next dev -p 3001",
  "build": "next build",
  "start": "next start",
- "lint": "echo 'No linting configured'"
+ "lint": "next lint",
+ "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",
- "@asyncapi/converter": "^1.4.16",
+ "@asyncapi/converter": "^1.6.0",
  "@asyncapi/openapi-schema-parser": "^3.0.18",
  "@asyncapi/parser": "^3.2.2",
  "@asyncapi/protobuf-schema-parser": "^3.2.8",
@@ -30,12 +36,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 +76,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 +93,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});
+}

apps/studio-next/src/components/Editor/Editor.tsx

@@ -13,15 +13,15 @@ export const Editor: React.FunctionComponent<EditorProps> = () => {
  const editorHeight = useOtherState(state => state.editorHeight);
 
  return (
- <div className="flex flex-1 overflow-hidden">
+ <div className="flex flex-1">
  <SplitPane
  split="horizontal"
  minSize={29}
  maxSize={-36}
  size={editorHeight}
  defaultSize={editorHeight}
  >
- <div className="flex flex-1 flex-col h-full overflow-hidden">
+ <div className="flex flex-1 flex-col h-full">
  <EditorSidebar />
  <MonacoWrapper />
  </div>

apps/studio-next/src/components/Editor/ShareButton.tsx

@@ -28,7 +28,7 @@ export const ShareButton: React.FunctionComponent<ShareButtonProps> = () => {
 
  return (
  <Tooltip content={'Share link'} placement="top" hideOnClick={true}>
- <button className="bg-inherit" onClick={handleShare}>
+ <button className="bg-inherit" onClick={handleShare} data-test="button-share">
  <FaShareAlt className="text-gray-500 hover:text-white" />
  </button>
  </Tooltip>

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) => {