e2e tests

.github/workflows/ci.yml

@@ -0,0 +1,41 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  actions: read
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_TURNSTILE_SITEKEY: 'e2e-sitekey'
+      GIT_COMMIT_SHA: ${{ github.sha }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: 'pnpm'
+      - name: Setup dependencies
+        run: pnpm install --frozen-lockfile
+      # Install Cypress dependencies
+      - run: pnpm cypress install --force
+      - uses: nrwl/nx-set-shas@v4
+      - run: pnpm exec nx affected --parallel 3 --target lint test build
+      - run: pnpm exec nx affected --parallel 1 --target e2e-ci

.prettierignore

@@ -5,4 +5,5 @@
 .yarnrc.yml
 .next
 /.nx/cache
-/.nx/workspace-data
+/.nx/workspace-data
+pnpm-lock.yaml

e2e/cypress.config.ts

@@ -1,13 +1,12 @@
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
-
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
     ...nxE2EPreset(__filename, {
       cypressDir: 'src',
       webServerCommands: { default: 'nx run islamic-website:start' },
-      ciWebServerCommand: 'nx run islamic-website:serve-static',
+      ciWebServerCommand: 'nx run islamic-website:start',
     }),
     baseUrl: 'http://localhost:3000',
   },

e2e/src/e2e/main-page.cy.ts

@@ -0,0 +1,65 @@
+describe('main-page', () => {
+  beforeEach(() => {
+    return cy.visit('/');
+  });
+
+  it('should have correct title', () => {
+    cy.title().should('include', 'IslamicCoin');
+  });
+
+  it('should display main heading', () => {
+    cy.get('h1')
+      .contains('Your Gateway to Shariah Compliant Web3')
+      .should('be.visible');
+  });
+
+  it('should have a visible "Why Islamic Coin?" section', () => {
+    cy.get('h2').contains('Why Islamic Coin?').should('be.visible');
+  });
+
+  it('should display "Backed by" section with logos', () => {
+    cy.get('h2').contains('Backed by').should('be.visible');
+    cy.get('img[alt*="logo"]').should('have.length.at.least', 3);
+  });
+
+  it('should display "Pioneering the Future of Islamic Finance" section', () => {
+    cy.get('h2')
+      .contains('Pioneering the Future of Islamic Finance')
+      .should('be.visible');
+  });
+
+  it('should show "Latest Islamic Coin News" section', () => {
+    cy.get('h2').contains('Latest Islamic Coin News').should('be.visible');
+    cy.get('[data-attr="news-card"]').should('have.length.at.least', 3);
+  });
+
+  it('should display Advisory Board members', () => {
+    cy.get('h2').contains('Advisory Board').should('be.visible');
+    cy.get('[data-attr="board-member-card"]').should('have.length.at.least', 4);
+  });
+
+  it('should have HAQQ Wallet section with app store links', () => {
+    cy.get('h2')
+      .contains('Manage Your Shariah Portfolio with HAQQ Wallet')
+      .should('be.visible');
+    cy.get('a[data-attr*="download"]').should('be.visible');
+  });
+
+  it('should have "Learn and Grow" section', () => {
+    cy.get('h2')
+      .contains('Learn and Grow with Islamic Coin')
+      .should('be.visible');
+  });
+
+  it('should have "Join Our Community" section', () => {
+    cy.get('h2').contains('Join Our Community').scrollIntoView();
+    cy.get('h2').contains('Join Our Community').should('be.visible');
+  });
+
+  it('should have footer with social media links in footer', () => {
+    cy.get('footer').scrollIntoView();
+    cy.get('footer a[data-attr*="community"]')
+      .should('be.visible')
+      .should('have.length.at.least', 3);
+  });
+});

e2e/src/support/app.po.ts

@@ -1 +1,3 @@
-export const getGreeting = () => cy.get('h1');
+export const getGreeting = () => {
+  return cy.get('h1');
+};

e2e/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "outDir": "../dist/out-tsc",
-    "module": "commonjs",
+    "module": "es2020",
     "types": ["cypress", "node"],
     "sourceMap": false
   },

index.d.ts

@@ -4,5 +4,3 @@ declare module '*.svg' {
   export const ReactComponent: any;
   export default content;
 }
-
-declare module 'app-store-scraper';

src/app/sitemap.ts

