layout basic e2e testing

apps/mobile/e2e/firstTest

@@ -0,0 +1,78 @@
+
+
+
+/* 
+it('CHECK MENU NAVIGATION', async () => {
+  await expect(element(by.id('left_menu_button'))).toBeVisible();
+  menu = element(by.id('left_menu_button'));
+  await element(by.id('left_menu_button')).tap();
+  await sleep(100);
+   await element(by.text('Notebooks')).tap();
+  menu.tap();
+  await sleep(100);
+  await element(by.text('Favorites')).tap();
+  menu.tap();
+  await sleep(100);
+  await element(by.text('Trash')).tap();
+  menu.tap();
+  await sleep(100);
+  await element(by.text('Tags')).tap();
+  menu.tap();
+  await sleep(100);
+  await element(by.text('Settings')).tap();
+
+
+});
+
+it('CHECK NIGHT MODE SWITCHING', async () => {
+  menu.tap();
+  await sleep(100); 
+  await element(by.id('night_mode')).tap();
+  await sleep(100);
+  await element(by.id('night_mode')).tap(); 
+  await sleep(100);
+  menu.tap();
+}); */
+/* 
+it('OPEN EDITOR AND TAKE A NOTE', async () => {
+  await element(by.text('Add your First Note')).tap();
+  await sleep(500);
+  const editor = element(by.id('editor'));
+  await sleep(500);
+  await editor.typeText('This is the text of **the note. which is working');
+  await sleep(100);
+  await element(by.id("editor_back_key")).tap();
+  await sleep(200);
+});
+
+it('MAKE A NOTEBOOK', async () => {
+  await element(by.id('left_menu_button')).tap();
+  await sleep(100);
+  await element(by.text('Notebooks')).tap();
+  await sleep(100);
+  await element(by.text('Add a Notebook')).tap();
+  await sleep(100);
+  await element(by.id('notebook_title_input')).tap();
+  await sleep(100);
+  await element(by.id('notebook_title_input')).typeText("New Notebook");
+  await sleep(100);
+  await element(by.id('notebook_desc_input')).tap();
+  await sleep(100);
+  await element(by.id('notebook_desc_input')).typeText("notebook description");
+  await sleep(100);
+  await element(by.id('notebook_topic_input')).tap();
+  await sleep(100);
+  await element(by.id('notebook_topic_input')).typeText("new topic");
+  await sleep(100);
+  await element(by.id('notebook_topic_input')).tapReturnKey();
+  await element(by.text('Add')).tap();
+  await sleep(2000);
+});
+
+
+
+
+
+
+
+ */

apps/mobile/e2e/firstTest.e2e.js

@@ -1,56 +0,0 @@
-const sleep = (duration) =>
-  new Promise((resolve) => setTimeout(() => resolve(), duration));
-
-let menu;
-
-it('CHECK APP LOADED', async () => {
-  await expect(element(by.id('mobile_main_view'))).toBeVisible();
-});
-
-it('CHECK MENU NAVIGATION', async () => {
-  await expect(element(by.id('left_menu_button'))).toBeVisible();
-
-/*   await element(by.id('Notebooks')).tap();
-  menu.tap();
-  await sleep(200);
-  await element(by.id('Favorites')).tap();
-  menu.tap();
-  await sleep(200);
-  await element(by.id('Trash')).tap();
-  menu.tap();
-  await sleep(200);
-  await element(by.text('Tags')).tap();
-  menu.tap();
-  await sleep(200);
-  await element(by.id('Settings')).tap();
-  menu.tap();
-  await sleep(200); */
-
-});
-
-it('CHECK NIGHT MODE SWITCHING', async () => {
-/*   await element(by.id('night_mode')).tap();
-  await sleep(2000);
-  await element(by.id('night_mode')).tap(); */
-
-});
-
-
-
-
-
-
-
-/* it('Check if editor can be opened and edited', async () => {
-  await expect(element(by.id('container_bottom_btn'))).toBeVisible();
-  await sleep(200);
-  await element(by.id('container_bottom_btn')).tap();
-  await sleep(1000);
-
-  const editor = element(by.id('editor'));
-  await expect(editor).toBeVisible();
-  await editor.tap();
-  await sleep(200);
-  await editor.typeText('hello world, this an automated note creation');
-});
- */

apps/mobile/e2e/test.ids.js

@@ -0,0 +1,34 @@
+export const notesnook = {
+  ids: {
+    default: {
+      root: '1',
+      menu: '2',
+      dialog: {
+        yes: '3',
+        no: '4',
+      },
+      editor: '5',
+      header: {
+        buttons: {
+          left: '6',
+          right: '7',
+        },
+      },
+    },
+    dialogs: {
+      notebook: {
+        inputs: {
+          title: '8',
+          description: '9',
+          topic: '10',
+        },
+        buttons: {
+          add: '11',
+        },
+      },
+    },
+    menu: {
+      nightmode:"12"
+    }
+  },
+};

