Merge pull request #66 from cardano-foundation/feat/add-tests-placeho…

…lders

feat(cip-1694): add tests placeholders

README.md

@@ -71,7 +71,10 @@ e.g.
 SERVER_PORT=8888 ./gradlew bootRun
 ```
 
+use `setupProxy.js` to proxy services urls
+
 ```shell
+npm i
 npm run start
 ```
 

ui/cip-1694/package.json

@@ -19,7 +19,6 @@
     "history": "^5.3.0",
     "json-canonicalize": "^1.0.6",
     "moment": "^2.29.4",
-    "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
@@ -79,6 +78,7 @@
     "start": "react-scripts start",
     "build": "REACT_APP_SERVER_URL= REACT_APP_TARGET_NETWORK= REACT_APP_EVENT_ID= REACT_APP_CATEGORY_ID= REACT_APP_SUPPORTED_WALLETS= npx react-inject-env build react-scripts build",
     "jest-test": "jest --config ./jest.config.js",
+    "jest-test:coverage": "jest --config ./jest.config.js --collect-coverage",
     "eject": "react-scripts eject",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",

ui/cip-1694/src/App.test.tsx

@@ -0,0 +1,4 @@
+describe('App:', () => {
+  test.todo('should render proper state');
+  test.todo('should fetch an event');
+});

ui/cip-1694/src/App.tsx

@@ -20,7 +20,9 @@ export const App = () => {
       const event = await referenceDataService.getEvent(env.EVENT_ID);
       dispatch(setEventData({ event }));
     } catch (error) {
-      console.log(`Failed to fetch event, ${error?.info || error?.message || error?.toString()}`);
+      if (process.env.NODE_ENV === 'development') {
+        console.log(`Failed to fetch event, ${error?.info || error?.message || error?.toString()}`);
+      }
       toast(
         <Toast
           message="Failed to fetch event"

ui/cip-1694/src/common/api/__tests__/api.test.ts

@@ -0,0 +1,6 @@
+describe('Testing services:', () => {
+  test.todo('Leaderboard service');
+  test.todo('Reference service');
+  test.todo('Verification service');
+  test.todo('Vote service');
+});

ui/cip-1694/src/common/handlers/__tests__/httpHandler.test.ts

@@ -0,0 +1,6 @@
+describe('Testing handlers:', () => {
+  test.todo('get');
+  test.todo('put');
+  test.todo('post');
+  test.todo('delete');
+});

ui/cip-1694/src/common/hooks/__tests__/useToggle.test.tsx

@@ -0,0 +1,3 @@
+describe('useToggle:', () => {
+  test.todo('should toggle');
+});

ui/cip-1694/src/common/routes/__tests__/routes.test.tsx

@@ -0,0 +1,3 @@
+describe('routes: ', () => {
+  test.todo('should render all routes');
+});

ui/cip-1694/src/common/routes/index.tsx

@@ -7,9 +7,9 @@ import { Leaderboard } from 'pages/Leaderboard/Leaderboard';
 export const PAGE_PATH = '/';
 
 export const ROUTES = {
-  INTRO: `${PAGE_PATH}`,
-  VOTE: '/vote',
-  LEADERBOARD: '/leaderboard',
+  INTRO: PAGE_PATH,
+  VOTE: `${PAGE_PATH}vote`,
+  LEADERBOARD: `${PAGE_PATH}leaderboard`,
 };
 
 export const PageRoutes = () => (

ui/cip-1694/src/common/store/__tests__/userSlice.test.tsx

@@ -0,0 +1,3 @@
+describe('userSlice: ', () => {
+  test.todo('should render all routes');
+});

ui/cip-1694/src/common/store/types.ts

@@ -3,7 +3,6 @@ import { VoteReceipt, EventReference } from 'types/backend-services-types';
 export interface UserState {
   isConnectWalletModalVisible: boolean;
   isVoteSubmittedModalVisible: boolean;
-  isVerifyVoteModalVisible: boolean;
   connectedWallet: string;
   isReceiptFetched: boolean;
   receipt: VoteReceipt | null;

ui/cip-1694/src/common/store/userSlice.ts

@@ -6,7 +6,6 @@ import { UserState } from './types';
 const initialState: UserState = {
   isConnectWalletModalVisible: false,
   isVoteSubmittedModalVisible: false,
-  isVerifyVoteModalVisible: false,
   connectedWallet: '',
   isReceiptFetched: false,
   receipt: null,
@@ -33,9 +32,6 @@ export const userSlice = createSlice({
     setIsReceiptFetched: (state, action: PayloadAction<{ isFetched: boolean }>) => {
       state.isReceiptFetched = action.payload.isFetched;
     },
-    setIsVerifyVoteModalVisible: (state, action: PayloadAction<{ isVisible: boolean }>) => {
-      state.isVerifyVoteModalVisible = action.payload.isVisible;
-    },
     setSelectedProposal: (state, action: PayloadAction<{ proposal: VoteReceipt['proposal'] }>) => {
       state.proposal = action.payload.proposal;
     },
@@ -51,7 +47,6 @@ export const {
   setConnectedWallet,
   setVoteReceipt,
   setIsReceiptFetched,
-  setIsVerifyVoteModalVisible,
   setSelectedProposal,
   setEventData,
 } = userSlice.actions;

ui/cip-1694/src/common/utils/__tests__/voteUtils.test.ts

@@ -0,0 +1,5 @@
+describe('voteUtils: ', () => {
+  test.todo('should test buildCanonicalVoteInputJson');
+  test.todo('should test buildCanonicalVoteReceiptInputJson');
+  test.todo('should test getSignedMessagePromise');
+});

ui/cip-1694/src/common/utils/voteUtils.ts

@@ -21,7 +21,7 @@ export const buildCanonicalVoteInputJson = ({
   const startOfCurrentDay = new Date();
   startOfCurrentDay.setUTCMinutes(0, 0, 0);
   return canonicalize({
-    // TOOD: move to const/env file/ config file, also the link seems to be broken
+    // TODO: should this one be hardcoded?
     uri: 'https://evoting.cardano.org/voltaire',
     action: 'CAST_VOTE',
     actionText: 'Cast Vote',
@@ -49,6 +49,7 @@ export const buildCanonicalVoteReceiptInputJson = ({
   slotNumber,
 }: votereceiptInput): ReturnType<typeof canonicalize> =>
   canonicalize({
+    // TODO: should this one be hardcoded?
     uri: 'https://evoting.cardano.org/voltaire',
     action: 'VIEW_VOTE_RECEIPT',
     actionText: 'View Vote Receipt',

ui/cip-1694/src/components/VoteSubmittedModal/__tests__/VoteSubmittedModal.test.tsx

@@ -0,0 +1,3 @@
+describe('VoteSubmittedModal:', () => {
+  test.todo('should render proper state');
+});

ui/cip-1694/src/components/common/Content/__tests__/Content.test.tsx

@@ -58,6 +58,8 @@ describe('ConnectWalletModal', () => {
     cleanup();
   });
 
+  test.todo('PageRoutes');
+
   test('should display proper state for connect wallet modal, properly react to wallet on connect error scenario', async () => {
     mockConnectWalletList.mockImplementation(() => {
       return <span data-testid="connect-wallet-list" />;

ui/cip-1694/src/components/common/MobileModal/__tests__/MobileModal.test.tsx

@@ -0,0 +1,3 @@
+describe('MobileModal:', () => {
+  test.todo('should render proper state');
+});

ui/cip-1694/src/components/common/SidePage/__tests__/SidePage.test.tsx

@@ -0,0 +1,3 @@
+describe('SidePage:', () => {
+  test.todo('should render side drawer');
+});

ui/cip-1694/src/components/common/Toast/__tests__/Toast.test.tsx

@@ -0,0 +1,3 @@
+describe('Toast:', () => {
+  test.todo('should render proper state');
+});

ui/cip-1694/src/index.tsx

@@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { ThemeProvider } from '@mui/material/styles';
-import reportWebVitals from './reportWebVitals';
 import { App } from './App';
 import theme from './common/styles/theme';
 import { setupStore } from './common/store/index';
@@ -21,9 +20,3 @@ root.render(
     </ThemeProvider>
   </Provider>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-// TODO: do wee need this in production build
-reportWebVitals();

ui/cip-1694/src/pages/Leaderboard/Leaderboard.tsx

@@ -25,6 +25,7 @@ export const Leaderboard = () => {
   const eventHasntStarted = !event?.active && !event?.finished;
   const [stats, setStats] = useState<ByCategory['proposals']>();
 
+  // page should not be accessible in case the wallet is not connected, or the event is not finished yet
   useEffect(() => {
     if (!isConnected || eventHasntStarted || !event?.finished) navigate(ROUTES.INTRO);
   }, [event?.finished, eventHasntStarted, isConnected, navigate]);
@@ -34,7 +35,9 @@ export const Leaderboard = () => {
       setStats((await leaderboardService.getStats())?.proposals);
     } catch (error) {
       const message = `Failed to fecth stats: ${error?.message || error?.toString()}`;
-      console.log(message);
+      if (process.env.NODE_ENV === 'development') {
+        console.log(message);
+      }
       toast(
         <Toast
           message="Failed to fecth stats"

ui/cip-1694/src/pages/Vote/Vote.tsx

@@ -17,7 +17,6 @@ import { EventTime } from 'components/EventTime/EventTime';
 import {
   setIsConnectWalletModalVisible,
   setIsReceiptFetched,
-  setIsVerifyVoteModalVisible,
   setIsVoteSubmittedModalVisible,
   setSelectedProposal,
   setVoteReceipt,
@@ -39,7 +38,6 @@ import * as voteService from 'common/api/voteService';
 import { useToggle } from 'common/hooks/useToggle';
 import { HttpError } from 'common/handlers/httpHandler';
 import { env } from '../../env';
-import { VerifyVoteModal } from './components/VerifyVote/VerifyVote';
 import styles from './Vote.module.scss';
 
 const errorsMap = {
@@ -61,7 +59,6 @@ export const VotePage = () => {
   const eventHasntStarted = !event?.active && !event?.finished;
   const isReceiptFetched = useSelector((state: RootState) => state.user.isReceiptFetched);
   const isVoteSubmittedModalVisible = useSelector((state: RootState) => state.user.isVoteSubmittedModalVisible);
-  const isVerifyVoteModalVisible = useSelector((state: RootState) => state.user.isVerifyVoteModalVisible);
   const [absoluteSlot, setAbsoluteSlot] = useState<number>();
   const savedProposal = useSelector((state: RootState) => state.user.proposal);
   const [optionId, setOptionId] = useState(savedProposal || '');
@@ -97,7 +94,9 @@ export const VotePage = () => {
           dispatch(setSelectedProposal({ proposal: receiptResponse.proposal }));
         } else {
           const message = `${errorPrefix}', ${receiptResponse?.title}, ${receiptResponse?.detail}`;
