Add browser tests for tutorial, NetScript 2

.browserslistrc

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

browserslist

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

cypress.json

@@ -0,0 +1,7 @@
+{
+  "baseUrl": "http://localhost:8000",
+  "trashAssetsBeforeRuns": true,
+  "screenshotsFolder": ".cypress/screenshots",
+  "videosFolder": ".cypress/videos",
+  "videoUploadOnPasses": 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/netscript.spec.ts

@@ -0,0 +1,32 @@
+export {};
+
+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/);
+});

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,83 @@
+import "@testing-library/cypress/add-commands";
+
+interface ItemLocator<T> {
+  name: T;
+  item: string;
+  index?: never;
+}
+interface IndexLocator<T> {
+  name: T;
+  index: number;
+  item?: never;
+}
+type Locator<T> = string | ItemLocator<T> | IndexLocator<T>;
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      /**
+       * Get an element by data-test attribute.
+       * @example
+       * cy.getId("print-button")
+       */
+      getId<T = string>(
+        id: Locator<T> | Array<Locator<T>>,
+        options?: Partial<Loggable & Timeoutable>,
+      ): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
+// @ts-ignore
+Cypress.SelectorPlayground.defaults({
+  selectorPriority: ["data-test"],
+  onElement: (element: JQuery) => {
+    const test = element.data("test");
+    if (!test) {
+      return "";
+    }
+
+    const parents = Array.from(element.parents("[data-test]"))
+      .reverse()
+      .map((parent) => {
+        const id = parent.dataset["test"];
+        const itemId = parent.dataset["test-item"];
+        if (itemId) {
+          return `{ name: "${id}", item: "${itemId}" }`;
+        }
+        return `"${id}"`;
+      })
+      .join(", ");
+
+    const testItem = element.data("test-item");
+    const selector = testItem
+      ? `{ name: "${test}", item: "${testItem}" }`
+      : `"${test}"`;
+    return parents ? `[${parents}, ${selector}]` : `${selector}`;
+  },
+});
+Cypress.Commands.add(
+  "getId",
+  <T = string>(
+    locators: Locator<T> | Array<Locator<T>>,
+    options: Partial<Cypress.Loggable & Cypress.Timeoutable> = {},
+  ) => {
+    locators = Array.isArray(locators) ? locators : [locators];
+
+    return cy.get(
+      locators
+        .map((locator) => {
+          if (typeof locator === "string") {
+            return `[data-test=${locator}]`;
+          }
+          if (locator.item !== undefined) {
+            return `[data-test=${locator.name}][data-test-item=${locator.item}]`;
+          }
+          return `[data-test=${locator.name}]:eq(${locator.index})`;
+        })
+        .join(" "),
+      options,
+    );
+  },
+);

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

@@ -56,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",
@@ -66,6 +67,7 @@
     "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",
@@ -94,6 +96,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",
@@ -120,6 +123,8 @@
     "url": "git+https://github.com/danielyxie/bitburner.git"
   },
   "scripts": {
+    "cy:dev": "start-server-and-test start:dev http://localhost:8000 cy:open",
+    "cy:open": "cypress open",
     "format": "prettier --write .",
     "start:dev": "webpack-dev-server --progress --env.devServer --mode development",
     "start:container": "webpack-dev-server --progress --env.devServer --mode development --env.runInContainer",

tsconfig.json

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