added e2e tests (#298)

- added e2e tests for
  - banner
  - history
  - intro
  - language
  - link
- added e2e workflow
- added cypress badge to README

src/components/common/links/external-link.tsx

@@ -3,11 +3,12 @@ import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../show-if/show-if'
 import { LinkWithTextProps } from './types'
 
-export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
+export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light' }) => {
   return (
     <a href={href}
       target="_blank"
       rel="noopener noreferrer"
+      id={id}
       className={className}
       dir='auto'
     >

src/components/common/links/internal-link.tsx

@@ -4,10 +4,12 @@ import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../show-if/show-if'
 import { LinkWithTextProps } from './types'
 
-export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
+export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light' }) => {
   return (
     <Link to={href}
-      className={className}>
+      className={className}
+      id={id}
+    >
       <ShowIf condition={!!icon}>
         <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true}/>&nbsp;
       </ShowIf>

src/components/common/links/types.ts

@@ -2,16 +2,17 @@ import { StringMap, TOptionsBase } from 'i18next'
 import { IconName } from '../fork-awesome/fork-awesome-icon'
 
 export interface GeneralLinkProp {
-  href: string;
-  icon?: IconName;
+  href: string
+  icon?: IconName
+  id?: string
   className?: string
 }
 
 export interface LinkWithTextProps extends GeneralLinkProp {
-  text: string;
+  text: string
 }
 
 export interface TranslatedLinkProps extends GeneralLinkProp{
-  i18nKey: string;
+  i18nKey: string
   i18nOption?: (TOptionsBase & StringMap) | string
 }

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

@@ -17,10 +17,10 @@ const HeaderBar: React.FC = () => {
   return (
     <Navbar className="justify-content-between">
       <div className="nav header-nav">
-        <HeaderNavLink to="/intro">
+        <HeaderNavLink to="/intro" id='navLinkIntro'>
           <Trans i18nKey="landing.navigation.intro"/>
         </HeaderNavLink>
-        <HeaderNavLink to="/history">
+        <HeaderNavLink to="/history" id='navLinkHistory'>
           <Trans i18nKey="landing.navigation.history"/>
         </HeaderNavLink>
       </div>

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

@@ -1,16 +1,17 @@
+import React from 'react'
 import { Nav } from 'react-bootstrap'
 import { LinkContainer } from 'react-router-bootstrap'
-import React from 'react'
 
 export interface HeaderNavLinkProps {
   to: string
+  id: string
 }
 
-export const HeaderNavLink: React.FC<HeaderNavLinkProps> = (props) => {
+export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, id, children }) => {
   return (
     <Nav.Item>
-      <LinkContainer to={props.to}>
-        <Nav.Link className="text-light" href={props.to}>{props.children}</Nav.Link>
+      <LinkContainer to={to}>
+        <Nav.Link id={id} className="text-light" href={to}>{children}</Nav.Link>
       </LinkContainer>
     </Nav.Item>
   )

src/components/landing/layout/version-info/version-info.tsx

@@ -34,8 +34,8 @@ export const VersionInfo: React.FC = () => {
 
   return (
     <Fragment>
-      <Link to={'#'} className={'text-light'} onClick={handleShow}><Trans i18nKey={'landing.versionInfo.versionInfo'}/></Link>
-      <Modal show={show} onHide={handleClose} animation={true}>
+      <Link id='version' to={'#'} className={'text-light'} onClick={handleShow}><Trans i18nKey={'landing.versionInfo.versionInfo'}/></Link>
+      <Modal id='versionModal' show={show} onHide={handleClose} animation={true}>
         <Modal.Body className="text-dark">
           <h3><Trans i18nKey={'landing.versionInfo.title'}/></h3>
           <Row>