diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml index ae61bff1..2596ece0 100644 --- a/.github/workflows/deploy-website.yml +++ b/.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 || '' }} diff --git a/packages/website/.gitignore b/packages/website/.gitignore index 6e51663b..d1369277 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -71,3 +71,7 @@ yarn-error.log # Npm package-lock.json + +# Cypress +cypress/screenshots +cypress/videos diff --git a/packages/website/cypress.json b/packages/website/cypress.json new file mode 100644 index 00000000..2954d2f5 --- /dev/null +++ b/packages/website/cypress.json @@ -0,0 +1,5 @@ +{ + "baseUrl": "http://127.0.0.1:9000", + "projectId": "gey76p", + "videoUploadOnPasses": false +} diff --git a/packages/website/cypress/fixtures/example.json b/packages/website/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/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" +} diff --git a/packages/website/cypress/integration/intergration.spec.js b/packages/website/cypress/integration/intergration.spec.js new file mode 100644 index 00000000..bc739cd4 --- /dev/null +++ b/packages/website/cypress/integration/intergration.spec.js @@ -0,0 +1,35 @@ +/// + +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"); + // }); + // }); +}); diff --git a/packages/website/cypress/plugins/index.js b/packages/website/cypress/plugins/index.js new file mode 100644 index 00000000..59b2bab6 --- /dev/null +++ b/packages/website/cypress/plugins/index.js @@ -0,0 +1,22 @@ +/// +// *********************************************************** +// 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 +} diff --git a/packages/website/cypress/support/commands.js b/packages/website/cypress/support/commands.js new file mode 100644 index 00000000..10fa8b95 --- /dev/null +++ b/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"; diff --git a/packages/website/cypress/support/index.js b/packages/website/cypress/support/index.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/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') diff --git a/packages/website/package.json b/packages/website/package.json index 06865185..ee165364 100644 --- a/packages/website/package.json +++ b/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" },