Add test for usePropagateScopesToAllRoots (#10226)

Added missing test for `usePropagateScopesToAllRoots` that was added in #10172.
Also testing against the default Vue behavior, since it is possible that a future update will make the workaround obsolete.

app/gui2/package.json

@@ -114,7 +114,7 @@
     "@volar/vue-typescript": "^1.6.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "change-case": "^4.1.2",
     "cross-env": "^7.0.3",

app/gui2/src/util/__tests__/patching.test.ts

@@ -0,0 +1,58 @@
+/* eslint-disable vue/one-component-per-file */
+import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import { defineComponent } from 'vue'
+import { usePropagateScopesToAllRoots } from '../patching'
+
+describe('usePropagateScopesToAllRoots', () => {
+  function makeComponents(doPropagate: boolean) {
+    const InnerComponent = defineComponent({
+      template: '<div class="inner"></div>',
+      __scopeId: 'inner',
+    })
+
+    const WrapperComponent = defineComponent({
+      setup() {
+        if (doPropagate) usePropagateScopesToAllRoots()
+      },
+      template: '<slot />',
+      __scopeId: 'wrapper',
+    })
+
+    const WrappingComponent = defineComponent({
+      components: { Inner: InnerComponent, Wrapper: WrapperComponent },
+      template: '<Wrapper><Inner /></Wrapper>',
+      __scopeId: 'wrapping',
+    })
+
+    const OuterComponent = defineComponent({
+      components: { Wrapping: WrappingComponent },
+      template: '<Wrapping />',
+      __scopeId: 'outer',
+    })
+    return { InnerComponent, OuterComponent }
+  }
+
+  test('scopes propagate through wrapper root slot', () => {
+    const { InnerComponent, OuterComponent } = makeComponents(true)
+    const outer = mount(OuterComponent)
+    expect(outer.findComponent(InnerComponent).element.getAttributeNames()).toEqual([
+      'inner',
+      'wrapping',
+      'wrapper-s',
+      'outer',
+      'class',
+    ])
+  })
+
+  test('manual propagation required', () => {
+    const { InnerComponent, OuterComponent } = makeComponents(false)
+    const outer = mount(OuterComponent)
+    expect(outer.findComponent(InnerComponent).element.getAttributeNames()).toEqual([
+      'inner',
+      'wrapping',
+      'wrapper-s',
+      'class',
+    ])
+  })
+})