repo sync

components/guides/ArticleCards.tsx

@@ -132,7 +132,11 @@ export const ArticleCards = () => {
         </div>
       </div>
 
-      <ul ref={articleCardRef} className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
+      <ul
+        data-testid="article-cards"
+        ref={articleCardRef}
+        className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8"
+      >
         {guides.slice(0, numVisible).map((card) => {
           return (
             <ArticleCard

tests/browser/browser.js

@@ -1,5 +1,5 @@
 import { jest } from '@jest/globals'
-import { latest, oldestSupported } from '../../lib/enterprise-server-releases.js'
+import { oldestSupported } from '../../lib/enterprise-server-releases.js'
 
 jest.useFakeTimers({ legacyFakeTimers: true })
 
@@ -454,34 +454,6 @@ describe('code examples', () => {
   })
 })
 
-describe('filter cards', () => {
-  it('works with select input', async () => {
-    await page.goto('http://localhost:4000/en/code-security/guides')
-    // 2nd element is 'Overview'
-    await page.click('[data-testid=card-filter-types] button')
-    await page.click('[data-testid=types-dropdown] > div > ul > li:nth-child(2)')
-    const shownCards = await page.$$('[data-testid=article-card]')
-    const shownCardTypes = await page.$$eval('[data-testid=article-card-type]', (cardTypes) =>
-      cardTypes.map((cardType) => cardType.textContent)
-    )
-    shownCardTypes.map((type) => expect(type).toBe('Overview'))
-    expect(shownCards.length).toBeGreaterThan(0)
-  })
-
-  it('works with select input on an Enterprise version', async () => {
-    await page.goto(`http://localhost:4000/en/enterprise-server@${latest}/code-security/guides`)
-    // 2nd element is 'Overview'
-    await page.click('[data-testid=card-filter-types] button')
-    await page.click('[data-testid=types-dropdown] > div > ul > li:nth-child(2)')
-    const shownCards = await page.$$('[data-testid=article-card]')
-    const shownCardTypes = await page.$$eval('[data-testid=article-card-type]', (cardTypes) =>
-      cardTypes.map((cardType) => cardType.textContent)
-    )
-    shownCardTypes.map((type) => expect(type).toBe('Overview'))
-    expect(shownCards.length).toBeGreaterThan(0)
-  })
-})
-
 // Skipping because next/links are disabled by default for now
 // Docs Engineering issue: 962
 describe.skip('next/link client-side navigation', () => {

tests/fixtures/content/code-security/getting-started/index.md

@@ -0,0 +1,19 @@
+---
+title: Get started articles
+intro: code security get started articles
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghae: '*'
+  ghec: '*'
+type: quick_start
+topics:
+  - Pull requests
+  - Fundamentals
+children:
+  - /quickstart
+  - /securing-your-organization
+---
+
+## Introduction
+Code security get started articles

tests/fixtures/content/code-security/getting-started/quickstart.md

@@ -0,0 +1,15 @@
+---
+title: Secure quickstart
+intro: intro 
+allowTitleToDifferFromFilename: true
+versions:
+  fpt: '*'
+  ghec: '*'
+type: quick_start
+topics:
+  - Codespaces
+---
+
+## Introduction
+
+In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace.

tests/fixtures/content/code-security/getting-started/securing-your-organization.md

@@ -0,0 +1,19 @@
+---
+title: Securing your organization
+intro: a secure intro
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghae: '*'
+  ghec: '*'
+type: how_to
+topics:
+  - Organizations
+  - Dependencies
+  - Vulnerabilities
+  - Advanced Security
+shortTitle: Secure your organization
+---
+
+## Introduction
+secure your org

tests/fixtures/content/code-security/guides.md

@@ -0,0 +1,18 @@
+---
+title: Guides
+intro: Guides
+layout: product-guides
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghae: '*'
+  ghec: '*'
+topics:
+  - Advanced Security
+  - Code scanning
+  - Actions
+  - Repositories
+includeGuides:
+  - /code-security/getting-started/quickstart
+  - /code-security/getting-started/securing-your-organization
+---

tests/fixtures/content/code-security/index.md

@@ -0,0 +1,22 @@
+---
+title: Code security documentation
+shortTitle: Code security
+intro: 'Code security'
+layout: product-landing
+featuredLinks:
+  startHere:
+    - /code-security/getting-started/quickstart
+    - /code-security/getting-started/securing-your-organization
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghae: '*'
+  ghec: '*'
+children:
+  - /getting-started
+  - /guides
+---
+
+
+
+

tests/fixtures/content/index.md

@@ -18,14 +18,14 @@ children:
   - search
   - get-started
   - early-access
+  - code-security
   # - account-and-profile
   # - authentication
   # - repositories
   # - admin
   # - billing
   # - site-policy
   # - organizations
-  # - code-security
   # - pull-requests
   # - issues
   # - actions

tests/fixtures/data/allowed-topics.js

@@ -0,0 +1 @@
+export default ['Advanced Security', 'Code scanning', 'Actions', 'Repositories', '2FA']

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

@@ -79,3 +79,31 @@ test.describe('platform picker', () => {
     await expect(page.getByRole('heading', { name: /Macintosh/ })).not.toBeVisible()
   })
 })
+
+test('filter article cards', async ({ page }) => {
+  await page.goto('/code-security/guides')
+  const articleCards = page.getByTestId('article-cards')
+  await expect(articleCards.getByText('Secure quickstart')).toBeVisible()
+  await expect(articleCards.getByText('Securing your organization')).toBeVisible()
+
+  // For both the type and topic dropdowns, with the Primer component we use it
+  // ends creating a button to open the dropdowns so that's why we're clicking
+  // a button here to expand the option items.
+
+  // all the articles are displayed, filter by topic
+  await page.getByTestId('card-filter-topics').getByRole('button', { name: 'All' }).click()
+  await page.getByTestId('topics-dropdown').getByText('Organizations').click()
+  await expect(articleCards.getByText('Secure quickstart')).not.toBeVisible()
+  await expect(articleCards.getByText('Securing your organization')).toBeVisible()
+
+  // now show all the articles again and then filter by type
+  await page
+    .getByTestId('card-filter-topics')
+    .getByRole('button', { name: 'Organizations' })
+    .click()
+  await page.getByTestId('topics-dropdown').getByText('All').click()
+  await page.getByTestId('card-filter-types').getByRole('button', { name: 'All' }).click()
+  await page.getByTestId('types-dropdown').getByText('Quickstart').click()
+  await expect(articleCards.getByText('Secure quickstart')).toBeVisible()
+  await expect(articleCards.getByText('Securing your organization')).not.toBeVisible()
+})