Article grid tests (#58036)

src/fixtures/tests/playwright-rendering.spec.ts

@@ -1155,3 +1155,156 @@ test.describe('Journey Tracks', () => {
     }
   })
 })
+
+test.describe('LandingArticleGridWithFilter component', () => {
+  test('displays article grid with filter controls', async ({ page }) => {
+    await page.goto('/get-started/article-grid-discovery')
+
+    // Check that the main components are visible, title, categories drop
+    // down, search input.
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+
+    const filterHeader = page.getByTestId('filter-header')
+    await expect(filterHeader).toBeVisible()
+
+    const title = page.locator('h2').filter({ hasText: 'Articles' })
+    await expect(title).toBeVisible()
+
+    const categoryDropdown = page.getByRole('button').filter({ hasText: 'All categories' })
+    await expect(categoryDropdown).toBeVisible()
+
+    const searchInput = page.getByPlaceholder('Search articles')
+    await expect(searchInput).toBeVisible()
+  })
+
+  test('displays article cards with correct content', async ({ page }) => {
+    await page.goto('/get-started/article-grid-discovery')
+
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+
+    // Check that article cards are present and they have expected structure
+    // by checking the first card.
+    const articleCards = articleGrid.getByTestId('article-card')
+    await expect(articleCards.first()).toBeVisible()
+
+    const firstCard = articleCards.first()
+    const titleLink = firstCard.locator('h3 a')
+    await expect(titleLink).toBeVisible()
+
+    const intro = firstCard.locator('div').last() // cardIntro is the last div
+    await expect(intro).toBeVisible()
+    const introText = await intro.textContent()
+    expect(introText).toBeTruthy()
+
+    // Card should have categories, title, and intro, just check the card has
+    // some text
+    const cardText = await firstCard.textContent()
+    expect(cardText).toBeTruthy()
+    expect(cardText!.length).toBeGreaterThan(0)
+  })
+
+  test('category filtering works correctly', async ({ page }) => {
+    await page.goto('/get-started/article-grid-discovery')
+
+    // Check that category dropdown button exists and is clickable
+    const categoryDropdown = page.getByRole('button').filter({ hasText: 'All categories' })
+    await expect(categoryDropdown).toBeVisible()
+
+    // Initially should show all articles (4 total in our fixtures)
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+    const allArticleCards = articleGrid.getByTestId('article-card')
+    await expect(allArticleCards).toHaveCount(4)
+
+    // Click the dropdown and the 'Testing' category
+    await categoryDropdown.click()
+    const testingOption = page.getByText('Testing', { exact: true }).last()
+    await expect(testingOption).toBeVisible()
+    await testingOption.click()
+
+    // After filtering by Testing category, should show only 1 article based
+    // on our fixtures.
+    await expect(allArticleCards).toHaveCount(1)
+
+    // Verify the filtered article contains "Testing" somewhere in its markup
+    const remainingCard = allArticleCards.first()
+    await expect(remainingCard).toContainText('Testing')
+  })
+
+  test('search functionality works', async ({ page }) => {
+    await page.goto('/get-started/article-grid-discovery')
+
+    const searchInput = page.getByPlaceholder('Search articles')
+    await expect(searchInput).toBeVisible()
+
+    // Initially should show all articles (4 total in our fixtures)
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+
+    const articleCards = articleGrid.getByTestId('article-card')
+    await expect(articleCards).toHaveCount(4)
+
+    // Search for "Grid" - based on our fixtures, multiple articles should have "Grid" in their names
+    await searchInput.fill('Grid')
+    await expect(articleCards.first()).toBeVisible()
+
+    // Verify that the remaining articles contain "Grid" in their content
+    const remainingCount = await articleCards.count()
+    expect(remainingCount).toBeGreaterThan(0)
+    for (let i = 0; i < remainingCount; i++) {
+      const card = articleCards.nth(i)
+      await expect(card).toContainText('Grid')
+    }
+  })
+
+  test('search with no results shows appropriate message', async ({ page }) => {
+    await page.goto('/get-started/article-grid-discovery')
+
+    const searchInput = page.getByPlaceholder('Search articles')
+    await expect(searchInput).toBeVisible()
+
+    // Search for a term that definitely won't match any articles, should show
+    // no article cards
+    await searchInput.fill('noSuchArticles')
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+    const articleCards = articleGrid.getByTestId('article-card')
+    await expect(articleCards).toHaveCount(0)
+
+    // Should show "no articles found" message as well
+    const noResultsMessage = page.getByTestId('no-articles-message')
+    await expect(noResultsMessage).toBeVisible()
+  })
+
+  test('responsive behavior on different screen sizes', async ({ page }) => {
+    // Super basic test, just make sure the article grid is visible on
+    // different viewports sizes
+
+    // Test desktop view (3 columns)
+    await page.setViewportSize({ width: 1200, height: 800 })
+    await page.goto('/get-started/article-grid-discovery')
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+
+    // Test tablet view (2 columns)
+    await page.setViewportSize({ width: 768, height: 1024 })
+    await page.waitForTimeout(100) // Brief wait for responsive changes
+    await expect(articleGrid).toBeVisible()
+
+    // Test mobile view (1 column)
+    await page.setViewportSize({ width: 375, height: 667 })
+    await page.waitForTimeout(100) // Brief wait for responsive changes
+    await expect(articleGrid).toBeVisible()
+  })
+
+  test('works with bespoke landing page', async ({ page }) => {
+    // Other grid tests use the discovery landing page, bespoke pages are
+    // similar so just do a quick check.
+    await page.goto('/get-started/article-grid-bespoke')
+
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+  })
+})