Merge pull request #16 from Consensys/feat/e2e

feat: adds end to end testing project in e2e folder
Consensys · Oct 24, 2024 · dd2fafe · dd2fafe
2 parents dd69714 + 42a90f9
commit dd2fafe
Show file tree

Hide file tree

Showing 12 changed files with 647 additions and 9 deletions.
diff --git a/.github/workflows/gh.yml b/.github/workflows/gh.yml
@@ -0,0 +1,27 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main # Adjust to the branch you want to deploy from
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js (required if you're using a static site generator)
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+
+      - name: Build the site (if necessary, skip if pure HTML/CSS)
+        run: npm install && npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./e2e/dist # Path to your custom folder
diff --git a/e2e/.gitignore b/e2e/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/e2e/index.html b/e2e/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>get-starknet</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/e2e/package.json b/e2e/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@starknet-io/get-starknet-example",
+  "version": "4.0.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@starknet-io/get-starknet": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "starknet": "6.11.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.0.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0"
+  }
+}
diff --git a/e2e/src/App.css b/e2e/src/App.css
@@ -0,0 +1,128 @@
+body {
+  background-color: white;
+  color: black;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  color: #444;
+}
+
+.main-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.result-box {
+  width: 300px;
+  height: 200px;
+  background-color: #f9f9f9;
+  border: 2px solid #ddd;
+  border-radius: 5px;
+  padding: 10px;
+  overflow: auto;
+  font-family: monospace;
+}
+
+.result-box h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #444;
+}
+
+.result-box pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.method-table {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.table-header {
+  display: contents;
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 2px solid #444;
+  padding-bottom: 10px;
+}
+
+.method-row {
+  display: contents;
+  align-items: center;
+}
+
+.method-name {
+  padding: 15px;
+  text-align: center;
+}
+
+.btn {
+  background-color: #4CAF50; /* Green */
+  border: none;
+  color: white;
+  padding: 15px;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.btn-disabled {
+  background-color: #888;
+  cursor: not-allowed;
+}
+
+.btn-disabled:hover {
+  background-color: #888; /* No hover effect for disabled */
+}
+
+.btn:hover {
+  background-color: #45a049;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: rgb(23, 23, 23);
+    color: white;
+  }
+
+  .btn {
+    background-color: #555;
+  }
+
+  .btn:hover {
+    background-color: #666;
+  }
+
+  .btn-disabled {
+    background-color: #333;
+  }
+
+  .table-header {
+    border-bottom: 2px solid #ccc;
+  }
+
+  .result-box {
+    background-color: #222;
+    border-color: #444;
+    color: #ddd;
+  }
+
+  .result-box pre {
+    color: #ddd;
+  }
+}