Implement date recency (#545)

* feat: update cypress setup - Config cypress to run component tests * feat: show date recency - implement tests for date recency - config update * chore: lockfile * fix: attempt fix failing test - update cypress config - update TypeTweet test file - add window.localStorage
stakwork · Nov 2, 2023 · 1c9d36f · 1c9d36f
1 parent 37e38ea
commit 1c9d36f
Show file tree

Hide file tree

Showing 13 changed files with 1,067 additions and 794 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -26,5 +26,13 @@ export default defineConfig({
     viewportWidth: 1440,
     watchForFileChanges: false,
   },
+  component: {
+    supportFile: './cypress/support/components.ts',
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+  },
   projectId: '5pz59y',
 })
diff --git a/cypress.d.ts b/cypress.d.ts
@@ -0,0 +1,13 @@
+import { mount } from 'cypress/react18'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -1,3 +1,5 @@
+import '@testing-library/cypress/add-commands'
+
 /// <reference types="cypress" />
 // ***********************************************
 // This example commands.ts shows you how to

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/cypress/support/components.ts b/cypress/support/components.ts
@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+// Ensure global app styles are loaded:
+import '../../src/index.css'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/package.json b/package.json
@@ -79,6 +79,7 @@
     "test-coverage": "node ./cypress/coverageTest.js",
     "cy-open": "cypress open",
     "cy-run": "cypress run",
+    "cy-comp": "cypress run --component",
     "format": "prettier --write --config prettier.config.js ./src",
     "prettier": "npx prettier --config prettier.config.js --check ./src",
     "postinstall": "husky install",
@@ -128,6 +129,7 @@
     "@commitlint/config-conventional": "^17.1.0",
     "@cypress/code-coverage": "^3.11.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@testing-library/cypress": "^10.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -146,6 +148,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "cypress": "12.16.0",
+    "cypress-vite": "^1.4.2",
     "eslint": "^8.41.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",

diff --git a/src/components/App/SideBar/Relevance/Episode/TypeTweet/TypeTweet.cy.tsx b/src/components/App/SideBar/Relevance/Episode/TypeTweet/TypeTweet.cy.tsx
@@ -0,0 +1,126 @@
+import { TypeTweet, Props } from '.'
+
+function unixTimestampInSeconds() {
+  return Math.floor(Date.now() / 1000)
+}
+
+describe('TypeTweet', () => {
+  const currentUnixTimestamp = unixTimestampInSeconds()
+
+  it('should not render when date is false', () => {
+    const props: Props = {
+      text: 'Hello, world! This is a test tweet.',
+      date: 0,
+      name: 'Test User',
+      twitterHandle: 'testuser',
+      verified: false,
+    }
+
+    cy.mount(
+      <div style={{ backgroundColor: 'black' }}>
+        <TypeTweet {...props} />
+      </div>,
+    )
+
+    cy.get('[data-testid="date-text"]').should('not.be.visible')
+  })
+
+  it('should display "15 seconds ago"', () => {
+    const timeValueFromNow = Date.now() - 15 * 1000
+    const t = new Date(timeValueFromNow).getTime() / 1000
+
+    const props: Props = {
+      text: 'Hello, world! This is a test tweet.',
+      date: t,
+      name: 'Test User',
+      twitterHandle: 'testuser',
+      verified: false,
+    }
+
+    cy.mount(
+      <div style={{ backgroundColor: 'black' }}>
+        <TypeTweet {...props} />
+      </div>,
+    )
+
+    cy.findByText('15 seconds ago').should('be.visible')
+  })
+
+  it('should display "1 minute ago"', () => {
+    const twoDaysAgo = currentUnixTimestamp - 60
+
+    const props: Props = {
+      text: 'Hello, world! This is a test tweet.',
+      date: twoDaysAgo,
+      name: 'Test User',
+      twitterHandle: 'testuser',
+      verified: false,
+    }
+
+    cy.mount(
+      <div style={{ backgroundColor: 'black' }}>
+        <TypeTweet {...props} />
+      </div>,
+    )
+
+    cy.findByText('1 minute ago').should('be.visible')
+  })
+
+  it('should display "25 mins ago"', () => {
+    const timeFromNow = currentUnixTimestamp - 1500
+
+    const props: Props = {
+      text: 'Hello, world! This is a test tweet.',
+      date: timeFromNow,
+      name: 'Test User',
+      twitterHandle: 'testuser',
+      verified: false,
+    }
+
+    cy.mount(
+      <div style={{ backgroundColor: 'black' }}>
+        <TypeTweet {...props} />
+      </div>,
+    )
+  })
+
+  it('should display "1 hour ago"', () => {
+    const twoDaysAgo = currentUnixTimestamp - 3600
+
+    const props: Props = {
+      text: 'Hello, world! This is a test tweet.',
+      date: twoDaysAgo,
+      name: 'Test User',
+      twitterHandle: 'testuser',
+      verified: false,
+    }
+
+    cy.mount(
+      <div style={{ backgroundColor: 'black' }}>
+        <TypeTweet {...props} />
+      </div>,
+    )
+
+    cy.findByText('1 hour ago').should('be.visible')
+  })
+
+  it('should display "23 hours ago"', () => {
+    const timeValueFromNow = unixTimestampInSeconds() - 82800
+
+    const props: Props = {
+      text: 'Hello, world! This is a test tweet.',
+      date: timeValueFromNow,
+      name: 'Test User',
+      twitterHandle: 'testuser',
+      verified: false,
+    }
+
+    cy.mount(
+      <div style={{ backgroundColor: 'black' }}>
+        <TypeTweet {...props} />
+      </div>,
+    )
+
+    cy.findByText('23 hours ago').should('be.visible')
+  })
+})
diff --git a/src/components/App/SideBar/Relevance/Episode/TypeTweet/index.tsx b/src/components/App/SideBar/Relevance/Episode/TypeTweet/index.tsx
@@ -5,7 +5,7 @@ import { Flex } from '~/components/common/Flex'
 import { colors } from '~/utils/colors'
 import { Date } from '..'
 
