[WIP] test: setup cypress for e2e testing

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
  with:
  version: 7
  run_install: false
- 
+
  - name: Get pnpm store directory
  id: pnpm-cache
  run: |
@@ -43,16 +43,30 @@ jobs:
  - name: Format with prettier
  run: pnpm run -r fmt:check
 
- - name: Test
+ - name: Unit Test (Backend)
  run: pnpm --filter "{packages/backend}" test
  env:
  NODE_ENV: test
 
- - name: Collect coverage
+ - name: Collect coverage (Backend)
  run: pnpm --filter "{packages/backend}" test:coverage
  env:
  NODE_ENV: test
 
+ - name: Cypress pnpm patch
+ run: cp pnpm-lock.yaml package-lock.json
+
+ - name: E2E Test (Frontend)
+ uses: cypress-io/[email protected]
+ with:
+ browser: chrome
+ working-directory: src/packages/frontend/cypress
+ install-command: echo
+ build: pnpm --dir .. build
+ start: pnpm --dir .. start
+ wait-on: 'http://localhost:4173'
+ component: false
+
  - name: Send coverage report to Codecov
  uses: codecov/codecov-action@v2
 

.github/workflows/pr.yml

@@ -43,16 +43,30 @@ jobs:
  - name: Format with prettier
  run: pnpm run -r fmt:check
 
- - name: Test
+ - name: Unit Test (Backend)
  run: pnpm --filter "{packages/backend}" test
  env:
  NODE_ENV: test
 
- - name: Collect coverage
+ - name: Collect coverage (Backend)
  run: pnpm --filter "{packages/backend}" test:coverage
  env:
  NODE_ENV: test
 
+ - name: Cypress pnpm patch
+ run: cp pnpm-lock.yaml package-lock.json
+
+ - name: E2E Test (Frontend)
+ uses: cypress-io/[email protected]
+ with:
+ browser: chrome
+ working-directory: src/packages/frontend/cypress
+ install-command: echo
+ build: pnpm --dir .. build
+ start: pnpm --dir .. start
+ wait-on: 'http://localhost:4173'
+ component: false
+
  - name: Send coverage report to Codecov
  uses: codecov/codecov-action@v2
 

packages/backend/package.json

@@ -20,42 +20,43 @@
  },
  "dependencies": {
  "@logtail/node": "0.1.12",
- "@sentry/node": "^7.7.0",
- "@sentry/tracing": "^7.7.0",
- "@tinyhttp/proxy-addr": "2.0.4",
- "dotenv": "16.0.1",
+ "@sentry/node": "^7.15.0",
+ "@sentry/tracing": "^7.15.0",
+ "@tinyhttp/proxy-addr": "2.0.5",
+ "dotenv": "16.0.3",
  "flourite": "1.2.2",
  "gura": "1.4.4",
- "helmet": "5.1.0",
+ "helmet": "6.0.0",
  "polka": "1.0.0-next.22",
- "rate-limiter-flexible": "2.3.7",
+ "rate-limiter-flexible": "2.3.12",
  "shared": "link:../shared",
- "sharp": "0.30.7",
- "shiki": "0.10.1",
+ "sharp": "0.31.1",
+ "shiki": "0.11.1",
  "sirv": "2.0.2",
  "toml": "3.0.0",
- "yaml": "2.1.1",
- "zod": "^3.17.9"
+ "yaml": "2.1.3",
+ "zod": "^3.19.1"
  },
  "devDependencies": {
  "@logtail/types": "^0.1.12",
- "@types/node": "18.0.6",
- "@types/sharp": "0.30.4",
+ "@types/node": "18.11.0",
+ "@types/sharp": "0.31.0",
  "@types/supertest": "2.0.12",
- "@typescript-eslint/eslint-plugin": "5.30.6",
- "@typescript-eslint/parser": "5.30.6",
- "c8": "^7.11.3",
- "esbuild": "0.14.49",
- "eslint": "8.20.0",
+ "@typescript-eslint/eslint-plugin": "5.40.0",
+ "@typescript-eslint/parser": "5.40.0",
+ "@vitest/coverage-c8": "^0.24.3",
+ "c8": "^7.12.0",
+ "esbuild": "0.15.11",
+ "eslint": "8.25.0",
  "eslint-config-prettier": "8.5.0",
  "eslint-plugin-prettier": "4.2.1",
  "esno": "^0.16.3",
- "nodemon": "2.0.19",
+ "nodemon": "2.0.20",
  "prettier": "2.7.1",
- "supertest": "6.2.4",
+ "supertest": "6.3.0",
  "tslib": "2.4.0",
- "typescript": "4.7.4",
- "vitest": "^0.18.1"
+ "typescript": "4.8.4",
+ "vitest": "^0.24.3"
  },
  "engineStrict": true,
  "engines": {

packages/frontend/.gitignore

@@ -1,2 +1,4 @@
 node_modules
-dist
+dist
+cypress/videos
+cypress/screenshots

packages/frontend/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+ e2e: {
+ setupNodeEvents(on, config) {
+ config.baseUrl = 'http://localhost:5173';
+ return config;
+ },
+ },
+});

