test(tabs): re-enable skipped tests (#29813)

Co-authored-by: Brandy Carney <[email protected]>

Author: thetaPC

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();

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');