Merge pull request #1657 from Giveth/release-2.4.0

Release 2.4.0

.gitignore

@@ -39,4 +39,7 @@ yarn-error.log*
 # Sentry
 .sentryclirc
 
-public/robots.txt
+public/robots.txt
+
+cypress/videos
+cypress/screenshots

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
 	"cSpell.words": [
+		"Boostings",
 		"GIVback",
 		"GIVeconomy",
 		"giveth",
@@ -11,4 +12,4 @@
 		"SUSHISWAP",
 		"xdai"
 	]
-}
+}

cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+	e2e: {
+		setupNodeEvents(on, config) {
+			// implement node event listeners here
+			return {
+				...config,
+				// Only enable Chrome.
+				// Electron (the default) has issues injecting window.ethereum before pageload, so it is not viable.
+				browsers: config.browsers.filter(
+					({ name }) => name === 'chrome',
+				),
+			};
+		},
+		baseUrl: 'http://localhost:3000',
+		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+	},
+});

cypress/e2e/example.test.ts

@@ -0,0 +1,5 @@
+describe('visit homepage', () => {
+	it('can open projects page', () => {
+		cy.visit('/projects');
+	});
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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')

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["es5", "dom"],
+		"types": ["cypress", "@testing-library/cypress"]
+	},
+	"include": ["**/*.ts"]
+}

jest.config.js

@@ -0,0 +1,30 @@
+// jest.config.js
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+	// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+	dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+	// Add more setup options before each test is run
+	// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+	// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+	moduleDirectories: ['node_modules', '<rootDir>/'],
+	moduleNameMapper: {
+		'^@/(.*)$': '<rootDir>/src/$1',
+	},
+	setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+	preset: 'ts-jest',
+	testEnvironment: 'jest-environment-jsdom',
+	watchPlugins: [
+		'jest-watch-typeahead/filename',
+		'jest-watch-typeahead/testname',
+	],
+	setupFiles: ['jest-canvas-mock'],
+	testPathIgnorePatterns: ['<rootDir>/cypress/'],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

next.config.js

