From 7ae5c45cf9d0bfdd41bab0c6ab8a5d71409a3e36 Mon Sep 17 00:00:00 2001 From: Viacheslav Turovskyi Date: Mon, 29 Apr 2024 07:12:30 +0000 Subject: [PATCH] feat: add Dockerfile, Cypress, code generation --- apps/studio-next/cypress.config.ts | 7 ++++ .../cypress/e2e/studio-ui.spec.cy.ts | 14 +++++++ .../studio-next/cypress/fixtures/example.json | 5 +++ apps/studio-next/cypress/support/commands.ts | 37 +++++++++++++++++++ apps/studio-next/cypress/support/e2e.ts | 20 ++++++++++ apps/studio-next/package.json | 9 ++++- apps/studio-next/src/components/Sidebar.tsx | 1 + 7 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 apps/studio-next/cypress.config.ts create mode 100644 apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts create mode 100644 apps/studio-next/cypress/fixtures/example.json create mode 100644 apps/studio-next/cypress/support/commands.ts create mode 100644 apps/studio-next/cypress/support/e2e.ts diff --git a/apps/studio-next/cypress.config.ts b/apps/studio-next/cypress.config.ts new file mode 100644 index 000000000..4fda24fec --- /dev/null +++ b/apps/studio-next/cypress.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from "cypress"; + +export default defineConfig({ + e2e: { + baseUrl: 'http://localhost:3001', + }, +}); diff --git a/apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts b/apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts new file mode 100644 index 000000000..29a1d3630 --- /dev/null +++ b/apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts @@ -0,0 +1,14 @@ +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 "Settings" should display tooltip "Studio settings" on hover', () => { + cy.get('[data-testid="button-settings"]').trigger('mouseenter'); + cy.contains('Studio settings').should('be.visible'); + }); +}); diff --git a/apps/studio-next/cypress/fixtures/example.json b/apps/studio-next/cypress/fixtures/example.json new file mode 100644 index 000000000..02e425437 --- /dev/null +++ b/apps/studio-next/cypress/fixtures/example.json @@ -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" +} diff --git a/apps/studio-next/cypress/support/commands.ts b/apps/studio-next/cypress/support/commands.ts new file mode 100644 index 000000000..698b01a42 --- /dev/null +++ b/apps/studio-next/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } \ No newline at end of file diff --git a/apps/studio-next/cypress/support/e2e.ts b/apps/studio-next/cypress/support/e2e.ts new file mode 100644 index 000000000..f80f74f8e --- /dev/null +++ b/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') \ No newline at end of file diff --git a/apps/studio-next/package.json b/apps/studio-next/package.json index 89352eae7..6f8a97752 100644 --- a/apps/studio-next/package.json +++ b/apps/studio-next/package.json @@ -6,7 +6,13 @@ "dev": "next dev -p 3001", "build": "next build", "start": "next start", - "lint": "next lint" + "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", @@ -68,6 +74,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", diff --git a/apps/studio-next/src/components/Sidebar.tsx b/apps/studio-next/src/components/Sidebar.tsx index 00cb27fb6..ca7955dd9 100644 --- a/apps/studio-next/src/components/Sidebar.tsx +++ b/apps/studio-next/src/components/Sidebar.tsx @@ -139,6 +139,7 @@ export const Sidebar: FunctionComponent = () => { className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4' type="button" onClick={() => showModal(SettingsModal)} + data-testid="button-settings" >