chore: add cy test

packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx

@@ -5,8 +5,13 @@ import { VListGroup } from '../VListGroup'
 import { VListItem } from '../VListItem'
 import { VList } from '../VList'
 
+// Components
+import { VBtn } from '@/components/VBtn'
+
 // Utilities
 import { ref } from 'vue'
+// Types
+import type { Ref } from 'vue'
 
 describe('VListGroup', () => {
   function mountFunction (content: JSX.Element) {
@@ -29,7 +34,7 @@ describe('VListGroup', () => {
     wrapper.get('.v-list-item-title').contains('Group')
   })
 
-  it('supports children', () => {
+  it.only('supports children', () => {
     const wrapper = mountFunction((
       <CenteredGrid width="200px">
         <h2 class="mt-8">ListGroup</h2>
@@ -91,4 +96,34 @@ describe('VListGroup', () => {
       .get('.v-list-group').should('exist')
       .get('.v-list-group__items').should('be.visible')
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/20354
+  it('should support programmatically expand group via open model', () => {
+    const opened: Ref<string[]> = ref([])
+
+    cy.mount(() => (
+      <>
+        <VBtn onClick={ () => { opened.value.push('Users') } }>Click me</VBtn>
+        <VList v-model:opened={ opened.value }>
+          <VListGroup value="Users">
+            {{
+              activator: ({ props }) => <VListItem { ...props } title="Users" />,
+              default: () => (
+                <>
+                  <VListItem title="Foo" />
+                  <VListItem title="Bar" />
+                </>
+              ),
+            }}
+          </VListGroup>
+        </VList>
+      </>
+    ))
+
+    cy.get('button').click({ waitForAnimations: true })
+      .then(_ => {
+        expect(opened.value).to.deep.equal(['Users'])
+      })
+      .get('.v-list-group__items').should('be.visible')
+  })
 })