feat: add first cypress test

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,14 +7,11 @@ assignees: ''
 
 ---
 
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+**Please describe your feature**
+<!-- Example: As a user I want to [...] -->
 
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+**What are your criteria for this feature**
+<!-- Example: It should be shown on [...] -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

.github/workflows/cypress.yml

@@ -0,0 +1,23 @@
+name: Cypress Tests
+
+on: [push]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          record: true
+          build: yarn heroku-postbuild
+          start: yarn start
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,10 +1,72 @@
-# poll-dapp
-decentralized doodle alternative
+<h1 align="center">Poll dApp</h1>
 
-## INSTALATION
+<div align="center">
+  <strong>Meetings made simple! </strong>
+</div>
+<div align="center">
+  A <code>decentralized</code> doodle alternative
+</div>
 
-yarn install
+<br />
+<!-- badges -->
+<div align="center">
+  <!-- Stability -->
+    <img src="https://img.shields.io/badge/Version-preAlpha-red?style=flat-square"
+      alt="API stability" />
+  <!-- Build Status -->
+    <img src="https://img.shields.io/github/checks-status/tetrisiq/poll-dapp/main?style=flat-square"
+      alt="Build Status" />
+  <!-- Test status -->
+    <img src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/byzw5k&style=flat-square&logo=cypress" />
+</div>
 
-## RUN 
+<div align="center">
+  <h3>
+    <a href="https://tetrisiq.github.io/poll-dapp/">
+      Website
+    </a>
+    <span> | </span>
+    <a href="https://dashboard.cypress.io/projects/byzw5k/runs">
+      Cypress Dashboard
+    </a>
+  </h3>
+</div>
 
