Merge branch 'feat/uts-dsep-auth-homepage-searchpage' into develop-1.1.0

apps/dsep/components/button/Button.tsx

@@ -7,6 +7,7 @@ export interface ButtonPropsModel {
   color: string
   handleOnClick?: () => void
   isDisabled: boolean
+  dataTest: string
 }
 
 const Button: React.FC<ButtonPropsModel> = props => {
@@ -26,6 +27,7 @@ const Button: React.FC<ButtonPropsModel> = props => {
         marginBottom={'12px'}
         __css={{ '&:active': {} }}
         onClick={props.handleOnClick}
+        data-test={props.dataTest}
       >
         {props.buttonText}
       </ButtonComp>

apps/dsep/components/cart/CartIcon.tsx

@@ -5,6 +5,7 @@ import { AiOutlineShoppingCart } from 'react-icons/ai'
 import { cartUiActions } from '../../store/cartUI-slice'
 import { ICartUiRootState, ICartRootState } from '../../lib/types/cart'
 import { useLanguage } from '../../hooks/useLanguage'
+import { testIds } from '@shared/dataTestIds'
 
 const Basket = () => {
   const dispatch = useDispatch()
@@ -19,6 +20,7 @@ const Basket = () => {
       className="relative"
       onMouseOver={() => onMouseHoverHandler(true)}
       onMouseOut={() => onMouseHoverHandler(false)}
+      data-test={testIds.cartButton}
     >
       <Link
         legacyBehavior

apps/dsep/components/cart/CartItem.tsx

@@ -13,6 +13,7 @@ import { getPayloadForSelectRequest } from '../../utilities/cart-utils'
 import { ParsedItemModel } from '../../types/search.types'
 import { Item } from '../../lib/types/select.types'
 import { ProductPrice } from '@beckn-ui/becknified-components'
+import { testIds } from '@shared/dataTestIds'
 
 interface Props {
   product: Item
@@ -80,13 +81,15 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })
               }}
             >
               <Image
+                data-test={testIds.cartpage_itemImage}
                 src={product.images[0].url}
                 alt={'product-name'}
                 className="object-contain"
               />
             </div>
             {counter === 1 ? (
               <div
+                data-test={testIds.cartpage_trashButton}
                 onClick={() => decrement(product.id)}
                 className="p-1"
                 style={{
@@ -111,6 +114,7 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })
                   top: '0',
                   right: '0'
                 }}
+                data-test={testIds.cartpage_trashButton}
               >
                 <HiMinusSm
                   style={{
@@ -121,6 +125,7 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })
             )}
 
             <div
+              data-test={testIds.cartpage_itemName}
               className="flex-grow text-sm font-normal mb-2 sm:mb-0 mx-2 w-full text-center pt-1"
               style={{
                 direction: 'ltr',
@@ -144,6 +149,7 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })
               style={{
                 marginRight: '10px'
               }}
+              data-test={testIds.cartpage_totalAmountText}
             >
               {t.totalAmount}
             </p>

apps/dsep/components/cart/EmptyCart.tsx

@@ -6,6 +6,7 @@ import Styles from './EmptyCart.module.css'
 import { useLanguage } from '../../hooks/useLanguage'
 import Button from '../button/Button'
 import Router from 'next/router'