@@ -1,6 +1,5 @@
 import { MetadataRoute } from 'next';
-import { SITE_URL } from '@/constants';
-import { SUPPORTED_LOCALES } from '@/constants';
+import { SITE_URL, SUPPORTED_LOCALES } from '@/constants';
 import { academyModules } from '@/lib/academy-modules';
 
 export interface SitemapUrl {

src/components/pages/main-page/join-community-block.tsx

@@ -16,9 +16,9 @@ export function JoinCommunityBlock() {
           <div className="pointer-events-none h-[120px] w-[304px] select-none md:h-[140px] md:w-[354px]">
             <Image src={cubesImgData} alt="" loading="lazy" />
           </div>
-          <span className="mt-[16px] text-[28px] font-[600] leading-[32px] md:text-[44px] md:leading-[48px]">
+          <h2 className="mt-[16px] text-[28px] font-[600] leading-[32px] md:text-[44px] md:leading-[48px]">
             {t('join-community-block.title')}
-          </span>
+          </h2>
           <Text isMono className="mt-[8px]">
             {t('join-community-block.subtitle')}
           </Text>

src/components/pages/main-page/main-page.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import clsx from 'clsx';
-import dynamic from 'next/dynamic';
+// import dynamic from 'next/dynamic';
 import { useTranslations } from 'next-intl';
 import { Container } from '@/components/ui/container';
 import { Marquee } from '@/components/ui/marquee';
@@ -16,13 +16,13 @@ import { LearnAndGrowBlock } from './learn-and-grow-block';
 import { NewsBlock } from './news-block';
 import { WhyBlock } from './why-block';
 
-const WalletBlock = dynamic(
-  async () => {
-    const { WalletBlock } = await import('./wallet-block');
-    return { default: WalletBlock };
-  },
-  // { ssr: false },
-);
+// const WalletBlock = dynamic(
+//   async () => {
+//     const { WalletBlock } = await import('./wallet-block');
+//     return { default: WalletBlock };
+//   },
+//   // { ssr: false },
+// );
 
 export function MainPage({
   news,
@@ -42,7 +42,6 @@ export function MainPage({
     googlePlay: number;
   };
 }) {
-  console.log({ storeRatings });
   return (
     <Fragment>
       <Hero stats={stats} />
@@ -54,7 +53,7 @@ export function MainPage({
         shariahMembers={shariahMembers}
         advisoryMembers={advisoryMembers}
       />
-      <WalletBlock storeRatings={storeRatings} />
+      {/* <WalletBlock storeRatings={storeRatings} /> */}
       <LearnAndGrowBlock />
       <JoinCommunityBlock />
     </Fragment>

src/components/pages/main-page/wallet-block.tsx

@@ -104,6 +104,7 @@ export function WalletBlock({
                     <RatingBadge rating={storeRatings.googlePlay} />
                   </div>
                 </div>
+
                 <div className="hidden lg:mt-[24px] lg:flex lg:flex-row lg:gap-x-[16px]">
                   <div className="w-fit">
                     <Link
@@ -138,6 +139,7 @@ export function WalletBlock({
                     </Link>
                   </div>
                 </div>
+
                 <div className="mt-[20px] flex flex-col gap-y-[20px] lg:hidden">
                   <div>
                     <Link

src/components/pages/wallet-page.tsx

@@ -3,18 +3,18 @@ import { Fragment, useMemo } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
-import { usePostHog } from 'posthog-js/react';
+// import { usePostHog } from 'posthog-js/react';
 import bgImgData from '@/assets/images/wallet-bg.webp';
 import phoneImgData from '@/assets/images/wallet-iphone-screenshot.webp';
 import { Container } from '@/components/ui/container';
 import { RatingBadge } from '@/components/ui/rating-badge';
 import { Text } from '@/components/ui/text';
-import {
-  WalletDownloadButton,
-  WalletDownloadWithQrButton,
-} from '@/components/ui/wallet-download-button';
-import { WALLET_LINK_APPLE, WALLET_LINK_GOOGLE } from '@/constants';
-import { getDynamicLink } from '@/utils/get-dynamic-link';
+// import {
+//   WalletDownloadButton,
+//   WalletDownloadWithQrButton,
+// } from '@/components/ui/wallet-download-button';
+// import { WALLET_LINK_APPLE, WALLET_LINK_GOOGLE } from '@/constants';
+// import { getDynamicLink } from '@/utils/get-dynamic-link';
 
 export function WalletPage({
   storeRatings,
@@ -25,31 +25,31 @@ export function WalletPage({
   };
 }) {
   const t = useTranslations('wallet-page');
-  const posthog = usePostHog();
+  // const posthog = usePostHog();
 
-  const { appStoreLink, playMarketLink } = useMemo(() => {
-    const distinctId = posthog.get_distinct_id();
+  // const { appStoreLink, playMarketLink } = useMemo(() => {
+  //   const distinctId = posthog.get_distinct_id();
 
-    if (!distinctId) {
-      return {
-        appStoreLink: WALLET_LINK_APPLE,
-        playMarketLink: WALLET_LINK_GOOGLE,
-      };
-    }
+  //   if (!distinctId) {
+  //     return {
+  //       appStoreLink: WALLET_LINK_APPLE,
+  //       playMarketLink: WALLET_LINK_GOOGLE,
+  //     };
+  //   }
 
-    return {
-      appStoreLink: getDynamicLink(
-        'https://haqq.network/wallet',
-        distinctId,
-        WALLET_LINK_APPLE,
-      ),
-      playMarketLink: getDynamicLink(
-        'https://haqq.network/wallet',
-        distinctId,
-        WALLET_LINK_GOOGLE,
-      ),
-    };
-  }, [posthog]);
+  //   return {
+  //     appStoreLink: getDynamicLink(
+  //       'https://haqq.network/wallet',
+  //       distinctId,
+  //       WALLET_LINK_APPLE,
+  //     ),
+  //     playMarketLink: getDynamicLink(
+  //       'https://haqq.network/wallet',
+  //       distinctId,
+  //       WALLET_LINK_GOOGLE,
+  //     ),
+  //   };
+  // }, [posthog]);
 
   const content = (
     <Fragment>
@@ -79,7 +79,8 @@ export function WalletPage({
           <RatingBadge rating={storeRatings.googlePlay} />
         </div>
       </div>
-      <div className="hidden lg:mt-[24px] lg:flex lg:flex-row lg:flex-wrap lg:gap-[16px]">
+
+      {/* <div className="hidden lg:mt-[24px] lg:flex lg:flex-row lg:flex-wrap lg:gap-[16px]">
         <div className="w-fit">
           <Link
             href={appStoreLink}
@@ -119,9 +120,9 @@ export function WalletPage({
             <WalletDownloadButton type="apk" />
           </Link>
         </div>
-      </div>
+      </div> */}
 
-      <div className="mt-[28px] flex flex-col gap-y-[20px] lg:hidden">
+      {/* <div className="mt-[28px] flex flex-col gap-y-[20px] lg:hidden">
         <Link
           href={appStoreLink}
           target="_blank"
@@ -157,7 +158,7 @@ export function WalletPage({
             <WalletDownloadButton type="apk" />
           </Link>
         </div>
-      </div>
+      </div> */}
 
       <div className="mt-[24px] text-[13px] leading-[20px] md:text-[16px] lg:text-[#F5F5F580]">
         You can find more supported wallets{' '}

src/components/ui/footer.tsx

@@ -248,7 +248,7 @@ export function Footer({
       </div>
       <div className="py-[16px] md:py-[24px] lg:py-[36px]">
         <Container>
-          <div className="flex w-full items-center justify-between text-[12px] font-[300] leading-[18px] md:text-[13px] md:leading-[20px] lg:text-[14px] lg:leading-[20px]">
+          <div className="flex w-full flex-col items-center justify-center text-[12px] font-[300] leading-[18px] md:flex-row md:justify-between md:text-[13px] md:leading-[20px] lg:text-[14px] lg:leading-[20px]">
             <div>
               © {new Date().getFullYear()} Islamic Coin. All rights reserved
             </div>

src/components/ui/member-card.tsx

@@ -42,7 +42,7 @@ export function MemberCard({
         />
       </div>
       <div className="flex h-full flex-col">
-        <div className="min-h-[48px] text-start text-[13px] leading-[20px] md:text-[14px] lg:text-base">
+        <div className="min-h-[48px] text-start text-[13px] leading-[18px] md:text-[14px] lg:text-base">
           {title}
         </div>
         <div className="flex h-full flex-col justify-between">