add cypress to website

.github/workflows/deploy-website.yml

@@ -5,6 +5,10 @@ on:
     branches:
       - website
 
+defaults:
+  run:
+    working-directory: packages/website
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -18,15 +22,23 @@ jobs:
 
       - name: Install dependencies
         run: npm i --force
-        working-directory: packages/website
 
       - name: "Build website"
         run: npm run build
-        working-directory: packages/website
+
+      - name: "Integration tests"
+        uses: cypress-io/github-action@v2
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          record: true
+          start: npm run serve
+          wait-on: "http://127.0.0.1:9000"
 
       - name: "Deploy to Skynet"
         uses: kwypchlo/deploy-to-skynet-action@main
         with:
-          upload-dir: packages/website/public
+          upload-dir: public
           github-token: ${{ secrets.GITHUB_TOKEN }}
           registry-seed: ${{ github.event_name == 'push' && github.ref == 'refs/heads/website' && secrets.WEBSITE_REGISTRY_SEED || '' }}

packages/website/.gitignore

@@ -71,3 +71,7 @@ yarn-error.log
 
 # Npm
 package-lock.json
+
+# Cypress
+cypress/screenshots
+cypress/videos

packages/website/cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://127.0.0.1:9000",
+  "projectId": "gey76p",
+  "videoUploadOnPasses": false
+}

packages/website/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"
+}

packages/website/cypress/integration/intergration.spec.js

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+context("Skynet website", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("should render page title", () => {
+    cy.contains("Decentralized Internet");
+  });
+
+  // it("should be able to upload a file", () => {
+  //   cy.intercept("POST", "/skynet/skyfile").as("upload");
+
+  //   const fileName = "check.json";
+
+  //   cy.wait(1000); // delay for drag-and-drop to work properly every time
+  //   cy.get('.home-upload input[type="file"]').attachFile(fileName, { subjectType: "drag-n-drop" });
+
+  //   cy.get(".home-upload").scrollIntoView();
+  //   cy.get(".home-uploaded-files").children().should("have.length", 1);
+
+  //   // wait max 2 minutes, the portal might be slow at times
+  //   cy.wait("@upload", { responseTimeout: 2 * 60 * 1000 });
+
+  //   cy.contains(".upload-file", fileName).within(() => {
+  //     cy.get(".url")
+  //       .invoke("text")
+  //       .should("match", /\/[a-zA-Z0-9-_]{46}/);
+
+  //     cy.contains("Copy Link").click();
+  //     cy.contains("Copied!").should("be.visible");
+  //   });
+  // });
+});

packages/website/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
+}

packages/website/cypress/support/commands.js

@@ -0,0 +1,27 @@
+// ***********************************************
+// 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) => { ... })
+
+import "cypress-file-upload";

packages/website/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')

packages/website/package.json

@@ -73,6 +73,8 @@
     "@storybook/react": "^6.2.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-inline-react-svg": "^2.0.1",
+    "cypress": "^7.1.0",
+    "cypress-file-upload": "^5.0.5",
     "prettier": "2.2.1"
   },
   "keywords": [
@@ -87,6 +89,7 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "cypress": "cypress",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },