From 26a4f9c7d03905f6dee6392619cc6c7d99b0047c Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Fri, 8 Mar 2024 13:09:17 -0800
Subject: [PATCH] Add the ability to run percy with the mobile tests

---
 e2e/.percy.mobile.yml              | 30 ++++++++++++++++++++++++++++++
 e2e/tests/mobile/smoke.e2e.spec.js | 14 ++++++++++++++
 package.json                       |  1 +
 3 files changed, 45 insertions(+)
 create mode 100644 e2e/.percy.mobile.yml

diff --git a/e2e/.percy.mobile.yml b/e2e/.percy.mobile.yml
new file mode 100644
index 0000000000..10294ce408
--- /dev/null
+++ b/e2e/.percy.mobile.yml
@@ -0,0 +1,30 @@
+version: 2
+snapshot:
+  percyCSS: |
+    /* Clock indicator... your days are numbered  */
+    .t-indicator-clock > .label {
+      opacity: 0 !important;
+    }
+    .c-input--datetime {
+      opacity: 0 !important;
+    }
+    /* Timer object text */
+    .c-ne__time-and-creator {
+      opacity: 0 !important;
+    }
+    /* Time Conductor ticks */
+    div.c-conductor-axis.c-conductor__ticks > svg {
+      opacity: 0 !important;
+    }
+    /* Embedded timestamp in notebooks */
+    .c-ne__embed__time{
+      opacity: 0 !important;
+    }
+    /* Time Conductor Start Time */
+    .c-compact-tc__setting-value{
+      opacity: 0 !important;
+    }
+    /* Chart Area for Plots */
+    .gl-plot-chart-area{
+      opacity: 0 !important;
+    }
diff --git a/e2e/tests/mobile/smoke.e2e.spec.js b/e2e/tests/mobile/smoke.e2e.spec.js
index cd0ad707a4..1754a102ac 100644
--- a/e2e/tests/mobile/smoke.e2e.spec.js
+++ b/e2e/tests/mobile/smoke.e2e.spec.js
@@ -34,6 +34,20 @@ Make no assumptions about the order that elements appear in the DOM.
 */
 
 import { expect, test } from '../../pluginFixtures.js';
+import percySnapshot from '@percy/playwright';
+
+test.describe('Visual Smoke tests for @mobile', () => {
+  test.beforeEach(async ({ page }) => {
+    //For now, this test is going to be hardcoded against './test-data/display_layout_with_child_layouts.json'
+    await page.goto('./');
+  });
+
+  test.only('Verify that My Items Tree appears @mobile', async ({ page }) => {
+    //My Items to be visible
+    await expect(page.getByRole('treeitem', { name: 'My Items' })).toBeVisible();
+    await percySnapshot(page, `Visual Mobile Smoke Test`);
+  });
+});
 
 test.describe('Smoke tests for @mobile', () => {
   test.beforeEach(async ({ page }) => {
diff --git a/package.json b/package.json
index 1377810faa..0fc9712a7e 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "test:e2e": "npx playwright test",
     "test:e2e:a11y": "npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep @a11y",
     "test:e2e:mobile": "npx playwright test --config=e2e/playwright-mobile.config.js",
+    "test:e2e:mobile:visual": "percy exec --config ./e2e/.percy.mobile.yml -- npx playwright test --config=e2e/playwright-mobile.config.js",
     "test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb --workers=1",
     "test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb|@generatedata\"",
     "test:e2e:unstable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @unstable",