Merge branch 'master' into chore/fix-up-firebase-emulator

.circleci/config.yml

@@ -100,6 +100,7 @@ commands:
       - checkout
       - *restore_yarn_cache
       - *install_packages
+      - *save_yarn_cache
   inject_instance_configuration:
     steps:
       - run:
@@ -325,6 +326,9 @@ jobs:
       - firebase_deploy:
           # token: $FIREBASE_DEPLOY_TOKEN # This should be set as environment variable
           alias: << parameters.DEPLOY_ALIAS >>
+      # run chromatic
+      - run:
+          command: npm run storybook:chromatic
 
   # Run cypress e2e tests on chrome
   test_e2e:

.github/workflows/chromatic.yml

@@ -0,0 +1,23 @@
+# Taken from https://www.chromatic.com/docs/github-actions/
+
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

package.json

@@ -43,6 +43,7 @@
     "test:madge": "npx madge --circular --extensions ts,tsx ./ --exclude src/stores",
     "storybook": "yarn workspace oa-components start",
     "storybook:build": "yarn build:themes && yarn workspace oa-components build:sb",
+    "storybook:chromatic": "yarn workspace oa-components chromatic",
     "docs": "yarn workspace oa-docs start",
     "install:clean": "yarn workspace oa-scripts install:clean",
     "postinstall": "husky install",

packages/components/package.json

@@ -15,14 +15,16 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx src --color",
     "new-component": "ts-node scripts/newComponent.ts",
     "test": "vitest",
-    "test-ci": "vitest --coverage --reporter=junit --outputFile.junit=./reports/output.xml"
+    "test-ci": "vitest --coverage --reporter=junit --outputFile.junit=./reports/output.xml",
+    "chromatic": "npx chromatic -b=build:sb"
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@faker-js/faker": "^7.6.0",
     "@mui/base": "^5.0.0-beta.18",
     "@react-icons/all-files": "^4.1.0",
+    "chromatic": "^11.4.0",
     "date-fns": "^2.29.3",
     "linkify-plugin-mention": "^4.0.2",
     "linkify-react": "^4.0.2",

packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx

@@ -1,26 +1,26 @@
-import { vi } from 'vitest'
+import { useState } from 'react'
 
 import { createFakeComments } from '../utils'
 import { ButtonShowReplies } from './ButtonShowReplies'
 
 import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
-  title: 'Components/ShowRepliesButton',
+  title: 'Components/ButtonShowReplies',
   component: ButtonShowReplies,
 } as Meta<typeof ButtonShowReplies>
 
-const mockSetIsShowReplies = vi.fn()
-
 export const Default: StoryFn<typeof ButtonShowReplies> = () => {
+  const [isShowReplies, setIsShowReplies] = useState<boolean>(false)
+
   const replies = createFakeComments(7)
 
   return (
     <ButtonShowReplies
       creatorName="Jeff"
-      isShowReplies={false}
       replies={replies}
-      setIsShowReplies={mockSetIsShowReplies}
+      isShowReplies={isShowReplies}
+      setIsShowReplies={() => setIsShowReplies(!isShowReplies)}
     />
   )
 }
@@ -33,7 +33,7 @@ export const RepliesShowing: StoryFn<typeof ButtonShowReplies> = () => {
       creatorName="Annabeth"
       isShowReplies={true}
       replies={replies}
-      setIsShowReplies={mockSetIsShowReplies}
+      setIsShowReplies={() => null}
     />
   )
 }
@@ -46,7 +46,7 @@ export const OneReply: StoryFn<typeof ButtonShowReplies> = () => {
       creatorName="Zelda"
       isShowReplies={false}
       replies={replies}
-      setIsShowReplies={mockSetIsShowReplies}
+      setIsShowReplies={() => null}
     />
   )
 }
@@ -57,7 +57,7 @@ export const NoReplies: StoryFn<typeof ButtonShowReplies> = () => {
       creatorName="Link"
       isShowReplies={false}
       replies={[]}
-      setIsShowReplies={mockSetIsShowReplies}
+      setIsShowReplies={() => null}
     />
   )
 }

packages/components/src/NotificationList/NotificationList.stories.tsx

@@ -4,7 +4,7 @@ import { InternalLink } from '../InternalLink/InternalLink'
 import { NotificationList } from './NotificationList'
 
 import type { Meta, StoryFn } from '@storybook/react'
-import type { UserNotificationList } from './NotificationList'
+import type { UserNotificationItem } from '../NotificationItem/NotificationItem'
 
 export default {
   title: 'Components/NotificationList',
@@ -74,10 +74,14 @@ const notifications = [
       </>
     ),
   },