packages/frontend/cypress/e2e/documentation.cy.ts

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+beforeEach(() => {
+ cy.visit('/');
+});
+
+describe('Documentation', () => {
+ it('shows documentation title', () => {
+ cy.get('#documentation').contains('Documentation for Graphene API');
+ });
+
+ it('shows several API options documentation', () => {
+ cy.get('.OptionItem').should('have.length.gt', 0);
+ });
+});

packages/frontend/cypress/e2e/editor.cy.ts

@@ -0,0 +1,154 @@
+/// <reference types="cypress" />
+
+beforeEach(() => {
+ cy.visit('/');
+});
+
+describe('Editor', () => {
+ it('shows the Editor component', () => {
+ cy.get('.Editor').should('be.visible');
+ });
+
+ it('shows the preview placeholder', () => {
+ cy.get('.preview-placeholder').should('be.visible');
+ });
+
+ it('shows setting popup toggle button', () => {
+ cy.get('.SettingsPopup').should('be.visible');
+ });
+
+ it('shows popup menu when toggle button is clicked', () => {
+ cy.get('.SettingsPopup > button').click();
+ cy.get('.popup').should('be.visible');
+ });
+
+ it('should be able to use the textarea to type the code', () => {
+ cy.get('.editor-input').type("console.log('foo');");
+ });
+});
+
+describe('Autocomplete', () => {
+ it('shows autocomplete menu when dropdown is clicked', () => {
+ cy.get('.Options .input').first().click();
+ cy.get('.candidates li').should('have.length.gt', 1);
+ });
+
+ it('should be able to select one of the option', () => {
+ cy.get('.Options .input').first().should('have.attr', 'placeholder', 'github dark dimmed').click();
+ cy.get('.candidates > li').first().click();
+ cy.get('.Options .input').first().should('have.attr', 'placeholder', 'css variables');
+ });
+
+ it('should be able to select one of the suggested option', () => {
+ cy.get('.Options .input').first().should('have.attr', 'placeholder', 'github dark dimmed').click().type('github');
+ cy.get('.candidates li').last().click();
+ cy.get('.Options .input').first().should('have.attr', 'placeholder', 'github light');
+ });
+
+ it('shows suggestions when some text is inserted', () => {
+ const incompleteTexts = [
+ // theme
+ 'github',
+ // language
+ 'script',
+ // font family
+ 'mono',
+ // output format
+ 'png',
+ ];
+
+ // desktop
+ cy.viewport('macbook-13');
+ for (const [index, text] of incompleteTexts.entries()) {
+ const input = cy.get('.Options .input').eq(index);
+ input.focus().type(text);
+ cy.get('.candidates li')
+ .should('have.length.at.least', 1)
+ .each(($li) => cy.wrap($li).contains(text));
+ input.blur();
+ }
+
+ // mobile
+ cy.viewport('iphone-xr');
+ cy.get('.SettingsPopup > button').click();
+ for (const [index, text] of incompleteTexts.entries()) {
+ const input = cy.get('.Options .input').eq(index);
+ input.focus().type(text);
+ cy.get('.candidates li')
+ .should('have.length.at.least', 1)
+ .each(($li) => cy.wrap($li).contains(text));
+ input.blur();
+ }
+ });
+
+ it('should not show any suggestion on garbled input', () => {
+ cy.get('.Options .input').first().type('alksjdlaksjdlkajsdlkaj');
+ cy.get('.candidate li').should('have.length.lt', 1);
+ });
+});
+
+describe('Responsive Dropdown', () => {
+ type Screen = { width: number; height: number; optionAmount: number };
+
+ it('shows different amount of dropdown inputs based on screen size', () => {
+ const screens: Screen[] = [
+ // desktop 1080p / FHD screen
+ { width: 1920, height: 1080, optionAmount: 4 },
+ // desktop 768p / HD screen
+ { width: 1366, height: 768, optionAmount: 4 },
+ // large screen
+ { width: 1100, height: 720, optionAmount: 3 },
+ // medium screen
+ { width: 1000, height: 720, optionAmount: 2 },
+ // small screen
+ { width: 800, height: 600, optionAmount: 1 },
+ // extra small screen
+ { width: 600, height: 400, optionAmount: 0 },
+ ];
+
+ for (const screen of screens) {
+ cy.viewport(screen.width, screen.height);
+ cy.get('.Options').should('have.length', screen.optionAmount);
+ }
+ });
+
+ it('shows different amount of dropdown inside the popup menu based on screen size', () => {
+ const screens: Screen[] = [
+ // desktop 1080p / FHD screen
+ { width: 1920, height: 1080, optionAmount: 0 },
+ // desktop 768p / HD screen
+ { width: 1366, height: 768, optionAmount: 0 },
+ // large screen
+ { width: 1100, height: 720, optionAmount: 1 },
+ // medium screen
+ { width: 1000, height: 720, optionAmount: 2 },
+ // small screen
+ { width: 800, height: 600, optionAmount: 3 },
+ // extra small screen
+ { width: 600, height: 400, optionAmount: 4 },
+ ];
+
+ cy.get('.SettingsPopup > button').click();
+ for (const screen of screens) {
+ cy.viewport(screen.width, screen.height);
+ cy.get('.popup > .Options').should('have.length', screen.optionAmount);
+ }
+ });
+});
+
+describe('Popup menu', () => {
+ it('should be able to select upscale option', () => {
+ cy.get('.SettingsPopup > button').click();
+ const upscaleItem = cy.get('.upscale > .upscale-item').last();
+ upscaleItem.last().should('have.css', 'opacity', '0.5');
+ upscaleItem.last().click();
+ upscaleItem.last().should('have.css', 'opacity', '1');
+ });
+
+ it('should be able to input border thickness and radius', () => {
+ cy.get('.SettingsPopup > button').click();
+ cy.get('.border-input').each(($input) => {
+ cy.wrap($input).type('12');
+ });
+ });
+});

packages/frontend/cypress/e2e/header.cy.ts

@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+
+beforeEach(() => {
+ cy.visit('/');
+});
+
+describe('Header', () => {
+ it('shows the app title and subtitle', () => {
+ cy.get('.title').contains('GRAPHENE');
+ cy.get('.subtitle').contains('Create and share beautiful code snippets!');
+ });
+
+ it('shows a github button to graphene repository', () => {
+ cy.get('.button')
+ .contains('See on Github')
+ .should('have.attr', 'href', 'https://github.com/teknologi-umum/graphene');
+ });
+});

packages/frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+ "name": "Using fixtures to represent data",
+ "email": "[email protected]",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/frontend/cypress/support/commands.ts

@@ -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>
+// }
+// }
+// }