cypress added

.github/ISSUE_TEMPLATE/feature_request.md → .github/ISSUE_TEMPLATE/new_feature.md

@@ -1,5 +1,5 @@
 ---
-name: Feature request
+name: New Feature
 about: Suggest an idea for this project
 title: ''
 labels: feature

.github/ISSUE_TEMPLATE/task.md

@@ -0,0 +1,19 @@
+---
+name: New Task
+about: a todo
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+# Title
+
+Description
+
+[ ] what does this task entail
+[ ] what does this task entail
+
+## Screenshots
+If applicable include screenshots
+

cypress.config.cjs

@@ -0,0 +1,23 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+  env: {},
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+    setupNodeEvents(on, config) {},
+    specPattern: 'cypress/e2e/**/*.cy.{js,ts,jsx,tsx}',
+    excludeSpecPattern: ['**/__snapshots__/*', '**/__image_snapshots__/*'],
+  },
+  component: {
+    setupNodeEvents(on, config) {},
+    specPattern: 'cypress/component/**/*.cy.{js,ts,jsx,tsx}',
+    excludeSpecPattern: ['**/__snapshots__/*', '**/__image_snapshots__/*'],
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+  },
+});

cypress/.eslintrc.json

@@ -0,0 +1,92 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:cypress/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "sourceType": "module"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "rules": {
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsForRegex": [
+          "^draft"
+        ]
+      }
+    ],
+    "strict": 0,
+    "quotes": [
+      2,
+      "single"
+    ],
+    "no-else-return": 0,
+    "new-cap": [
+      "error",
+      {
+        "capIsNewExceptions": [
+          "Router"
+        ]
+      }
+    ],
+    "no-console": 0,
+    "import/no-unresolved": [
+      2,
+      {
+        "caseSensitive": false
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "args": "none"
+      }
+    ],
+    "no-underscore-dangle": 0,
+    "arrow-body-style": 0,
+    "one-var": [
+      "error",
+      {
+        "uninitialized": "always",
+        "initialized": "never"
+      }
+    ],
+    "one-var-declaration-per-line": [
+      "error",
+      "initializations"
+    ],
+    "max-len": [
+      "error",
+      200
+    ],
+    "no-extra-parens": 0,
+    "no-restricted-syntax": [
+      0,
+      "DebuggerStatement"
+    ],
+    "no-debugger": "warn",
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "react/prop-types": 0,
+    "react/destructuring-assignment": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-filename-extension": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "react/jsx-one-expression-per-line": 0
+  },
+  "plugins": [
+    "react",
+    "cypress"
+  ]
+}

cypress/component/0-frontend/note-input.cy.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import NoteInput from '../../../src/components/note-input';
+
+describe('<NoteInput>', () => {
+  it('mounts', () => {
+    cy.mount(<NoteInput />); // this command now works in any test!
+  });
+  it('type into input and submit', () => {
+    cy.mount(<NoteInput onCreateNote={cy.spy().as('onClick')} />); // this command now works in any test!
+    cy.get('input').type('test');
+    cy.get('button').as('submitButton').click();
+    cy.get('@onClick').should('have.been.called');
+    cy.get('input').should('have.value', '');
+  });
+});

cypress/e2e/0-fontend/test.cy.js

@@ -0,0 +1,91 @@
+describe('notes app', () => {
+  const firstNote = 'Testing Note 1';
+  const newTitle = 'New Title';
+
+  it('can add new note', () => {
+    cy.visit('/');
+    cy.get('.noteinput').find('input').type(`${firstNote}`);
+    cy.get('.noteinput').submit();
+
+    cy.get('.note')
+      .should('exist');
+
+    cy.get('.note')
+      .last()
+      .get('h1')
+      .contains(firstNote);
+  });
+
+  it('.note should have position absolute', () => {
+    cy.visit('/');
+    cy.get('.note')
+      .first()
+      .invoke('css', 'position')
+      .should('equal', 'absolute');
+  });
+
+  it('can edit note', () => {
+    cy.visit('/');
+    cy.get('.note')
+      .last()
+      .get('[aria-label=edit]')
+      .last()
+      .click({ force: true });
+
+    cy.get('.note')
+      .last()
+      .get('input')
+      .get('[value="Testing Note 1"]')
+      .should('exist')
+      .type(`{selectall}{backspace}${newTitle}{enter}`)
+      .get('[aria-label=done-editing]')
+      .click({ force: true });
+
+    cy.get('.note')
+      .last()
+      .find('h1')
+      .contains(newTitle);
+  });
+  it('can delete note', () => {
+    cy.visit('/');
+    cy.get('.note')
+      .last()
+      .get('[aria-label=delete]')
+      .last()
+      .click({ force: true });
+
+    cy.get('.note')
+      .last()
+      .find('h1')
+      .not(newTitle);
+  });
+
+  it('should be synchronized with firebase; should rerender on database update', () => {
+    let url = '';
+    const urlRegex = /(https?:\/\/[^ ]*.firebaseio.com)/;
+    const testText = String(Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)); // generate random string for ID + check
+    const testID = `test-${testText}`;
+    const file = 'src/services/datastore.js';
+    cy.readFile(file).then((str) => {
+      const databaseURL = `${str.split('databaseURL:')[1].match(urlRegex)[1]}`;
+      url = `${databaseURL}/notes/${testID}.json`;
+      console.log(`url: ${url}`);
+      const method = 'PUT';
+      const body = {
+        title: testText,
+        text: 'TEST',
+        id: testID,
+        x: 0,
+        y: 0,
+      };
+      cy.request(method, url, body);
+    }).then(() => {
+      cy.visit('/');
+      cy.get('h1')
+        .contains(testText)
+        .should('exist');
+    }).then(() => {
+      cy.request('DELETE', url); // remove from db
+    });
+  });
+});

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"
+}

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// 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)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

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 will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/component-index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Components App</title>
+
+</head>
+
+<body>
+
+  <div data-cy-root></div>
+</body>
+
+</html>

cypress/support/component.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// ***********************************************************
+// This example support/e2e.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';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// import 'cypress-react-selector';
+
+import { mount } from 'cypress/react';
+
+Cypress.Commands.add('mount', mount);

cypress/support/e2e.js

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// ***********************************************************
+// This example support/e2e.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';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')