Merge pull request #54 from hanshs/testing-cypress

Closes #53

.eslintrc.json

@@ -1,3 +1,10 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "root": true,
+  "extends": [
+    "plugin:cypress/recommended",
+    "next/core-web-vitals"
+  ],
+  "env": {
+    "cypress/globals": true
+  }
+}

.github/workflows/automated_tests.yml

@@ -1,6 +1,6 @@
 name: Automated Tests
 
-on: [push, pull_request]
+on: [push]
 
 jobs:
   run_automated_tests:

.github/workflows/cypress_tests.yml

@@ -0,0 +1,19 @@
+name: Integration Tests
+
+on: [push]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node12.18.3-chrome87-ff82
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        env:
+          DATABASE_URL: ${{ secrets.TEST_DATABASE_URL }}
+        with:
+          build: npm run build
+          start: npm start

components/Claim.tsx

@@ -50,7 +50,7 @@ export default function Claim(props: ClaimProps) {
 
     return (
         <span className={ref === props.refIndex ? 'bg-green-100' : ''}>
-            <span className={props.claim.successor ? 'cursor-pointer text-blue-700' : ''} onClick={() => setIsOpen(isOpen => !isOpen)}>{statement}</span>
+            <span className={props.claim.successor ? 'cursor-pointer text-blue-700' : ''} data-cy="claim" onClick={() => setIsOpen(isOpen => !isOpen)}>{statement}</span>
             {isOpen && props.claim.successor && <div className="ml-4"><Claim className="ml-4" claim={props.claim.successor} /></div>}
         </span>
     )

components/CreateClaim.tsx

@@ -43,15 +43,15 @@ export function CreateClaim(props: CreateClaimProps) {
 
     return (
         <div className={`space-y-1 ${props.className || ''}`}>
-            <input className="basic-input w-full" placeholder="Insert statement" onChange={onChangeStatement} />
+            <input className="basic-input w-full" placeholder="Insert statement" data-cy="claim-field" onChange={onChangeStatement} />
             {claim.successor && (
                 <>
                     <CreateClaim className="ml-4" claim={claim.successor} onChange={onChangeSuccessor} onRemoveSuccessor={removeSuccessor} />
                 </>)}
             {!claim.successor && (
                 <>
                     {props.onRemoveSuccessor && <button className="ml-2" onClick={props.onRemoveSuccessor}>➖</button>}
-                    <button className="ml-2" onClick={addSuccessor}>➕</button>
+                    <button className="ml-2" data-cy="add-btn" onClick={addSuccessor}>➕</button>
                 </>
             )}
         </div>

components/CreateProofSteps.tsx

@@ -73,24 +73,24 @@ export function CreateProofSteps(props: CreateProofStepsProps) {
                             <CreateClaim claim={step.claim} onChange={(claim) => updateClaim(claim, stepIndex)} />
 
                             {step.subProof && (
-                                <div className={`text-sm scale-95 p-3 border w-full`}>
+                                <div className={`text-sm scale-95 p-3 border w-full`} data-cy="subproof">
                                     <CreateProofSteps onChange={(subProof) => updateSubProof(subProof, stepIndex)} isSubProof={true} onRemoveSubProof={() => removeSubProof(stepIndex)} />
                                 </div>
                             )}
                         </div>
 
                     </div>
                     <div className="flex items-center space-x-4">
-                        {stepIndex !== 0 && <button className="btn btn-small" onClick={() => removeStep(stepIndex)} onMouseEnter={() => setHoverStep(stepIndex)} onMouseLeave={() => setHoverStep(undefined)}>Delete Step</button>}
-                        {!step.subProof && <button className="btn btn-secondary btn-small" onClick={() => addSubProof(stepIndex)}>Add Subproof</button>}
+                        {stepIndex !== 0 && <button className="btn btn-small" data-cy="delete-step" onClick={() => removeStep(stepIndex)} onMouseEnter={() => setHoverStep(stepIndex)} onMouseLeave={() => setHoverStep(undefined)}>Delete Step</button>}
+                        {!step.subProof && <button className="btn btn-secondary btn-small" data-cy="add-subproof" onClick={() => addSubProof(stepIndex)}>Add Subproof</button>}
                     </div>
 
                 </li>
 
             ))}
             <div className="flex justify-between">
-                <button className="btn btn-secondary" onClick={addStep}>Add Step</button>
-                {props.isSubProof && <button className="btn" onClick={props.onRemoveSubProof}>Delete Subproof</button>}
+                <button className="btn btn-secondary" data-cy="add-step" onClick={addStep}>Add Step</button>
+                {props.isSubProof && <button className="btn" data-cy="del-subproof" onClick={props.onRemoveSubProof}>Delete Subproof</button>}
             </div>
         </ol>
     )