-type Props = {
+export type Props = {
   text: string
   imageUrl?: string
   twitterHandle?: string
@@ -35,8 +35,8 @@ export const TypeTweet = ({ text, imageUrl, date, twitterHandle, name, verified
 
     <Flex grow={1} shrink={1}>
       <TwitText data-testid="episode-description">{text}</TwitText>
-      <Flex direction="row" justify="flex-start">
-        {Boolean(date) && <Date>{moment.unix(date).format('ll')}</Date>}
+      <Flex data-testid="date-text" direction="row" justify="flex-start">
+        {Boolean(date) && <Date>{moment.unix(date).fromNow()}</Date>}
       </Flex>
     </Flex>
   </Flex>

diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -40,7 +40,7 @@ const EpisodeWrapper = styled(Flex).attrs({
   }
 `
 
-type Props = {
+export type Props = {
   boostCount: number
   date: number
   episodeTitle: string
@@ -103,8 +103,8 @@ export const Episode = ({
             </Flex>
 
             <Description data-testid="episode-description">{episodeTitle}</Description>
-            <Flex direction="row" justify="flex-start">
-              {Boolean(date) && <Date>{moment.unix(date).format('ll')}</Date>}
+            <Flex align="center" direction="row" justify="flex-start">
+              {Boolean(date) && <Date>{moment.unix(date).fromNow()}</Date>}
               {Boolean(showTitle) && <Title>{showTitle}</Title>}
               {!isSelectedView && boostCount > 0 && (
                 <Flex style={{ marginLeft: 'auto' }}>

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,6 +1,20 @@
 /* eslint-disable no-console */
+import moment from 'moment'
+
 const { origin, host } = window.location
 
+moment.relativeTimeThreshold('h', 24)
+
+moment.updateLocale('en', {
+  relativeTime: {
+    s: (number) => `${number} ${number > 1 ? 'seconds' : 'second'}`,
+    m: '1 minute',
+    h: (number) => `${number} ${number > 1 ? 'hours' : 'hour'}`,
+    d: '1 day',
+    M: '1 month',
+  },
+})
+
 export const isDevelopment = !!(
   origin === 'http://localhost:3000' ||
   origin === 'http://localhost:3001' ||

diff --git a/src/utils/getLSat/index.ts b/src/utils/getLSat/index.ts
@@ -10,7 +10,7 @@ import * as sphinx from 'sphinx-bridge-kevkevinpal'
 export const getLSat = async (): Promise<string> => {
   try {
     // check if lsat exist in local storage
-    const localLsat = localStorage.getItem('lsat')
+    const localLsat = window.localStorage.getItem('lsat')
 
     if (localLsat) {
       const lsat = JSON.parse(localLsat)
@@ -29,7 +29,7 @@ export const getLSat = async (): Promise<string> => {
       const storedLsat = await sphinx.getLsat(window.location.host)
 
       if (storedLsat.macaroon) {
-        localStorage.setItem(
+        window.localStorage.setItem(
           'lsat',
           JSON.stringify({
             macaroon: storedLsat.macaroon,

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "types": ["vite/client", "vite-plugin-svgr/client", "cypress", "@testing-library/cypress"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +19,11 @@
     "strictNullChecks": true,
     "jsx": "react-jsx"
   },
+  "baseUrl": ".",
+  "paths": {
+    "~/*": ["src/*"]
+  },
   "files": ["./vite-env.d.ts"],
-  "include": ["src"],
+  "include": ["src", "cypress.d.ts"],
   "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "**/__tests__/**"]
 }