test: e2e test for dapp-kit react

.eslintignore

@@ -5,3 +5,4 @@ tsup.config.ts
 **/test/**
 vite.config.ts
 scripts/prepare-packages.ts
+tests/e2e

.gitignore

@@ -36,4 +36,6 @@ yarn-error.log*
 
 .idea
 .vscode
-.parcel-cache
+.parcel-cache
+
+.reports

CONTRIBUTING.md

@@ -5,7 +5,7 @@ ensure a smooth collaboration, please follow these guidelines:
 
 ## Submitting a Bug Report
 
--   Search the [issue tracker](https://github.com/vechainfoundation/vechain-dapp-kit/issues) to ensure that the bug has
+-   Search the [issue tracker](https://github.com/vechain/vechain-dapp-kit/issues) to ensure that the bug has
     not been reported already.
 -   If the bug has not been reported, create a new issue with a descriptive title and a clear description of the bug.
 
@@ -29,4 +29,4 @@ ensure a smooth collaboration, please follow these guidelines:
 ## Reporting Issues
 
 If you encounter any issues or have suggestions,
-please [open an issue](https://github.com/vechainfoundation/vechain-dapp-kit/issues) on GitHub.
+please [open an issue](https://github.com/vechain/vechain-dapp-kit/issues) on GitHub.

examples/sample-angular-app/package.json

@@ -49,7 +49,7 @@
         "@angular/compiler-cli": "^16.1.0",
         "@types/jasmine": "~3.10.0",
         "@types/node": "^12.11.1",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
         "jasmine-core": "~4.0.0",
         "karma": "~6.3.0",
         "karma-chrome-launcher": "~3.1.0",

examples/sample-react-app/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json ./
+
+RUN yarn
+
+COPY . .
+
+EXPOSE 5001
+
+CMD [ "yarn", "dev" ]
+

examples/sample-react-app/package.json

@@ -13,6 +13,7 @@
         "test": "vitest"
     },
     "dependencies": {
+        "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-react": "*",
         "@vechain/dapp-kit-ui": "*",
@@ -21,6 +22,7 @@
         "vite": "^5.0.12"
     },
     "devDependencies": {
+        "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@types/react": "^18.2.37",
         "@types/react-dom": "^18.2.15",
         "@typescript-eslint/eslint-plugin": "^6.10.0",

examples/sample-react-app/vite.config.ts

@@ -7,6 +7,16 @@ import { resolve } from 'path';
 
 export default defineConfig({
     plugins: [nodePolyfills(), react()],
+    preview: {
+        port: 5001,
+        strictPort: true,
+    },
+    server: {
+        port: 5001,
+        strictPort: true,
+        host: true,
+        origin: 'http://0.0.0.0:5001',
+    },
     //vitest
     test: {
         globals: true,

examples/sample-svelte-app/package.json

@@ -21,7 +21,7 @@
         "@sveltejs/kit": "^1.27.4",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
         "eslint": "^8.28.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-svelte": "^2.30.0",

examples/sample-vue-app/package.json

@@ -43,7 +43,7 @@
         "@babel/eslint-parser": "^7.12.16",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.2",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.2",
         "@vue/cli-plugin-babel": "~5.0.8",
         "@vue/cli-plugin-eslint": "~5.0.8",
         "@vue/cli-plugin-typescript": "~5.0.0",

package.json

@@ -42,7 +42,7 @@
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@changesets/cli": "^2.27.1",
         "@commitlint/config-conventional": "^18.0.0",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
         "commitlint": "^18.0.0",
         "eslint": "^8.4.1",
         "eslint-plugin-prefer-arrow": "1.2.3",

packages/dapp-kit-react/package.json

@@ -36,7 +36,7 @@
         "@testing-library/react": "^14.1.2",
         "@types/react": "^18.2.28",
         "@types/react-dom": "^18.2.13",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
         "eslint": "*",
         "react": "^18.2.0",
         "tsup": "*",

packages/dapp-kit-ui/package.json

@@ -49,7 +49,7 @@
         "@types/qrcode": "^1.5.5",
         "@typescript-eslint/eslint-plugin": "^5.25.0",
         "@typescript-eslint/parser": "^5.25.0",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
         "@vitest/coverage-v8": "^0.34.6",
         "eslint": "^8.15.0",
         "parcel": "^2.10.2",

packages/dapp-kit/package.json

@@ -4,10 +4,10 @@
     "private": false,
     "homepage": "https://github.com/vechain/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",
+    "license": "MIT",
     "type": "module",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
-    "license": "MIT",
     "files": [
         "dist",
         "package.json",
@@ -37,7 +37,7 @@
     "devDependencies": {
         "@types/react": "^18.2.28",
         "@types/react-dom": "^18.2.13",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
         "@vitest/coverage-v8": "^0.34.6",
         "@walletconnect/types": "2.10.2",
         "eslint": "*",

tests/e2e/cucumber.js

@@ -2,9 +2,10 @@ module.exports = {
     default: {
         paths: ['./src/features/*.feature'],
         require: ['./tests.setup.js', './src/**/*.ts'],
