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

.github/workflows/deploy-gh-pages.yaml

@@ -40,7 +40,7 @@ jobs:
             - name: Build React App
               run: |
                   yarn install:all
-                  yarn build
+                  yarn gh-pages-build
 
             - name: Setup Pages
               uses: actions/configure-pages@v2

.github/workflows/test-e2e.yaml

@@ -0,0 +1,42 @@
+name: E2E Tests
+
+on:
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
+
+concurrency:
+    group: ${{ github.head_ref || github.ref_name }}-e2e-test
+    cancel-in-progress: true
+
+jobs:
+    e2e-tests:
+        runs-on: ubuntu-latest
+        name: E2E Tests
+
+        steps:
+            - name: Install Stable Chrome
+              run: |
+                  wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+                  sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+                  sudo apt-get update
+                  sudo apt-get install google-chrome-stable
+
+            - name: Install Stable chromedriver
+              uses: nanasess/setup-chromedriver@v2
+
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version-file: .nvmrc
+                  cache: 'yarn'
+
+            - name: Install
+              run: yarn install:all
+
+            - name: Run E2E Tests
+              run: yarn test:e2e:ci

.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/.eslintrc.js

@@ -1,3 +1,9 @@
 const Config = require('@vechain/repo-config');
 
-module.exports = Config.EslintLibrary;
+module.exports = {
+    ...Config.EslintLibrary,
+    rules: {
+        'no-constant-binary-expression': 'off',
+        'eslint-comments/disable-enable-pair': 'off',
+    },
+};

examples/sample-angular-app/Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN apk add git
+
+RUN yarn
+
+RUN yarn global add @angular/cli
+
+RUN yarn global add serve
+
+COPY . .
+
+RUN yarn build
+
+EXPOSE 5004
+
+CMD [ "serve", "dist/easy-angular", "-p", "5004"]

examples/sample-angular-app/angular.json

@@ -26,10 +26,6 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
-                        "assets": [
-                            "src/assets/img/favicon/favicon.ico",
-                            "src/assets"
-                        ],
                         "styles": [],
                         "scripts": []
                     },
@@ -92,10 +88,6 @@
                         "tsConfig": "tsconfig.spec.json",
                         "karmaConfig": "karma.conf.js",
                         "inlineStyleLanguage": "scss",
-                        "assets": [
-                            "src/assets/img/favicon/favicon.ico",
-                            "src/assets"
-                        ],
                         "styles": [],
                         "scripts": []
                     }

examples/sample-angular-app/package.json

@@ -4,10 +4,12 @@
     "private": true,
     "scripts": {
         "add-page": "ng g m pages/page-name --routing && ng g component pages/page-name --skip-tests",
-        "build": "ng build --configuration development --base-href '/vechain-dapp-kit/angular/'",
+        "build": "ng build --configuration development",
         "clean": "rm -rf dist .turbo .angular",
-        "dev": "ng serve",
+        "dev": "ng serve --port 5004",
+        "gh-pages-build": "ng build --configuration development --base-href '/vechain-dapp-kit/angular/'",
         "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+        "preview": "ng serve --port 5004",
         "purge": "yarn clean; rm -rf node_modules",
         "watch": "ng build --watch --configuration development"
     },
@@ -49,7 +51,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-angular-app/src/app/app.component.ts

@@ -14,8 +14,25 @@ export class AppComponent implements OnInit {
     // -------------------------------------------------------------------------------
 
     public ngOnInit(): void {
-        // custom button configuration
+        const walletConnectOptions = {
+            projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+            metadata: {
+                name: 'Sample VeChain dApp',
+                description: 'A sample VeChain dApp',
+                url: window.location.origin,
+                icons: [`${window.location.origin}/images/logo/my-dapp.png`],
+            },
+        };
+
+        const vechainDAppKitOptions = {
+            nodeUrl: 'https://testnet.vechain.org/',
+            genesis: 'test',
+            walletConnectOptions,
+            usePersistence: true,
+        };
+        DAppKitUI.configure(vechainDAppKitOptions);
 
+        // custom button configuration
         const customButton = document.getElementById('custom-button');
         if (customButton) {
             const handleConnected = (address: string | null): void => {

examples/sample-angular-app/src/index.html

@@ -6,32 +6,6 @@
         <base href="/" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-        <link
-            rel="icon"
-            type="image/x-icon"
-            href="./assets/img/favicon/favicon.ico"
-        />
-
-        <!-- NOTE RealFavIconGenerator -->
-        <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="assets/img/favicon/apple-touch-icon.png"
-        />
-        <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="assets/img/favicon/favicon-32x32.png"
-        />
-        <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="assets/img/favicon/favicon-16x16.png"
-        />
-        <link rel="manifest" href="assets/img/favicon/manifest.json" />
         <link
             rel="mask-icon"
             href="assets/img/favicon/safari-pinned-tab.svg"

examples/sample-angular-app/src/main.ts

@@ -1,27 +1,7 @@
-import { DAppKitUI } from '@vechain/dapp-kit-ui';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
     providers: [],
     // eslint-disable-next-line no-console
 }).catch((err) => console.error(err));
-
-const walletConnectOptions = {
-    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
-    metadata: {
-        name: 'Sample VeChain dApp',
-        description: 'A sample VeChain dApp',
-        url: window.location.origin,
-        icons: [`${window.location.origin}/images/logo/my-dapp.png`],
-    },
-};
-
-const vechainDAppKitOptions = {
-    nodeUrl: 'https://testnet.vechain.org/',
-    genesis: 'test',
-    walletConnectOptions,
-    usePersistence: true,
-};
-
-DAppKitUI.configure(vechainDAppKitOptions);

examples/sample-angular-app/src/polyfills.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -52,5 +54,9 @@ import 'zone.js'; // Included with Angular CLI.
  */
 
 import '@angular/localize/init';
-// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 (window as any).global = window;
+global.Buffer = global.Buffer || require('buffer').Buffer;
+(window as any).process = {
+    env: { DEBUG: undefined },
+    version: '', // to avoid undefined.slice error
+};

examples/sample-next-app/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN yarn
+
+RUN npm install -g [email protected]
+
+COPY . .
+
+RUN yarn build
+
+EXPOSE 5002
+
+CMD [ "yarn", "start" ]

examples/sample-next-app/next.config.js

@@ -1,4 +1,11 @@
+const basePath = process.env.BASE_PATH ?? '';
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    basePath,
+    env: {
+        basePath,
+    },
+};
 
 module.exports = nextConfig;

examples/sample-next-app/package.json

@@ -6,8 +6,9 @@
         "build": "next build",
         "clean": "rm -rf .next dist .turbo",
         "dev": "next dev",
-        "purge": "yarn clean; rm -rf node_modules",
-        "start": "next start"
+        "gh-pages-build": "BASE_PATH='/vechain-dapp-kit/next' next build",
+        "preview": "next start -- -p 5002",
+        "purge": "yarn clean; rm -rf node_modules"
     },
     "dependencies": {
         "@vechain/dapp-kit": "*",

examples/sample-react-app/Dockerfile

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

examples/sample-react-app/package.json

@@ -4,15 +4,17 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "build": "tsc && vite build",
+        "build": "tsc && vite build --mode=development",
         "clean": "rm -rf dist .turbo",
         "dev": "vite",
+        "gh-pages-build": "tsc && vite build",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-        "preview": "vite preview",
+        "preview": "vite preview --mode=development",
         "purge": "yarn clean; rm -rf node_modules",
         "test": "vitest"
     },
     "dependencies": {
+        "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-react": "*",
         "@vechain/dapp-kit-ui": "*",
@@ -21,6 +23,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",