apps/mobile/e2e/tests/misc.e2e.js

@@ -0,0 +1,31 @@
+const { notesnook } = require("../test.ids");
+const { sleep } = require("./utils.test");
+
+it('App initialization', async () => {
+	await expect(element(by.id(notesnook.ids.default.root))).toBeVisible();
+});
+
+it('Drawer Navigation', async () => {
+	let menu = element(by.id(notesnook.ids.default.header.buttons.left));
+	await menu.tap();
+	 await element(by.text('Notebooks')).tap();
+	menu.tap();
+	await element(by.text('Favorites')).tap();
+	menu.tap();
+	await element(by.text('Trash')).tap();
+	menu.tap();
+	await element(by.text('Tags')).tap();
+	menu.tap();
+	await element(by.text('Settings')).tap();
+  });
+
+
+it('Dark Mode', async () => {
+	let menu = element(by.id(notesnook.ids.default.header.buttons.left));
+	menu.tap();
+	let nightmode = element(by.id(notesnook.ids.menu.nightmode))
+	await nightmode.tap();
+	await nightmode.tap(); 
+	menu.tap();
+  }); 
+

apps/mobile/e2e/tests/utils.test.js

@@ -0,0 +1,2 @@
+export const sleep = (duration) =>
+new Promise((resolve) => setTimeout(() => resolve(), duration));

apps/mobile/initializer.root.js

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {Dimensions, View} from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 import SplashScreen from 'react-native-splash-screen';
+import { notesnook } from './e2e/test.ids';
 import ContextMenu from './src/components/ContextMenu';
 import {DialogManager} from './src/components/DialogManager';
 import {DummyText} from './src/components/DummyText';