components/Layout.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { signIn, signOut, useSession } from 'next-auth/react'
+import { signIn, signOut } from 'next-auth/react'
+import useSession from "../lib/use-session";
+//import { signIn, signOut, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 
@@ -16,7 +18,7 @@ export default function Layout(props: React.PropsWithChildren<{}>) {
             {asPath !== "/" &&
             <div>
                 <Link href="/">
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" opacity="0.6">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" opacity="0.6" data-cy="back">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
                     </svg>
                 </Link>
@@ -44,6 +46,7 @@ export default function Layout(props: React.PropsWithChildren<{}>) {
                             <a
                                 href={`/api/auth/signout`}
                                 className="block ml-auto hover:text-secondary text-yellow-800"
+                                data-cy="signout"
                                 onClick={(e) => {
                                     e.preventDefault()
                                     signOut()

components/Theorem.tsx

@@ -35,8 +35,8 @@ interface TheoremProps {
 export default function Theorem(props: TheoremProps) {
     return (
         <div className="space-y-3">
-            <h3 className="text-xl"><Claim claim={props.theorem.claim} /></h3>
-            <ol className="list-decimal list-inside space-y-4 pl-4 border-gray-300 border-l-2">
+            <h3 className="text-xl" data-cy="theorem-claim"><Claim claim={props.theorem.claim} /></h3>
+            <ol className="list-decimal list-inside space-y-4 pl-4 border-gray-300 border-l-2" data-cy="theorem-ol">
 
                 {props.theorem.proof.sort((a, b) => a.orderKey - b.orderKey).map((step, index) => {
                     return (

cypress.json

@@ -0,0 +1,4 @@
+{
+    "baseUrl": "http://localhost:3000",
+    "chromeWebSecurity": false
+}

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

cypress/integration/create_theorem.spec.js

@@ -0,0 +1,145 @@
+describe("Testing theorem creation, UC-2, UC-6", () => {
+    beforeEach(() => {
+        cy.visit("/");
+    });
+
+    it("checks that the user is signed in", () => {
+        cy.get('[data-cy=signout]').should("exist");
+        cy.get('[data-cy=create-link]').should("exist");
+    });
+
+    it("navigates to create page and checks if elements exist", () => {
+        cy.get('[data-cy=create-link]').click();
+        cy.get('[data-cy=claim-div]').should("exist");
+        cy.get('[data-cy=steps-div]').should("exist");
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').should("exist");
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').should("exist");
+        cy.get('[data-cy=claim-div] [data-cy=add-btn]').should("exist");
+        cy.get('[data-cy=steps-div] [data-cy=add-btn]').should("exist");
+        cy.get('[data-cy=add-step]').should("exist");
+    });
+
+    it("shows theorem preview and creation button", () => {
+        let claim = "Cypress testing theorem preview";
+        let step = "Cypress testing theorem preview step1";
+
+        cy.get('[data-cy=create-link]').click();
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step);
+
+        cy.get('[data-cy=preview-div]').should("exist");
+        cy.get('[data-cy=preview-div]').within(() => {
+            cy.get('[data-cy=theorem-claim]').contains(claim);
+            cy.get('ol>li').within(() => {
+                cy.get('[data-cy=claim]').contains(step);
+            });
+        });
+    });
+
+    it("creates a theorem", () => {
+        let claim = "Cypress testing theorem creation";
+        let step1 = "Cypress testing theorem creation step1";
+        let subStep1 = "Cypress testing theorem creation subStep1";
+        let step2 = "Cypress testing theorem creation step2";
+
+        cy.get('[data-cy=create-link]').click();
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step1);
+        cy.get('[data-cy=steps-div] [data-cy=add-btn]').click();
+
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').eq(1).type(subStep1);
+
+        cy.get('[data-cy=add-step]').click();
+        cy.get('[data-cy=steps-div]>ol>li').eq(1).within(() => {
+            cy.get('[data-cy=claim-field]').type(step2);
+        });
+        cy.get('[data-cy=create-btn]').click();
+
+        cy.get('[data-cy=theorem-claim]').contains(claim)
+        cy.get('[data-cy=delete-theorem]').click();
+        cy.on('window:confirm', () => true);
+        cy.visit("/");
+    });
+
+    it("deletes step during theorem creation", () => {
+        let claim = "Cypress testing theorem creation";
+        let step1 = "Cypress testing theorem creation step1";
+        let step2 = "Cypress testing theorem creation step2";
+
+        cy.get('[data-cy=create-link]').click();
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step1);
+        cy.get('[data-cy=add-step]').click();
+        cy.get('[data-cy=steps-div]>ol>li').eq(1).within(() => {
+            cy.get('[data-cy=claim-field]').type(step2);
+        });
+        cy.get('[data-cy=delete-step]').should("exist");
+        cy.get('[data-cy=delete-step]').click();
+        cy.get('[data-cy=steps-div]').within(() => {
+            cy.get(step2).should("have.length", 0);
+        });
+        cy.visit("/");
+    });
+
+    it("does not create a theorem with an empty statement", () => {
+        let claim = "Cypress testing theorem creation";
+        let step1 = "Cypress testing theorem creation step1";
+
+        cy.get('[data-cy=create-link]').click();
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step1);
+        cy.get('[data-cy=add-step]').click();
+        cy.get('[data-cy=create-btn]').click();
+        cy.on('window:alert', (text) => {
+            expect(text).to.contains('Please delete or fill empty proof steps and statements!');
+            return true;
+        });
+        cy.get('[data-cy=back]').click();
+        cy.get('[data-cy=main-ol]').within(() => {
+            cy.get(claim).should("have.length", 0);
+        });
+    });
+
+    it("creates a theorem with a step that has a subproof", () => {
+        let claim = "Cypress testing theorem creation";
+        let step1 = "Cypress testing theorem creation step1";
+        let subProof = "Cypress testing theorem creation subProof";
+
+        cy.get('[data-cy=create-link]').click();
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step1);
+
+        cy.get('[data-cy=add-subproof]').click();
+        cy.get('[data-cy=subproof]').within(() => {
+            cy.get('[data-cy=claim-field]').type(subProof);
+        });
+        cy.get('[data-cy=create-btn]').click();
+        cy.wait(2000);
+        cy.get('[data-cy=theorem-ol]').contains(subProof);
+        cy.url().then((urlString) => {
+            let url = '/api' + urlString.replace('http://localhost:3000', '');
+            cy.request('DELETE', url);
+        })      
+        cy.visit("/");
+    });
+
+    it("deletes a subproof during theorem creation", () => {
+        let claim = "Cypress testing theorem creation";
+        let step1 = "Cypress testing theorem creation step1";
+        let subProof = "Cypress testing theorem creation subProof";
+
+        cy.get('[data-cy=create-link]').click();
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step1);
+
+        cy.get('[data-cy=add-subproof]').click();
+        cy.get('[data-cy=subproof]').within(() => {
+            cy.get('[data-cy=claim-field]').type(subProof);
+        });
+
+        cy.get('[data-cy=del-subproof]').click();
+        cy.get(subProof).should("have.length", 0);
+
+        cy.visit("/");
+    });
+});

cypress/integration/delete_theorem.spec.js

@@ -0,0 +1,45 @@
+describe("Deleting theorem, UC-11", () => {
+
+    let claim = "Cypress testing theorem deletion";
+    let step = "Cypress testing theorem deletion step1";
+
+    beforeEach(() => {        
+        cy.visit("/create");
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step);
+        cy.get('[data-cy=create-btn]').click();
+        cy.visit("/");
+    });
+
+    it("deletes a theorem", () => {
+        cy.get('[data-cy=signout]').should("exist");
+        cy.get('[data-cy=main-ol]>li').eq(-1).within(() => {
+            cy.get('[data-cy=theorem-title]').click();
+        });
+        cy.get('[data-cy=delete-theorem]').click();
+        cy.on('window:confirm', (text) => {
+            expect(text).to.contains('Are you sure');
+            return true;
+        });
+        cy.url().should('eq', 'http://localhost:3000/');
+    });
+
+    it("keeps the theorem if deletion is not confirmed", () => {
+        cy.get('[data-cy=signout]').should("exist");
+        cy.get('[data-cy=main-ol]>li').eq(-1).within(() => {
+            cy.get('[data-cy=theorem-title]').click();
+        });
+        cy.get('[data-cy=delete-theorem]').click();
+        cy.on('window:confirm', () => false);
+
+        cy.get('[data-cy=theorem-claim]').contains(claim);
+
+        cy.url().then(urlString => {
+            let url = '/api' + urlString.replace('http://localhost:3000', '');
+            cy.request('DELETE', url);
+        });
+
+        cy.visit("/");
+        cy.get(claim).should("have.length", 0);
+    });
+});

cypress/integration/search_theorem.spec.js

@@ -0,0 +1,43 @@
+describe("Search theorems, UC-12", () => {
+
+    let claim = "Cypress testing searching theorem";
+    let step = "Cypress testing searching theorem step1";
+
+    let id = '';
+
+    beforeEach(() => {
+        cy.visit("/create");
+        cy.get('[data-cy=claim-div] [data-cy=claim-field]').type(claim);
+        cy.get('[data-cy=steps-div] [data-cy=claim-field]').type(step);
+        cy.get('[data-cy=create-btn]').click()
+        cy.wait(2000);
+        cy.url().then(urlString => {
+            id = urlString.replace('http://localhost:3000/theorem/', '');
+        });
+        cy.visit("/");
+    });
+
+    afterEach(() => {
+        cy.get('[data-cy=search]').clear();
+        cy.request('DELETE', 'api/theorem/' + id);
+    });
+
+    it("finds the correct theorem by claim", () => {
+        cy.get('[data-cy=search]').type(claim);
+        cy.get('[data-cy=main-ol]').within(() => {
+            cy.get('[data-cy=theorem-title]').contains(claim).should("have.length", 1);
+        });
+    });
+
+    it("finds the correct theorem by step", () => {
+        cy.get('[data-cy=search]').type(step);
+        cy.get('[data-cy=main-ol]').within(() => {
+            cy.get('[data-cy=theorem-title]').contains(claim).should("have.length", 1);
+        });
+    });
+
+    it("does not find a theorem by random search phrase", () => {
+        cy.get('[data-cy=search]').type('asöfiawenawkljflsduhaöslkrnal');
+        cy.get('[data-cy=main-ol]>li').should("have.length", 0);
+    });
+});