From 07955f870bb880b41a090a50339559ecad3632fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Grabarz?= Date: Mon, 17 Jun 2024 14:09:35 +0200 Subject: [PATCH] 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 | 2 +- app/gui2/src/util/__tests__/patching.test.ts | 58 ++++++++++++++++++++ package-lock.json | 43 ++++++--------- 3 files changed, 76 insertions(+), 27 deletions(-) create mode 100644 app/gui2/src/util/__tests__/patching.test.ts diff --git a/app/gui2/package.json b/app/gui2/package.json index de202f47ad52..ecbc6db36e41 100644 --- a/app/gui2/package.json +++ b/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", diff --git a/app/gui2/src/util/__tests__/patching.test.ts b/app/gui2/src/util/__tests__/patching.test.ts new file mode 100644 index 000000000000..1a7035636952 --- /dev/null +++ b/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: '
', + __scopeId: 'inner', + }) + + const WrapperComponent = defineComponent({ + setup() { + if (doPropagate) usePropagateScopesToAllRoots() + }, + template: '', + __scopeId: 'wrapper', + }) + + const WrappingComponent = defineComponent({ + components: { Inner: InnerComponent, Wrapper: WrapperComponent }, + template: '', + __scopeId: 'wrapping', + }) + + const OuterComponent = defineComponent({ + components: { Wrapping: WrappingComponent }, + template: '', + __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', + ]) + }) +}) diff --git a/package-lock.json b/package-lock.json index ca39e06eb832..54f463e907c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -102,7 +102,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", @@ -486,6 +486,16 @@ "node": ">=12" } }, + "app/gui2/node_modules/@vue/test-utils": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz", + "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==", + "dev": true, + "dependencies": { + "js-beautify": "^1.14.9", + "vue-component-type-helpers": "^2.0.0" + } + }, "app/gui2/node_modules/@lexical/clipboard": { "version": "0.16.0", "resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.16.0.tgz", @@ -722,6 +732,12 @@ "@esbuild/win32-x64": "0.18.20" } }, + "app/gui2/node_modules/vue-component-type-helpers": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.19.tgz", + "integrity": "sha512-cN3f1aTxxKo4lzNeQAkVopswuImUrb5Iurll9Gaw5cqpnbTAxtEMM1mgi6ou4X79OCyqYv1U1mzBHJkzmiK82w==", + "dev": true + }, "app/ide-desktop": { "name": "enso-ide-desktop", "version": "1.0.0", @@ -8219,25 +8235,6 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.20.tgz", "integrity": "sha512-KTEngal0aiUvNJ6I1Chk5Ew5XqChsFsxP4GKAYXWb99zKJWjNU72p2FWEOmZWHxHcqtniOJsgnpd3zizdpfEag==" }, - "node_modules/@vue/test-utils": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.4.tgz", - "integrity": "sha512-8jkRxz8pNhClAf4Co4ZrpAoFISdvT3nuSkUlY6Ys6rmTpw3DMWG/X3mw3gQ7QJzgCZO9f+zuE2kW57fi09MW7Q==", - "dev": true, - "dependencies": { - "js-beautify": "^1.14.9", - "vue-component-type-helpers": "^1.8.21" - }, - "peerDependencies": { - "@vue/server-renderer": "^3.0.1", - "vue": "^3.0.1" - }, - "peerDependenciesMeta": { - "@vue/server-renderer": { - "optional": true - } - } - }, "node_modules/@vue/tsconfig": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.5.1.tgz", @@ -22201,12 +22198,6 @@ } } }, - "node_modules/vue-component-type-helpers": { - "version": "1.8.27", - "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.27.tgz", - "integrity": "sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==", - "dev": true - }, "node_modules/vue-demi": { "version": "0.14.7", "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",