feat: add Dockerfile, Cypress, code generation

asyncapi · May 13, 2024 · a3c141c · a3c141c
1 parent 7ae5c45
commit a3c141c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 13 deletions.
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,14 +1,64 @@
+const isV2 = false;
+const isV3 = true;
+
 describe('Studio UI spec', () => {
  beforeEach(() => {
  cy.visit('/');
  });
 
- it('Button "Settings" should be visible in the UI', () => {
- cy.get('[data-testid="button-settings"]').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 "HTML preview" should be visible in the UI', () => {
+ cy.get('[data-test="button-html-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');
+ });
+
+ if (isV2) {
+ it('Button "Blocks visualiser" should be visible in the UI', () => {
+ cy.get('[data-test="button-visualiser"]').should('be.visible');
+ });
+
+ it('Button "Blocks visualiser" should display tooltip "Blocks visualiser" on hover', () => {
+ cy.get('[data-test="button-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-settings"]').should('be.visible');
  });
 
- it('Button "Settings" should display tooltip "Studio settings" on hover', () => {
- cy.get('[data-testid="button-settings"]').trigger('mouseenter');
+ 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');
  });
 });
diff --git a/apps/studio-next/src/components/Sidebar.tsx b/apps/studio-next/src/components/Sidebar.tsx
@@ -46,14 +46,15 @@ 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;
@@ -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
  {
@@ -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: 'HTML preview',
  isActive: show.secondaryPanel && secondaryPanelType === 'template',
  onClick: () => updateState('secondaryPanel', 'template'),
  icon: <VscOpenPreview className="w-5 h-5" />,
  tooltip: 'HTML preview',
- enabled: true
+ enabled: true,
+ dataTest: 'button-html-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-visualiser',
  },
  // newFile
  {
@@ -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',
  },
  ];
 
@@ -124,6 +130,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
  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}
@@ -139,7 +146,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
  className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4'
  type="button" 
  onClick={() => showModal(SettingsModal)}
- data-testid="button-settings"
+ data-test="button-studio-settings"
  >
  <VscSettingsGear className="w-5 h-5" />
  </button>