feat: add Cypress

asyncapi · Jun 6, 2024 · 1ceb4e8 · 1ceb4e8
1 parent 8357745
commit 1ceb4e8
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 18 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
@@ -10,38 +10,38 @@ 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');
@@ -94,12 +94,43 @@ describe('Studio UI spec', () => {
     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 "Settings" should be visible in the UI', () => {
+    cy.get('[data-test="button-settings"]').should('be.visible');
   });
 
-  it('Button "Studio settings" should display tooltip "Studio settings" on hover', () => {
-    cy.get('[data-test="button-studio-settings"]').trigger('mouseenter');
+  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');
+  });
 });
diff --git a/apps/studio-next/package.json b/apps/studio-next/package.json
@@ -37,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",

diff --git a/apps/studio-next/src/components/Editor/Editor.tsx b/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>

diff --git a/apps/studio-next/src/components/Editor/ShareButton.tsx b/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>

diff --git a/apps/studio-next/src/components/Sidebar.tsx b/apps/studio-next/src/components/Sidebar.tsx
@@ -144,7 +144,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-test="button-studio-settings"
+            data-test="button-settings"
           >
             <VscSettingsGear className="w-5 h-5" />
           </button>

diff --git a/apps/studio-next/src/components/common/Dropdown.tsx b/apps/studio-next/src/components/common/Dropdown.tsx
@@ -32,6 +32,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
         onKeyDown={() => setOpen(!open)}
         type="button"
         className={`flex p-2 text-sm rounded-md ${buttonHoverClassName} focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150`}
+        data-test="button-dropdown"
       >
         {opener}
       </button>