-yarn dev
+
+## Table of Contents
+- [Features](#features)
+- [What means decentralized](#What means decentralized)
+- [FAQ](#faq)
+- [Installation](#installation)
+- [See Also](#see-also)
+- [Support](#support)
+
+## Features
+- **Yes, No, If needed be** You can choose between three options. Yes this option is okay for me. No this is not acceptable. And if needed be.
+- **Set deadlines** After the deadline is reached. Your Poll cannot be edited. Comments are still possible. But the answers are locked.
+- **Add Comments** You can add Anonymous comments to the Poll and discuss about the answers and topics.
+- **Vote limits** Limit the number of votes a participant has.
+
+> For planed features take a look at the GitHub issues
+
+## What means decentralized
+tbd
+
+## FAQ
+### Why can nobody see my poll?
+Maybe you close your browser window, so that your participants cannot receive the data from you.   
+Poll dApp has no central server so your data are only stored in your browser (and in the browser of your Participants)
+
+> If you have any other issues, create an [issue on GitHub](https://github.com/TetrisIQ/poll-dapp/issues/new?assignees=&labels=&template=bug_report.md&title=)
+
+## Installation
+- Clone the git repo
+- Install the dependency's with `yarn install`
+- Start the application `yarn dev`
+
+To start the test with cypress enter `cypress run` into your console.
+
+## See Also
+- [gun.eco](https://gun.eco) - decentralised Database 
+- [Svelte in 100 sec.](https://www.youtube.com/watch?v=rv3Yq-B8qp4) - tiny library for modular UI
+- [svelte Tutorial](https://svelte.dev/tutorial/basics/) - A very good start point for learning svelte

cypress.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "byzw5k",
+  "pluginsFile": false
+}

cypress/integration/create-poll/createPoll.spec.js

@@ -0,0 +1,129 @@
+/// <reference types="cypress" />
+
+
+describe('Create Poll', () => {
+    beforeEach(() => {
+        cy.visit('http://localhost:8080')
+    })
+
+    it('Create poll - Ok', () => {
+        const title = "Test Title"
+        const text = "Test Location";
+        const note = "Test Note"
+        const options = ["Option 1", "Option 2", "Option 3"]
+        const user = "Cypress Test User";
+        // Click on create Poll button in header
+        cy.get('.container > .inline-flex').click()
+        // Type title
+        cy.get(':nth-child(2) > .relative > .rounded-md').type(title)
+        // Type location
+        cy.get(':nth-child(3) > .relative > .rounded-md').type(text)
+        // Type note
+        cy.get(':nth-child(4) > .relative > .rounded-md').type(note)
+        // Click continue
+        cy.get('.pt-4 > button').click()
+        //fill first Option
+        cy.get(':nth-child(3) > .relative > .rounded-md').type(options[0])
+        //fill Second Option
+        cy.get(':nth-child(4) > .relative > .rounded-md').type(options[1])
+        //fill third Option
+        cy.get(':nth-child(5) > .relative > .rounded-md').type(options[2])
+        // click on last element so it's presen
+        cy.get(':nth-child(5) > .relative > .rounded-md').click()
+
+        // Click continue
+        cy.get('.pt-4 > button').click()
+        // Click continue
+        cy.get('.pt-4 > button').click()
+        //Type name
+        cy.get(':nth-child(2) > .relative > .rounded-md').clear().type(user)
+        // Click finish
+        cy.get('.pt-4 > button').click()
+        //Click Option 2
+        cy.get(':nth-child(3) > .gb-gray-200 > input.s-tgccq2OiNLI-').click()
+        //Click update
+        cy.get('.py-4 > .inline-flex').click()
+        // write Comment
+        cy.get('.mb-2 > .bg-gray-100').clear().type("Cypress writing comments and so on :)")
+        // Post comment
+        cy.get('.-mr-1 > .bg-white').click()
+
+        // Validate the result
+        cy.get('.py-4 > .text-xl').should("contain.text", "Test Title")
+
+
+        cy.get(':nth-child(1) > .text-left > span').should("contain.text", text)
+
+        cy.get(':nth-child(2) > .text-left > span').should("contain.text", note)
+
+        cy.get('thead > tr > :nth-child(2)').should("contain.text", options[0])
+        cy.get('thead > tr > :nth-child(3)').should("contain.text", options[1])
+        cy.get('thead > tr > :nth-child(4)').should("contain.text", options[2])
+        cy.reload()
+        cy.get(':nth-child(3) > .gb-gray-200 > svg').should('have.css', 'fill').and('eq', 'rgb(34, 197, 94)')
+
+    })
+
+
+    it('Create poll - YNINB', () => {
+        const title = "Test Title"
+        const text = "Test Location";
+        const note = "Test Note"
+        const options = ["Option 1", "Option 2", "Option 3"]
+        const user = "Cypress Test User";
+        // Click on create Poll button in header
+        cy.get('.container > .inline-flex').click()
+        // Type title
+        cy.get(':nth-child(2) > .relative > .rounded-md').type(title)
+        // Type location
+        cy.get(':nth-child(3) > .relative > .rounded-md').type(text)
+        // Type note
+        cy.get(':nth-child(4) > .relative > .rounded-md').type(note)
+        // Click continue
+        cy.get('.pt-4 > button').click()
+        //fill first Option
+        cy.get(':nth-child(3) > .relative > .rounded-md').type(options[0])
+        //fill Second Option
+        cy.get(':nth-child(4) > .relative > .rounded-md').type(options[1])
+        //fill third Option
+        cy.get(':nth-child(5) > .relative > .rounded-md').type(options[2])
+        // click on last element so it's presen
+        cy.get(':nth-child(5) > .relative > .rounded-md').click()
+
+        // Click continue
+        cy.get('.pt-4 > button').click()
+        // Click If needed Be
+        cy.get(':nth-child(1) > .checkbox > input.s-1OLEAndxnfGJ').click()
+
+        // Click continue
+        cy.get('.pt-4 > button').click()
+        //Type name
+        cy.get(':nth-child(2) > .relative > .rounded-md').clear().type(user)
+        // Click finish
+        cy.get('.pt-4 > button').click()
+        //Click Option 2
+        cy.get(':nth-child(3) > .gb-gray-200 > input.s-tgccq2OiNLI-').click()
+        //CLick Option 1 twice
+        cy.get(':nth-child(2) > .gb-gray-200 > input.s-tgccq2OiNLI-').click()
+        cy.get(':nth-child(2) > .gb-gray-200 > input.s-tgccq2OiNLI-').click()
+        //Click update
+        cy.get('.py-4 > .inline-flex').click()
+
+        // Validate the result
+        cy.get('.py-4 > .text-xl').should("contain.text", "Test Title")
+
+
+        cy.get(':nth-child(1) > .text-left > span').should("contain.text", text)
+
+        cy.get(':nth-child(2) > .text-left > span').should("contain.text",note)
+
+        cy.get('thead > tr > :nth-child(2)').should("contain.text", options[0])
+        cy.get('thead > tr > :nth-child(3)').should("contain.text",options[1])
+        cy.get('thead > tr > :nth-child(4)').should("contain.text",options[2])
+        cy.reload()
+        cy.get(':nth-child(3) > .gb-gray-200 > svg').should('have.css', 'fill').and('eq', 'rgb(34, 197, 94)')
+        cy.get(':nth-child(2) > .gb-gray-200 > svg').should('have.css', 'fill').and('eq', 'rgb(234, 179, 8)')
+
+    })
+
+})

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/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -6,16 +6,17 @@
     "dev": "vite",
     "build": "vite build --base /poll-dapp/",
     "preview": "vite preview",
+    "cypressUI": "cypress open",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "start": "http-server dist",
     "heroku-postbuild": "vite build --mode review --base /"
   },
   "devDependencies": {
     "@beyonk/svelte-datepicker": "^12.0.0",
-    "dayjs": "^1.10.7",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
     "@tsconfig/svelte": "^2.0.1",
     "autoprefixer": "^10.4.2",
+    "dayjs": "^1.10.7",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
     "svelte": "3.39.0",
@@ -27,7 +28,8 @@
     "vite": "^2.7.2"
   },
   "dependencies": {
+    "cypress": "^9.4.1",
     "gun": "^0.2020.1235",
-    "http-server" : "^14.1.0"
+    "http-server": "^14.1.0"
   }
 }

src/gun/index.ts

@@ -1,6 +1,6 @@
 import GUN, {SEA} from "gun"
 import "gun/sea"
-import type {PollDTO} from "../model/PollDTO";
+import type {PollDTOV1} from "../model/DTO/PollDTOV1";
 import {page, pollDTO} from "../store";
 import Error from "../view/404.svelte"
 
@@ -24,23 +24,23 @@ class PollMutations {
             .map()
             .once(async (data, id) => {
                 if (id === "encryptedData") {
-                    const test = <PollDTO>await SEA.decrypt(data, password);
-                    pollDTO.set(test as PollDTO);
+                    const test = <PollDTOV1>await SEA.decrypt(data, password);
+                    pollDTO.set(test as PollDTOV1);
                 }
             });
         page.set(Error)
 
     }
 
-    async createPoll(data: PollDTO, key: string, password: string) {
+    async createPoll(data: PollDTOV1, key: string, password: string) {
         const enc = await SEA.encrypt(JSON.stringify(data), password)
         db.get("poll").get(key).put({
             timestamp: new Date().toDateString(),
             encryptedData: enc
         });
     }
 
-    updatePoll(pollDTO: PollDTO, id: string, password: string) {
+    updatePoll(pollDTO: PollDTOV1, id: string, password: string) {
         console.log("UPDATE")
         this.createPoll(pollDTO, id, password)
     }