Article grid tests (#58036)

rsese · web-flow · commit 6f87d90a06b1 · 2025-10-17T19:31:36.000Z
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-one/grid-article-one.md b/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-one/grid-article-one.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article One
+intro: "This is the first test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Getting started
+  - Frontend
+layout: inline
+---
+
+This is the content of the first test article for the ArticleGrid component. It demonstrates how the grid displays articles with search and filtering functionality.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-one/grid-article-two.md b/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-one/grid-article-two.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article Two
+intro: "This is the second test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Getting started
+  - Backend
+layout: inline
+---
+
+This is the content of the second test article for the ArticleGrid component. It helps test the filtering and pagination features.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-one/index.md b/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-one/index.md
@@ -0,0 +1,13 @@
+---
+title: Grid Category One
+intro: "First category of test articles for article grid."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+children:
+  - /grid-article-one
+  - /grid-article-two
+---
+
+This is the first category of test articles for the ArticleGrid component.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-two/grid-article-four.md b/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-two/grid-article-four.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article Four
+intro: "This is the fourth test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Advanced
+  - Testing
+layout: inline
+---
+
+This is the content of the fourth test article for the ArticleGrid component. It demonstrates search functionality and responsive grid layout.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-two/grid-article-three.md b/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-two/grid-article-three.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article Three
+intro: "This is the third test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Advanced
+  - API
+layout: inline
+---
+
+This is the content of the third test article for the ArticleGrid component. It allows testing of category filtering and responsive behavior.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-two/index.md b/src/fixtures/fixtures/content/get-started/article-grid-bespoke/grid-category-two/index.md
@@ -0,0 +1,13 @@
+---
+title: Grid Category Two
+intro: "Second category of test articles for article grid."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+children:
+  - /grid-article-three
+  - /grid-article-four
+---
+
+This is the second category of test articles for the ArticleGrid component.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-bespoke/index.md b/src/fixtures/fixtures/content/get-started/article-grid-bespoke/index.md
@@ -0,0 +1,25 @@
+---
+title: Article Grid Bespoke Landing 
+intro: "A test page for testing the LandingArticleGridWithFilter component with bespoke landing layout."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+layout: bespoke-landing
+recommended:
+  - /grid-category-one/grid-article-one
+  - /grid-category-one/grid-article-two
+  - /grid-category-two/grid-article-three
+spotlight:
+  - article: /grid-category-one/grid-article-one
+    image: /assets/images/placeholder.png
+  - article: /grid-category-one/grid-article-two
+    image: /assets/images/placeholder.png
+  - article: /grid-category-two/grid-article-three
+    image: /assets/images/placeholder.png
+children:
+  - /grid-category-one
+  - /grid-category-two
+---
+
+This page tests the LandingArticleGridWithFilter component with bespoke landing layout.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-one/grid-article-one.md b/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-one/grid-article-one.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article One
+intro: "This is the first test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Getting started
+  - Frontend
+layout: inline
+---
+
+This is the content of the first test article for the ArticleGrid component. It demonstrates how the grid displays articles with search and filtering functionality.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-one/grid-article-two.md b/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-one/grid-article-two.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article Two
+intro: "This is the second test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Getting started
+  - Backend
+layout: inline
+---
+
+This is the content of the second test article for the ArticleGrid component. It helps test the filtering and pagination features.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-one/index.md b/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-one/index.md
@@ -0,0 +1,13 @@
+---
+title: Grid Category One
+intro: "First category of test articles for article grid."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+children:
+  - /grid-article-one
+  - /grid-article-two
+---
+
+This is the first category of test articles for the ArticleGrid component.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-two/grid-article-four.md b/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-two/grid-article-four.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article Four
+intro: "This is the fourth test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Advanced
+  - Testing
+layout: inline
+---
+
+This is the content of the fourth test article for the ArticleGrid component. It demonstrates search functionality and responsive grid layout.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-two/grid-article-three.md b/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-two/grid-article-three.md
@@ -0,0 +1,14 @@
+---
+title: Grid Article Three
+intro: "This is the third test article for the article grid component."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+category:
+  - Advanced
+  - API
+layout: inline
+---
+
+This is the content of the third test article for the ArticleGrid component. It allows testing of category filtering and responsive behavior.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-two/index.md b/src/fixtures/fixtures/content/get-started/article-grid-discovery/grid-category-two/index.md
@@ -0,0 +1,13 @@
+---
+title: Grid Category Two
+intro: "Second category of test articles for article grid."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+children:
+  - /grid-article-three
+  - /grid-article-four
+---
+
+This is the second category of test articles for the ArticleGrid component.
diff --git a/src/fixtures/fixtures/content/get-started/article-grid-discovery/index.md b/src/fixtures/fixtures/content/get-started/article-grid-discovery/index.md
@@ -0,0 +1,25 @@
+---
+title: Article Grid Discovery
+intro: "A test page for testing the LandingArticleGridWithFilter component with discovery landing layout."
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+layout: discovery-landing
+recommended:
+  - /grid-category-one/grid-article-one
+  - /grid-category-one/grid-article-two
+  - /grid-category-two/grid-article-three
+spotlight:
+  - article: /grid-category-one/grid-article-one
+    image: /assets/images/placeholder.png
+  - article: /grid-category-one/grid-article-two
+    image: /assets/images/placeholder.png
+  - article: /grid-category-two/grid-article-three
+    image: /assets/images/placeholder.png
+children:
+  - /grid-category-one
+  - /grid-category-two
+---
+
+This page tests the LandingArticleGridWithFilter component with discovery landing layout.
diff --git a/src/fixtures/fixtures/content/get-started/index.md b/src/fixtures/fixtures/content/get-started/index.md
@@ -42,6 +42,8 @@ children:
   - /learning-about-github
   - /empty-categories
   - /carousel
+  - /article-grid-discovery
+  - /article-grid-bespoke
 communityRedirect:
   name: Provide HubGit Feedback
   href: 'https://hubgit.com/orgs/community/discussions/categories/get-started'
diff --git a/src/fixtures/tests/playwright-rendering.spec.ts b/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()
+  })
+})
diff --git a/src/landings/components/shared/LandingArticleGridWithFilter.tsx b/src/landings/components/shared/LandingArticleGridWithFilter.tsx
