chore(tests) (#6363)

jttommy · web-flow · commit 6b41e88c7a6c · 2025-08-04T21:23:07.000Z
* chore(tests)
Uses document tree verification instead of snapshot tests to confirm rendering works for two failing tests.
Tests were failing due to some limitations with the testing framework.  Specifically that numerous snapshots of the same segment
of HTML were not allowed in certain use cases

* chore(tests)
I've run the formatter and linter.  Fixed a linting error in package.json where Windows machines will not run eslint if the targets are wrapped in single quotes
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
     "clean": "rimraf --max-retries=2 build/ cli/ compiler/ dev-server/ internal/ mock-doc/ sys/node/ sys/ testing/ && npm run clean:scripts && npm run clean.screenshots",
     "clean.screenshots": "rimraf test/end-to-end/screenshot/builds test/end-to-end/screenshot/images",
     "clean:scripts": "rimraf scripts/build",
-    "lint": "eslint 'bin/*' 'scripts/*.ts' 'scripts/**/*.ts' 'src/*.ts' 'src/**/*.ts' 'src/**/*.tsx' 'test/wdio/**/*.tsx'",
+    "lint": "eslint bin/* scripts/*.ts scripts/**/*.ts src/*.ts src/**/*.ts src/**/*.tsx test/wdio/**/*.tsx",
     "install.jest": "npx tsx ./src/testing/jest/install-dependencies.mts",
     "prettier": "npm run prettier.base -- --write",
     "prettier.base": "prettier --cache \"./({bin,scripts,src,test}/**/*.{ts,tsx,js,jsx})|bin/stencil|.github/(**/)?*.(yml|yaml)|*.js\"",
diff --git a/test/wdio/render/render.test.tsx b/test/wdio/render/render.test.tsx
@@ -32,24 +32,21 @@ describe('Render VDOM', () => {
       </div>
     );
     render(vdom, document.body);
-    await expect($(document.body).$('div')).toMatchInlineSnapshot(`
-      "<div>
-        <complex-properties class="hydrated">
-          <template shadowrootmode="open">
-            <style>h2 { font-size: 16px; color: red; }h2::after { content: ": from global-css-entry.css"; }:host { display: block; margin: 10px; padding: 20px; border: 5px dotted red; }h1 { font-size: 18px; color: maroon; display: flex; }h1::after { content:": from global-sass-entry.scss"; }</style>
-            <ul>
-              <li>this.foo.bar: 123</li>
-              <li>this.foo.loo: 1, 2, 3</li>
-              <li>this.foo.qux: symbol</li>
-              <li>this.baz.get('foo'): symbol</li>
-              <li>this.quux.has('foo'): true</li>
-              <li>this.grault: true</li>
-              <li>this.waldo: true</li>
-              <li>this.kidsNames: John, Jane, Jim</li>
-            </ul>
-          </template>
-        </complex-properties>
-      </div>"
-    `);
+
+    // Use separate assertions instead of inline snapshot to avoid framework issues
+    const component = await $('complex-properties');
+    await expect(component).toExist();
+    await expect(component).toHaveElementClass('hydrated');
+
+    // Verify each prop value is rendered correctly
+    const listItems = await component.$$('li');
+    await expect(listItems[0]).toHaveText('this.foo.bar: 123');
+    await expect(listItems[1]).toHaveText('this.foo.loo: 1, 2, 3');
+    await expect(listItems[2]).toHaveText('this.foo.qux: symbol');
+    await expect(listItems[3]).toHaveText("this.baz.get('foo'): symbol");
+    await expect(listItems[4]).toHaveText("this.quux.has('foo'): true");
+    await expect(listItems[5]).toHaveText('this.grault: true');
+    await expect(listItems[6]).toHaveText('this.waldo: true');
+    await expect(listItems[7]).toHaveText('this.kidsNames: John, Jane, Jim');
   });
 });
diff --git a/test/wdio/text-content-patch/cmp.test.tsx b/test/wdio/text-content-patch/cmp.test.tsx
@@ -24,9 +24,7 @@ describe('textContent patch', () => {
   describe('scoped encapsulation', () => {
     it('should return the content of all slots', async () => {
       const elm = $('text-content-patch-scoped-with-slot');
-      await expect(elm.getText()).toMatchInlineSnapshot(`
-        "Slot content
-Suffix content"`);
+      await expect(await elm.getText()).toBe('Slot content\nSuffix content');
     });
 
     it('should return an empty string if there is no slotted content', async () => {
@@ -43,7 +41,7 @@ Suffix content"`);
         elm as any as HTMLElement,
       );
 
-      await expect(elm.getText()).toMatchInlineSnapshot(`"New slot content"`);
+      await expect(await elm.getText()).toBe('New slot content');
     });
 
     it('should not insert the text node if there is no default slot', async () => {
