Skip to content

Commit

Permalink
feat: add Dockerfile, Cypress, code generation
Browse files Browse the repository at this point in the history
  • Loading branch information
aeworxet committed May 21, 2024
1 parent 84f76fa commit cf031ba
Show file tree
Hide file tree
Showing 10 changed files with 219 additions and 27 deletions.
11 changes: 11 additions & 0 deletions apps/studio-next/cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { defineConfig } from 'cypress';

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:3001',
retries: {
runMode: 1,
openMode: 1,
},
},
});
105 changes: 105 additions & 0 deletions apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
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');
});

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 (isV2) {
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 "Studio settings" should be visible in the UI', () => {
cy.get('[data-test="button-studio-settings"]').should('be.visible');
});

it('Button "Studio settings" should display tooltip "Studio settings" on hover', () => {
cy.get('[data-test="button-studio-settings"]').trigger('mouseenter');
cy.contains('Studio settings').should('be.visible');
});
});
5 changes: 5 additions & 0 deletions apps/studio-next/cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
37 changes: 37 additions & 0 deletions apps/studio-next/cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -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>
// }
// }
// }
20 changes: 20 additions & 0 deletions apps/studio-next/cypress/support/e2e.ts
Original file line number Diff line number Diff line change
@@ -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')
9 changes: 8 additions & 1 deletion apps/studio-next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@
"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",
Expand Down Expand Up @@ -72,6 +78,7 @@
"autoprefixer": "^10.4.13",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"cypress": "^13.8.1",
"eslint-config-next": "14.1.4",
"eslint-plugin-security": "^1.5.0",
"eslint-plugin-sonarjs": "^0.16.0",
Expand Down
8 changes: 5 additions & 3 deletions apps/studio-next/scripts/template-parameters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
30 changes: 18 additions & 12 deletions apps/studio-next/src/components/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,16 @@ interface NavItem {
icon: ReactNode;
tooltip: ReactNode;
enabled: boolean;
dataTest: string;
}

interface SidebarProps {}

export const Sidebar: FunctionComponent<SidebarProps> = () => {
const { show, secondaryPanelType } = usePanelsState();
const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null;
const isV3 = document?.version() === '3.0.0';

const isV3 = document?.version().startsWith('3.');
if (show.activityBar === false) {
return null;
}
Expand All @@ -68,7 +69,8 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
onClick: () => updateState('primarySidebar'),
icon: <VscListSelection className="w-5 h-5" />,
tooltip: 'Navigation',
enabled: true
enabled: true,
dataTest: 'button-navigation',
},
// editor
{
Expand All @@ -78,27 +80,30 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
onClick: () => updateState('primaryPanel'),
icon: <VscCode className="w-5 h-5" />,
tooltip: 'Editor',
enabled: true
enabled: true,
dataTest: 'button-editor',
},
// template
{
name: 'template',
title: 'Template',
title: 'Template preview',
isActive: show.secondaryPanel && secondaryPanelType === 'template',
onClick: () => updateState('secondaryPanel', 'template'),
icon: <VscOpenPreview className="w-5 h-5" />,
tooltip: 'HTML preview',
enabled: true
tooltip: 'Template preview',
enabled: true,
dataTest: 'button-template-preview',
},
// visuliser
{
name: 'visualiser',
title: 'Visualiser',
title: 'Blocks visualiser',
isActive: show.secondaryPanel && secondaryPanelType === 'visualiser',
onClick: () => updateState('secondaryPanel', 'visualiser'),
icon: <VscGraph className="w-5 h-5" />,
tooltip: 'Blocks visualiser',
enabled: !isV3
enabled: !isV3,
dataTest: 'button-blocks-visualiser',
},
// newFile
{
Expand All @@ -108,7 +113,8 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
onClick: () => showModal(ConfirmNewFileModal),
icon: <VscNewFile className="w-5 h-5" />,
tooltip: 'New file',
enabled: true
enabled: true,
dataTest: 'button-new-file',
},
];

Expand All @@ -120,10 +126,10 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
{navigation.map(item => (
<Tooltip content={item.tooltip} placement='right' hideOnClick={true} key={item.name}>
<button
title={item.title}
onClick={() => item.onClick()}
className={'flex text-sm focus:outline-none border-box p-2'}
type="button"
data-test={item.dataTest}
>
<div className={item.isActive ? 'bg-gray-600 p-2 rounded text-white' : 'p-2 text-gray-500 hover:text-white'}>
{item.icon}
Expand All @@ -135,10 +141,10 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
<div className="flex flex-col">
<Tooltip content='Studio settings' placement='right' hideOnClick={true}>
<button
title="Studio settings"
className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4'
type="button"
onClick={() => showModal(SettingsModal)}
data-test="button-studio-settings"
>
<VscSettingsGear className="w-5 h-5" />
</button>
Expand Down
10 changes: 5 additions & 5 deletions apps/studio-next/src/components/Toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit cf031ba

Please sign in to comment.