Merge pull request #1167 from threehams/cypress

Add browser tests for tutorial, NetScript 2

.browserslistrc

@@ -0,0 +1,3 @@
+last 4 versions
+not dead
+not ie <= 11

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: CI
+
+on:
+  push:
+    branches: [dev]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+          cache: "npm"
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Test
+        run: npm run test
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: .

.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on: [push, pull_request]
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  test:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+          cache: "npm"
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Test
+        run: npm run test

.gitignore

@@ -7,6 +7,7 @@ Netburner.txt
 /test/*.map
 /test/*.bundle.*
 /test/*.css
+.cypress
 
 # editor files
 .vscode

browserslist

@@ -1 +0,0 @@
-last 4 versions, not dead, not ie <= 11

cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:8000",
+  "fixturesFolder": false,
+  "trashAssetsBeforeRuns": true,
+  "screenshotsFolder": ".cypress/screenshots",
+  "videosFolder": ".cypress/videos",
+  "videoUploadOnPasses": false
+}

cypress/integration/netscript.spec.ts

@@ -0,0 +1,55 @@
+export {};
+
+describe("netscript", () => {
+  it("creates and runs a NetScript 2.0 script", () => {
+    cy.findByRole("button", { name: "Exit Tutorial" }).click();
+    cy.findByText("Got it!").click();
+
+    cy.findByRole("textbox").type("connect n00dles{enter}");
+    cy.findByText(/connected to n00dles/i);
+
+    cy.findByRole("textbox").type("run NUKE.exe{enter}");
+    cy.findByText(/gained root access/i);
+
+    cy.findByRole("textbox").type("home{enter}");
+    cy.findByText(/connected to home/i);
+
+    cy.findByRole("textbox").type("nano script.js{enter}");
+
+    // monaco can take a bit
+    cy.findByRole("code", { timeout: 15_000 }).type("{selectall}{del}")
+      .type(`export const main = async (ns) => {{}
+  while(true) {{}
+  await ns.hack("n00dles");`);
+
+    cy.findByText("RAM: 1.70GB");
+    cy.findByRole("button", { name: /Save & Close/i }).click();
+
+    cy.findByRole("textbox").type("run script.js{enter}");
+    cy.findByText(/Running script with 1 thread/);
+
+    cy.findByRole("textbox").type("ps{enter}");
+    cy.findByText(/\(PID - 1\) script.js/);
+  });
+
+  it("errors and shows a dialog box when static RAM !== dynamic RAM", () => {
+    cy.findByRole("button", { name: "Exit Tutorial" }).click();
+    cy.findByText("Got it!").click();
+
+    cy.findByRole("textbox").type("nano script.js{enter}");
+
+    // monaco can take a bit
+    cy.findByRole("code", { timeout: 15_000 }).type("{selectall}{del}")
+      .type(`export const main = async (ns) => {{}
+const command = "hack";
+ns[command]("n00dles");`);
+
+    cy.findByText("RAM: 1.60GB");
+    cy.findByRole("button", { name: /Save & Close/i }).click();
+
+    cy.findByRole("textbox").type("run script.js{enter}");
+    cy.findByText(
+      /Dynamic RAM usage calculated to be greater than initial RAM usage on fn: hack./i,
+    );
+  });
+});

cypress/integration/tutorial.spec.ts

@@ -0,0 +1,99 @@
+export {};
+
+describe("tutorial", () => {
+  it("completes the tutorial", () => {
+    cy.findByText(/dark, dystopian future/);
+    cy.findByRole("button", { name: "Next" }).click();
+
+    cy.findByText(/heading to the Stats page/);
+    cy.findByRole("button", { name: "Stats" }).click();
+
+    cy.findByText(/lot of important information/);
+    cy.findByRole("button", { name: "Next" }).click();
+
+    cy.findByText(/head to your computer's terminal/);
+    cy.findByRole("button", { name: "Terminal" }).click();
+
+    cy.findByText(/is used to interface/);
+    cy.findByRole("button", { name: "Next" }).click();
+
+    cy.findByText(/Let's try it out/i);
+    cy.findByRole("textbox").type("help{enter}");
+
+    cy.findByText(/displays a list of all available/i);
+    cy.findByRole("textbox").type("ls{enter}");
+
+    cy.findByText(/is a basic command that shows files/i);
+    cy.findByRole("textbox").type("scan{enter}");
+
+    cy.findByText(/that's great and all/i);
+    cy.findByRole("textbox").type("scan-analyze{enter}");
+
+    cy.findByText(/this command shows more detailed information/i);
+    cy.findByRole("textbox").type("scan-analyze 2{enter}");
+
+    cy.findByText(/now you can see information/i);
+    cy.findByRole("textbox").type("connect n00dles{enter}");
+
+    cy.findByText(/currency has become digital/i);
+    cy.findByRole("textbox").type("analyze{enter}");
+
+    cy.findByText(/For this server, the required hacking skill/i);
+    cy.findByText(/Required number of open ports for NUKE/i);
+    cy.findByRole("textbox").type("run NUKE.exe{enter}");
+
+    cy.findByText(/gained root access to n00dles/i);
+    cy.findByRole("textbox").type("hack{enter}");
+
+    cy.findByText(/now attempting to hack the server/i);
+    cy.findByRole("button", { name: "Next" }).click();
+
+    cy.findByText(/hacking exp/i);
+    cy.findByRole("textbox", { timeout: 15_000 })
+      .should("not.be.disabled")
+      .type("nano n00dles.script{enter}");
+
+    // monaco can take a bit
+    cy.findByRole("code", { timeout: 15_000 })
+      .type("{selectall}{del}")
+      .type("while(true) {{}{enter}hack('n00dles');");
+
+    cy.findByRole("button", { name: /Save & Close/i }).click();
+
+    cy.findByText(/now we'll run the script/i);
+    cy.findByRole("textbox").type("free{enter}");
+
+    cy.findByText(/We have 4GB of free RAM on this machine/i);
+    cy.findByRole("textbox").type("run n00dles.script{enter}");
+
+    cy.findByText(/Your script is now running/i);
+    cy.findByRole("button", { name: "Active Scripts" }).click();
+
+    cy.findByText(/This page displays information about all of your scripts/i);
+    cy.findByRole("button", { name: "Terminal" }).click();
+
+    cy.findByText(/each active script contains logs/i);
+    cy.findByRole("textbox").type("tail n00dles.script{enter}");
+
+    cy.findByText(/The log for this script won't show much/i);
+    cy.findByRole("button", { name: "Next" }).click();
+
+    cy.findByText(/Hacking is not the only way to earn money/i);
+    cy.findByRole("button", { name: "Hacknet" }).click();
+
+    cy.findByText(/Here you can purchase new Hacknet Nodes/i);
+    cy.findByRole("button", { name: /Purchase Hacknet Node/ }).click();
+
+    cy.findByText(/You just purchased a Hacknet Node!/i);
+    cy.findByRole("button", { name: "City" }).click();
+
+    cy.findByText(/This page lists all of the different locations/i);
+    cy.findByRole("button", { name: "Tutorial" }).click();
+
+    cy.findByText(/a lot of different documentation about the game/i);
+    cy.findByRole("button", { name: "Finish Tutorial" }).click();
+    cy.findByText("Got it!").click();
+
+    cy.findByText(/Tutorial \(AKA Links to Documentation\)/i);
+  });
+});

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.ts

@@ -0,0 +1 @@
+import "@testing-library/cypress/add-commands";

cypress/support/globalHooks.ts

@@ -0,0 +1,9 @@
+export {};
+
+beforeEach(() => {
+  cy.visit("/");
+  cy.clearLocalStorage();
+  cy.window().then((win) => {
+    win.indexedDB.deleteDatabase("bitburnerSave");
+  });
+});

cypress/support/index.js

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

package.json

@@ -34,6 +34,7 @@
     "jszip": "^3.7.0",
     "loader-runner": "^2.3.0",
     "loader-utils": "^1.1.0",
+    "mathjax-full": "^3.2.0",
     "mathjax-react": "^1.0.6",
     "memory-fs": "~0.4.1",
     "monaco-editor": "^0.27.0",
@@ -55,6 +56,7 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.15.0",
+    "@testing-library/cypress": "^8.0.1",
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.168",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -65,12 +67,14 @@
     "benchmark": "^2.1.1",
     "bundle-loader": "~0.5.0",
     "css-loader": "^0.28.11",
+    "cypress": "^8.3.1",
     "es6-promise-polyfill": "^1.1.1",
     "eslint": "^7.24.0",
     "eslint-plugin-node": "^11.1.0",
     "file-loader": "^1.1.11",
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "html-webpack-plugin": "^3.2.0",
+    "http-server": "^13.0.1",
     "i18n-webpack-plugin": "^1.0.0",
     "istanbul": "^0.4.5",
     "jest": "^27.0.6",
@@ -93,6 +97,7 @@
     "simple-git": "^1.96.0",
     "sinon": "^2.3.2",
     "source-map": "^0.7.3",
+    "start-server-and-test": "^1.14.0",
     "style-loader": "^0.21.0",
     "stylelint": "^9.2.1",
     "stylelint-declaration-use-variable": "^1.6.1",
@@ -102,10 +107,10 @@
     "uglifyjs-webpack-plugin": "^1.3.0",
     "url-loader": "^1.0.1",
     "watchpack": "^1.6.0",
-    "webpack": "^4.12.0",
-    "webpack-cli": "^3.0.4",
-    "webpack-dev-middleware": "^3.1.3",
-    "webpack-dev-server": "^3.2.1",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-middleware": "^3.7.3",
+    "webpack-dev-server": "^3.11.2",
     "worker-loader": "^2.0.0"
   },
   "engines": {
@@ -119,12 +124,16 @@
     "url": "git+https://github.com/danielyxie/bitburner.git"
   },
   "scripts": {
+    "cy:test": "start-server-and-test start http://localhost:8000 cy:run",
+    "cy:dev": "start-server-and-test start:dev http://localhost:8000 cy:open",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
     "format": "prettier --write .",
+    "start": "http-server -p 8000",
     "start:dev": "webpack-dev-server --progress --env.devServer --mode development",
     "start:container": "webpack-dev-server --progress --env.devServer --mode development --env.runInContainer",
     "build": "webpack --mode production",
     "build:dev": "webpack --mode development",
-    "build:test": "webpack --config webpack.config-test.js",
     "lint": "npm run lint:jsts & npm run lint:style",
     "lint:jsts": "eslint --fix . --ext js,jsx,ts,tsx",
     "lint:style": "stylelint --fix ./css/*",

tsconfig.json

@@ -8,7 +8,8 @@
     "module": "commonjs",
     "target": "es6",
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "types": ["cypress", "@testing-library/cypress"]
   },
   "exclude": ["node_modules"]
 }