From 6ec5459e01124ebedae714a1e5f416112ba38911 Mon Sep 17 00:00:00 2001 From: Sai Sandeep Vaddi Date: Sat, 17 Aug 2019 17:58:16 -0400 Subject: [PATCH 1/6] fix app not opening in browser --- app/package.json | 1 + app/server/index.ts | 2 +- app/server/start.ts | 3 +++ app/tsconfig.json | 2 +- ui/src/components/App/AppLayout.tsx | 1 + ui/src/components/App/DesktopMenu.tsx | 23 +++++++++++++---------- 6 files changed, 20 insertions(+), 12 deletions(-) create mode 100644 app/server/start.ts diff --git a/app/package.json b/app/package.json index 09bd96e8..bb1e80e3 100644 --- a/app/package.json +++ b/app/package.json @@ -15,6 +15,7 @@ "build": "tsc", "build:watch": "tsc -w", "start": "concurrently \"yarn build:watch\" && \"yarn electron-only\"", + "start:server": "cross-env PORT=5010 node ./build/server/start", "dev": "./node_modules/.bin/nodemon", "pack": "./node_modules/.bin/electron-builder --dir", "build:installers": "rm -rf ./dist && ./node_modules/.bin/electron-builder --publish never", diff --git a/app/server/index.ts b/app/server/index.ts index d580c819..08e8483c 100644 --- a/app/server/index.ts +++ b/app/server/index.ts @@ -8,7 +8,7 @@ import config from "../shared/config"; export async function startServer() { return new Promise(async (res, rej) => { try { - const port = config.port || process.env.PORT || 5010; + const port = process.env.PORT || config.port || 5010; const server = createServer(app); diff --git a/app/server/start.ts b/app/server/start.ts new file mode 100644 index 00000000..d7dab4d4 --- /dev/null +++ b/app/server/start.ts @@ -0,0 +1,3 @@ +import {startServer} from "./index" + +startServer(); \ No newline at end of file diff --git a/app/tsconfig.json b/app/tsconfig.json index 3dbb7089..920a035a 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -7,7 +7,7 @@ "sourceMap": true, "outDir": "build", "allowJs": true, - "typeRoots": ["./node_modules/@types", "types"] + "typeRoots": ["./node_modules/@types", "types", "./server/types/"] }, "include": ["server/**/*", "electron/**/*", "shared/**/*"], "exclude": ["node_modules", "__tests__", "./server/__tests__"] diff --git a/ui/src/components/App/AppLayout.tsx b/ui/src/components/App/AppLayout.tsx index 29584ab6..368ed7bf 100644 --- a/ui/src/components/App/AppLayout.tsx +++ b/ui/src/components/App/AppLayout.tsx @@ -14,6 +14,7 @@ import DesktopMenu from "./DesktopMenu"; const AppLayout = React.memo(() => { const { config } = useConfig(); const topbarHeight = isRunningInElectron() ? "30px" : "50px"; + console.log(isRunningInElectron()); useEffect(() => { try { const socket = io(`http://localhost:${config.port}`); diff --git a/ui/src/components/App/DesktopMenu.tsx b/ui/src/components/App/DesktopMenu.tsx index c07282ca..98a932f5 100644 --- a/ui/src/components/App/DesktopMenu.tsx +++ b/ui/src/components/App/DesktopMenu.tsx @@ -1,7 +1,7 @@ import { Button, Classes, Icon } from "@blueprintjs/core"; -import { ipcRenderer, remote } from "electron"; import React from "react"; import styled from "styled-components"; +import { isRunningInElectron } from "../../utils/electron"; import { useTheme } from "../shared/Themes"; const MenuContainer = styled.div` @@ -57,17 +57,20 @@ const MenuContainer = styled.div` `; type TMinMaxIconType = "duplicate" | "square"; -const currentWindow = remote.getCurrentWindow(); -const startingIcon: TMinMaxIconType = currentWindow.isMaximized() ? "duplicate" : "square"; - -const openAppMenu = e => { - ipcRenderer.send(`display-app-menu`, { - x: e.x, - y: e.y, - }); -}; const DesktopMenu = () => { + // Importing electron here so that code doesn't give compilation error when running in browser + const { remote, ipcRenderer } = require("electron"); + const currentWindow = remote.getCurrentWindow(); + const startingIcon: TMinMaxIconType = currentWindow.isMaximized() ? "duplicate" : "square"; + + const openAppMenu = e => { + ipcRenderer.send(`display-app-menu`, { + x: e.x, + y: e.y, + }); + }; + const { theme, setTheme } = useTheme(); const [maximizeIcon, setMaximizeIcon] = React.useState(startingIcon); const [isCloseButtonMinimal, setIsCloseButtonMinimal] = React.useState(true); From 9b00ae13f40678b51b31dbc4f21a74e3846501f2 Mon Sep 17 00:00:00 2001 From: Sai Sandeep Vaddi Date: Sat, 17 Aug 2019 18:43:21 -0400 Subject: [PATCH 2/6] add cypress --- .vscode/settings.json | 3 + ui/cypress.json | 3 + ui/cypress/fixtures/example.json | 5 + ui/cypress/integration/index.spec.js | 48 +++ ui/cypress/plugins/index.js | 17 + ui/cypress/support/commands.js | 25 ++ ui/cypress/support/index.js | 22 ++ ui/package.json | 6 +- ui/src/components/Sidebar/Sidebar.tsx | 1 + yarn.lock | 469 ++++++++++++++++++++++++-- 10 files changed, 573 insertions(+), 26 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 ui/cypress.json create mode 100644 ui/cypress/fixtures/example.json create mode 100644 ui/cypress/integration/index.spec.js create mode 100644 ui/cypress/plugins/index.js create mode 100644 ui/cypress/support/commands.js create mode 100644 ui/cypress/support/index.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..ae20a9c8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "eslint.enable": false +} diff --git a/ui/cypress.json b/ui/cypress.json new file mode 100644 index 00000000..17ef242e --- /dev/null +++ b/ui/cypress.json @@ -0,0 +1,3 @@ +{ + "baseUrl": "http://localhost:3000" +} diff --git a/ui/cypress/fixtures/example.json b/ui/cypress/fixtures/example.json new file mode 100644 index 00000000..da18d935 --- /dev/null +++ b/ui/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" +} \ No newline at end of file diff --git a/ui/cypress/integration/index.spec.js b/ui/cypress/integration/index.spec.js new file mode 100644 index 00000000..a35d03ed --- /dev/null +++ b/ui/cypress/integration/index.spec.js @@ -0,0 +1,48 @@ +describe("Tests App top-most ui", () => { + before(() => { + cy.visit("/"); + }); + + it("Checks if topbar loaded", () => { + cy.get(".bp3-fixed-top > .bp3-align-left > .bp3-navbar-heading").should( + "have.text", + "Ten Hands" + ); + }); + + it("Checks if theme button is working", () => { + cy.getByTestId("theme-light").click(); + cy.wait(2000); + cy.getByTestId("theme-dark").click(); + }); + + it.only("Checks if new project button works", () => { + cy.getByTestId("new-project-button").then(subject => { + subject.click(); + cy.wait(1000); + cy.get(".bp3-drawer").then(subject => { + cy.getByText("Add Project", { container: subject }).should("exist"); + cy.getByText("Project Name", { container: subject }).should("exist"); + cy.getByText("Project Path", { container: subject }).should("exist"); + cy.getByText("Project Type", { container: subject }).should("exist"); + cy.getByText("Commands", { container: subject }).should("exist"); + cy.getByText("Save Project", { container: subject }).should("exist"); + }); + }); + }); + + // I added project folder of 'ten-hands'. If you have cloned this project add one before this test case. + it.only("Opens test project", () => { + cy.get(".Pane1").then(sidebar => { + cy.getByText("ten-hands", { container: sidebar }) + .click() + .wait(2000) + .getByText("New Command") + .should("exist") + .getByText("build:desktop") + .should("exist") + .getByText("yarn build:desktop") + .should("exist"); + }); + }); +}); diff --git a/ui/cypress/plugins/index.js b/ui/cypress/plugins/index.js new file mode 100644 index 00000000..fd170fba --- /dev/null +++ b/ui/cypress/plugins/index.js @@ -0,0 +1,17 @@ +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/ui/cypress/support/commands.js b/ui/cypress/support/commands.js new file mode 100644 index 00000000..c1f5a772 --- /dev/null +++ b/ui/cypress/support/commands.js @@ -0,0 +1,25 @@ +// *********************************************** +// This example commands.js 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 is will overwrite an existing command -- +// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/ui/cypress/support/index.js b/ui/cypress/support/index.js new file mode 100644 index 00000000..94c47d06 --- /dev/null +++ b/ui/cypress/support/index.js @@ -0,0 +1,22 @@ +// *********************************************************** +// This example support/index.js 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"; + +import "@testing-library/cypress/add-commands"; + +// Alternatively you can use CommonJS syntax: +// require('./commands') diff --git a/ui/package.json b/ui/package.json index c982c92f..46c92037 100644 --- a/ui/package.json +++ b/ui/package.json @@ -9,7 +9,8 @@ "start:browser": "react-scripts start", "build:electron": "rescripts build", "build:browser": "react-scripts build", - "test": "rescripts test" + "test": "rescripts test", + "cypress:open": "./node_modules/.bin/cypress open" }, "author": { "name": "Sai Sandeep Vaddi", @@ -48,6 +49,7 @@ "@blueprintjs/tslint-config": "^1.8.0", "@rescripts/cli": "^0.0.10", "@rescripts/rescript-env": "^0.0.10", + "@testing-library/cypress": "^4.1.1", "@testing-library/dom": "^5.2.0", "@testing-library/react": "^8.0.7", "@types/react": "^16.8.17", @@ -55,6 +57,8 @@ "@types/react-dom": "^16.8.4", "@types/styled-components": "^4.1.15", "cross-env": "^5.2.0", + "cypress": "^3.4.1", + "eslint-plugin-cypress": "^2.6.1", "jest-dom": "^3.2.2", "tslint": "^5.16.0", "tslint-react-hooks": "^2.1.0", diff --git a/ui/src/components/Sidebar/Sidebar.tsx b/ui/src/components/Sidebar/Sidebar.tsx index aef68093..8e1929ea 100644 --- a/ui/src/components/Sidebar/Sidebar.tsx +++ b/ui/src/components/Sidebar/Sidebar.tsx @@ -24,6 +24,7 @@ const Sidebar = React.memo(() => { return (