grouping

apps/app/playwright/20-basic-features/click-page-icons.spec.ts

@@ -1,49 +1,55 @@
 import { test, expect } from '@playwright/test';
 
-test('Successfully Subscribe/Unsubscribe a page', async({ page }) => {
-  await page.goto('/Sandbox');
-  const subscribeButton = page.locator('.btn-subscribe');
-
-  // Subscribe
-  await subscribeButton.click();
-  await expect(subscribeButton).toHaveClass(/active/);
-
-  // Unsubscribe
-  await subscribeButton.click();
-  await expect(subscribeButton).not.toHaveClass(/active/);
-});
-
-test('Successfully Like/Unlike a page', async({ page }) => {
-  await page.goto('/Sandbox');
-  const likeButton = page.locator('.btn-like').first();
-
-  // Like
-  await likeButton.click();
-  await expect(likeButton).toHaveClass(/active/);
-
-  // Unlike
-  await likeButton.click();
-  await expect(likeButton).not.toHaveClass(/active/);
-});
-
-test('Successfully Bookmark / Unbookmark a page', async({ page }) => {
-  await page.goto('/Sandbox');
-  const bookmarkButton = page.locator('.btn-bookmark').first();
-
-  // Bookmark
-  await bookmarkButton.click();
-  await expect(bookmarkButton).toHaveClass(/active/);
-
-  // Unbookmark
-  await page.locator('.grw-bookmark-folder-menu-item').click();
-  await expect(bookmarkButton).not.toHaveClass(/active/);
-});
-
-test('Successfully display list of "seen by user"', async({ page }) => {
-  await page.goto('/Sandbox');
-
-  await page.locator('.btn-seen-user').click();
-
-  const imgCount = await page.locator('.user-list-content').locator('img').count();
-  expect(imgCount).toBe(1);
+test.describe('Click page icons', () => {
+  test.beforeEach(async({ page }) => {
+    await page.goto('/Sandbox');
+  });
+
+  test('Successfully Subscribe/Unsubscribe a page', async({ page }) => {
+    await page.goto('/Sandbox');
+    const subscribeButton = page.locator('.btn-subscribe');
+
+    // Subscribe
+    await subscribeButton.click();
+    await expect(subscribeButton).toHaveClass(/active/);
+
+    // Unsubscribe
+    await subscribeButton.click();
+    await expect(subscribeButton).not.toHaveClass(/active/);
+  });
+
+  test('Successfully Like/Unlike a page', async({ page }) => {
+    await page.goto('/Sandbox');
+    const likeButton = page.locator('.btn-like').first();
+
+    // Like
+    await likeButton.click();
+    await expect(likeButton).toHaveClass(/active/);
+
+    // Unlike
+    await likeButton.click();
+    await expect(likeButton).not.toHaveClass(/active/);
+  });
+
+  test('Successfully Bookmark / Unbookmark a page', async({ page }) => {
+    await page.goto('/Sandbox');
+    const bookmarkButton = page.locator('.btn-bookmark').first();
+
+    // Bookmark
+    await bookmarkButton.click();
+    await expect(bookmarkButton).toHaveClass(/active/);
+
+    // Unbookmark
+    await page.locator('.grw-bookmark-folder-menu-item').click();
+    await expect(bookmarkButton).not.toHaveClass(/active/);
+  });
+
+  test('Successfully display list of "seen by user"', async({ page }) => {
+    await page.goto('/Sandbox');
+
+    await page.locator('.btn-seen-user').click();
+
+    const imgCount = await page.locator('.user-list-content').locator('img').count();
+    expect(imgCount).toBe(1);
+  });
 });

apps/app/playwright/20-basic-features/sticky-features.spec.ts

@@ -1,50 +1,47 @@
 import { test, expect } from '@playwright/test';
 
-test('Subnavigation displays changes on scroll down and up', async({ page }) => {
-  await page.goto('/');
-
-  // Scroll down to trigger sticky effect
-  await page.evaluate(() => window.scrollTo(0, 250));
-  await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
-
-  // Scroll back to top
-  await page.evaluate(() => window.scrollTo(0, 0));
-  await expect(page.locator('.sticky-outer-wrapper').first()).not.toHaveClass(/active/);
-});
-
-test('Subnavigation is not displayed when move to other pages', async({ page }) => {
-  await page.goto('/');
-
-  // Scroll down to trigger sticky effect
-  await page.evaluate(() => window.scrollTo(0, 250));
-  await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
-
-  // Move to /Sandbox page
-  await page.goto('/Sandbox');
-  await expect(page.locator('.sticky-outer-wrapper').first()).not.toHaveClass(/active/);
-});
-
-test('Able to click buttons on subnavigation switcher when sticky', async({ page }) => {
-  await page.goto('/');
-
-  // Scroll down to trigger sticky effect
-  await page.evaluate(() => window.scrollTo(0, 250));
-  await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
-
-  // Click editor button
-  await page.getByTestId('editor-button').click();
-  await expect(page.locator('.layout-root')).toHaveClass(/editing/);
-});
-
-
-test('Subnavigation is sticky when on small window', async({ page }) => {
-  await page.goto('/');
-
-  // Scroll down to trigger sticky effect
-  await page.evaluate(() => window.scrollTo(0, 500));
-  await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
-
-  // Set viewport to small size
-  await page.setViewportSize({ width: 600, height: 1024 });
-  await expect(page.getByTestId('grw-contextual-sub-nav').getByTestId('grw-page-editor-mode-manager')).toBeVisible();
+test.describe('Sticky features', () => {
+  test.beforeEach(async({ page }) => {
+    await page.goto('/');
+  });
+
+  test('Subnavigation displays changes on scroll down and up', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 250));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Scroll back to top
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await expect(page.locator('.sticky-outer-wrapper').first()).not.toHaveClass(/active/);
+  });
+
+  test('Subnavigation is not displayed when move to other pages', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 250));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Move to /Sandbox page
+    await page.goto('/Sandbox');
+    await expect(page.locator('.sticky-outer-wrapper').first()).not.toHaveClass(/active/);
+  });
+
+  test('Able to click buttons on subnavigation switcher when sticky', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 250));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Click editor button
+    await page.getByTestId('editor-button').click();
+    await expect(page.locator('.layout-root')).toHaveClass(/editing/);
+  });
+
+  test('Subnavigation is sticky when on small window', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 500));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Set viewport to small size
+    await page.setViewportSize({ width: 600, height: 1024 });
+    await expect(page.getByTestId('grw-contextual-sub-nav').getByTestId('grw-page-editor-mode-manager')).toBeVisible();
+  });
 });