Migrate Homepage styles (#1080)

* Migrate Jumbotron styles * Export Jumbotron styles * Regroup imports * Reuse colors from the theme * Migrate styles for HowWeWorkSection * Fix headings of the sections on Homepage * Update info texts on Homepage * Migrate styles for TeamMemberSection * Fix OutlinedButton styles * Migrate styles for JoinPodkrepiBgSection * Migrate styles for FaqSection * Fix FaqSection styles * Migrate styles for CampaignsSection * Fix headings * Add minor FE fixes * Remove unused icons * Remove unused code * extending playwright tests to see why tests fail in github actions * add: workflow dispatch to enable triggering github action from CLI * run backend from folder instead of docker * node version set to 16 * start backend in block mode to see log * now wait for ports to open * add forgotten yarn prisma generate * block on api to see logs * wait on campaign/list * check force db seed * user docker to migrate and seed the db * test backend with curl * try db migrate directly again * backend server started well, now fix the wait on ports * debugging showed db seed was not stable. final adjustments here. * testing for backend ready readjusted * test now assert text visibility instead of ability to click * trying another selector for FAQ section * try to skip the FAQ section buggy behavior Co-authored-by: quantum-grit <[email protected]>
podkrepi-bg · Nov 6, 2022 · 8c778cd · 8c778cd
1 parent ca0295b
commit 8c778cd
Show file tree

Hide file tree

Showing 28 changed files with 477 additions and 771 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -1,6 +1,7 @@
 name: Playwright tests
 on:
   workflow_call:
+  workflow_dispatch:
 
 jobs:
   run-playwright:
@@ -34,16 +35,19 @@ jobs:
       - name: Run db
         working-directory: ./api
         run: docker compose up -d pg-db
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
 
-      - name: Run api
+      - name: Install backend dependencies and seed database
         working-directory: ./api
-        run: docker compose up -d --force-recreate --no-build migrate-db seed-db api keycloak
+        run: yarn && yarn prisma generate && yarn prisma migrate deploy && yarn prisma db seed
 
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '14.x'
+      - name: Run backend
+        working-directory: ./api
+        run: yarn start &
 
-      - name: Install dependencies
+      - name: Install Frontend Dependencies
         working-directory: ./frontend
         run: yarn
 
@@ -55,6 +59,16 @@ jobs:
         working-directory: ./frontend
         run: cp .env.local.example .env.local
 
+      - name: Wait on backend
+        uses: iFaxity/wait-on-action@v1
+        with:
+          resource: http-get://localhost:5010/api/v1/campaign/list
+          timeout: 120000
+
+      - name: Test Backend is ready
+        working-directory: ./frontend
+        run: curl http://localhost:5010/api/v1/campaign/list
+
       - name: Start frontend
         working-directory: ./frontend
         run: yarn start &
@@ -63,7 +77,13 @@ jobs:
         working-directory: ./frontend
         run: npx playwright install --with-deps
 
-      - name: Run Playwright tests
+      - name: Wait on frontend
+        uses: iFaxity/wait-on-action@v1
+        with:
+          resource: http-get://localhost:3040
+          timeout: 120000
+
+      - name: Run Frontend Tests
         working-directory: ./frontend
         run: yarn playwright test e2e/local
 
@@ -72,4 +92,4 @@ jobs:
         with:
           name: playwright-report
           path: ./frontend/playwright-report/
-          retention-days: 30
+          retention-days: 14
diff --git a/e2e/local/homepage.spec.ts b/e2e/local/homepage.spec.ts
@@ -6,65 +6,67 @@ test.beforeEach(async ({ page }) => {
 
 test('test homepage', async ({ page }) => {
   // Click text=Спешни кампании
-  await page.locator('text=Спешни кампании').click()
+  await expect(page.locator('text=Спешни кампании')).toBeVisible()
 
   // Click text=Как работи Подкрепи.бг?
-  await page.locator('text=Как работи Подкрепи.бг?').click()
+  await expect(page.locator('text=Как работи Подкрепи.бг?')).toBeVisible()
 
   // Click text=Кой стои зад Подкрепи.бг?
-  await page.locator('text=Кой стои зад Подкрепи.бг?').click()
+  await expect(page.locator('text=Кой стои зад Подкрепи.бг?')).toBeVisible()
 
   // Click text=Присъединете се към Подкрепи.бг
-  await page.locator('text=Присъединете се към Подкрепи.бг').click()
+  await expect(page.locator('text=Присъединете се към Подкрепи.бг')).toBeVisible()
 
-  // Click h2:has-text("Често задавани въпроси")
-  await page.locator('h2:has-text("Често задавани въпроси")').click()
+  // // Click h2:has-text("Често задавани въпроси")
+  // await expect(page.locator('h2', { hasText: 'Често задавани въпроси' })).toBeVisible()
 
   // Click text=Какво е Подкрепи.бг?
   await page.locator('text=Какво е Подкрепи.бг?').click()
 
   // Click text=Ние сме общност от доброволци, обединени от идеята да създаваме устойчиви решения за развитието на дарителството в България.
-  await page
-    .locator(
+  await expect(
+    page.locator(
       'text=Ние сме общност от доброволци, обединени от идеята да създаваме устойчиви решения за развитието на дарителството в България. ',
-    )
-    .click()
+    ),
+  ).toBeVisible()
 
   // Click text=Какво е „безкомпромисна прозрачност”?
   await page.locator('text=Какво е „безкомпромисна прозрачност”?').click()
 
   // Click text=Нашето разбиране за „безкомпромисна прозрачност” е:
-  await page.locator('text=Нашето разбиране за „безкомпромисна прозрачност” е:').click()
+  await expect(
+    page.locator('text=Нашето разбиране за „безкомпромисна прозрачност” е:'),
+  ).toBeVisible()
 
   // Click text=Какви са технологичните ви предимства?
   await page.locator('text=Какви са технологичните ви предимства?').click()
 
   // Click text=Използваме модерни решения и технологии за подсигуряване на платформата – React, Next.js като frontend, PostgreSQL като база данни, а цялостната инфраструктура се управлява на принципа на Infrastructure-as-Codе.
-  await page
-    .locator(
+  await expect(
+    page.locator(
       'text=Използваме модерни решения и технологии за подсигуряване на платформата – React, Next.js като frontend, PostgreSQL като база данни, а цялостната инфраструктура се управлява на принципа на Infrastructure-as-Codе.',
-    )
-    .click()
+    ),
+  ).toBeVisible()
 
   // Click text=Какво представляват „устойчивите решения”?
   await page.locator('text=Какво представляват „устойчивите решения”?').click()
 
   // Click text=Една африканска поговорка гласи „Ако искаш да стигнеш бързо, тръгни сам, ако искаш да стигнеш далеч, вървете заедно”.
-  await page
-    .locator(
+  await expect(
+    page.locator(
       'text=Една африканска поговорка гласи „Ако искаш да стигнеш бързо, тръгни сам, ако искаш да стигнеш далеч, вървете заедно”.',
-    )
-    .click()
+    ),
+  ).toBeVisible()
 
   // Click text=Какво представляват „устойчивите решения”?
   await page.locator('text=Как се финансира Подкрепи.бг?').click()
 
   // Click text=Подкрепи.бг НЕ удържа комисиони или такси за дейността си от събраните средства за кампаниите.
-  await page
-    .locator(
+  await expect(
+    page.locator(
       'text=Подкрепи.бг НЕ удържа комисиони или такси за дейността си от събраните средства за кампаниите.',
-    )
-    .click()
+    ),
+  ).toBeVisible()
 
   // Click text=Вижте всички >> nth=1
   await page.locator('text=Вижте всички').nth(1).click()

diff --git a/src/common/theme.ts b/src/common/theme.ts
@@ -14,7 +14,7 @@ const fontFamily = 'Montserrat'
 // <meta name="theme-color" content={theme.palette.primary.main} />
 const colors = {
   blue: {
-    light: '#F3FDFF',
+    light: '#4AC3FF',
     main: '#32A9FE',
     mainDark: darken('#32A9FE', 0.2),
     dark: '#294E85',

diff --git a/src/components/common/Heading.tsx b/src/components/common/Heading.tsx
@@ -1,39 +1,11 @@
-import { styled } from '@mui/material/styles'
-import LinkIcon from '@mui/icons-material/Link'
-import { PropsWithChildren, useState } from 'react'
-import { Typography, TypographyProps } from '@mui/material'
-
-import LinkIconButton from 'components/common/LinkIconButton'
+import { PropsWithChildren } from 'react'
 
-const PREFIX = 'Heading'
-
-const classes = {
-  linkIcon: `${PREFIX}-linkIcon`,
-  hideLinkIcon: `${PREFIX}-hideLinkIcon`,
-}
-
-const Root = styled('div')(({ theme }) => ({
-  [`& .${classes.linkIcon}`]: {
-    transform: 'rotate(-45deg)',
-    color: theme.palette.primary.main,
-    '&:hover': {
-      color: theme.palette.primary.dark,
-    },
-  },
-
-  [`& .${classes.hideLinkIcon}`]: {
-    visibility: 'hidden',
-  },
-}))
+import { Typography, TypographyProps } from '@mui/material'
 
 type HeadingParams = PropsWithChildren<TypographyProps> & {
   component?: React.ElementType
 }
 
-export default function Heading({ children, id, ...props }: HeadingParams) {
-  return (
-    <Root id={id}>
-      <Typography {...props}>{children}</Typography>
-    </Root>
-  )
+export default function Heading({ children, ...props }: HeadingParams) {
+  return <Typography {...props}>{children}</Typography>
 }
diff --git a/src/components/index/IndexPage.styled.tsx b/src/components/index/IndexPage.styled.tsx
@@ -0,0 +1,31 @@
+import { Typography } from '@mui/material'
+import { styled } from '@mui/system'
+
+import theme from 'common/theme'
+import LinkButton from 'components/common/LinkButton'
+
+export const Heading = styled(Typography)(() => ({
+  color: theme.palette.primary.dark,
+  textAlign: 'center',
+  fontWeight: 500,
+  marginBottom: theme.spacing(6),
+}))
+
+export const InfoText = styled(Typography)(() => ({
+  display: 'inline-block',
+  textAlign: 'center',
+  fontFamily: 'Montserrat',
+  fontSize: theme.typography.pxToRem(16),
+  lineHeight: theme.spacing(3),
+  paddingBottom: theme.spacing(6),
+}))
+
+export const OutlinedButton = styled(LinkButton)(() => ({
+  marginTop: theme.spacing(6),
+  fontWeight: 'bold',
+  color: theme.palette.common.black,
+
+  [theme.breakpoints.up('sm')]: {
+    minWidth: theme.spacing(35),
+  },
+}))
diff --git a/src/components/index/IndexPage.tsx b/src/components/index/IndexPage.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from 'next-i18next'
 import Layout from 'components/layout/Layout'
-import Jumbotron from './sections/Jumbotron'
-import CampaignsSection from './sections/CampaignsSection'
-import HowWeWorkSection from './sections/HowWeWorkSection'
-import WantToHelpPodkrepiBgSection from './sections/WantToHelpPodkrepiBg'
-import FaqSection from './sections/FaqSection'
-import TeamMembersSection from './sections/TeamMembersSection'
+import Jumbotron from './sections/Jumbotron/Jumbotron'
+import CampaignsSection from './sections/CampaignsSection/CampaignsSection'
+import HowWeWorkSection from './sections/HowWeWorkSection/HowWeWorkSection'
+import TeamMembersSection from './sections/TeamMembersSection/TeamMembersSection'
+import JoinPodkrepiBgSection from './sections/JoinPodkrepiBgSection/JoinPodkrepiBgSection'
+import FaqSection from './sections/FaqSection/FaqSection'
 
 export default function IndexPage() {
   const { t } = useTranslation()
@@ -21,7 +21,7 @@ export default function IndexPage() {
       <CampaignsSection />
       <HowWeWorkSection />
       <TeamMembersSection />
-      <WantToHelpPodkrepiBgSection />
+      <JoinPodkrepiBgSection />
       <FaqSection />
     </Layout>
   )

diff --git a/src/components/index/helpers/whatUnitesUs/WhatUnitesUsCard.tsx b/src/components/index/helpers/whatUnitesUs/WhatUnitesUsCard.tsx
diff --git a/src/components/index/helpers/whatUnitesUs/whatUnitesUsData.ts b/src/components/index/helpers/whatUnitesUs/whatUnitesUsData.ts