Added cypress tests for saving links

packages/cypress/cypress/integration/library/save-link.js

@@ -0,0 +1,51 @@
+describe('save link', () => {
+  const title = 'Omnivore - Cypress Webpage Test'
+  const desc = 'OMNIvore'
+
+  const TEST_LINK = 'https://blog.omnivore.app/p/getting-started-with-omnivore'
+
+  const WEBPAGE_URL = 'https://sites.google.com/gitstart.dev/webpage/home'
+
+  beforeEach(() => {
+    const email = 'tester@omnivore.app'
+    const password = 'testpassword'
+
+    cy.login(email, password)
+    cy.visit('/home')
+
+    //if for whatever reason, there are no already existing links,
+    //trying to get all links fails and throws an error
+    //so by adding a dummy link first, we circumvent this error
+    cy.addItem(TEST_LINK)
+
+    //it takes quite a while for the added link to show up after adding.
+    cy.wait(5000)
+
+    //by adding a link above, the query below cannot fail
+    // find and delete any already existing link.
+    cy.findAllByTestId('linkedItemCard').each(() => {
+      cy.get('body').type('j')
+      cy.get('body').type('r')
+    })
+  })
+
+  it('should save a web page', () => {
+    //add the link
+    cy.addItem(WEBPAGE_URL)
+
+    //wait for the link to be on the page
+    cy.wait(5000)
+
+    //confirm that the title and description on the card is correct
+    cy.findAllByTestId('linkedItemCard').first().within(() => {
+      cy.findByTestId('listTitle').contains(title)
+      cy.findByTestId('listDesc').contains(desc)
+    })
+
+    //confirm that the title and description on the article page is correct
+    cy.findAllByTestId('linkedItemCard').first().click()
+    cy.wait(5000)
+    cy.findByTestId('article-headline').contains(title)
+    cy.findByTestId('article-inner').contains(desc)
+  })
+})

packages/cypress/cypress/support/commands.js

@@ -13,4 +13,29 @@ Cypress.Commands.add('login', (email, password) => {
     cy.getCookie('auth').should('exist')
     cy.location('pathname').should('include', '/home')
   })
-})
+})
+
+Cypress.Commands.add('registerEmail', (email, username, password, fullName) => {
+  cy.visit('/email-registration')
+
+  cy.get('input[name=email]').type(email)
+  cy.get('input[name=username]').type(username)
+  cy.get('input[name=password]').type(password)
+  cy.get('input[name=name]').type(fullName)
+
+  cy.get('form').submit()
+
+  // we should be redirected to /dashboard
+  cy.location('pathname').should('include', '/email-login')
+})
+
+Cypress.Commands.add('addItem', (link) => {
+  cy.get('body').type('a')
+
+  cy.focused().type(`${link}{enter}`)
+
+  // wait for the link to be added
+  cy.wait(2000)
+
+  cy.reload()
+})

packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx

@@ -138,6 +138,7 @@ export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
             WebkitLineClamp: 5,
             WebkitBoxOrient: 'vertical',
           }}
+          data-testid="listDesc"
         >
           {props.item.description}
         </StyledText>
@@ -171,6 +172,7 @@ function CardTitle(props: CardTitleProps): JSX.Element {
   return (
     <StyledText
       style="listTitle"
+      data-testid="listTitle"
       css={{
         mt: '0',
         mb: '0',

packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx

@@ -56,6 +56,7 @@ export function ListLinkedItemCardNarrow(
         <VStack>
           <StyledText
             style="listTitle"
+            data-testid="listTitle"
             css={{
               mt: '0px',
               mb: '$1',
@@ -146,6 +147,7 @@ export function ListLinkedItemCardWide(
       >
         <StyledText
           style="listTitle"
+          data-testid="listTitle"
           css={{ mt: '0px', mb: '$1', textAlign: 'left', lineHeight: 'normal' }}
         >
           {props.item.title}

packages/web/components/templates/article/Article.tsx

@@ -237,6 +237,7 @@ export function Article(props: ArticleProps): JSX.Element {
           maxWidth: '100%',
         }}
         className="article-inner-css"
+        data-testid="article-inner"
         dangerouslySetInnerHTML={{
           __html: props.content,
         }}

packages/web/components/templates/article/ArticleContainer.tsx

@@ -129,6 +129,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         <VStack alignment="start" distribution="start">
           <StyledText
             style="boldHeadline"
+            data-testid="article-headline"
             css={{ fontFamily: styles.fontFamily }}
           >
             {props.article.title}

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -385,6 +385,9 @@ export function HomeFeedContainer(props: HomeFeedContainerProps): JSX.Element {
         case 'archiveItem':
           handleCardAction('archive', activeItem)
           break
+        case 'removeItem':
+          handleCardAction('delete', activeItem)
+          break
         case 'markItemAsRead':
           handleCardAction('mark-read', activeItem)
           break
@@ -687,6 +690,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
             {props.items.map((linkedItem) => (
               <Box
                 className="linkedItemCard"
+                data-testid="linkedItemCard"
                 id={linkedItem.node.id}
                 tabIndex={0}
                 key={linkedItem.node.id}

packages/web/lib/keyboardShortcuts/navigationShortcuts.ts

@@ -82,6 +82,7 @@ type LibraryListKeyboardAction =
   | 'archiveItem'
   | 'markItemAsRead'
   | 'markItemAsUnread'
+  | 'removeItem'
   | 'sortDescending'
   | 'sortAscending'
   | 'shareItem'
@@ -128,6 +129,12 @@ export function libraryListCommands(
       shortcutKeyDescription: 'e',
       callback: () => actionHandler('archiveItem'),
     },
+    {
+      shortcutKeys: ['r'],
+      actionDescription: 'Remove item',
+      shortcutKeyDescription: 'r',
+      callback: () => actionHandler('removeItem'),
+    },
     {
       shortcutKeys: ['l'],
       actionDescription: 'Edit item labels',