Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test Pages review #1695

Open
wants to merge 10 commits into
base: test/pages
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/api/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@strapi/strapi": "^4.25.11",
"apify-client": "^2.9.5",
"cheerio": "^1.0.0",
"pg": "^8.12.0",
"pg": "^8.13.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-email": "3.0.1",
Expand Down
28 changes: 14 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@chakra-ui/next-js": "^2.2.0",
"@chakra-ui/react": "^2.8.2",
"@ctrl/tinycolor": "^4.1.0",
"@ducanh2912/next-pwa": "^10.2.8",
"@ducanh2912/next-pwa": "^10.2.9",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@faker-js/faker": "^9.0.1",
Expand All @@ -46,9 +46,9 @@
"@uppy/react": "^4.0.2",
"@uppy/url": "^4.1.0",
"@vercel/analytics": "^1.3.1",
"@vercel/edge-config": "^1.2.1",
"@vercel/edge-config": "^1.3.0",
"@vercel/kv": "^2.0.0",
"@vercel/og": "^0.6.2",
"@vercel/og": "^0.6.3",
"ai": "3.0.12",
"axios": "^1.7.7",
"chakra-react-select": "4.9.2",
Expand All @@ -60,14 +60,14 @@
"i18n-help": "^0.1.3",
"i18next": "^23.15.1",
"iron-session": "^8.0.3",
"jspdf": "^2.5.1",
"jspdf": "^2.5.2",
"jspdf-autotable": "^3.8.3",
"jszip": "^3.10.1",
"kill-port-process": "^3.2.1",
"lodash": "^4.17.21",
"lorem-ipsum": "^2.0.8",
"nanoid": "^5.0.7",
"next": "^14.2.11",
"next": "^14.2.12",
"next-i18next": "^15.3.1",
"next-mdx-remote": "^5.0.0",
"next-recaptcha-v3": "^1.4.1",
Expand All @@ -82,13 +82,13 @@
"react-headroom": "^3.2.1",
"react-hook-form": "7.53.0",
"react-hook-form-persist": "^3.0.0",
"react-i18next": "^15.0.1",
"react-i18next": "^15.0.2",
"react-icons": "^5.3.0",
"react-intersection-observer": "^9.13.1",
"react-markdown": "^9.0.1",
"react-markdown-editor-lite": "^1.3.4",
"react-masonry-css": "^1.0.16",
"react-medium-image-zoom": "^5.2.9",
"react-medium-image-zoom": "^5.2.10",
"react-pageflip": "^2.0.3",
"react-player": "^2.16.0",
"react-qr-code": "^2.0.15",
Expand All @@ -97,7 +97,7 @@
"recharts": "^2.12.7",
"remove-markdown": "^0.5.5",
"string-similarity": "^4.0.4",
"stripe": "^16.11.0",
"stripe": "^16.12.0",
"tesseract.js": "^5.1.1",
"twitter-api-v2": "^1.17.2",
"twitter-text": "^3.1.0",
Expand All @@ -120,22 +120,22 @@
"@testing-library/react": "^16.0.1",
"@turbo/gen": "^2.1.2",
"@types/file-saver": "^2.0.7",
"@types/jest": "^29.5.12",
"@types/jest": "^29.5.13",
"@types/node": "^20.16.5",
"@types/pluralize": "^0.0.33",
"@types/react": "18.3.5",
"@types/react": "18.3.7",
"@types/react-dom": "18.3.0",
"@types/react-headroom": "^3.2.3",
"@types/remove-markdown": "^0.3.4",
"@types/string-similarity": "^4.0.2",
"@types/twitter-text": "^3.1.10",
"@types/web-push": "^3.6.3",
"@typescript-eslint/eslint-plugin": "8.5.0",
"@typescript-eslint/parser": "8.5.0",
"@typescript-eslint/eslint-plugin": "8.6.0",
"@typescript-eslint/parser": "8.6.0",
"browserify-fs": "^1.0.0",
"dotenv-cli": "^7.4.2",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.11",
"eslint": "^8.57.1",
"eslint-config-next": "^14.2.12",
"eslint-config-prettier": "^9.1.0",
"eslint-config-turbo": "^2.1.2",
"eslint-plugin-react": "7.36.1",
Expand Down
112 changes: 39 additions & 73 deletions packages/playwright/src/e2e/08-contact.spec.ts
Original file line number Diff line number Diff line change
@@ -1,97 +1,63 @@
import { expect } from '@playwright/test'

