added title and subtitle testIds (#7866)

--------- Co-authored-by: d4vidi <[email protected]>
wix · May 26, 2024 · f23bc2b · f23bc2b
1 parent dde5643
commit f23bc2b
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 7 deletions.
diff --git a/e2e/Stack.test.js b/e2e/Stack.test.js
@@ -1,9 +1,28 @@
+import jestExpect from 'expect';
 import Utils from './Utils';
 import TestIDs from '../playground/src/testIDs';
 import Android from './AndroidUtils';
 
 const { elementByLabel, elementById, sleep } = Utils;
 
+const driver = {
+  root: {
+    navToTitleAndSubtitle: async () => {
+      await elementById(TestIDs.PUSH_TITLE_WITH_SUBTITLE).tap();
+      return driver.titleWithSubtitle;
+    },
+  },
+
+  titleWithSubtitle: {
+    titleId: `${TestIDs.TOPBAR_ID}.title`,
+    subtitleId: `${TestIDs.TOPBAR_ID}.subtitle`,
+    title: () => elementById(driver.titleWithSubtitle.titleId),
+    titleByLabel: () => elementByLabel('Title'),
+    subtitle: () => elementById(driver.titleWithSubtitle.subtitleId),
+    subtitleByLabel: () => elementByLabel('Subtitle'),
+  },
+};
+
 describe('Stack', () => {
   beforeEach(async () => {
     await device.launchApp({ newInstance: true });
@@ -78,9 +97,25 @@ describe('Stack', () => {
   });
 
   it('push title with subtitle', async () => {
-    await elementById(TestIDs.PUSH_TITLE_WITH_SUBTITLE).tap();
-    await expect(elementByLabel('Title')).toBeVisible();
-    await expect(elementByLabel('Subtitle')).toBeVisible();
+    const innerDriver = await driver.root.navToTitleAndSubtitle();
+    await expect(innerDriver.titleByLabel()).toBeVisible();
+    await expect(innerDriver.subtitleByLabel()).toBeVisible();
+  });
+
+  it('push title & subtitle with derived test IDs', async () => {
+    const innerDriver = await driver.root.navToTitleAndSubtitle();
+    await expect(innerDriver.title()).toBeVisible();
+    await expect(innerDriver.subtitle()).toBeVisible();
+  });
+
+  it.e2e('push title & subtitle with derived test IDs (strict e2e)', async () => {
+    const innerDriver = await driver.root.navToTitleAndSubtitle();
+
+    const titleAttr = await innerDriver.titleByLabel().getAttributes();
+    jestExpect(titleAttr.identifier).toEqual(innerDriver.titleId);
+
+    const subtitleAttr = await innerDriver.subtitleByLabel().getAttributes();
+    jestExpect(subtitleAttr.identifier).toEqual(innerDriver.subtitleId);
   });
 
   it.e2e('screen lifecycle', async () => {

diff --git a/lib/Mock/Components/TopBar.tsx b/lib/Mock/Components/TopBar.tsx
@@ -26,13 +26,16 @@ export const TopBar = class extends Component<TopBarProps> {
 
   render() {
     const topBarOptions = this.props.topBarOptions;
+    const topbarTestId = topBarOptions?.testID;
+    const titleTestId = topbarTestId ? { testID: `${topbarTestId}.title` } : {};
+    const subtitleTestId = topbarTestId ? { testID: `${topbarTestId}.subtitle` } : {};
     if (topBarOptions?.visible === false) return null;
     else {
       const component = topBarOptions?.title?.component;
       return (
-        <View testID={topBarOptions?.testID}>
-          <Text>{topBarOptions?.title?.text}</Text>
-          <Text>{topBarOptions?.subtitle?.text}</Text>
+        <View testID={topbarTestId}>
+          <Text {...titleTestId}>{topBarOptions?.title?.text}</Text>
+          <Text {...subtitleTestId}>{topBarOptions?.subtitle?.text}</Text>
           {this.renderButtons(topBarOptions?.leftButtons)}
           {this.renderButtons(topBarOptions?.rightButtons)}
           {component &&

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/TopBar.java b/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/TopBar.java
@@ -181,6 +181,7 @@ public void setSubtitleAlignment(Alignment alignment) {
 
     public void setTestId(String testId) {
         setTag(testId);
+        titleAndButtonsContainer.setTestId(testId);
     }
 
     public void setTitleTextColor(@ColorInt int color) {

diff --git a/...in/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsContainer.kt b/...in/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsContainer.kt
@@ -99,6 +99,10 @@ class TitleAndButtonsContainer(context: Context) : ViewGroup(context) {
         clearComponent()
     }
 
+    fun setTestId(testId: String) {
+        titleSubTitleBar.setTestId(testId)
+    }
+
     override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
         val titleComponent = getTitleComponent()
         val isCenter = titleComponentAlignment == Alignment.Center

diff --git a/...rc/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleSubTitleLayout.kt b/...rc/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleSubTitleLayout.kt
@@ -75,6 +75,16 @@ class TitleSubTitleLayout(context: Context) : LinearLayout(context) {
         }
     }
 
+    fun setTestId(testId: String) {
+        if (testId.isEmpty()) {
+            this.titleTextView.tag = null
+            this.subTitleTextView.tag = null
+        } else {
+            this.titleTextView.tag = "$testId.title"
+            this.subTitleTextView.tag = "$testId.subtitle"
+        }
+    }
+
     fun getTitle() = (this.titleTextView.text ?: "").toString()
 
     fun clear() {

diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/views/TitleSubTitleLayoutTest.kt b/lib/android/app/src/test/java/com/reactnativenavigation/views/TitleSubTitleLayoutTest.kt
@@ -0,0 +1,51 @@
+package com.reactnativenavigation.views
+
+import android.app.Activity
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import com.reactnativenavigation.BaseTest
+import com.reactnativenavigation.views.stack.topbar.titlebar.TitleSubTitleLayout
+import org.assertj.core.api.AssertionsForInterfaceTypes.*
+import org.junit.Test
+
+private const val UUT_WIDTH = 1000
+private const val UUT_HEIGHT = 100
+
+
+class TitleSubTitleLayoutTest : BaseTest() {
+    private val testId = "mock-testId"
+
+    lateinit var uut: TitleSubTitleLayout
+    private lateinit var activity: Activity
+
+    override fun beforeEach() {
+        super.beforeEach()
+        setup()
+    }
+
+    private fun setup() {
+        activity = newActivity()
+
+        uut = TitleSubTitleLayout(activity)
+
+        activity.setContentView(FrameLayout(activity).apply {
+            addView(uut, ViewGroup.LayoutParams(UUT_WIDTH, UUT_HEIGHT))
+        })
+        idleMainLooper()
+    }
+
+    @Test
+    fun `should set Test ID canonically`(){
+        uut.setTestId(testId)
+        assertThat(uut.getTitleTxtView().tag).isEqualTo("$testId.title")
+        assertThat(uut.getSubTitleTxtView().tag).isEqualTo("$testId.subtitle")
+    }
+
+    @Test
+    fun `should clear test ID`() {
+        uut.setTestId(testId)
+        uut.setTestId("")
+        assertThat(uut.getTitleTxtView().tag).isNull()
+        assertThat(uut.getSubTitleTxtView().tag).isNull()
+    }
+}
diff --git a/lib/ios/RNNTitleViewHelper.h b/lib/ios/RNNTitleViewHelper.h
@@ -18,9 +18,11 @@
 
 @property(nonatomic, strong) RNNTitleOptions *titleOptions;
 @property(nonatomic, strong) RNNSubtitleOptions *subtitleOptions;
+@property(nonatomic, strong) Text *parentTestID;
 
 - (instancetype)initWithTitleViewOptions:(RNNOptions *)titleOptions
                          subTitleOptions:(RNNOptions *)subtitleOptions
+                            parentTestID:(Text *)parentTestID
                           viewController:(UIViewController *)viewController;
 
 - (void)setup;

diff --git a/lib/ios/RNNTitleViewHelper.m b/lib/ios/RNNTitleViewHelper.m
@@ -38,12 +38,14 @@ @implementation RNNTitleViewHelper
 
 - (instancetype)initWithTitleViewOptions:(RNNTitleOptions *)titleOptions
                          subTitleOptions:(RNNSubtitleOptions *)subtitleOptions
+                            parentTestID:(Text *)parentTestID
                           viewController:(UIViewController *)viewController {
     self = [super init];
     if (self) {
         self.viewController = viewController;
         self.titleOptions = titleOptions;
         self.subtitleOptions = subtitleOptions;
+        self.parentTestID = parentTestID;
     }
     return self;
 }
@@ -81,7 +83,7 @@ - (void)setup {
     if (self.title) {
         self.titleView.titleLabel = [self setupTitle];
     }
-
+	
     [self centerTitleView:navigationBarBounds
                titleLabel:self.titleView.titleLabel
             subtitleLabel:self.titleView.subtitleLabel];
@@ -135,6 +137,11 @@ - (UILabel *)setupSubtitle {
         subtitleLabel.textColor = color;
     }
 
+    if (_parentTestID && _parentTestID.hasValue && ((NSString *)_parentTestID.get).length > 0) {
+        subtitleLabel.accessibilityIdentifier =
+            [NSString stringWithFormat:@"%@.subtitle", _parentTestID.get];
+    }
+
     [self.titleView addSubview:subtitleLabel];
 
     return subtitleLabel;
@@ -174,6 +181,11 @@ - (UILabel *)setupTitle {
         titleLabel.textColor = color;
     }
 
+    if (_parentTestID && _parentTestID.hasValue && ((NSString *)_parentTestID.get).length > 0) {
+        titleLabel.accessibilityIdentifier =
+            [NSString stringWithFormat:@"%@.title", _parentTestID.get];
+    }
+
     [self.titleView addSubview:titleLabel];
 
     return titleLabel;

diff --git a/lib/ios/TopBarTitlePresenter.m b/lib/ios/TopBarTitlePresenter.m
@@ -47,6 +47,7 @@ - (void)setTitleViewWithSubtitle:(RNNTopBarOptions *)options {
         _titleViewHelper =
             [[RNNTitleViewHelper alloc] initWithTitleViewOptions:options.title
                                                  subTitleOptions:options.subtitle
+                                                    parentTestID:options.testID
                                                   viewController:self.boundViewController];
 
         if (options.title.text.hasValue) {

diff --git a/playground/src/screens/StackScreen.tsx b/playground/src/screens/StackScreen.tsx
@@ -121,6 +121,7 @@ export default class StackScreen extends React.Component<NavigationProps> {
         name: Screens.Pushed,
         options: {
           topBar: {
+            testID: testIDs.TOPBAR_ID,
             title: {
               text: 'Title',
             },

diff --git a/playground/src/testIDs.ts b/playground/src/testIDs.ts
@@ -74,6 +74,7 @@ const testIDs = {
   CUSTOM_BACK_BTN: 'CUSTOM_BACK_BUTTON',
   PUSH_CUSTOM_BACK_BTN: 'PUSH_CUSTOM_BACK_BTN',
   PUSH_TITLE_WITH_SUBTITLE: 'PUSH_TITLE_WITH_SUBTITLE',
+  TOPBAR_ID: 'TOPBAR_ID',
   BACK_BUTTON: 'BACK_BUTTON',
   TOGGLE_BACK: 'TOGGLE_BACK',
   SWITCH_TAB_BY_INDEX_BTN: 'SWITCH_TAB_BY_INDEX_BTN',