Merge pull request #40 from Etheonor/cypress

Cypress first integration

.github/workflows/ci.yml

@@ -0,0 +1,15 @@
+name: SupaNexTail-CI
+# https://docs.github.com/en/actions/reference/events-that-trigger-workflows
+on: [deployment_status]
+jobs:
+  e2e:
+    # only runs this job on successful deploy
+    if: github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎
+        uses: actions/checkout@v1
+      - name: Run Cypress 🌲
+        uses: cypress-io/github-action@v2
+        env:
+          CYPRESS_BASE_URL: ${{ github.event.deployment_status.target_url }}

components/Nav.js

@@ -40,11 +40,15 @@ const Nav = (props) => {
       )}
 
       <Link href='/pricing'>
-        <a className='nav-btn'>Pricing</a>
+        <a className='nav-btn' id='pricingLink'>
+          Pricing
+        </a>
       </Link>
 
       <Link href='/contact'>
-        <a className='nav-btn'>Contact Us</a>
+        <a className='nav-btn' id='contactLink'>
+          Contact Us
+        </a>
       </Link>
 
       {props.user ? (
@@ -55,7 +59,9 @@ const Nav = (props) => {
         </button>
       ) : (
         <Link href='/auth'>
-          <a className='btn btn-primary btn-sm rounded-3xl font-body normal-case font-normal'>Login</a>
+          <a className='btn btn-primary btn-sm rounded-3xl font-body normal-case font-normal'>
+            Login
+          </a>
         </Link>
       )}
     </div>
@@ -72,7 +78,7 @@ const Nav = (props) => {
         <div className='hidden lg:flex text-center ml-auto'>{NavMenu}</div>
       </div>
       <div className='flex-none'>
-        <div className='dropdown dropdown-end'>
+        <div className='dropdown dropdown-end' data-cy="dropdown">
           <div tabIndex='0' className='m-1 cursor-pointer lg:hidden'>
             <Menu />
           </div>

components/Pricing.js

@@ -119,8 +119,8 @@ const Pricing = () => {
           </div>
         </div>
       )}
-      <div className='max-w-4xl mx-auto md:flex space-x-4 text-base-100'>
-        <div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
+      <div className='max-w-4xl mx-auto md:flex space-x-4'>
+        <div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
           <div className='w-full flex-grow'>
             <h2 className='text-center font-bold uppercase mb-4'>Personal</h2>
             <h3 className='text-center font-bold text-4xl mb-5'>
@@ -159,7 +159,7 @@ const Pricing = () => {
             </button>
           </div>
         </div>
-        <div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
+        <div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
           <div className='w-full flex-grow'>
             <h2 className='text-center font-bold uppercase mb-4'>Team</h2>
             <h3 className='text-center font-bold text-4xl mb-5'>
@@ -208,7 +208,7 @@ const Pricing = () => {
             </button>
           </div>
         </div>
-        <div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
+        <div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
           <div className='w-full flex-grow'>
             <h2 className='text-center font-bold uppercase mb-4'>Pro</h2>
             <h3 className='text-center font-bold text-4xl mb-5'>

cypress.json

@@ -0,0 +1,5 @@
+{
+    "baseUrl": "http://localhost:3000",
+    "viewportWidth": 1280,
+    "viewportHeight": 800
+}

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/basic.spec.js

@@ -0,0 +1,33 @@
+describe("Basic Test", () => {
+  context("Desktop resolution", () => {
+    // run these tests as if in a desktop
+    // browser with a 720p monitor
+
+    it("Visits the homepage and nav links", () => {
+      cy.viewport(1280, 720);
+      cy.visit("");
+
+      cy.get("nav").contains("Pricing").click();
+      cy.url().should("include", "/pricing");
+
+      cy.get("nav").contains("Contact").click();
+      cy.url().should("include", "/contact");
+    });
+  });
+
+  context("Mobile resolution", () => {
+    // run these tests as if in a desktop
+    // browser with a 720p monitor
+
+    it("Visits the homepage and nav links", () => {
+      cy.viewport(680, 720);
+      cy.visit("");
+      cy.get("[data-cy=dropdown]").click();
+      cy.get("[data-cy=dropdown]").contains("Pricing").click();
+      cy.url().should("include", "/pricing");
+      cy.get("[data-cy=dropdown]").click();
+      cy.get("[data-cy=dropdown]").contains("Contact").click();
+      cy.url().should("include", "/contact");
+    });
+  });
+});

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

@@ -5,12 +5,15 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
   "dependencies": {
     "@headlessui/react": "^1.4.0",
     "@sendgrid/mail": "^7.4.4",
     "@stripe/stripe-js": "^1.15.1",
+    "@supabase/grid": "1.15.0",
     "@supabase/supabase-js": "^1.21.0",
     "@supabase/ui": "^0.31.0",
     "axios": "^0.21.1",
@@ -18,12 +21,11 @@
     "daisyui": "^1.10.0",
     "express-rate-limit": "^5.2.6",
     "micro": "^9.3.4",
-    "next-seo": "^4.24.0",
-    "@supabase/grid": "1.15.0",
     "next": "latest",
+    "next-seo": "^4.24.0",
+    "octokit": "^1.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "octokit": "^1.1.0",
     "react-feather": "^2.0.9",
     "react-icons": "^4.2.0",
     "react-toastify": "^7.0.4",
@@ -31,6 +33,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.3.1",
+    "cypress": "^8.1.0",
     "postcss": "^8.3.6",
     "tailwindcss": "^2.2.7"
   }