import { test } from '../fixtures'
import { getUrl, checkExternalLink } from '../utils'
test.beforeEach(async ({ page }) => {
await page.goto(getUrl('kunsthalte'))
await page.waitForTimeout(1000)
await page.click('button:has-text("EN")')
import { checkExternalLink } from '../utils'

test.beforeEach(async ({ page, layoutPage }) => {
await layoutPage.gotoHome('kunsthalte')
await layoutPage.gotoPage('contact')
await page.waitForLoadState()
})

test.describe('08. Contact required field control', () => {
test('TC-01: should Contact', async ({ page, layoutPage }) => {
await layoutPage.gotoPage('contact')
await page.getByTestId('input-fullname').click()
await page.getByTestId('input-email').click()
await page.getByTestId('input-message').click()
await page.getByTestId('input-fullname').click()
const fullNameErrorMessage = await page.locator(
'[data-testid="error-text-fullname"]',
)
const isDivVisible = await fullNameErrorMessage.isVisible()
await expect(isDivVisible).toBe(true) // 03. Is Your Full Name a required field? // bakılacak

const requiredTextEmail = page.getByTestId('error-text-email')
await expect(requiredTextEmail).toBeVisible() // 04. Is email a required field?

const emailInput = await page.locator('[data-testid="input-email"]')
const testEmailError = 'test_example.com'
await emailInput.fill(testEmailError)
const requiredTextEmailError = await page.locator(
'[data-testid="error-text-email"]',
)

const isTextVisibleEmailError = await requiredTextEmailError.isVisible()
await expect(isTextVisibleEmailError).toBe(true)
const testEmail = '[email protected]'
await emailInput.fill(testEmail)
const emailValue = await emailInput.inputValue()
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

const isValidEmail = emailRegex.test(emailValue)
expect(isValidEmail).toBe(true) // 05. Assert that the email is valid
const requiredTextMessage = await page.locator(
'[data-testid="error-text-message"]',
)
const isTextVisibleMessage = await requiredTextMessage.isVisible()
await expect(isTextVisibleMessage).toBe(true) // 06. Is Message a required field?
test('TC-01: should Contact', async ({ page, contactPage }) => {
await contactPage.fullnameInput.focus()
await contactPage.emailInput.focus()
await contactPage.messageInput.focus()
await contactPage.messageInput.blur()

const fullNameErrorMessage = page.getByTestId('error-text-fullname')
const emailErrorMessage = page.getByTestId('error-text-email')
const messageErrorMessage = page.getByTestId('error-text-message')

await expect(fullNameErrorMessage).toBeVisible() // 03. Is Your Full Name a required field? // bakılacak
await expect(emailErrorMessage).toBeVisible() // 04. Is email a required field?
await expect(messageErrorMessage).toBeVisible() // 05. Assert that message is required

const invalidEmail = 'test_example.com'
await contactPage.emailInput.fill(invalidEmail)
contactPage.emailInput.blur()
await expect(emailErrorMessage).toBeVisible() // 06. Assert that the email is invalid
})

test('TC-02: should send message via contact form', async ({
page,
layoutPage,
contactPage,
}) => {
await layoutPage.gotoPage('contact')
await page.waitForTimeout(1000)
await page.getByPlaceholder('Your Full Name').fill('Test Mustafa BUDAK')

const emailInput = await page.locator('[data-testid="input-email"]')
const testEmail = '[email protected]'
await emailInput.fill(testEmail)

await page.getByPlaceholder('Message').fill('This is a Test Message.')
await page.waitForTimeout(5000)
await page.getByRole('button', { name: 'Send message' }).click()
await page.waitForTimeout(2000)
const successDiv = await page.textContent('div[data-status="success"]')
expect(successDiv).toBe('Thank you. Your message has been delivered.') // 07. Can the user send the message successfully ?
await contactPage.sendContactMessage()
// It may not always work because of the captcha protection
await expect(contactPage.successAlert).toBeVisible() // 07. Can the user send the message successfully ?
})
test('TC-03: should Check if it is redirected to another page ', async ({
page,
layoutPage,
}) => {
await layoutPage.gotoPage('contact')
const emaillink = page.locator('a[href^="mailto:"]')
await expect(emaillink).toBeVisible() // 08. When clicking on the email address icon, the user should be directed to the Outlook application.
const xElement = page.getByLabel('X').first()
await checkExternalLink(xElement, 'https://x.com/kunsthalte') // 09. When clicking on the xcom icon, the user should be directed to another page.
test('TC-03: should social links work', async ({ contactPage }) => {
await expect(contactPage.socialLinks.email).toBeVisible() // 08. When clicking on the email address icon, the user should be directed to the Outlook application.

const WhatsAppElement = page.getByLabel('WhatsApp').first()
await checkExternalLink(
WhatsAppElement,
contactPage.socialLinks.x,
'https://x.com/kunsthalte',
) // 09. When clicking on the xcom icon, the user should be directed to another page.

await checkExternalLink(
contactPage.socialLinks.whatsapp,
'https://api.whatsapp.com/send?phone=31685221308',
) // 10. When clicking on the WhatsApp icon, the user should be directed to another page.

const InstagramElement = page.getByLabel('Instagram').first()
await checkExternalLink(
InstagramElement,
contactPage.socialLinks.instagram,
'https://instagram.com/kunsthalte',
) // 11. When clicking on the Instagram icon, the user should be directed to another page.
const YoutubeElement = page.getByLabel('Youtube').first()

await checkExternalLink(
YoutubeElement,
contactPage.socialLinks.youtube,
'https://www.youtube.com/@Kunsthalte',
) // 12. When clicking on the Youtube icon, the user should be directed to another page.
await page.click('button:has-text("EN")')
})
})
6 changes: 6 additions & 0 deletions packages/playwright/src/fixtures.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from './lib'
import {
ArtsPage,
ContactPage,
DashboardArtsPage,
LayoutPage,
LoginPage,
Expand All @@ -17,6 +18,7 @@ import {

type ExtendProps = {
artsPage: ArtsPage
contactPage: ContactPage
Copy link
Sponsor Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added new ContactPage to the text fixture so that it will be available in test blocks like other pages

dashboardArtsPage: DashboardArtsPage
layoutPage: LayoutPage
loginPage: LoginPage
Expand All @@ -36,6 +38,10 @@ export const test = base.extend<ExtendProps>({
const artsPage = new ArtsPage(page)
await use(artsPage)
},
contactPage: async ({ page }, use) => {
const contactPage = new ContactPage(page)
await use(contactPage)
},
dashboardArtsPage: async ({ page }, use) => {
const dashboardArtsPage = new DashboardArtsPage(page)
await use(dashboardArtsPage)
Expand Down
65 changes: 65 additions & 0 deletions packages/playwright/src/pages/Contact.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { expect, Locator, Page } from '@playwright/test'

import { generateRandomUser } from '../utils'

const { name, email } = generateRandomUser()

export class ContactPage {
readonly page: Page

readonly fullnameInput: Locator
readonly emailInput: Locator
readonly messageInput: Locator
readonly submitButton: Locator

readonly errorAlert: Locator
readonly successAlert: Locator

readonly socialLinks: {
email: Locator
facebook: Locator
instagram: Locator
linkedin: Locator
x: Locator
whatsapp: Locator
youtube: Locator
}

constructor(page: Page) {
this.page = page

this.fullnameInput = page.getByTestId('input-fullname')
this.emailInput = page.getByTestId('input-email')
this.messageInput = page.getByTestId('input-message')
this.submitButton = page.getByRole('button', { name: 'Send message' })

this.errorAlert = page.getByTestId('error-contact-form')
this.successAlert = page.getByTestId('success-contact-form')

this.socialLinks = {
email: page.locator('a[href^="mailto:"]'),
x: page.getByLabel('X').first(),
facebook: page.getByLabel('Facebook').first(),
instagram: page.getByLabel('Instagram').first(),
linkedin: page.getByLabel('LinkedIn').first(),
whatsapp: page.getByLabel('WhatsApp').first(),
youtube: page.getByLabel('YouTube').first(),
}
}

async sendContactMessage() {
// Locator.fill sometimes doesn't work as expected
// Timeout was needed to fix the issue
this.fullnameInput.fill(name)
await this.page.waitForTimeout(1000)

this.emailInput.fill(email)
await this.page.waitForTimeout(1000)

this.messageInput.focus()
this.messageInput.fill('This is a Test Message.')

await this.submitButton.click()
await this.page.waitForTimeout(1000)
}
}
8 changes: 4 additions & 4 deletions packages/playwright/src/pages/Layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export class LayoutPage {
arts: page.getByTestId(`link-m/club/arts`),
collections: page.getByTestId(`link-m/club/collections`),
activities: page.getByTestId(`link-m/activities`),
about: page.getByTestId(`link-m/about`),
about: page.getByTestId(`link-m/about-us`),
contact: page.getByTestId(`link-m/contact`),
donation: page.getByTestId(`link-m/donation`),
},
Expand All @@ -59,7 +59,7 @@ export class LayoutPage {
arts: page.getByTestId(`link-footer/club/arts`),
collections: page.getByTestId(`link-footer/club/collections`),
activities: page.getByTestId(`link-footer/activities`),
about: page.getByTestId(`link-footer/about`),
about: page.getByTestId(`link-footer/about-us`),
contact: page.getByTestId(`link-footer/contact`),
donation: page.getByTestId(`link-footer/donation`),
terms: page.getByTestId(`link-footer/terms`),
Expand All @@ -72,7 +72,7 @@ export class LayoutPage {
tr: page.getByTestId('button-d-tr'),
}
this.profileMenu = page.getByTestId('button-d-profile-menu')
this.profileLink = page.getByTestId('link-d-profile')
this.profileLink = page.getByTestId('link-d/profile')
this.logoutButton = page.getByTestId('button-d-logout')
}

Expand Down Expand Up @@ -107,7 +107,7 @@ export class LayoutPage {
async switchLanguage(language: StrapiLocale) {
await this.scrollToTop()
await this.languageMenu[language].click()
await this.page.waitForLoadState('domcontentloaded')
await this.page.waitForTimeout(1000)
}

async gotoPage(page: keyof typeof headerLinks) {
Expand Down
1 change: 1 addition & 0 deletions packages/playwright/src/pages/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export * from './Arts'
export * from './Contact'
export * from './DashboardArts'
export * from './Layout'
export * from './Login'
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/ContactForm/ContactForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,13 @@ export const ContactForm = () => {
</Button>

{isSuccess && (
<Alert status="success">
<Alert data-testid="success-contact-form" status="success">
<AlertIcon />
<AlertDescription>{t('contact.form.success')}</AlertDescription>
</Alert>
)}
{isError && (
<Alert status="error">
<Alert data-tesid="error-contact-form" status="error">
<AlertIcon />
<AlertDescription>
<>{t('contact.form.failed')} </>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Header/HeaderNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const HeaderNav: FC<HeaderNavProps> = ({
<ButtonLink
href={'/donation'}
variant={'outline'}
data-testid={'link-d-donation'}
data-testid={'link-d/donation'}
size={'sm'}
color={isDark && !isScrolled ? 'whiteAlpha.900' : 'gray.700'}
borderColor={isDark && !isScrolled ? 'whiteAlpha.900' : 'gray.700'}
Expand Down
Loading
Loading