@@ -20,6 +20,8 @@ const moduleExports = withBundleAnalyzer({
 			'static.tgbwidget.com',
 			'images.unsplash.com',
 			'd2m0e1zy3fwxmp.cloudfront.net', // temporal for CHANGE default image
+			'i.imgur.com',
+			'd2jyzh4ah9xf6q.cloudfront.net', // temporal for CHANGE default image
 			'static.tgb-preprod.com',
 			'tgb-preproduction-formio.s3.amazonaws.com',
 			'dashboard.tgb-preprod.com',

package.json

@@ -1,13 +1,15 @@
 {
 	"name": "givethdapp",
-	"version": "2.3.3",
+	"version": "2.4.0",
 	"private": true,
 	"scripts": {
 		"build": "next build",
 		"dev": "next dev",
 		"lint": "eslint . --ext .ts --ext .tsx",
 		"lint:fix": "eslint . --ext .ts --ext .tsx --fix",
-		"start": "next start"
+		"start": "next start",
+		"test": "jest --watch",
+		"cypress": "cypress open"
 	},
 	"resolutions": {
 		"styled-components": "^5",
@@ -22,6 +24,7 @@
 		"@giveth/ui-design-system": "^1.8.26",
 		"@gnosis.pm/safe-apps-web3-react": "^1.5.0",
 		"@reduxjs/toolkit": "^1.8.1",
+		"@segment/snippet": "^4.15.3",
 		"@sentry/nextjs": "^6.19.3",
 		"@toruslabs/torus-embed": "^1.20.2",
 		"@uniswap/v3-sdk": "3.9.0",
@@ -62,11 +65,18 @@
 		"sharp": "^0.30.5",
 		"siwe": "^1.1.6",
 		"styled-components": "^5.3.0",
+		"swiper": "^8.3.2",
 		"unsplash-js": "^7.0.15"
 	},
 	"devDependencies": {
 		"@next/bundle-analyzer": "^12.1.4",
+		"@testing-library/cypress": "^8.0.3",
+		"@testing-library/jest-dom": "^5.16.4",
+		"@testing-library/react": "^13.3.0",
 		"@types/apollo-upload-client": "^14.1.0",
+		"@types/axios": "^0.14.0",
+		"@types/jest": "^28.1.4",
+		"@types/jest-axe": "^3.5.4",
 		"@types/lodash.isequal": "^4.5.5",
 		"@types/node": "17.0.29",
 		"@types/nprogress": "^0.2.0",
@@ -82,16 +92,28 @@
 		"@typescript-eslint/eslint-plugin": "^5.3.1",
 		"@typescript-eslint/parser": "^5.3.1",
 		"babel-plugin-styled-components": "^1.13.2",
+		"cypress": "^10.6.0",
 		"eslint": "^8.2.0",
 		"eslint-config-next": "^12.0.3",
 		"eslint-config-prettier": "^8.3.0",
+		"eslint-import-resolver-jest": "^3.0.2",
 		"eslint-import-resolver-typescript": "^2.5.0",
+		"eslint-plugin-cypress": "^2.12.1",
 		"eslint-plugin-import": "^2.26.0",
 		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-react": "^7.27.0",
 		"eslint-plugin-react-hooks": "^4.3.0",
 		"eslint-plugin-unused-imports": "^2.0.0",
+		"jest": "^28.1.2",
+		"jest-axe": "^6.0.0",
+		"jest-canvas-mock": "^2.4.0",
+		"jest-environment-jsdom": "^28.1.2",
+		"jest-extended": "^3.0.2",
+		"jest-watch-typeahead": "^2.0.0",
+		"msw": "^0.44.2",
 		"prettier": "^2.4.1",
+		"test-data-bot": "^0.8.0",
+		"ts-jest": "^28.0.5",
 		"typescript": "4.4.4"
 	}
 }

pages/_app.tsx

@@ -5,9 +5,10 @@ import { Web3ReactProvider } from '@web3-react/core';
 import { ApolloProvider } from '@apollo/client';
 import { ExternalProvider, Web3Provider } from '@ethersproject/providers';
 import NProgress from 'nprogress';
-
+import * as snippet from '@segment/snippet';
 import { useRouter } from 'next/router';
 import { Provider } from 'react-redux';
+import Script from 'next/script';
 import { useApollo } from '@/apollo/apolloClient';
 import { HeaderWrapper } from '@/components/Header/HeaderWrapper';
 import { FooterWrapper } from '@/components/Footer/FooterWrapper';
@@ -22,6 +23,30 @@ import GeneralController from '@/components/controller/general.ctrl';
 import ErrorsIndex from '@/components/views/Errors/ErrorsIndex';
 import type { AppProps } from 'next/app';
 
+declare global {
+	interface Window {
+		analytics: any;
+	}
+}
+
+const DEFAULT_WRITE_KEY = 'MHK95b7o6FRNHt0ZZJU9bNGUT5MNCEyB';
+
+function renderSnippet() {
+	const opts = {
+		apiKey:
+			process.env.NEXT_PUBLIC_ANALYTICS_WRITE_KEY || DEFAULT_WRITE_KEY,
+		// note: the page option only covers SSR tracking.
+		// Page.js is used to track other events using `window.analytics.page()`
+		page: true,
+	};
+
+	if (process.env.NEXT_PUBLIC_ENV === 'development') {
+		return snippet.max(opts);
+	}
+
+	return snippet.min(opts);
+}
+
 function getLibrary(provider: ExternalProvider) {
 	return new Web3Provider(provider);
 }
@@ -35,18 +60,22 @@ function MyApp({ Component, pageProps }: AppProps) {
 			console.log(`Loading: ${url}`);
 			NProgress.start();
 		};
-		const handleStop = () => {
+		const handleChangeComplete = (url: string) => {
+			NProgress.done();
+			process.env.NEXT_PUBLIC_ENV === 'production' &&
+				window.analytics.page(url);
+		};
+		const handleChangeError = () => {
 			NProgress.done();
 		};
 
 		router.events.on('routeChangeStart', handleStart);
-		router.events.on('routeChangeComplete', handleStop);
-		router.events.on('routeChangeError', handleStop);
-
+		router.events.on('routeChangeComplete', handleChangeComplete);
+		router.events.on('routeChangeError', handleChangeError);
 		return () => {
 			router.events.off('routeChangeStart', handleStart);
-			router.events.off('routeChangeComplete', handleStop);
-			router.events.off('routeChangeError', handleStop);
+			router.events.off('routeChangeComplete', handleChangeComplete);
+			router.events.off('routeChangeError', handleChangeError);
 		};
 	}, [router]);
 
@@ -71,12 +100,22 @@ function MyApp({ Component, pageProps }: AppProps) {
 						) : (
 							<Component {...pageProps} />
 						)}
