@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.12

package/components/Resource/Detail/Metadata/Labels/index.vue

@@ -8,7 +8,7 @@ export type Label = Row;
 export interface LabelsProps {
     labels: Label[];
 
-    onShowConfiguration?: (returnFocusSelector: string) => void;
+    onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -27,6 +27,6 @@ const i18n = useI18n(store);
     :propertyName="i18n.t('component.resource.detail.metadata.labels.title')"
     :rows="labels"
     type="active"
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

package/components/Resource/Detail/Metadata/composables.ts

@@ -6,18 +6,19 @@ import { computed, toValue, Ref } from 'vue';
 import {
   useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
 
 export const useBasicMetadata = (resource: any) => {
   const labels = useDefaultLabels(resource);
   const annotations = useDefaultAnnotations(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
-      resource:            toValue(resource),
-      labels:              labels.value,
-      annotations:         annotations.value,
-      onShowConfiguration: () => resourceValue.showConfiguration()
+      resource:    toValue(resource),
+      labels:      labels.value,
+      annotations: annotations.value,
+      onShowConfiguration
     };
   });
 };
@@ -28,7 +29,7 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
 
   const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
   const basicMetaData = useBasicMetadata(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
@@ -36,7 +37,7 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration
     };
   });
 };
@@ -47,7 +48,6 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
   const workspace = useWorkspace(resource);
   const namespace = useNamespace(resource);
   const liveDate = useLiveDate(resource);
-  const resourceValue = toValue(resource);
 
   const identifyingInformation = computed((): IdentifyingInformationRow[] => {
     const defaultInfo = [
@@ -71,7 +71,7 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector?: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration:    basicMetaData.value.onShowConfiguration
     };
   });
 };

package/components/Resource/Detail/Metadata/index.vue

@@ -48,7 +48,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
         type="active"
         :rows="[]"
         :propertyName="i18n.t('component.resource.detail.metadata.labelsAndAnnotations')"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <!-- I'm not using v-else here so I can maintain the spacing correctly with the other columns in other rows. -->
@@ -58,7 +58,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Labels
         :labels="labels"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <div
@@ -67,7 +67,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Annotations
         :annotations="annotations"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
   </SpacedRow>

package/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue

@@ -1,37 +1,20 @@
 <script lang="ts">
-import Card from '@shell/components/Resource/Detail/Card/index.vue';
-import { useStore } from 'vuex';
-import ActionMenu from '@shell/components/ActionMenuShell.vue';
-import { useI18n } from '@shell/composables/useI18n';
-
 export interface Props {
   resource: any;
 }
 </script>
 
 <script setup lang="ts">
-const emit = defineEmits(['action-invoked']);
 const props = defineProps<Props>();
-const store = useStore();
-const i18n = useI18n(store);
 
 const getGlanceItemValueId = (glanceItem: any): string => `value-${ glanceItem.label }:${ glanceItem.content }`.toLowerCase().replaceAll(' ', '');
 </script>
 
 <template>
-  <Card
+  <div
     class="resource-popover-card"
     :title="resource.nameDisplay"
   >
-    <template #heading-action>
-      <ActionMenu
-        :resource="props.resource"
-        :button-aria-label="i18n.t('component.resource.detail.glance.ariaLabel.actionMenu', { resource: props.resource.nameDisplay })"
-        data-testid="resource-popover-action-menu"
-        @action-invoked="emit('action-invoked')"
-      />
-    </template>
-
     <div>
       <div
         v-for="(glanceItem, i) in props.resource.glance"