+        requireModule: ['ts-node/register'],
         formatOptions: {
             snippetInterface: 'synchronous',
         },
-        publishQuiet: true,
+        format: ['@serenity-js/cucumber'],
     },
 };

tests/e2e/docker-compose.yaml

@@ -0,0 +1,41 @@
+version: '3'
+
+services:
+    thor-solo:
+        image: vechain/thor:v2.0.0
+        container_name: thor-solo
+        # Install curl for our healthcheck, then start thor solo
+        entrypoint:
+            [
+                '/bin/sh',
+                '-c',
+                "apk update && apk upgrade && apk add curl && thor solo --on-demand --data-dir /data/thor --api-addr 0.0.0.0:8669 --api-cors '*' --api-backtrace-limit -1 --verbosity 4",
+            ]
+        ports:
+            - '8669:8669'
+            - '11235:11235'
+        healthcheck:
+            test: curl --fail 0.0.0.0:8669/blocks/0 || exit 1
+            interval: '2s'
+            retries: 30
+
+    mockserver:
+        image: mockserver/mockserver:5.14.0
+        container_name: mockserver
+        ports:
+            - '1080:1080'
+        environment:
+            MOCKSERVER_PROPERTY_FILE: /config/mockserver.properties
+            MOCKSERVER_INITIALIZATION_JSON_PATH: /config/initializerJson.json
+        volumes:
+            - type: bind
+              source: ./src/mock-server
+              target: /config
+
+    sample:
+        container_name: sample-react-app
+        build:
+            context: ../../examples/sample-react-app
+            dockerfile: Dockerfile
+        ports:
+            - 5001:5001

tests/e2e/package.json

@@ -1,19 +1,27 @@
 {
     "name": "e2e",
     "version": "1.0.0",
-    "private": true,
-    "license": "MIT",
+    "description": "",
+    "license": "ISC",
+    "author": "",
     "main": "index.js",
     "scripts": {
         "test": "cucumber-js",
         "test:debug": "DEBUG=cucumber yarn test"
     },
+    "dependencies": {},
     "devDependencies": {
-        "@cucumber/cucumber": "^8.10.0",
+        "@cucumber/cucumber": "^10.3.1",
+        "@serenity-js/console-reporter": "^3.4.1",
+        "@serenity-js/cucumber": "^3.4.1",
+        "@serenity-js/serenity-bdd": "^3.4.1",
+        "@types/chrome": "^0.0.262",
+        "@types/chromedriver": "^81.0.1",
         "@types/cucumber": "^7.0.0",
-        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
-        "expect.js": "^0.3.1",
-        "playwright": "^1.39.0",
-        "ts-node": "^10.9.1"
+        "@types/jest": "^29.5.12",
+        "@types/selenium-webdriver": "^4.1.13",
+        "@vechain/repo-config": "https://github.com/vechain/repo-config",
+        "selenium-webdriver": "4.8.2",
+        "testcontainers": "^10.7.2"
     }
 }

tests/e2e/src/config/SerenityConfig.ts