+						{process.env.NEXT_PUBLIC_ENV === 'production' && (
+							<Script
+								id='segment-script'
+								strategy='afterInteractive'
+								dangerouslySetInnerHTML={{
+									__html: renderSnippet(),
+								}}
+							/>
+						)}
 
 						<FooterWrapper />
 						<ModalController />
 					</Web3ReactProvider>
 				</ApolloProvider>
 			</Provider>
+
 			<Toaster containerStyle={{ top: '80px' }} />
 		</>
 	);

pages/account.tsx

@@ -1,28 +1,29 @@
-import styled from 'styled-components';
-import { H5 } from '@giveth/ui-design-system';
 import Head from 'next/head';
-import { FC } from 'react';
-import UserProfileView from '@/components/views/userProfile/UserProfile.view';
 import { useAppSelector } from '@/features/hooks';
+import Spinner from '@/components/Spinner';
+import WalletNotConnected from '@/components/WalletNotConnected';
+import UserNotSignedIn from '@/components/UserNotSignedIn';
+import UserProfileView from '@/components/views/userProfile/UserProfile.view';
+
+const UserRoute = () => {
+	const { isSignedIn, isEnabled, userData, isLoading } = useAppSelector(
+		state => state.user,
+	);
 
-const NoUserContainer = styled.div`
-	padding: 200px;
-`;
+	if (isLoading) {
+		return <Spinner />;
+	} else if (!isEnabled) {
+		return <WalletNotConnected />;
+	} else if (!isSignedIn) {
+		return <UserNotSignedIn />;
+	}
 
-const UserRoute: FC = () => {
-	const user = useAppSelector(state => state.user.userData);
 	return (
 		<>
 			<Head>
-				<title>Giveth | {user?.name}</title>
+				<title>{userData?.name} | Giveth</title>
 			</Head>
-			{user ? (
-				<UserProfileView user={user} myAccount />
-			) : (
-				<NoUserContainer>
-					<H5>Not logged in or user not found</H5>
-				</NoUserContainer>
-			)}
+			<UserProfileView user={userData!} myAccount />
 		</>
 	);
 };

pages/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import HomeIndex from '@/components/views/homepage/HomeIndex';
 import { client } from '@/apollo/apolloClient';
 import { FETCH_HOME_PROJECTS } from '@/apollo/gql/gqlProjects';
-import { EDirection, gqlEnums } from '@/apollo/types/gqlEnums';
+import { EDirection, ESortby } from '@/apollo/types/gqlEnums';
 import { IProject } from '@/apollo/types/types';
 import { useAppSelector } from '@/features/hooks';
 import { homeMetatags } from '@/content/metatags';
@@ -23,8 +23,8 @@ const fetchProjects = async (userId: string | undefined = undefined) => {
 		limit: projectsToFetch,
 		orderBy: {
 			field: IS_BOOSTING_ENABLED
-				? gqlEnums.GIVPOWER
-				: gqlEnums.QUALITYSCORE,
+				? ESortby.GIVPOWER
+				: ESortby.QUALITYSCORE,
 			direction: EDirection.DESC,
 		},
 	};

pages/onboard.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import React from 'react';
 import OnboardView from '@/components/views/onboarding/Onboarding.view';
 
 const OnboardingRoute = () => {