Fixed tests now that welcome note is generated

cypress/integration/note.spec.ts

@@ -11,7 +11,7 @@ import {
   testIDShouldNotExist,
 } from './utils/testHelperUtils'
 import {
-  assertActiveNoteIsNew,
+  assertNewNoteCreated,
   assertNoteEditorCharacterCount,
   assertNoteEditorLineCount,
   assertNoteListLengthEquals,
@@ -33,21 +33,20 @@ describe('Manage notes test', () => {
   beforeEach(() => {
     navigateToAllNotes()
     clickCreateNewNote()
-    assertNoteListLengthEquals(1)
   })
 
   it('should try to create a few new notes', () => {
     clickCreateNewNote()
-    assertNoteListLengthEquals(1)
-    assertActiveNoteIsNew()
+    assertNoteListLengthEquals(2)
+    assertNewNoteCreated()
 
     clickCreateNewNote()
-    assertNoteListLengthEquals(1)
-    assertActiveNoteIsNew()
+    assertNoteListLengthEquals(2)
+    assertNewNoteCreated()
 
     clickCreateNewNote()
-    assertNoteListLengthEquals(1)
-    assertActiveNoteIsNew()
+    assertNoteListLengthEquals(2)
+    assertNewNoteCreated()
   })
 
   it('should update a note', () => {
@@ -118,7 +117,6 @@ describe('Manage notes test', () => {
     // make sure the new note is in the trash
     navigateToTrash()
     assertNoteListLengthEquals(1)
-    assertActiveNoteIsNew()
   })
 
   it('should empty notes in trash', () => {
@@ -156,7 +154,7 @@ describe('Manage notes test', () => {
     // move note to trash and make sure All Notes is empty
     clickNoteOptions()
     clickNoteOptionTrash()
-    assertNoteListLengthEquals(0)
+    assertNoteListLengthEquals(1)
 
     // navigate to trash and restore the active note
     navigateToTrash()
@@ -170,6 +168,6 @@ describe('Manage notes test', () => {
 
     // make sure the note is back in All Notes
     navigateToAllNotes()
-    assertNoteListLengthEquals(1)
+    assertNoteListLengthEquals(2)
   })
 })

cypress/integration/utils/testHelperEnums.ts

@@ -14,7 +14,8 @@ enum TestIDEnum {
   FAVORITES = 'favorites',
   INACTIVE_NOTE = 'inactive-note',
   NOTE_LIST = 'note-list',
-  NOTE_OPTIONS = 'note-options-div',
+  NOTE_LIST_ITEM = 'note-list-item-',
+  NOTE_OPTIONS_DIV = 'note-options-div-',
   NOTE_OPTIONS_NAV = 'note-options-nav',
   NOTE_OPTION_DELETE_PERMANENTLY = 'note-option-delete-permanently',
   NOTE_OPTION_DOWNLOAD = 'note-option-download',
@@ -32,6 +33,10 @@ const wrapWithTestIDTag = (testIDEnum: TestIDEnum | string) => {
   return '[data-testid="' + testIDEnum + '"]'
 }
 
+const getDynamicTestID = (testID: string) => {
+  return cy.get(wrapWithTestIDTag(testID))
+}
+
 const getTestID = (testIDEnum: TestIDEnum) => {
   return cy.get(wrapWithTestIDTag(testIDEnum))
 }
@@ -55,4 +60,12 @@ enum TextEnum {
   SYNC_NOTES = 'Sync notes',
 }
 
-export { entryPoint, dynamicTimeCategoryName, getTestID, TestIDEnum, TextEnum, wrapWithTestIDTag }
+export {
+  entryPoint,
+  dynamicTimeCategoryName,
+  getDynamicTestID,
+  getTestID,
+  TestIDEnum,
+  TextEnum,
+  wrapWithTestIDTag,
+}

cypress/integration/utils/testHelperUtils.ts

@@ -3,6 +3,7 @@
 
 import { entryPoint, TestIDEnum, TextEnum, wrapWithTestIDTag } from './testHelperEnums'
 
+// takes a built string instead of a TestIDEnum prefer clickTestID() when possible
 const clickDynamicTestID = (dynamicTestID: string) => {
   cy.get(wrapWithTestIDTag(dynamicTestID)).click()
 }

cypress/integration/utils/testNotesHelperUtils.ts

@@ -1,11 +1,11 @@
 // testNotesHelperUtils.ts
 // Utility functions for use in note tests
 
-import { getTestID, TestIDEnum, TextEnum } from './testHelperEnums'
+import { getDynamicTestID, getTestID, TestIDEnum, TextEnum } from './testHelperEnums'
 import { clickDynamicTestID, clickTestID, testIDShouldExist } from './testHelperUtils'
 
-const assertActiveNoteIsNew = () => {
-  getTestID(TestIDEnum.ACTIVE_NOTE).should('contain', TextEnum.NEW_NOTE)
+const assertNewNoteCreated = () => {
+  getDynamicTestID(TestIDEnum.NOTE_LIST_ITEM + '0').should('contain', TextEnum.NEW_NOTE)
 }
 
 const assertNoteEditorCharacterCount = (expectedCharacterCount: number) => {
@@ -45,16 +45,9 @@ const clickEmptyTrash = () => {
   clickTestID(TestIDEnum.EMPTY_TRASH_BUTTON)
 }
 
-const clickNoteOptions = (extraQualifier?: number | string) => {
-  // if no option qualifier is supplied, click active note
-  extraQualifier = extraQualifier ? extraQualifier : TestIDEnum.ACTIVE_NOTE
-
-  // build a test id for the note based on index
-  const noteOptionIndexTestID: string = extraQualifier
-    ? TestIDEnum.NOTE_OPTIONS + '-' + extraQualifier
-    : TestIDEnum.NOTE_OPTIONS
-
-  clickDynamicTestID(noteOptionIndexTestID)
+// click a note with the specified index
+const clickNoteOptions = (noteIndex: number = 0) => {
+  clickDynamicTestID(TestIDEnum.NOTE_OPTIONS_DIV + noteIndex)
 }
 
 const clickNoteOptionDeleteNotePermanently = () => {
@@ -79,7 +72,7 @@ const typeNoteEditor = (contentToType: string) => {
 }
 
 export {
-  assertActiveNoteIsNew,
+  assertNewNoteCreated,
   assertNoteEditorCharacterCount,
   assertNoteEditorLineCount,
   assertNoteListLengthEquals,

src/api/index.ts

@@ -27,7 +27,7 @@ const getUserNotes = () => (resolve: PromiseCallbackFun, reject: PromiseCallback
 
   // check if there is any data in localstorage
   if (!notes) {
-    // if there is none (i.e. new user), show the wecomeNote
+    // if there is none (i.e. new user), show the welcomeNote
     resolve(welcomeNote)
   } else if (JSON.parse(notes)) {
     // if there is (existing user), show the user's notes

src/api/welcomeNote.ts

@@ -6,14 +6,18 @@ import markdown from '../welcomeNote.md'
 export const welcomeNote = fetch(markdown)
   .then(res => res.text())
   .then(text => {
+    const currentDate = moment().format()
+
     const welcomeNote = [
       {
         id: uuid(),
         text,
         category: '',
         favorite: false,
-        created: moment().format(),
+        created: currentDate,
+        lastUpdated: currentDate,
       },
     ]
+
     return welcomeNote
   })

src/components/NoteListButton.test.tsx

@@ -4,8 +4,11 @@ import { render } from '@testing-library/react'
 import NoteListButton, { NoteListButtonProps } from 'components/NoteListButton'
 
 describe('<NoteListButton />', () => {
+  const noteListButtonDataTestID = 'notelist-button'
+
   it('renders the NoteListButton component', () => {
     const enabledProps: NoteListButtonProps = {
+      dataTestID: noteListButtonDataTestID,
       handler: jest.fn,
       label: 'Test',
     }
@@ -16,13 +19,14 @@ describe('<NoteListButton />', () => {
 
   it('renders the NoteListButton component as disabled', () => {
     const disabledProps: NoteListButtonProps = {
+      dataTestID: noteListButtonDataTestID,
       handler: jest.fn,
       label: 'Test',
       disabled: true,
     }
 
     const { getByTestId } = render(<NoteListButton {...disabledProps} />)
-    const button = getByTestId('Test')
+    const button = getByTestId(noteListButtonDataTestID)
     expect(button).toHaveAttribute('disabled')
   })
 })

src/containers/AppSidebar.tsx

@@ -283,7 +283,7 @@ const AppSidebar: React.FC = () => {
                     <FolderIcon size={15} className="app-sidebar-icon" color={iconColor} />
                     {editingCategoryId === category.id ? (
                       <input
-                        data-testID="category-edit"
+                        data-testid="category-edit"
                         className="category-edit"
                         type="text"
                         autoFocus
@@ -299,7 +299,7 @@ const AppSidebar: React.FC = () => {
                     )}
                   </form>
                   <div
-                    data-testID="category-options"
+                    data-testid="category-options"
                     className="category-options"
                     onClick={() => {
                       const notesNotTrash = notes.filter(note => !note.trash)

src/containers/NoteList.tsx

@@ -142,7 +142,7 @@ const NoteList: React.FC = () => {
         className="note-list"
         style={{ marginTop: showEmptyTrash ? '103px' : '60px' }}
       >
-        {filteredNotes.map(note => {
+        {filteredNotes.map((note: NoteItem, index: number) => {
           let noteTitle: string | React.ReactElement = getNoteTitle(note.text)
 
           if (searchValue) {
@@ -162,15 +162,9 @@ const NoteList: React.FC = () => {
             }
           }
 
-          const activeNote: boolean = note.id === activeNoteId
-
-          const activeOrInactiveTestIDQualifier: string = activeNote
-            ? 'active-note'
-            : 'inactive-note'
-
           return (
             <div
-              data-testid={activeOrInactiveTestIDQualifier}
+              data-testid={'note-list-item-' + index}
               className={note.id === activeNoteId ? 'note-list-each active' : 'note-list-each'}
               key={note.id}
               onClick={() => {
@@ -199,7 +193,7 @@ const NoteList: React.FC = () => {
               </div>
               <div
                 // TODO: make testID based off of index when we add that to a NoteItem object
-                data-testid={'note-options-div-' + activeOrInactiveTestIDQualifier}
+                data-testid={'note-options-div-' + index}
                 className={noteOptionsId === note.id ? 'note-options active ' : 'note-options'}
                 onClick={event => handleNoteOptionsClick(event, note.id)}
               >

src/helpers/index.ts

@@ -87,5 +87,6 @@ export const sortByLastUpdated = (a: NoteItem, b: NoteItem) => {
   let dateA = new Date(a.lastUpdated)
   let dateB = new Date(b.lastUpdated)
 
-  return dateA > dateB ? -1 : dateA < dateB ? 1 : 0
+  // the first note in the list should consistently sort after if it is created at the same time
+  return dateA < dateB ? 1 : -1
 }