@@ -64,7 +47,7 @@ const getGlanceItemValueId = (glanceItem: any): string => `value-${ glanceItem.l
         </div>
       </div>
     </div>
-  </Card>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/components/Resource/Detail/ResourcePopover/__tests__/ResourcePopoverCard.test.ts

@@ -1,12 +1,6 @@
 import { mount, VueWrapper } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import ResourcePopoverCard from '@shell/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue';
-import Card from '@shell/components/Resource/Detail/Card/index.vue';
-import ActionMenu from '@shell/components/ActionMenuShell.vue';
-
-const mockI18n = { t: (key: string) => key };
-
-jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => mockI18n }));
 
 describe('component: ResourcePopoverCard.vue', () => {
   let wrapper: VueWrapper<any>;
@@ -44,7 +38,6 @@ describe('component: ResourcePopoverCard.vue', () => {
       props:  { resource },
       global: {
         plugins:    [store],
-        stubs:      { ActionMenu: true },
         components: { SomeFormatterComponent }
       },
     });
@@ -58,28 +51,6 @@ describe('component: ResourcePopoverCard.vue', () => {
     wrapper.unmount();
   });
 
-  it('should render the Card with the correct title', () => {
-    const card = wrapper.findComponent(Card);
-
-    expect(card.exists()).toBe(true);
-    expect(card.props('title')).toBe(mockResource.nameDisplay);
-  });
-
-  it('should render the ActionMenu with the correct resource prop', () => {
-    const actionMenu = wrapper.findComponent(ActionMenu);
-
-    expect(actionMenu.exists()).toBe(true);
-    expect(actionMenu.props('resource')).toStrictEqual(mockResource);
-  });
-
-  it('should emit "action-invoked" when ActionMenu emits it', async() => {
-    const actionMenu = wrapper.findComponent(ActionMenu);
-
-    await actionMenu.vm.$emit('action-invoked');
-
-    expect(wrapper.emitted('action-invoked')).toHaveLength(1);
-  });
-
   it('should render a row for each item in resource.glance', () => {
     const rows = wrapper.findAll('.row');
 

package/components/Resource/Detail/ResourcePopover/__tests__/index.test.ts

@@ -1,12 +1,7 @@
 import { mount, RouterLinkStub } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import ResourcePopover from '@shell/components/Resource/Detail/ResourcePopover/index.vue';
-
-const mockI18n = { t: (key: string, args: any) => JSON.stringify({ key, args }) };
-const mockFocusTrap = jest.fn();
-
-jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => mockI18n }));
-jest.mock('@shell/composables/focusTrap', () => ({ useWatcherBasedSetupFocusTrapWithDestroyIncluded: (...args: any) => mockFocusTrap(...args) }));
+import PopoverCard from '@shell/components/PopoverCard.vue';
 
 const mockResource = {
   id:                 'test-ns/test-pod',
@@ -14,7 +9,6 @@ const mockResource = {
   nameDisplay:        'My Test Pod',
   stateBackground:    'bg-success',
   detailLocation:     { name: 'pod-detail', params: { id: 'test-pod' } },
-  glance:             [{ label: 'Status', content: 'Active' }],
   parentNameOverride: 'Overridden Pod',
 };
 
@@ -23,223 +17,211 @@ describe('component: ResourcePopover/index.vue', () => {
   const mockClusterFind = jest.fn();
   const mockSomethingFind = jest.fn();
 
-  const createWrapper = async(props: any = { type: 'pod', id: 'test-ns/test-pod' }) => {
-    store = createStore({
-      getters: {
-        'i18n/t':            () => (key: string) => key,
-        currentStore:        () => () => 'cluster',
-        'cluster/schemaFor': () => () => ({ id: 'pod' }),
-        'type-map/labelFor': () => () => 'Pod',
-      },
-      actions: { 'cluster/find': mockClusterFind, 'something/find': mockSomethingFind }
-    });
+  const defaultStore = {
+    getters: {
+      'i18n/t':            () => (key: string) => key,
+      currentStore:        () => () => 'cluster',
+      'cluster/schemaFor': () => () => ({ id: 'pod' }),
+      'type-map/labelFor': () => () => 'Pod',
+    },
+    actions: { 'cluster/find': mockClusterFind, 'something/find': mockSomethingFind }
+  };
 
-    const wrapper = mount(ResourcePopover, {
-      props,
+  const PopoverCardStub = {
+    PopoverCard: {
+      template: `
+              <div>
+                <slot />
+                <slot name="heading-action" :close="() => {}" />
+                <slot name="card-body" />
+              </div>
+            `,
+    },
+  };
+
+  const createWrapper = (props: any = {}, storeConfig: any = defaultStore, stubs: any = {}) => {
+    store = createStore(storeConfig);
+
+    return mount(ResourcePopover, {
+      props: {
+        type: 'pod',
+        id:   'test-ns/test-pod',
+        ...props,
+      },
       global: {
         plugins: [store],
         stubs:   {
-          'v-dropdown':        { name: 'v-dropdown', template: '<div><slot /><slot name="popper" /></div>' },
-          'router-link':       RouterLinkStub,
-          ResourcePopoverCard: {
-            name:     'ResourcePopoverCard',
-            template: '<div id="resource-popover-card" />'
-          },
-          RcStatusIndicator: true,
+          RouterLink:          RouterLinkStub,
+          RcStatusIndicator:   true,
+          ActionMenu:          true,
+          ResourcePopoverCard: true,
+          VDropdown:           true,
+          ...stubs
         },
       },
     });
-
-    // Requires two so the fetch can be resolved
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-
-    return wrapper;
   };
 
-  // Reset mocks before each test
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  describe('data Fetching and Initial State', () => {
-    it('should show loading state initially', async() => {
-      const wrapper = await createWrapper(); // Override default fetch value
+  describe('data Fetching and Rendering', () => {
+    it('should display a loading indicator while fetching data', async() => {
+      mockClusterFind.mockImplementation(() => new Promise(() => { }));
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      expect(wrapper.find('.display').exists()).toBe(false);
       expect(wrapper.text()).toContain('...');
+      expect(wrapper.find('.display').exists()).toBe(false);
     });
 
-    it('should call the fetch composable and dispatch a store action', async() => {
-      await createWrapper();
+    it('should fetch data using the default store', async() => {
+      const wrapper = createWrapper();
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      expect(mockClusterFind).toHaveBeenCalledWith(expect.objectContaining({}), expect.objectContaining({ type: 'pod', id: 'test-ns/test-pod' }));
+      expect(mockClusterFind).toHaveBeenCalledWith(expect.any(Object), { type: 'pod', id: 'test-ns/test-pod' });
     });
 
-    it('should dispatch to the specified store', async() => {
-      await createWrapper({
-        type: 'pod', id: 'test-ns/test-pod', currentStore: 'something'
-      });
+    it('should fetch data using the store specified in props', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = createWrapper({ currentStore: 'something' });
 
-      expect(mockSomethingFind).toHaveBeenCalledWith(expect.objectContaining({}), expect.objectContaining({ type: 'pod', id: 'test-ns/test-pod' }));
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
+      expect(mockSomethingFind).toHaveBeenCalledWith(expect.any(Object), { type: 'pod', id: 'test-ns/test-pod' });
+      expect(mockClusterFind).not.toHaveBeenCalled();
     });
 
-    it('should render resource name and link when data is loaded', async() => {
+    it('should display resource details after data is fetched', async() => {
       mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
       const link = wrapper.findComponent(RouterLinkStub);
 
-      expect(link.exists()).toBe(true);
       expect(link.text()).toBe(mockResource.nameDisplay);
       expect(link.props('to')).toStrictEqual(mockResource.detailLocation);
     });
 
-    it('should use `detailLocation` prop for router-link if provided', async() => {
-      const detailLocationProp = { name: 'custom-route' };
+    it('should use detailLocation prop for the link if provided', async() => {
+      const customLocation = { name: 'custom-route' };
 
-      const wrapper = await createWrapper({
-        type:           'pod',
-        id:             'test-ns/test-pod',
-        detailLocation: detailLocationProp
-      });
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = createWrapper({ detailLocation: customLocation }, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
       const link = wrapper.findComponent(RouterLinkStub);
 
-      expect(link.props('to')).toStrictEqual(detailLocationProp);
+      expect(link.props('to')).toStrictEqual(customLocation);
     });
   });
 
   describe('computed Properties', () => {
-    it('should return empty resourceTypeLabel if no data', async() => {
-      mockClusterFind.mockReturnValue(null);
-
-      const wrapper = await createWrapper();
+    it('resourceTypeLabel: should be empty if data is not loaded', async() => {
+      mockClusterFind.mockReturnValue(undefined);
+      const wrapper = createWrapper();
 
-      expect(wrapper.vm.resourceTypeLabel).toBe('');
-    });
-
-    it('should return resourceTypeLabel from type-map getter', async() => {
-      const resourceWithoutOverride = { ...mockResource, parentNameOverride: undefined };
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      mockClusterFind.mockReturnValue(resourceWithoutOverride);
-      const wrapper = await createWrapper();
+      const popoverCard = wrapper.findComponent(PopoverCard);
+      const ariaLabel = popoverCard.props('showPopoverAriaLabel');
 
-      expect(wrapper.vm.resourceTypeLabel).toBe('Pod');
+      expect(ariaLabel).toBe('component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"\",\"resource\":\"\"}');
     });
 
-    it('should generate correct aria-labels', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
-
-      const expectedAriaLabel = JSON.stringify({ key: 'component.resource.detail.glance.ariaLabel.showDetails', args: { name: mockResource.nameDisplay, resource: mockResource.parentNameOverride } });
-      const dropdown = wrapper.findComponent({ name: 'v-dropdown' });
-      const button = wrapper.find('.focus-button');
+    it('resourceTypeLabel: should use parentNameOverride when available', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper();
 
-      expect(dropdown.attributes('aria-label')).toBe(expectedAriaLabel);
-      expect(button.attributes('aria-label')).toBe(expectedAriaLabel);
-    });
-  });
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-  describe('popover Visibility', () => {
-    it('should not show popover card initially', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      const popoverCard = wrapper.findComponent(PopoverCard);
+      const ariaLabel = popoverCard.props('showPopoverAriaLabel');
 
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+      expect(ariaLabel).toBe('component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"My Test Pod\",\"resource\":\"Overridden Pod\"}');
     });
 
-    it('should show popover on mouseenter', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+    it('resourceTypeLabel: should use type-map label as a fallback', async() => {
+      const resourceWithoutOverride = { ...mockResource, parentNameOverride: null };
 
-      await wrapper.find('.display').trigger('mouseenter');
-      expect(wrapper.vm.showPopover).toBe(true);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(true);
-    });
+      mockClusterFind.mockResolvedValue(resourceWithoutOverride);
+      const wrapper = createWrapper();
 
-    it('should hide popover on mouseleave', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      await wrapper.find('.display').trigger('mouseenter');
-      expect(wrapper.vm.showPopover).toBe(true);
+      const popoverCard = wrapper.findComponent(PopoverCard);
+      const ariaLabel = popoverCard.props('showPopoverAriaLabel');
 
-      await wrapper.find('.resource-popover').trigger('mouseleave');
-      expect(wrapper.vm.showPopover).toBe(false);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+      expect(ariaLabel).toBe('component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"My Test Pod\",\"resource\":\"Pod\"}');
     });
+  });
 
-    it('should show popover on focus button click', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+  describe('props passed to child components', () => {
+    it('should pass correct props to PopoverCard', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper();
 
-      await wrapper.find('.focus-button').trigger('click');
-      expect(wrapper.vm.showPopover).toBe(true);
-      expect(wrapper.vm.focusOpen).toBe(true);
       await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(true);
-    });
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-    it('should hide popover when action is invoked from card', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      const popoverCard = wrapper.findComponent(PopoverCard);
 
-      await wrapper.find('.display').trigger('mouseenter');
-      await wrapper.vm.$nextTick();
+      expect(popoverCard.props('cardTitle')).toBe(mockResource.nameDisplay);
+      expect(popoverCard.props('fallbackFocus')).toBe("[data-testid='resource-popover-action-menu']");
 
-      const card = wrapper.findComponent({ name: 'ResourcePopoverCard' });
+      const expectedAriaLabel = 'component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"My Test Pod\",\"resource\":\"Overridden Pod\"}';
 
-      await card.vm.$emit('action-invoked');
-      expect(wrapper.vm.showPopover).toBe(false);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+      expect(popoverCard.props('showPopoverAriaLabel')).toBe(expectedAriaLabel);
     });
 
-    it('should hide popover on Escape keydown', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+    it('should pass correct props to ActionMenu', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
 
-      await wrapper.find('.focus-button').trigger('click');
       await wrapper.vm.$nextTick();
-
-      const card = wrapper.findComponent({ name: 'ResourcePopoverCard' });
-
-      await card.trigger('keydown.escape');
+      await wrapper.vm.$nextTick();
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
-    });
-  });
+      const actionMenu = wrapper.findComponent({ name: 'ActionMenu' });
 
-  describe('focus Trap', () => {
-    it('should not setup focus trap on mouseenter', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      expect(actionMenu.props('resource')).toStrictEqual(mockResource);
 
-      await wrapper.find('.display').trigger('mouseenter');
-      await wrapper.vm.$nextTick();
+      const expectedAriaLabel = 'component.resource.detail.glance.ariaLabel.actionMenu-{\"resource\":\"My Test Pod\"}';
 
-      expect(wrapper.vm.focusOpen).toBe(false);
-      expect(mockFocusTrap).not.toHaveBeenCalled();
+      expect(actionMenu.props('buttonAriaLabel')).toBe(expectedAriaLabel);
     });
 
-    it('should setup focus trap when opened via focus button', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+    it('should pass correct props to ResourcePopoverCard', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
 
-      await wrapper.find('.focus-button').trigger('click');
-      await wrapper.vm.$nextTick(); // Triggers the watch
-
-      expect(wrapper.vm.focusOpen).toBe(true);
-      expect(mockFocusTrap).toHaveBeenCalledTimes(1);
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      // Verify the options passed to the focus trap
-      const focusTrapOptions = mockFocusTrap.mock.calls[0][2];
+      const resourceCard = wrapper.findComponent({ name: 'ResourcePopoverCard' });
 
-      expect(focusTrapOptions.fallbackFocus).toBe('#first-glance-item');
-      expect(focusTrapOptions.setReturnFocus()).toBe('.focus-button');
+      expect(resourceCard.props('resource')).toStrictEqual(mockResource);
     });
   });
 });