From bc973e79a5e3b58c6c846e722780e7e7767c6c55 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 29 Aug 2024 14:44:50 -0700
Subject: [PATCH] test(tabs): re-enable skipped tests (#29813)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 packages/vue/src/components/IonTabs.ts            | 14 +++++++++++---
 packages/vue/test/base/tests/e2e/specs/tabs.cy.js |  6 ++----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/vue/src/components/IonTabs.ts b/packages/vue/src/components/IonTabs.ts
index 4654261d6e..4fde919bc8 100644
--- a/packages/vue/src/components/IonTabs.ts
+++ b/packages/vue/src/components/IonTabs.ts
@@ -50,15 +50,23 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
   name: "IonTabs",
   emits: [WILL_CHANGE, DID_CHANGE],
   setup(props, { slots, emit }) {
-    // Define the custom element
-    defineCustomElement();
-
     return {
       props,
       slots,
       emit,
     };
   },
+  mounted() {
+    /**
+     * `defineCustomElement` must be called in the `mounted` hook
+     * to ensure that the custom element is defined after the
+     * component has been fully rendered and initialized.
+     * This prevents issues with undefined properties, like
+     * `selectedTab` from core, which may occur if the custom
+     * element is defined too early in the component's lifecycle.
+     */
+    defineCustomElement();
+  },
   render() {
     const { slots, emit, props } = this;
     const slottedContent = slots.default && slots.default();
diff --git a/packages/vue/test/base/tests/e2e/specs/tabs.cy.js b/packages/vue/test/base/tests/e2e/specs/tabs.cy.js
index dd0c56da03..b2c2ee6666 100644
--- a/packages/vue/test/base/tests/e2e/specs/tabs.cy.js
+++ b/packages/vue/test/base/tests/e2e/specs/tabs.cy.js
@@ -253,8 +253,7 @@ describe('Tabs', () => {
     });
 
     // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22597
-    // TODO(ROU-11114): Re-enable this test after investigating and fixing the cause of its failure.
-    it.skip('should deselect old tab button when going to a tab that does not have a tab button', () => {
+    it('should deselect old tab button when going to a tab that does not have a tab button', () => {
       cy.visit('/tabs/tab1');
       cy.ionPageVisible('tab1');
 
@@ -314,8 +313,7 @@ describe('Tabs', () => {
     });
 
     // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22847
-    // TODO(ROU-11114): Re-enable this test after investigating and fixing the cause of its failure.
-    it.skip('should support dynamic tabs', () => {
+    it('should support dynamic tabs', () => {
       cy.visit('/tabs/tab1');
       cy.ionPageVisible('tab1');