Test Pages, Contact & Donation

packages/playwright/src/e2e/07-pages.spec.ts

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test'
+
+import { test } from '../fixtures'
+
+test.beforeEach(async ({ layoutPage }) => {
+  await layoutPage.gotoHome('kunsthalte')
+  await layoutPage.switchLanguage('en')
+})
+
+test.describe('07. Pages', () => {
+  test('TC-01: should display arts page ', async ({ page, layoutPage }) => {
+    await layoutPage.gotoPage('arts')
+    const pageTitle = await page.title()
+    expect(pageTitle).toContain('Art Station') // 01. On the Arts page, does the title match the page name?
+  })
+
+  test('TC-02: should display collections page', async ({
+    page,
+    layoutPage,
+  }) => {
+    await layoutPage.gotoPage('collections')
+    await page.getByTestId('link-d/club/collections').click()
+    await page.waitForTimeout(1000)
+    const titleEN = await page.textContent('h2.chakra-heading')
+    expect(titleEN).toContain('Collections') // 01. Does the Collections page open?
+    const pageTitleEN = await page.title()
+    expect(pageTitleEN).toContain('Collections') // 02. On the Collections page, Does the title match the page name?
+  })
+
+  test('TC-03: should display activities page ', async ({
+    page,
+    layoutPage,
+  }) => {
+    await layoutPage.gotoPage('activities')
+    await page.waitForTimeout(1000)
+    const titleEN = await page.textContent('h2.chakra-heading')
+    expect(titleEN).toBe('Activities') // 01. Does the Activities page open?
+    const pageTitleEN = await page.title()
+    expect(pageTitleEN).toContain('Activities') // 02. On the Activities page, Does the title match the page name?
+  })
+  test('TC-04: should display about us page', async ({ page, layoutPage }) => {
+    await layoutPage.gotoPage('about')
+    await page.waitForTimeout(1000)
+    const titleEN = await page.textContent('h2.chakra-heading')
+    expect(titleEN).toBe('About Us') // 01. Does the Activities page open?
+    const pageTitleEN = await page.title()
+    expect(pageTitleEN).toContain('About Us') // 02. On the Activities page, Does the title match the page name?
+  })
+  test('TC-05: should display Contact page', async ({ page, layoutPage }) => {
+    await layoutPage.gotoPage('contact')
+    await page.waitForTimeout(1000)
+    await expect(page.locator('[id="__next"]')).toContainText('Contact') // 01. Does the Contact page open?
+    const pageTitleEN = await page.title()
+    expect(pageTitleEN).toContain('Contact') // 02. On the Activities page, Does the title match the page name?
+  })
+
+  test('TC-06: should display Donate page', async ({ page, layoutPage }) => {
+    await layoutPage.gotoPage('donation')
+    await page.waitForTimeout(1000)
+    const titleEN = await page.textContent('h3.chakra-heading')
+    expect(titleEN).toBe('Donate') // 01. Does the Activities page open?
+    const pageTitleEN = await page.title()
+    expect(pageTitleEN).toContain('Donate') // 02. On the Activities page, Does the title match the page name?
+  })
+})

packages/playwright/src/e2e/08-contact.spec.ts

@@ -0,0 +1,97 @@
+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")')
+})
+
+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-02: should send message via contact form', async ({
+    page,
+    layoutPage,
+  }) => {
+    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 ?
+  })
+  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.
+
+    const WhatsAppElement = page.getByLabel('WhatsApp').first()
+    await checkExternalLink(
+      WhatsAppElement,
+      '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,
+      '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,
+      '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")')
+  })
+})

packages/playwright/src/e2e/09-donate.spec.ts

@@ -0,0 +1,64 @@
+import { expect } from '@playwright/test'
+
+import { test } from '../fixtures'
+import { getUrl } from '../utils'
+test.beforeEach(async ({ page }) => {
+  await page.goto(getUrl('kunsthalte'))
+  await page.waitForTimeout(1000)
+  await page.click('button:has-text("EN")')
+  await page.waitForTimeout(1000)
+})
+
+test.describe('01. Donate', () => {
+  test('TC-01: should donation page', async ({ page, layoutPage }) => {
+    // TODO: Use locators in Donate.ts
+    await layoutPage.gotoPage('donation')
+    await page.getByTestId('button-donation-10').click()
+
+    const inputElement = await page.getByTestId('input-donation').inputValue()
+    expect(inputElement).toContain('10')
+
+    await page.getByTestId('button-donation-5').click()
+    await page.getByTestId('button-donation-20').click()
+    await page.getByTestId('button-donation-50').click()
+    await page.getByTestId('button-donation-100').click()
+    await page.getByTestId('button-donation-10').click()
+    await page.getByTestId('button-donation-increment').click()
+    await page.waitForLoadState('networkidle')
+
+    const chakraNumberInputDivvalue = await page
+      .getByTestId('input-donation')
+      .inputValue()
+    expect(chakraNumberInputDivvalue).toContain('11')
+    await page.getByTestId('button-donation-decrement').click()
+
+    const inputLocatorvaluee = await page
+      .getByTestId('input-donation')
+      .inputValue()
+
+    expect(inputLocatorvaluee).toContain('10')
+    await page.getByTestId('input-name').click()
+    await page.getByTestId('input-email').click()
+    await page.getByTestId('input-name').click()
+
+    await expect(page.getByTestId('error-text-name')).toBeVisible() // 05. Is Name a required field?
+    await page.getByTestId('input-name').fill('Mustafa Budak')
+
+    await expect(page.getByTestId('error-text-email')).toBeVisible() // 06. Is Name a required field?
+    const emailInput = await page.getByTestId('input-email')
+    const testEmailError = 'test_example.com'
+    await emailInput.fill(testEmailError)
+    await page.waitForTimeout(1000)
+    await expect(page.getByTestId('error-text-email')).toBeVisible() // 06. Email must be a valid email
+    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) // 07. Assert that the email is valid
+    await page.getByTestId('button-donation-submit').click()
+    const newUrl = page.url()
+    expect(isValidEmail).toBe(newUrl.length > 0) // 08. When the donate button is clicked, the user should be directed to the payment page.
+  })
+})

packages/playwright/src/pages/Layout.ts

@@ -51,7 +51,7 @@ export class LayoutPage {
         arts: page.getByTestId(`link-d/club/arts`),
         collections: page.getByTestId(`link-d/club/collections`),
         activities: page.getByTestId(`link-d/activities`),
-        about: page.getByTestId(`link-d/about`),
+        about: page.getByTestId(`link-d/about-us`),
         contact: page.getByTestId(`link-d/contact`),
         donation: page.getByTestId(`link-d/donation`),
       },