up

Author: greweb

.prototools

@@ -1,2 +1 @@
 node = "22"
-yarn = "4"

example/.npmrc

@@ -67,6 +67,7 @@ The test suite validates:
 ### Smart UI Interaction
 
 The tests automatically:
+
 - 🔍 **Scroll to find elements** that are off-screen
 - 📸 **Capture screenshots** of the app state
 - 📊 **Validate snapshots** against reference images
@@ -76,6 +77,7 @@ The tests automatically:
 ### Snapshot Validation
 
 Each test:
+
 1. Navigates to a feature screen
 2. Scrolls to ensure all content is visible
 3. Triggers a screenshot capture
@@ -110,10 +112,12 @@ example/
 ### Prerequisites
 
 **iOS**:
+
 - macOS with Xcode installed
 - iOS Simulator (iPhone 15 Pro or compatible)
 
 **Android**:
+
 - Android Studio
 - Android Emulator (API 34 recommended)
 - Emulator must be running before tests
@@ -143,26 +147,30 @@ Reference snapshots are "golden images" that represent the expected state of the
 ### Why Scroll to See the Preview?
 
 When you capture a screenshot in the app:
+
 1. The capture happens
 2. A success message appears
 3. **The captured image preview appears below** (often off-screen!)
 4. You must **scroll down** to see the preview
 5. The test then takes a snapshot showing the preview
 
 This ensures we're validating that:
+
 - ✅ The capture succeeded
 - ✅ The preview is displayed correctly
 - ✅ The captured image looks correct
 
 ### When to Update References
 
 Update reference snapshots when:
+
 - 🎨 UI design changes legitimately
 - ✨ New features are added
 - 🐛 A bug fix changes the expected output
 - 📱 You change device/simulator size
 
 **Don't update** if tests fail due to:
+
 - ❌ Unexpected bugs
 - ❌ Broken functionality
 - ❌ Timing issues
@@ -192,12 +200,14 @@ await scrollToBottom(null, 1000); // Scroll more
 **Problem**: Tests report snapshot differences
 
 **Causes**:
+
 1. **Legitimate UI change** → Update references
 2. **Different device size** → Use consistent simulator
 3. **Timing issue** → Increase wait times
 4. **Animation in progress** → Wait longer before snapshot
 
 **Solution**:
+
 ```bash
 # If changes are legitimate, update references
 npm run test:e2e:ios:update-snapshots
@@ -213,13 +223,14 @@ npm run test:e2e:ios:update-snapshots
 
 ```javascript
 // After capture, wait and scroll more
-await device.sleep(1500);  // Increase wait time
-await scrollToBottom(null, 800);  // Scroll further
+await device.sleep(1500); // Increase wait time
+await scrollToBottom(null, 800); // Scroll further
 ```
 
 ### Detox Build Fails
 
 **iOS**:
+
 ```bash
 # Clean build
 cd ios
@@ -229,6 +240,7 @@ npm run build:e2e:ios
 ```
 
 **Android**:
+
 ```bash
 cd android
 ./gradlew clean
@@ -239,6 +251,7 @@ npm run build:e2e:android
 ### Emulator/Simulator Not Found
 
 **iOS**:
+
 ```bash
 # List available simulators
 xcrun simctl list devices
@@ -248,6 +261,7 @@ xcrun simctl list devices
 ```
 
 **Android**:
+
 ```bash
 # List AVDs
 emulator -list-avds
@@ -266,7 +280,7 @@ emulator -list-avds
   ✅ should capture full screen correctly
   ✅ should handle transparency correctly
   ...
-  
+
 Test Suites: 1 passed, 1 total
 Tests:       15 passed, 15 total
 Time:        12.5s
@@ -295,10 +309,10 @@ Time:        12.5s
 UI elements, especially capture buttons and preview images, are often below the fold:
 
 ```javascript
-await scrollToBottom();  // Before interacting
+await scrollToBottom(); // Before interacting
 await captureScreenshot('📸 Capture Screenshot', 'Success!');
 await device.sleep(1000);
