add more test ids

apps/mobile/e2e/test.ids.js

@@ -68,6 +68,8 @@ export const notesnook = {
         vault: 'vault_btn',
         copy: 'icon-Copy',
         sync: 'btn-sync-now',
+        night: 'nightswitch',
+        color: (color) => 'icon-color-' + color,
       },
     },
     menu: {
@@ -75,6 +77,22 @@ export const notesnook = {
     },
     note: {
       menu: 'note_menu',
+      get:(index) => 'note-item-' + index
+    },
+    notebook: {
+      menu: 'notebook_menu',
+      get:(index) => 'notebook-item-' + index
+    },
+    topic: {
+      menu: 'topic_menu',
+      get:(index) => 'topic-item-' + index
+    },
+    tag: {                       
+      menu: 'tag_menu',
+      get:(index) => 'tag-item-' + index
+    },
+    list: {
+      getByType: (type) => 'list-' + type,
     },
   },
 };

apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
@@ -45,7 +46,7 @@ export const ActionSheetColorsSection = ({item,close}) => {
       <PressableButton
         type="accent"
         accentColor={color.name.toLowerCase()}
-        testID={'icon-color-' + c}
+        testID={notesnook.ids.dialogs.actionsheet.color(c)}
         key={color.value}
         onPress={async () => {
           await PremiumService.verify(async () => {

apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js

@@ -1,5 +1,6 @@
 import React, {createRef, useCallback, useEffect, useState} from 'react';
 import {Text, TextInput, TouchableOpacity, View} from 'react-native';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {
@@ -249,6 +250,7 @@ export const ActionSheetTagsSection = ({item, close}) => {
             fontSize: SIZE.sm,
             textAlignVertical: 'center',
           }}
+          testID={notesnook.ids.dialogs.actionsheet.hashtagInput}
           autoCapitalize="none"
           textAlignVertical="center"
           blurOnSubmit={false}

apps/mobile/src/components/ActionSheetComponent/index.js

@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import Share from 'react-native-share';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
@@ -253,6 +254,7 @@ export const ActionSheetComponent = ({
       on: colors.night ? true : false,
       close: false,
       nopremium: true,
+      id:notesnook.ids.dialogs.actionsheet.night
     },
     {
       name: 'Pin',
@@ -294,6 +296,7 @@ export const ActionSheetComponent = ({
       close: false,
       check: true,
       on: note.pinned,
+      id:notesnook.ids.dialogs.actionsheet.pin
     },
     {
       name: 'Favorite',
@@ -312,6 +315,7 @@ export const ActionSheetComponent = ({
       close: false,
       check: true,
       on: note.favorite,
+      id:notesnook.ids.dialogs.actionsheet.favorite
     },
     {
       name: isPinnedToMenu ? 'Unpin from Menu' : 'Pin to Menu',
@@ -337,6 +341,7 @@ export const ActionSheetComponent = ({
       close: false,
       check: true,
       on: isPinnedToMenu,
+      id:notesnook.ids.dialogs.actionsheet.pinMenu
     },
   ];
 
@@ -377,6 +382,7 @@ export const ActionSheetComponent = ({
       <TouchableOpacity
         key={item.name}
         activeOpacity={opacity}
+        testID={item.id}
         onPress={() => {
           item.func();
         }}
@@ -610,6 +616,7 @@ export const ActionSheetComponent = ({
             <Paragraph
               color={colors.accent}
               size={SIZE.xs}
+              testID={notesnook.ids.dialogs.actionsheet.sync}
               onPress={onPressSync}
               style={{
                 textAlignVertical: 'center',
@@ -656,6 +663,7 @@ export const ActionSheetComponent = ({
           accentColor="errorBg"
           type={note.locked ? 'accent' : 'shade'}
           onPress={onPressVaultButton}
+          testID={notesnook.ids.dialogs.actionsheet.vault}
           customStyle={{
             width: '95%',
             alignSelf: 'center',

apps/mobile/src/components/ExportDialog/index.js

@@ -3,6 +3,7 @@ import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native';
 import FileViewer from 'react-native-file-viewer';
 import {exp} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent, ToastEvent} from '../../services/EventManager';
@@ -106,6 +107,7 @@ const ExportDialog = () => {
       },
       icon: 'file-pdf-box',
       desc: 'Most commonly used, opens on any device.',
+      id:notesnook.ids.dialogs.export.pdf
     },
     {
       title: 'Markdown',
@@ -126,6 +128,7 @@ const ExportDialog = () => {
       },
       icon: 'language-markdown',
       desc: 'Most commonly used, opens on any device.',
+      id:notesnook.ids.dialogs.export.md
     },
     {
       title: 'Plain Text',
@@ -134,6 +137,7 @@ const ExportDialog = () => {
       },
       icon: 'card-text',
       desc: 'A plain text file with no formatting.',
+      id:notesnook.ids.dialogs.export.text
     },
     {
       title: 'HTML',
@@ -154,6 +158,7 @@ const ExportDialog = () => {
       },
       icon: 'language-html5',
       desc: 'A file that can be opened in a browser.',
+      id:notesnook.ids.dialogs.export.html
     },
   ];
 
@@ -186,6 +191,7 @@ const ExportDialog = () => {
             <Fragment key={item.title}>
               <Seperator half />
               <TouchableOpacity
+                testID={item.id}
                 onPress={item.func}
                 activeOpacity={1}
                 style={{

apps/mobile/src/components/Header/HeaderRightMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
 import Navigation from '../../services/Navigation';
@@ -22,6 +23,7 @@ export const HeaderRightMenu = () => {
             menu: false,
           });
         }}
+        testID={notesnook.ids.default.header.buttons.left}
         name="magnify"
         size={SIZE.xxxl}
         color={colors.pri}
@@ -33,6 +35,7 @@ export const HeaderRightMenu = () => {
           onPress={() => {
             containerBottomButton.onPress();
           }}
+          testID={notesnook.ids.default.addBtn}
           icon={currentScreen === 'trash' ? 'delete' : 'plus'}
           iconSize={SIZE.xl}
           type="shade"

apps/mobile/src/components/Header/HeaderTitle.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import {ActivityIndicator, Text} from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';

apps/mobile/src/components/MoveNoteDialog/index.js

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
@@ -172,6 +173,7 @@ const MoveNoteDialog = () => {
                       onChangeText={(value) => {
                         newNotebookTitle = value;
                       }}
+                      testID={notesnook.ids.dialogs.addTo.addNotebook}
                       blurOnSubmit={false}
                       onFocus={() => {
                         setNotebookInputFocused(true);
@@ -198,6 +200,7 @@ const MoveNoteDialog = () => {
                     />
                     <TouchableOpacity
                       onPress={addNewNotebook}
+                      testID={notesnook.ids.dialogs.addTo.addNotebook}
                       style={[
                         {
                           borderRadius: 5,
@@ -285,6 +288,7 @@ const MoveNoteDialog = () => {
                               onChangeText={(value) => {
                                 newTopicTitle = value;
                               }}
+                              testID={notesnook.ids.dialogs.addTo.addTopic}
                               blurOnSubmit={false}
                               onFocus={() => {
                                 setTopicInputFocused(true);
@@ -311,6 +315,7 @@ const MoveNoteDialog = () => {
                             />
                             <TouchableOpacity
                               onPress={addNewTopic}
+                              testID={notesnook.ids.dialogs.addTo.btnTopic}
                               style={[
                                 {
                                   borderRadius: 5,

apps/mobile/src/components/NoteItem/index.js

@@ -7,7 +7,6 @@ import Navigation from '../../services/Navigation';
 import {COLORS_NOTE} from '../../utils/Colors';
 import {db} from '../../utils/DB';
 import {SIZE} from '../../utils/SizeUtils';
-import {timeSince} from '../../utils/TimeUtils';
 import {ActionIcon} from '../ActionIcon';
 import {ActionSheetEvent, updateEvent} from '../DialogManager/recievers';
 import {TimeSince} from '../Menu/TimeSince';
@@ -56,6 +55,18 @@ export default class NoteItem extends React.Component {
     }
   }
 
+  showActionSheet = () => {
+    ActionSheetEvent(
+      item,
+      isTrash ? false : true,
+      isTrash ? false : true,
+      isTrash
+        ? ['Remove', 'Restore']
+        : ['Add to', 'Share', 'Export', 'Delete', 'Copy'],
+      isTrash ? [] : ['Pin', 'Favorite', 'Add to Vault'],
+    );
+  };
+
   render() {
     let {colors, item, customStyle, isTrash} = this.props;
 
@@ -256,17 +267,7 @@ export default class NoteItem extends React.Component {
           name="dots-horizontal"
           testID={notesnook.ids.note.menu}
           size={SIZE.xl}
-          onPress={() => {
+          onPress={this.showActionSheet}
-            ActionSheetEvent(
-              item,
-              isTrash ? false : true,
-              isTrash ? false : true,
-              isTrash
-                ? ['Remove', 'Restore']
-                : ['Add to', 'Share', 'Export', 'Delete', 'Copy'],
-              isTrash ? [] : ['Pin', 'Favorite', 'Add to Vault'],
-            );
-          }}
           customStyle={{
             justifyContent: 'center',
             height: 35,

apps/mobile/src/components/NotebookItem/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {TouchableOpacity, View} from 'react-native';
+import {notesnook} from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import Navigation from '../../services/Navigation';
 import {ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
@@ -19,6 +20,21 @@ export const NotebookItem = ({
   const [state] = useTracked();
   const {colors} = state;
 
+  const showActionSheet = () => {
+    let rowItems = isTrash
+      ? ['Restore', 'Remove']
+      : [item.type == 'topic' ? 'Edit Topic' : 'Edit Notebook', 'Delete'];
+
+    let columnItems =
+      item.type === 'topic'
+        ? ['Pin to Menu', 'Unpin from Menu']
+        : ['Pin', 'Pin to Menu', 'Unpin from Menu'];
+
+    ActionSheetEvent(item, false, false, rowItems, columnItems, {
+      notebookID: notebookID,
+    });
+  };
+
   return (
     <View
       style={[
@@ -179,24 +195,9 @@ export const NotebookItem = ({
         <ActionIcon
           color={colors.heading}
           name="dots-horizontal"
+          testID={notesnook.ids.notebook.menu}
           size={SIZE.xl}
-          onPress={() => {
+          onPress={showActionSheet}
-            let rowItems = isTrash
-              ? ['Restore', 'Remove']
-              : [
-                  item.type == 'topic' ? 'Edit Topic' : 'Edit Notebook',
-                  'Delete',
-                ];
-
-            let columnItems =
-              item.type === 'topic'
-                ? ['Pin to Menu', 'Unpin from Menu']
-                : ['Pin', 'Pin to Menu', 'Unpin from Menu'];
-
-            ActionSheetEvent(item, false, false, rowItems, columnItems, {
-              notebookID: notebookID,
-            });
-          }}
           customStyle={{
             justifyContent: 'center',
             height: 35,

apps/mobile/src/components/SelectionWrapper/index.js

@@ -16,6 +16,7 @@ const SelectionWrapper = ({
   background,
   onLongPress,
   onPress,
+  testID
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList, currentEditingNote} = state;
@@ -74,6 +75,7 @@ const SelectionWrapper = ({
           ? background
           : 'transparent'
       }
+      testID={testID}
       onLongPress={onLongPress}
       onPress={onPress}
       customSelectedColor={currentEditingNote ? colors.accent : colors.nav}

apps/mobile/src/components/SimpleList/MessageCard.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
 import {COLORS_NOTE} from '../../utils/Colors';
@@ -17,6 +18,7 @@ export const MessageCard = ({data}) => {
         <TouchableOpacity
           activeOpacity={0.7}
           onPress={messageBoardState.onPress}
+          testID={notesnook.ids.default.loginToSync}
           style={{
             flexDirection: 'row',
             alignItems: 'center',

apps/mobile/src/components/SimpleList/NoteItemWrapper.js

@@ -15,6 +15,7 @@ import {TEMPLATE_TRASH} from '../DialogManager/Templates';
 import {db} from '../../utils/DB';
 import {DDS} from '../../services/DeviceDetection';
 import {tabBarRef} from '../../utils/Refs';
+import { notesnook } from '../../../e2e/test.ids';
 
 export const NoteItemWrapper = ({item, index, isTrash = false}) => {
   const [state, dispatch] = useTracked();
@@ -89,6 +90,7 @@ export const NoteItemWrapper = ({item, index, isTrash = false}) => {
   return (
     <SelectionWrapper
       index={index}
+      testID={notesnook.ids.note.get(index)}
       onLongPress={onLongPress}
       onPress={onPress}
       item={note}>

apps/mobile/src/components/SimpleList/NotebookItemWrapper.js

@@ -1,4 +1,5 @@
 import React, {useMemo} from 'react';
+import { notesnook } from '../../../e2e/test.ids';
 import {NotebookItem} from '../../components/NotebookItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {useTracked} from '../../provider';
@@ -58,6 +59,7 @@ export const NotebookItemWrapper = ({
     <SelectionWrapper
       onLongPress={onLongPress}
       pinned={pinned}
+      testID={isTopic? notesnook.ids.topic.get(index) : notesnook.ids.notebook.get(index)}
       index={index}
       onPress={onPress}
       item={item}>

apps/mobile/src/components/SimpleList/index.js

@@ -3,14 +3,10 @@ import {
   ActivityIndicator,
   Platform,
   RefreshControl,
-  StyleSheet,
   useWindowDimensions,
   View,
 } from 'react-native';
-import {
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
-  initialWindowMetrics,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
 import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -300,6 +296,7 @@ const SimpleList = ({
           alignSelf: 'center',
           minHeight: '100%',
         },
+        testID: 'list-' + type,
       }}
       style={{
         height: '100%',

apps/mobile/src/components/SortDialog/index.js

@@ -1,6 +1,7 @@
 import React, {createRef} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../e2e/test.ids';
 import {Actions} from '../../provider/Actions';
 import {defaultState} from '../../provider/DefaultState';
 import {DDS} from '../../services/DeviceDetection';
@@ -120,6 +121,7 @@ class SortDialog extends React.Component {
               </Heading>
 
               <TouchableOpacity
+                testID={notesnook.ids.dialogs.sortBy.order}
                 onPress={async () => {
                   let value =
                     this.state.settings.sortOrder === 'asc' ? 'des' : 'asc';

apps/mobile/src/components/TagItem/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import { notesnook } from '../../../e2e/test.ids';
 import {PressableButton} from '../../components/PressableButton';
 import {useTracked} from '../../provider';
 import Navigation from '../../services/Navigation';
@@ -33,6 +34,7 @@ const TagItem = ({item, index}) => {
     <PressableButton
       onPress={onPress}
       selectedColor={colors.nav}
+      testID={notesnook.ids.tag.get(index)}
       alpha={!colors.night ? -0.02 : 0.02}
       opacity={1}
       customStyle={{
@@ -79,6 +81,7 @@ const TagItem = ({item, index}) => {
           let columnItems = ['Pin to Menu', 'Unpin from Menu'];
           ActionSheetEvent(item, false, false, rowItems, columnItems);
         }}
+        testID={notesnook.ids.tag.menu}
         customStyle={{
           justifyContent: 'center',
           height: 35,

apps/mobile/src/components/VaultDialog/index.js

@@ -4,6 +4,7 @@ import {TextInput} from 'react-native-gesture-handler';
 import * as Keychain from 'react-native-keychain';
 import Share from 'react-native-share';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {notesnook} from '../../../e2e/test.ids';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
 import {
@@ -313,13 +314,13 @@ export class VaultDialog extends Component {
   toTXT(data) {
     return data.reduce(function (text, op) {
       if (!op.insert) return text;
-      if (typeof op.insert !== "string") return text + " ";
+      if (typeof op.insert !== 'string') return text + ' ';
       return text + op.insert;
-    }, "");
+    }, '');
   }
 
   _shareNote(note) {
-    let text = this.toTXT(note.content.data)
+    let text = this.toTXT(note.content.data);
     let m = `${note.title}\n \n ${text}`;
     Share.open({
       title: 'Share note to',
@@ -439,12 +440,13 @@ export class VaultDialog extends Component {
 
           <Seperator />
 
-          {changePassword ? (
+          {novault || changePassword ? (
             <>
               <TextInput
                 ref={passInputRef}
                 editable={!loading}
                 autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwd}
                 style={{
                   padding: pv - 5,
                   borderBottomWidth: 1.5,
@@ -494,6 +496,7 @@ export class VaultDialog extends Component {
               <TextInput
                 ref={changePassInputRef}
                 editable={!loading}
+                testID={notesnook.ids.dialogs.vault.changePwd}
                 autoCapitalize="none"
                 style={{
                   padding: pv - 5,
@@ -529,6 +532,7 @@ export class VaultDialog extends Component {
               <TextInput
                 ref={passInputRef}
                 autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwd}
                 style={{
                   padding: pv - 5,
                   borderBottomWidth: 1.5,
@@ -557,6 +561,7 @@ export class VaultDialog extends Component {
               <TextInput
                 ref={confirmPassRef}
                 autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwdAlt}
                 style={{
                   padding: pv - 5,
                   borderBottomWidth: 1.5,
@@ -603,6 +608,7 @@ export class VaultDialog extends Component {
                   biometricUnlock: !biometricUnlock,
                 });
               }}
+              testID={notesnook.ids.dialogs.vault.fingerprint}
               activeOpacity={0.7}
               style={{
                 flexDirection: 'row',
@@ -628,9 +634,7 @@ export class VaultDialog extends Component {
                   maxWidth: '90%',
                   marginLeft: 10,
                 }}>
-                {!biometricUnlock
+                Fingerprint Unlock
-                  ? 'Fingerprint Unlock Disabled'
-                  : 'Fingerprint Unlock Enabled'}
               </Paragraph>
             </TouchableOpacity>
           ) : null}