@@ -0,0 +1,11 @@
+import { ArtifactArchiver, configure } from '@serenity-js/core';
+import { SerenityBDDReporter } from '@serenity-js/serenity-bdd';
+import { ConsoleReporter } from '@serenity-js/console-reporter';
+
+configure({
+    crew: [
+        SerenityBDDReporter.fromJSON({ specDirectory: '../..' }),
+        ArtifactArchiver.storingArtifactsAt('../../.reports/serenity'),
+        ConsoleReporter.withDefaultColourSupport(),
+    ],
+});

tests/e2e/src/config/hooks/ContainerHooks.ts

@@ -0,0 +1,52 @@
+import { AfterAll, BeforeAll, setDefaultTimeout } from '@cucumber/cucumber';
+import {
+    DockerComposeEnvironment,
+    StartedDockerComposeEnvironment,
+    Wait,
+} from 'testcontainers';
+import path from 'path';
+
+setDefaultTimeout(180_000);
+
+let dockerEnvironment: StartedDockerComposeEnvironment;
+
+BeforeAll(async function () {
+    console.log('Starting docker compose environment...');
+
+    if (process.env.DOCKER_RUNNING) {
+        console.log('Docker environment already running');
+        return;
+    }
+
+    const composePath = path.join(__dirname, '..', '..', '..');
+    const composeFile = 'docker-compose.yaml';
+
+    dockerEnvironment = await new DockerComposeEnvironment(
+        composePath,
+        composeFile,
+    )
+        .withStartupTimeout(60_000)
+        .withWaitStrategy('thor-solo', Wait.forHealthCheck())
+        .withWaitStrategy(
+            'sample-react-app',
+            Wait.forLogMessage('Local:   http://localhost:5001'),
+        )
+        .withWaitStrategy('mockserver', Wait.forLogMessage('INFO'))
+        .up();
+
+    console.log('Docker compose environment started');
+});
+
+AfterAll(async function () {
+    try {
+        if (dockerEnvironment && !process.env.DOCKER_RUNNING) {
+            console.log('\nStopping docker compose environment');
+            await dockerEnvironment.down();
+            console.log('Docker compose environment stopped');
+        } else {
+            console.log('Not stopping docker compose environment');
+        }
+    } catch (e) {
+        console.error(e);
+    }
+});

tests/e2e/src/config/hooks/SeleniumHooks.ts

@@ -0,0 +1,33 @@
+import { AfterAll, Before } from '@cucumber/cucumber';
+import {
+    quitWebDriver,
+    resetWebDriver,
+} from '../../extension/selenium/WebDriver';
+
+/**
+ *
+ * Runs before EACH scenario
+ *
+ * Place `@service-worker` above your scenario/feature if you need the service worker for your tests to pass. It takes
+ * ~2 seconds to ensure the service worker has started, so it will slow tests down a lot if we require it for every test.
+ */
+Before(async function (feature) {
+    let timeout;
+
+    if (feature.pickle.tags.some((tag) => tag.name === '@service-worker')) {
+        timeout = 3000;
+        console.log(
+            'Using a timeout of 3000ms to ensure service worker is ready',
+        );
+    }
+
+    console.log('Resetting web driver...');
+    await resetWebDriver(timeout);
+    console.log('Web driver reset');
+});
+
+AfterAll(async function () {
+    console.log('Stopping web driver');
+    await quitWebDriver();
+    console.log('Web driver stopped');
+});

tests/e2e/src/extension/TestDefaults.ts

@@ -0,0 +1,13 @@
+export default {
+    PASSWORD: 'myPassword123',
+    MNEMONIC:
+        'denial kitchen pet squirrel other broom bar gas better priority spoil cross',
+    PRIVATE_KEY:
+        '0x99f0500549792796c14fed62011a51081dc5b5e68fe8bd8a13b86be829c4fd36',
+    KEYSTORE_PATH: './resources/keystore.json',
+    KEYSTORE_PASSWORD: 'Password1!',
+    ADDRESS: '0xf077b491b355E64048cE21E3A6Fc4751eEeA77fa',
+    TIMEOUT: 5_000,
+    TRANSACTION_TIMEOUT: 20_000,
+    DAPP_URL: 'http://localhost:5001',
+};