catalyst/core/tests/ui/e2e/reviews.spec.ts at cc61c38c94b26d0f6afaf059fd8770345cc248ba · bigcommerce/catalyst · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { faker } from '@faker-js/faker';

import { expect, test } from '~/tests/fixtures';
import { getTranslations } from '~/tests/lib/i18n';
import { TAGS } from '~/tests/tags';

test(
  'Submit a review as a non-logged in customer',
  { tag: [TAGS.writesData] },
  async ({ page, catalog }) => {
    const t = await getTranslations('Product.Reviews.Form');
    const product = await catalog.getDefaultOrCreateSimpleProduct();

    await page.goto(product.path);
    await page.waitForLoadState('networkidle');

    await page.getByRole('button', { name: t('button') }).click();

    const modal = page.getByRole('dialog');

    await expect(modal.getByRole('heading', { name: t('title') })).toBeVisible();

    const rating = faker.number.int({ min: 1, max: 5 });
    const ratingLabel = rating === 1 ? '1 star' : `${rating} stars`;

    await modal.getByLabel(ratingLabel).click();

    const reviewTitle = faker.lorem.sentence();

    await modal.getByLabel(t('titleLabel')).fill(reviewTitle);

    const reviewText = faker.lorem.paragraph();

    await modal.getByLabel(t('reviewLabel')).fill(reviewText);

    const customerName = faker.person.fullName();

    await modal.getByLabel(t('nameLabel')).fill(customerName);

    const customerEmail = faker.internet.email();

    await modal.getByLabel(t('emailLabel')).fill(customerEmail);

    await expect(modal.getByLabel(t('nameLabel'))).toBeEnabled();
    await expect(modal.getByLabel(t('emailLabel'))).toBeEnabled();

    await modal.getByRole('button', { name: t('submit') }).click();
    await page.waitForLoadState('networkidle');

    await expect(page.getByText(t('successMessage'))).toBeVisible();
    await expect(modal).toBeHidden();
    await expect(page.getByRole('button', { name: t('button') })).toBeVisible();
  },
);

test('Shows validation errors when submitting review form with empty inputs', async ({
  page,
  catalog,
}) => {
  const t = await getTranslations('Product.Reviews.Form');
  const product = await catalog.getDefaultOrCreateSimpleProduct();

  await page.goto(product.path);
  await page.waitForLoadState('networkidle');

  await page.getByRole('button', { name: t('button') }).click();

  const modal = page.getByRole('dialog');

  await expect(modal.getByRole('heading', { name: t('title') })).toBeVisible();

  await modal.getByRole('button', { name: t('submit') }).click();
  await page.waitForLoadState('networkidle');

  await expect(modal).toBeVisible();

  const ratingField = modal.getByLabel(t('ratingLabel'));
  const titleField = modal.getByLabel(t('titleLabel'));
  const reviewField = modal.getByLabel(t('reviewLabel'));
  const nameField = modal.getByLabel(t('nameLabel'));
  const emailField = modal.getByLabel(t('emailLabel'));

  await expect(ratingField).toBeVisible();
  await expect(titleField).toBeVisible();
  await expect(reviewField).toBeVisible();
  await expect(nameField).toBeVisible();
  await expect(emailField).toBeVisible();

  const errorMessages = modal.locator('text=/required|invalid/i');

  await expect(errorMessages.first()).toBeVisible();
  await expect(errorMessages.nth(1)).toBeVisible();
  await expect(errorMessages.nth(2)).toBeVisible();
  await expect(errorMessages.nth(3)).toBeVisible();
  await expect(errorMessages.nth(4)).toBeVisible();
});