+import { testIds } from '@shared/dataTestIds'
 
 const EmptyCart: React.FC = () => {
   const { t } = useLanguage()
@@ -21,6 +22,7 @@ const EmptyCart: React.FC = () => {
         justifyContent={'center'}
       >
         <Image
+          data-test={testIds.cartpage_emptyImage}
           src={CartEmpty}
           width={'306px'}
           height={'245px'}
@@ -30,12 +32,19 @@ const EmptyCart: React.FC = () => {
       <Text
         className={Styles.cartHeadingText}
         fontWeight={600}
+        data-test={testIds.cartpage_emptyheading}
       >
         {t.noCourse}
       </Text>
-      <Text className={Styles.cartSpanText}>{t.noCouseSubText}</Text>
+      <Text
+        className={Styles.cartSpanText}
+        data-test={testIds.cartpage_emptySubHeading}
+      >
+        {t.noCouseSubText}
+      </Text>
       <Box mt={'40%'}>
         <Button
+          dataTest={testIds.cartpage_emptyButton}
           buttonText={t.searchCourses}
           background={'rgba(var(--color-primary))'}
           color={'rgba(var(--text-color))'}

apps/dsep/components/cart/OrderSummaryBox.tsx

@@ -8,6 +8,7 @@ import { Divider } from '@chakra-ui/react'
 import { Router } from 'next/router'
 import EmptyCart from './EmptyCart'
 import { Item } from '../../lib/types/select.types'
+import { testIds } from '@shared/dataTestIds'
 
 interface OrderSummaryBoxPropsModel {
   onOrderClick: () => void
@@ -27,6 +28,7 @@ const OrderSummaryBox: React.FC<OrderSummaryBoxPropsModel> = props => {
         style={{
           fontSize: '17px'
         }}
+        data-test={testIds.cartpage_orderSummaryText}
       >
         {t.orderSummary}
       </h3>
@@ -44,7 +46,12 @@ const OrderSummaryBox: React.FC<OrderSummaryBoxPropsModel> = props => {
           }}
         >
           <div className=" my-1 flex items-center justify-between md:my-4">
-            <p className="text-md sm:text-base md:text-palette-base tracking-wide">{t.subtotalText}</p>
+            <p
+              className="text-md sm:text-base md:text-palette-base tracking-wide"
+              data-test={testIds.cartSubTotal_Text}
+            >
+              {t.subtotalText}
+            </p>
             <ProductPrice
               price={totalAmount}
               customStyleObject={{
@@ -61,7 +68,12 @@ const OrderSummaryBox: React.FC<OrderSummaryBoxPropsModel> = props => {
           ) : null}
           <Divider my={'10px'} />
           <div className=" my-1 flex flex-wrap items-baseline justify-between flex-grow md:my-4">
-            <p className="text-md sm:text-base md:text-palette-base tracking-wide font-extrabold">{t.totalText}</p>
+            <p
+              className="text-md sm:text-base md:text-palette-base tracking-wide font-extrabold"
+              data-test={testIds.cartpage_totalAmountText}
+            >
+              {t.totalText}
+            </p>
             <ProductPrice
               isLargeSize
               price={totalAmount}
@@ -70,6 +82,7 @@ const OrderSummaryBox: React.FC<OrderSummaryBoxPropsModel> = props => {
         </div>
       </div>
       <Button
+        dataTest={testIds.cartpage_cartOrderButton}
         buttonText={t.checkout}
         background={'rgba(var(--color-primary))'}
         color={'rgba(var(--text-color))'}

apps/dsep/components/header/SearchBar.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { GoSearch } from 'react-icons/go'
 import { useLanguage } from '../../hooks/useLanguage'
 import { SearchBarPropsModel } from '../../lib/types/search'
+import { testIds } from '@shared/dataTestIds'
 
 const SearchBar: React.FC<SearchBarPropsModel> = ({ searchString, handleChange, className }) => {
   const { t } = useLanguage()
@@ -30,6 +31,7 @@ const SearchBar: React.FC<SearchBarPropsModel> = ({ searchString, handleChange,
         placeholder={`${t.search}`}
         onChange={inputChangeHandler}
         value={searchText}
+        data-test={testIds.searchInput}
         onKeyDown={event => event.key === 'Enter' && handleSubmit()}
       />
     </div>

apps/dsep/components/layout/Layout.tsx

@@ -1,19 +1,17 @@
 import React, { useEffect } from 'react'
-import { Provider, useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import Head from 'next/head'
-import { ThemeProvider } from 'next-themes'
 import { useRouter } from 'next/router'
 import Header from '../header'
-import Footer from '../footer'
 import { ToastContainer } from 'react-toastify'
 import { useLanguage } from '../../hooks/useLanguage'
 import NextNProgress from 'nextjs-progressbar'
 import cs from 'classnames'
-import { PersistGate } from 'redux-persist/integration/react'
 import { Toast } from '@beckn-ui/molecules'
 import { ToastType } from '@beckn-ui/molecules/src/components/toast/Toast-type'
 import { useToast } from '@chakra-ui/react'
 import { feedbackActions, FeedbackRootState } from '../../store/ui-feedback-slice'
+import { testIds } from '@shared/dataTestIds'
 
 const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const { locale } = useLanguage()
@@ -44,6 +42,7 @@ const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
             title={message}
             description={description}
             onClose={onClose}
+            dataTest={testIds.feedback}
           />
         )
       })

apps/dsep/components/productCard/product-card-renderer.tsx

@@ -5,6 +5,7 @@ import { useLanguage } from '../../hooks/useLanguage'
 import StarIcon from '../../public/images/Star.svg'
 import { toBinary } from '../../utilities/common-utils'
 import ProductPrice from '../UI/ProductPrice'
+import { testIds } from '@shared/dataTestIds'
 
 const ProductCardRenderer = (data: any) => {
   //   const [distance, setDistance] = useState(0)
@@ -33,6 +34,7 @@ const ProductCardRenderer = (data: any) => {
       rounded="xl"
       bg="#fff"
       position="relative"
+      data-test={testIds.searchpage_products}
     >
       <Box w="125px">
         <Box>

apps/dsep/components/productDetails/index.tsx

@@ -53,7 +53,8 @@ const ProductDetails: React.FC<Props> = ({ product }) => {
               rating: product.item.rating,
               size: 20,
               setRating: () => {},
-              starCount: 5
+              starCount: 5,
+              dataTest: testIds.item_rating
             },
             productCta: {
               noCounter: true,

apps/dsep/components/productList/ProductList.tsx

@@ -6,6 +6,7 @@ import { ParsedItemModel } from '../../types/search.types'
 import { ProductCard } from '@beckn-ui/becknified-components'
 import ProductCardRenderer from '../productCard/product-card-renderer'
 import Typography from '@beckn-ui/molecules/src/components/typography/typography'
+import { testIds } from '@shared/dataTestIds'
 
 interface ProductListPropsModel {
   productList: ParsedItemModel[]
@@ -76,6 +77,7 @@ const ProductList: React.FC<ProductListPropsModel> = ({ productList }) => {
               <Typography
                 text={t.noProduct}
                 variant="subTitleRegular"
+                dataTest={testIds.noDataAvailable}
               />
             </Box>
           )}

apps/dsep/components/productList/Sort.tsx

@@ -3,6 +3,7 @@ import { useLanguage } from '../../hooks/useLanguage'
 import { BsFilterLeft, BsArrowDown } from 'react-icons/bs'
 import { radioBtnValue } from '../../mock/sortRadioInput'
 import { Box } from '@chakra-ui/react'
+import { testIds } from '@shared/dataTestIds'
 
 interface Props {
   selectedBtn: string
@@ -21,6 +22,7 @@ const Sort: React.FC<Props> = ({ selectedBtn: selectedRadioBtn, onChangeSelected
       padding={'20px 0 0 0'}
       width={'100%'}
       ml={'-20px'}
+      data-test={testIds.searchpage_filterContainer}
     >
       <div
         className="my-4 pb-2 flex flex-wrap border-b-2 border-slate-300"
@@ -74,13 +76,15 @@ const Sort: React.FC<Props> = ({ selectedBtn: selectedRadioBtn, onChangeSelected
                       ? 'text-palette-primary font-bold'
                       : 'text-palette-mute/80 hover:text-palette-base transition-all'
                   }`}
+                  data-test={radioInput}
                 >
                   {t[radioInput]}
                 </label>
                 <input
                   type="radio"
                   className="hidden"
                   id={radioInput}
+                  data-test={radioInput}
                   value={selectedRadioBtn}
                   name="sortProduct"
                   checked={isRadioSelected(radioInput)}

apps/dsep/pages/cart.tsx

@@ -14,6 +14,7 @@ import { Box } from '@chakra-ui/react'
 import { Item, SelectResponseModel } from '../lib/types/select.types'
 import LoaderWithMessage from '@beckn-ui/molecules/src/components/LoaderWithMessage/loader-with-message'
 import { toast } from 'react-toastify'
+import { testIds } from '@shared/dataTestIds'
 
 const Cart = () => {
   const [itemsForCart, setItemsForCart] = useState<Item[] | null>(null)
@@ -73,6 +74,7 @@ const Cart = () => {
         display={'grid'}
         height={'calc(100vh - 300px)'}
         alignContent={'center'}
+        data-test={testIds.loadingIndicator}
       >
         <LoaderWithMessage
           loadingText={t.categoryLoadPrimary}

apps/dsep/pages/search.tsx

@@ -11,6 +11,7 @@ import { getParsedSearchlist } from '../utilities/search-utils'
 import { ParsedItemModel, SearchResponseModel } from '../types/search.types'
 import { toast } from 'react-toastify'
 import axios from '../services/axios'
+import { testIds } from '@shared/dataTestIds'
 
 const Search = () => {
   const [items, setItems] = useState<ParsedItemModel[]>([])
@@ -105,6 +106,7 @@ const Search = () => {
           display={'grid'}
           height={'calc(100vh - 300px)'}
           alignContent={'center'}
+          data-test={testIds.loadingIndicator}
         >
           <LoaderWithMessage
             loadingText={t.catalogLoader}

cypress/e2e/dsep/auth.cy.ts

@@ -0,0 +1,56 @@
+import { testIds } from '../../../shared/dataTestIds'
+
+// boc testing level 2
+
+describe('Check Auth flow', () => {
+  context('Signin flow', () => {
+    beforeEach(() => {
+      cy.visit(testIds.url_base)
+    })
+
+    it('should display the sign-in form with email and password fields', () => {
+      cy.getByData(testIds.auth_inputEmail).should('exist').and('be.visible')
+      cy.getByData(testIds.auth_inputPassword).should('exist').and('be.visible')
+    })
+
+    it('should display the sign-in and sign-up buttons', () => {
+      cy.getByData(testIds.auth_loginButton).should('exist').and('be.visible')
+      cy.getByData(testIds.auth_registerButton).should('exist').and('be.visible')
+    })
+
+    it('should disable the signin button when form is submitted with empty fields', () => {
+      cy.getByData(testIds.auth_loginButton).should('be.disabled')
+    })
+
+    it('should update email and password fields when typed into', () => {
+      cy.getByData(testIds.auth_inputEmail).type(testIds.user_validEmail)
+      cy.getByData(testIds.auth_inputEmail).should('have.value', testIds.user_validEmail)
+      cy.getByData(testIds.auth_inputPassword).type(testIds.user_validPassword)
+      cy.getByData(testIds.auth_inputPassword).should('have.value', testIds.user_validPassword)
+    })
+
+    it('should enable the Sign In button when both fields are filled', () => {
+      cy.getByData(testIds.auth_inputEmail).type(testIds.user_validEmail)
+      cy.getByData(testIds.auth_inputPassword).type(testIds.user_validPassword)
+      cy.getByData(testIds.auth_loginButton).should('not.be.disabled')
+    })
+
+    it('should show error toast on unsuccessful login', () => {
+      cy.getByData(testIds.auth_inputEmail).type(testIds.user_validEmail)
+      cy.getByData(testIds.auth_inputPassword).type(testIds.user_invalidPassword)
+      cy.getByData(testIds.auth_loginButton).click()
+      cy.getByData(testIds.feedback).should('contain.text', 'Invalid identifier or password')
+    })
+
+    it('should navigate to sign-up page when Sign Up button is clicked', () => {
+      cy.contains('button', 'Sign Up').click()
+      cy.url().should('include', testIds.url_signup)
+    })
+
+    it('should redirect to homePage and have token in cookie on successful login', () => {
+      cy.login(testIds.url_base, testIds.user_validEmail, testIds.user_validPassword)
+      cy.url().should('include', testIds.url_home)
+      cy.getCookie('authToken').should('exist')
+    })
+  })
+})