@@ -181,6 +182,7 @@ const AppStack = React.memo(
     return (
       <View
         onLayout={_onLayout}
+        testID={notesnook.ids.default.root}
         style={{
           width: '100%',
           height: '100%',

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

@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 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 {ToastEvent} from '../../services/EventManager';
@@ -283,6 +284,7 @@ export class AddNotebookDialog extends React.Component {
 
               <TextInput
                 ref={(ref) => (this.titleRef = ref)}
+                testID={notesnook.ids.dialogs.notebook.inputs.title}
                 style={[
                   styles.input,
                   {
@@ -315,6 +317,7 @@ export class AddNotebookDialog extends React.Component {
               />
               <TextInput
                 ref={(ref) => (this.descriptionRef = ref)}
+                testID={notesnook.ids.dialogs.notebook.inputs.description}
                 style={[
                   styles.input,
                   {
@@ -348,6 +351,7 @@ export class AddNotebookDialog extends React.Component {
               <View style={styles.topicContainer}>
                 <TextInput
                   ref={(ref) => (this.topicInputRef = ref)}
+                  testID={notesnook.ids.dialogs.notebook.inputs.topic}
                   onChangeText={(value) => {
                     this.currentInputValue = value;
                     if (this.prevItem !== null) {
@@ -391,6 +395,7 @@ export class AddNotebookDialog extends React.Component {
                 />
                 <TouchableOpacity
                   onPress={this.onSubmit}
+                  testID={notesnook.ids.dialogs.notebook.buttons.add}
                   style={[
                     styles.addBtn,
                     {
@@ -436,6 +441,7 @@ export class AddNotebookDialog extends React.Component {
               <DialogButtons
                 negativeTitle="Cancel"
                 positiveTitle={toEdit && toEdit.dateCreated ? 'Save' : 'Add'}
+                
                 onPressPositive={this.addNewNotebook}
                 onPressNegative={this.close}
               />

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

@@ -53,6 +53,7 @@ export const Button = ({
   type = 'transparent',
   iconSize = SIZE.md,
   style = {},
+  testID
 }) => {
   const [state] = useTracked();
   const {colors} = state;
@@ -61,6 +62,7 @@ export const Button = ({
     <PressableButton
       onPress={onPress}
       disabled={loading}
+      testID={testID}
       color={colors[BUTTON_TYPES[type].primary]}
       selectedColor={colors[BUTTON_TYPES[type].selected]}
       alpha={!colors.night ? -0.04 : 0.04}

apps/mobile/src/components/Dialog/DialogButtons.js

@@ -5,6 +5,7 @@ import {SIZE} from '../../utils/SizeUtils';
 import {Button} from '../Button';
 import Paragraph from '../Typography/Paragraph';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {notesnook} from '../../../e2e/test.ids';
 
 const DialogButtons = ({
   onPressPositive,
@@ -46,6 +47,7 @@ const DialogButtons = ({
         <Button
           onPress={onPressNegative}
           fontSize={SIZE.md}
+          testID={notesnook.ids.default.dialog.no}
           type="gray"
           title={negativeTitle}
         />
@@ -53,6 +55,7 @@ const DialogButtons = ({
           <Button
             onPress={onPressPositive}
             fontSize={SIZE.md}
+            testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10,
             }}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { notesnook } from '../../../e2e/test.ids';
 import { useTracked } from '../../provider';
 import Navigation from '../../services/Navigation';
 import { SIZE } from '../../utils/SizeUtils';
@@ -20,7 +21,7 @@ export const HeaderLeftMenu = () => {
     <>
       {deviceMode === 'mobile' || currentScreen === 'search' ? (
         <ActionIcon
-          testID="left_menu_button"
+          testID={notesnook.ids.default.header.buttons.left}
           customStyle={{
             justifyContent: 'center',
             alignItems: 'center',

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import {FlatList, ScrollView, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
@@ -60,7 +61,7 @@ export const Menu = React.memo(
         style={{
           height: '100%',
           width: '100%',
-          backgroundColor: "white",
+          backgroundColor: colors.bg,
           paddingTop: insets.top,
         }}>
         <FlatList
@@ -76,6 +77,7 @@ export const Menu = React.memo(
               {MenuItemsList.map((item, index) => (
                 <MenuListItem
                   item={item}
+                  testID={item.name}
                   index={index}
                 />
               ))}
@@ -87,7 +89,7 @@ export const Menu = React.memo(
 
         {BottomItemsList.map((item, index) => (
           <MenuListItem
-            testID={item.name == 'Night mode' ? 'night_mode' : item.name}
+            testID={item.name == 'Night mode' ? notesnook.ids.menu.nightmode : item.name}
             key={item.name}
             item={item}
             index={index}

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

@@ -12,14 +12,14 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent,
 } from '../../services/EventManager';
-import {dHeight, getElevation} from '../../utils';
+import {dHeight} from '../../utils';
 import {db} from '../../utils/DB';
 import {
   eApplyChanges,
   eShowMergeDialog,
   refreshNotesPage,
 } from '../../utils/Events';
-import {normalize, ph, pv, SIZE} from '../../utils/SizeUtils';
+import {normalize, SIZE} from '../../utils/SizeUtils';
 import {Button} from '../Button';
 import BaseDialog from '../Dialog/base-dialog';
 import DialogButtons from '../Dialog/dialog-buttons';

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

@@ -35,7 +35,7 @@ export const NoteItemWrapper = ({item, index, isTrash = false}) => {
       newNote.title === note.title &&
       newNote.headline === note.headline
     ) {
-      console.log('returning from here',newNote.headline,note.headline);
+      console.log('returning from here', newNote.headline, note.headline);
       return;
     }
     setNote(newNote);
@@ -60,9 +60,6 @@ export const NoteItemWrapper = ({item, index, isTrash = false}) => {
   };
 
   const onPress = async (event) => {
-
-    eSendEvent(eShowMergeDialog, note);
-    return;
     if (note.conflicted) {
       eSendEvent(eShowMergeDialog, note);
       return;
@@ -72,11 +69,11 @@ export const NoteItemWrapper = ({item, index, isTrash = false}) => {
       return;
     } else if (note.locked) {
       openVault({
-        item:item,
-        novault:true,
-        locked:true,
-        goToEditor:true,
-      })
+        item: item,
+        novault: true,
+        locked: true,
+        goToEditor: true,
+      });
       return;
     }
     if (isTrash) {
@@ -86,7 +83,6 @@ export const NoteItemWrapper = ({item, index, isTrash = false}) => {
     }
     if (DDS.isPhone || DDS.isSmallTab) {
       tabBarRef.current?.goToPage(1);
-      //openEditorAnimation(event.nativeEvent);
     }
   };
 

apps/mobile/src/provider/DefaultState.js

@@ -17,7 +17,7 @@ export const defaultState = {
   colorNotes: [],
   user: null,
   fullscreen:false,
-  premiumUser: false,
+  premiumUser: true,
   settings: {
     showToolbarOnTop: false,
     showKeyboardOnOpen: false,

apps/mobile/src/views/Editor/EditorHeader.js

@@ -179,6 +179,7 @@ const EditorHeader = () => {
         }}>
         {DDS.isLargeTablet() && !fullscreen ? null : (
           <ActionIcon
+            testID="editor_back_key"
             name="arrow-left"
             color={colors.heading}
             onPress={_onBackPress}

apps/mobile/src/views/Editor/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import {Platform, TextInput, View} from 'react-native';
 import WebView from 'react-native-webview';
+import { notesnook } from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import EditorHeader from './EditorHeader';
 import {
@@ -29,7 +30,7 @@ const Editor = () => {
       />
       <EditorHeader />
       <WebView
-        testID="editor"
+        testID={notesnook.ids.default.editor}
         ref={EditorWebView}
         onError={(error) => console.log(error)}
         onLoad={async (event) =>