Cypress-IDs and prettier for tests (#1634)

* Add cy.getById method and run prettier

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

src/components/landing-layout/navigation/header-bar/header-bar.tsx

@@ -14,6 +14,7 @@ import { NewUserNoteButton } from '../new-user-note-button'
 import { SignInButton } from '../sign-in-button'
 import { UserDropdown } from '../user-dropdown'
 import './header-bar.scss'
+import { cypressId } from '../../../../utils/cypress-attribute'
 
 const HeaderBar: React.FC = () => {
   useTranslation()
@@ -22,10 +23,10 @@ const HeaderBar: React.FC = () => {
   return (
     <Navbar className='justify-content-between'>
       <div className='nav header-nav'>
-        <HeaderNavLink to='/intro' id='navLinkIntro'>
+        <HeaderNavLink to='/intro' {...cypressId('navLinkIntro')}>
           <Trans i18nKey='landing.navigation.intro' />
         </HeaderNavLink>
-        <HeaderNavLink to='/history' id='navLinkHistory'>
+        <HeaderNavLink to='/history' {...cypressId('navLinkHistory')}>
           <Trans i18nKey='landing.navigation.history' />
         </HeaderNavLink>
       </div>

src/components/landing-layout/navigation/header-nav-link.tsx

@@ -7,17 +7,18 @@
 import React from 'react'
 import { Nav } from 'react-bootstrap'
 import { LinkContainer } from 'react-router-bootstrap'
+import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
+import { cypressId } from '../../../utils/cypress-attribute'
 
-export interface HeaderNavLinkProps {
+export interface HeaderNavLinkProps extends PropsWithDataCypressId {
   to: string
-  id: string
 }
 
-export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, id, children }) => {
+export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, children, ...props }) => {
   return (
     <Nav.Item>
       <LinkContainer to={to}>
-        <Nav.Link id={id} className='text-light' href={to}>
+        <Nav.Link className='text-light' href={to} {...cypressId(props)}>
           {children}
         </Nav.Link>
       </LinkContainer>

src/components/landing-layout/navigation/new-guest-note-button.tsx

@@ -9,12 +9,17 @@ import { Button } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { LinkContainer } from 'react-router-bootstrap'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { cypressId } from '../../../utils/cypress-attribute'
 
 export const NewGuestNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
     <LinkContainer to={'/new'} title={t('landing.navigation.newGuestNote')}>
-      <Button variant='primary' size='sm' className='d-inline-flex align-items-center'>
+      <Button
+        variant='primary'
+        size='sm'
+        className='d-inline-flex align-items-center'
+        {...cypressId('new-guest-note-button')}>
         <ForkAwesomeIcon icon='plus' className='mx-1' />
         <span>
           <Trans i18nKey='landing.navigation.newGuestNote' />

src/components/landing-layout/navigation/new-user-note-button.tsx

@@ -9,12 +9,17 @@ import { Button } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { LinkContainer } from 'react-router-bootstrap'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { cypressId } from '../../../utils/cypress-attribute'
 
 export const NewUserNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
     <LinkContainer to={'/new'} title={t('landing.navigation.newNote')}>
-      <Button variant='primary' size='sm' className='d-inline-flex align-items-center'>
+      <Button
+        variant='primary'
+        size='sm'
+        className='d-inline-flex align-items-center'
+        {...cypressId('new-note-button')}>
         <ForkAwesomeIcon icon='plus' className='mx-1' />
         <span>
           <Trans i18nKey='landing.navigation.newNote' />

src/components/landing-layout/navigation/user-dropdown.tsx

@@ -12,6 +12,7 @@ import { clearUser } from '../../../redux/user/methods'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { UserAvatar } from '../../common/user-avatar/user-avatar'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { cypressId } from '../../../utils/cypress-attribute'
 
 export const UserDropdown: React.FC = () => {
   useTranslation()
@@ -23,19 +24,19 @@ export const UserDropdown: React.FC = () => {
 
   return (
     <Dropdown alignRight>
-      <Dropdown.Toggle size='sm' variant='dark' id='dropdown-user' className={'d-flex align-items-center'}>
+      <Dropdown.Toggle size='sm' variant='dark' {...cypressId('user-dropdown')} className={'d-flex align-items-center'}>
         <UserAvatar name={user.name} photo={user.photo} />
       </Dropdown.Toggle>
 
       <Dropdown.Menu className='text-start'>
         <LinkContainer to={'/n/features'}>
-          <Dropdown.Item dir='auto'>
+          <Dropdown.Item dir='auto' {...cypressId('user-dropdown-features-button')}>
             <ForkAwesomeIcon icon='bolt' fixedWidth={true} className='mx-2' />
             <Trans i18nKey='editor.help.documents.features' />
           </Dropdown.Item>
         </LinkContainer>
         <LinkContainer to={'/profile'}>
-          <Dropdown.Item dir='auto'>
+          <Dropdown.Item dir='auto' {...cypressId('user-dropdown-profile-button')}>
             <ForkAwesomeIcon icon='user' fixedWidth={true} className='mx-2' />
             <Trans i18nKey='profile.userProfile' />
           </Dropdown.Item>
@@ -44,7 +45,8 @@ export const UserDropdown: React.FC = () => {
           dir='auto'
           onClick={() => {
             clearUser()
-          }}>
+          }}
+          {...cypressId('user-dropdown-sign-out-button')}>
           <ForkAwesomeIcon icon='sign-out' fixedWidth={true} className='mx-2' />
           <Trans i18nKey='login.signOut' />
         </Dropdown.Item>