-          console.log(message);
+          if (process.env.NODE_ENV === 'development') {
+            console.log(message);
+          }
           toast(
             <Toast
               message={errorPrefix}
@@ -122,7 +121,9 @@ export const VotePage = () => {
             icon={<BlockIcon style={{ fontSize: '19px', color: '#F5F9FF' }} />}
           />
         );
-        console.log(message);
+        if (process.env.NODE_ENV === 'development') {
+          console.log(message);
+        }
       }
     },
     [absoluteSlot, dispatch, signMessagePromisified, stakeAddress]
@@ -137,7 +138,9 @@ export const VotePage = () => {
       setAbsoluteSlot((await voteService.getSlotNumber())?.absoluteSlot);
     } catch (error) {
       const message = `Failed to fecth slot number: ${error?.message}`;
-      console.log(message);
+      if (process.env.NODE_ENV === 'development') {
+        console.log(message);
+      }
       toast(
         <Toast
           message="Failed to fecth slot number"
@@ -154,6 +157,7 @@ export const VotePage = () => {
     }
   }, [init, isConnected]);
 
+  // fetch vote receipt if there is no saved selection and event is active or finished
   useEffect(() => {
     if (absoluteSlot && !savedProposal && !eventHasntStarted) {
       fetchReceipt({});
@@ -167,10 +171,6 @@ export const VotePage = () => {
 
   const handleSubmit = async () => {
     if (!isConnected) return;
-    if (!env.EVENT_ID) {
-      console.log('EVENT_ID is not provided');
-      return;
-    }
 
     let votingPower: Account['votingPower'];
     try {
@@ -180,7 +180,9 @@ export const VotePage = () => {
         error instanceof Error || error instanceof HttpError ? error?.message : error
       }`;
 
-      console.log(message);
+      if (process.env.NODE_ENV === 'development') {
+        console.log(message);
+      }
       toast(
         <Toast
           error
@@ -214,7 +216,9 @@ export const VotePage = () => {
           />
         );
         setOptionId('');
-        console.log('Failed to cast e vote', errorsMap[error?.message as keyof typeof errorsMap] || error?.message);
+        if (process.env.NODE_ENV === 'development') {
+          console.log('Failed to cast e vote', errorsMap[error?.message as keyof typeof errorsMap] || error?.message);
+        }
       } else if (error instanceof Error) {
         toast(
           <Toast
@@ -223,7 +227,9 @@ export const VotePage = () => {
             icon={<BlockIcon style={{ fontSize: '19px', color: '#F5F9FF' }} />}
           />
         );
-        console.log('Failed to cast e vote', error?.message || error.toString());
+        if (process.env.NODE_ENV === 'development') {
+          console.log('Failed to cast e vote', error?.message || error.toString());
+        }
       }
     }
   };
@@ -399,14 +405,6 @@ export const VotePage = () => {
           </>
         }
       />
-      <VerifyVoteModal
-        openStatus={isVerifyVoteModalVisible}
-        onCloseFn={() => {
-          dispatch(setIsVerifyVoteModalVisible({ isVisible: false }));
-        }}
-        name="vote-verify-modal"
-        id="vote-verify-modal"
-      />
     </>
   );
 };