update and migrate cypress. add homepage smoke tests

Author: mulfdev

packages/frontend/.nvmrc

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    baseUrl: 'http://localhost:3000/',
+    video: false,
+  },
+});

packages/frontend/cypress.config.ts

@@ -0,0 +1,12 @@
+describe('Homepage Test', () => {
+  it('Check for Image', () => {
+    cy.visit('/');
+
+    cy.get('[alt="main"]').should('be.visible');
+  });
+
+  it('Check For Heading', () => {
+    cy.get('h2').should('include.text', 'Build web3 with friends');
+  });
+});
+export {};

packages/frontend/cypress.json

@@ -36,7 +36,8 @@
     "fmt": "prettier --write **/*.js",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "cypress run"
   },
   "eslintConfig": {
     "extends": [
@@ -60,6 +61,7 @@
     "@testing-library/cypress": "^8.0.1",
     "@testing-library/react-hooks": "^7.0.2",
     "all-contributors-cli": "^6.20.0",
+    "cypress": "^10.4.0",
     "eslint": "^8.21.0",
     "eslint-config-next": "11.1.2",
     "eslint-config-prettier": "^8.3.0",

packages/frontend/cypress/e2e/home.cy.ts

@@ -1,5 +1,13 @@
 import { useState, useEffect } from 'react';
-import { Box, Button, Flex, Image, Text, useColorMode } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Image,
+  Text,
+  useColorMode,
+} from '@chakra-ui/react';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/700.css';
 import '@fontsource/inter/800.css';
@@ -36,15 +44,15 @@ const IntroComponent = () => {
           p="2rem"
         >
           <Box pr="4rem">
-            <Text
+            <Heading
               fontFamily="Inter"
               fontWeight="800"
               mr="2rem"
               fontSize={{ base: '2.625rem', xl: '3.375rem' }}
               lineHeight={{ base: '2.625rem', xl: '4rem' }}
             >
               Build web3 with friends.
-            </Text>
+            </Heading>
             <Text
               fontFamily="Inter"
               fontWeight="500"