-await scrollToBottom();  // To see the result
+await scrollToBottom(); // To see the result
 ```
 
 ### 2. Wait for Content
@@ -413,4 +427,3 @@ A: Current implementation allows 1% difference. For stricter validation, conside
 
 **Q: Why scroll so much?**  
 A: Mobile screens are small. Buttons, previews, and results are often off-screen. Scrolling ensures we interact with the right elements and verify results properly.
-

example/E2E-TESTING.md

@@ -8,7 +8,7 @@ class SnapshotMatcher {
   constructor() {
     this.referenceDir = path.join(__dirname, '../snapshots/reference');
     this.outputDir = path.join(__dirname, '../snapshots/output');
-    
+
     // Ensure directories exist
     if (!fs.existsSync(this.referenceDir)) {
       fs.mkdirSync(this.referenceDir, { recursive: true });
@@ -28,7 +28,10 @@ class SnapshotMatcher {
   async captureAndValidate(testName, element = null, updateReference = false) {
     const timestamp = Date.now();
     const sanitizedName = testName.replace(/[^a-zA-Z0-9-]/g, '_');
-    const outputPath = path.join(this.outputDir, `${sanitizedName}_${timestamp}.png`);
+    const outputPath = path.join(
+      this.outputDir,
+      `${sanitizedName}_${timestamp}.png`,
+    );
     const referencePath = path.join(this.referenceDir, `${sanitizedName}.png`);
 
     try {
@@ -42,7 +45,7 @@ class SnapshotMatcher {
       // On iOS/Android, Detox saves screenshots to artifacts directory
       // We need to find and copy the latest screenshot
       const artifactsPath = this.findLatestScreenshot(sanitizedName);
-      
+
       if (artifactsPath && fs.existsSync(artifactsPath)) {
         // Copy to output directory
         fs.copyFileSync(artifactsPath, outputPath);
@@ -58,15 +61,21 @@ class SnapshotMatcher {
         // Compare with reference if it exists
         if (fs.existsSync(referencePath)) {
           const matched = await this.compareImages(outputPath, referencePath);
-          console.log(`${matched ? '✅' : '❌'} Snapshot ${matched ? 'matches' : 'differs from'} reference`);
+          console.log(
+            `${matched ? '✅' : '❌'} Snapshot ${matched ? 'matches' : 'differs from'} reference`,
+          );
           return { path: outputPath, matched, referencePath };
         } else {
           console.log(`⚠️  No reference snapshot found at: ${referencePath}`);
-          console.log(`💡 Run with updateReference=true to create reference snapshot`);
+          console.log(
+            `💡 Run with updateReference=true to create reference snapshot`,
+          );
           return { path: outputPath, matched: null, needsReference: true };
         }
       } else {
-        throw new Error(`Could not find captured screenshot for ${sanitizedName}`);
+        throw new Error(
+          `Could not find captured screenshot for ${sanitizedName}`,
+        );
       }
     } catch (error) {
       console.error(`❌ Error capturing screenshot: ${error.message}`);
@@ -76,27 +85,32 @@ class SnapshotMatcher {
 
   /**
    * Find the latest screenshot file created by Detox
-   * @param {string} name - Test name
+   * @param {string} _name - Test name
    * @returns {string|null} Path to screenshot file
    */
-  findLatestScreenshot(name) {
+  findLatestScreenshot(_name) {
     // Detox saves screenshots in artifacts directory
     const possiblePaths = [
-      path.join(process.cwd(), 'artifacts', `${name}.png`),
-      path.join(process.cwd(), 'e2e', 'artifacts', `${name}.png`),
-      path.join(process.cwd(), 'artifacts', 'ios.sim.debug', `${name}.png`),
-      path.join(process.cwd(), 'artifacts', 'android.emu.debug', `${name}.png`),
+      path.join(process.cwd(), 'artifacts', `${_name}.png`),
+      path.join(process.cwd(), 'e2e', 'artifacts', `${_name}.png`),
+      path.join(process.cwd(), 'artifacts', 'ios.sim.debug', `${_name}.png`),
+      path.join(
+        process.cwd(),
+        'artifacts',
+        'android.emu.debug',
+        `${_name}.png`,
+      ),
     ];
 
     // Also check for timestamped versions
     const artifactsDir = path.join(process.cwd(), 'artifacts');
     if (fs.existsSync(artifactsDir)) {
       const files = fs.readdirSync(artifactsDir, { recursive: true });
       const screenshots = files
-        .filter(f => f.includes(name) && f.endsWith('.png'))
+        .filter(f => f.includes(_name) && f.endsWith('.png'))
         .map(f => ({
           path: path.join(artifactsDir, f),
-          mtime: fs.statSync(path.join(artifactsDir, f)).mtime
+          mtime: fs.statSync(path.join(artifactsDir, f)).mtime,
         }))
         .sort((a, b) => b.mtime - a.mtime);
 
@@ -129,7 +143,9 @@ class SnapshotMatcher {
 
       // Basic size check
       if (image1.length !== image2.length) {
-        console.log(`📏 Image sizes differ: ${image1.length} vs ${image2.length} bytes`);
+        console.log(
+          `📏 Image sizes differ: ${image1.length} vs ${image2.length} bytes`,
+        );
         return false;
       }
 
@@ -173,12 +189,12 @@ class SnapshotMatcher {
     });
 
     // Keep only latest N for each test
-    Object.entries(groups).forEach(([testName, fileList]) => {
+    Object.entries(groups).forEach(([_testName, fileList]) => {
       if (fileList.length > keep) {
         const sorted = fileList
           .map(f => ({
             name: f,
-            mtime: fs.statSync(path.join(this.outputDir, f)).mtime
+            mtime: fs.statSync(path.join(this.outputDir, f)).mtime,
           }))
           .sort((a, b) => b.mtime - a.mtime);
 
@@ -193,4 +209,3 @@ class SnapshotMatcher {
 }
 
 module.exports = SnapshotMatcher;
-