-] as UserNotificationList
+] as UserNotificationItem[]
 
 export const Default: StoryFn<typeof NotificationList> = () => (
-  <NotificationList notifications={notifications} />
+  <NotificationList
+    notifications={notifications}
+    markAllNotified={() => {}}
+    markAllRead={() => {}}
+  />
 )
 
 export const LongList: StoryFn<typeof NotificationList> = () => (
@@ -88,9 +92,15 @@ export const LongList: StoryFn<typeof NotificationList> = () => (
       ...notifications,
       ...notifications,
     ]}
+    markAllNotified={() => {}}
+    markAllRead={() => {}}
   />
 )
 
 export const Empty: StoryFn<typeof NotificationList> = () => (
-  <NotificationList notifications={[]} />
+  <NotificationList
+    notifications={[]}
+    markAllNotified={() => {}}
+    markAllRead={() => {}}
+  />
 )

packages/components/src/NotificationList/NotificationList.tsx

@@ -5,15 +5,14 @@ import { Box, Card, Text } from 'theme-ui'
 import { Button } from '../Button/Button'
 import { NotificationItem } from '../NotificationItem/NotificationItem'
 
+import type { ThemeUIStyleObject } from 'theme-ui'
 import type { UserNotificationItem } from '../NotificationItem/NotificationItem'
 
-export type UserNotificationList = UserNotificationItem[]
-
 export interface Props {
-  notifications: UserNotificationList
-  sx?: any
-  markAllRead?: () => void
-  markAllNotified?: () => void
+  notifications: UserNotificationItem[]
+  markAllRead: () => void
+  markAllNotified: () => void
+  sx?: ThemeUIStyleObject
 }
 
 const ModalItem = styled(Box)`
@@ -30,19 +29,18 @@ export const NotificationList = (props: Props) => {
   const { notifications, markAllRead, markAllNotified } = props
   const sx = props.sx || {}
   useEffect(() => {
-    notifications.length && markAllNotified && markAllNotified()
-  }, [notifications, markAllNotified])
+    if (notifications.length) {
+      markAllNotified()
+    }
+  }, [])
 
   return (
     <Card sx={{ padding: 2, maxHeight: 310, overflowY: 'auto', ...sx }}>
       {notifications.length ? (
         <>
           <ModalItem style={{ textAlign: 'center' }}>Notifications</ModalItem>
           {notifications.map((notification, idx) => (
-            <NotificationItem
-              key={idx}
-              {...(notification as any)}
-            ></NotificationItem>
+            <NotificationItem key={idx} {...(notification as any)} />
           ))}
           <Button
             style={{

packages/components/src/index.ts

@@ -57,3 +57,4 @@ export { UserEngagementWrapper } from './UserEngagementWrapper/UserEngagementWra
 export { IconCountWithTooltip } from './IconCountWithTooltip/IconCountWithTooltip'
 export { DonationRequest } from './DonationRequest/DonationRequest'
 export { DonationRequestModal } from './DonationRequestModal/DonationRequestModal'
+export { UserNotificationItem } from './NotificationItem/NotificationItem'

packages/cypress/README.md

@@ -0,0 +1,43 @@
+## Cypress
+
+[Cypress](https://www.cypress.io/) is a next generation front end testing tool built for the modern web. We address the key pain points developers and QA engineers face when testing modern applications.
+
+[Best practices to be followed](https://docs.cypress.io/guides/references/best-practices)
+
+### Folder Structure
+
+- `scripts`: Contains scripts necessary to run the tests.
+  - `paths.ts`: Stores all the paths needed to execute the tests.
+  - `start.ts`: Script to automate the process of running end-to-end (E2E) tests using Cypress CI and Manual
+- `src`: Contains the source code for the Cypress project.
+  - `data`: Holds index.ts which is responsible for managing data.
+  - `fixtures`: Stores data, images, and files used in the tests.
+  - `integration`: Contains spec.ts files which hold the actual test scripts.
+  - `plugins`: Contains Cypress plugins.
+  - `support`: Contains support files for Cypress tests.
+    - `db`: database scripts related(seed, clear, query, delete)
+    - `commands.ts`: Defines general custom Cypress commands.
+    - `commandsUI.ts`: Defines UI-related custom Cypress commands.
+    - `customAssertions.ts`: Contains custom Cypress assertions.
+    - `hooks.ts`: Defines Cypress hooks.
+    - `index.ts`: Index file for exporting all plugins.
+    - `rules.ts`: Contains rules for Cypress.
+  - `utils`: Holds utility functions for the Cypress project.
+
+### Test data SEED
+
+The seed data is maintained in the `/shared/mocks/data directory`.
+
+### How Tests Run
+
+- Before All: Set up the DB_PREFIX and DB seed.
+- Before Each (Global): Set the DB_PREFIX variable on the platform session storage.
+- Before Each (Local): Perform pre-set actions for the scenario.
+- Main Section of Test: Steps according to the scenario.
+- Assert Section of Test: Validation to the scenario.
+
+### Execution Steps
+
+Running Cypress E2E Tests
+
+`yarn test` to start local environment and open the cypress UI