From 3f4eb40392a020fc6ae43252ad31c2fbaf8efc74 Mon Sep 17 00:00:00 2001
From: Robert Sese <734194+rsese@users.noreply.github.com>
Date: Tue, 21 Mar 2023 10:18:50 -0500
Subject: [PATCH] add article card playwright tests (#35683)

Co-authored-by: Peter Bengtsson <peterbe@github.com>
---
 components/guides/ArticleCards.tsx            |  6 +++-
 tests/browser/browser.js                      | 30 +------------------
 .../code-security/getting-started/index.md    | 19 ++++++++++++
 .../getting-started/quickstart.md             | 15 ++++++++++
 .../securing-your-organization.md             | 19 ++++++++++++
 .../fixtures/content/code-security/guides.md  | 18 +++++++++++
 tests/fixtures/content/code-security/index.md | 22 ++++++++++++++
 tests/fixtures/content/index.md               |  2 +-
 tests/fixtures/data/allowed-topics.js         |  1 +
 .../playwright-rendering.spec.ts              | 28 +++++++++++++++++
 10 files changed, 129 insertions(+), 31 deletions(-)
 create mode 100644 tests/fixtures/content/code-security/getting-started/index.md
 create mode 100644 tests/fixtures/content/code-security/getting-started/quickstart.md
 create mode 100644 tests/fixtures/content/code-security/getting-started/securing-your-organization.md
 create mode 100644 tests/fixtures/content/code-security/guides.md
 create mode 100644 tests/fixtures/content/code-security/index.md
 create mode 100644 tests/fixtures/data/allowed-topics.js

diff --git a/components/guides/ArticleCards.tsx b/components/guides/ArticleCards.tsx
index 3ce7ff169ffd..12469f880057 100644
--- a/components/guides/ArticleCards.tsx
+++ b/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
diff --git a/tests/browser/browser.js b/tests/browser/browser.js
index 43033a1e5b49..693d3ce3fe9b 100644
--- a/tests/browser/browser.js
+++ b/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', () => {
diff --git a/tests/fixtures/content/code-security/getting-started/index.md b/tests/fixtures/content/code-security/getting-started/index.md
new file mode 100644
index 000000000000..7c16c71f2c33
--- /dev/null
+++ b/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
diff --git a/tests/fixtures/content/code-security/getting-started/quickstart.md b/tests/fixtures/content/code-security/getting-started/quickstart.md
new file mode 100644
index 000000000000..e3b70f1df469
--- /dev/null
+++ b/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.
diff --git a/tests/fixtures/content/code-security/getting-started/securing-your-organization.md b/tests/fixtures/content/code-security/getting-started/securing-your-organization.md
new file mode 100644
index 000000000000..112c5a6ed37a
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/tests/fixtures/content/code-security/guides.md b/tests/fixtures/content/code-security/guides.md
new file mode 100644
index 000000000000..752b47a6e070
--- /dev/null
+++ b/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
+---
diff --git a/tests/fixtures/content/code-security/index.md b/tests/fixtures/content/code-security/index.md
new file mode 100644
index 000000000000..527bd6053b08
--- /dev/null
+++ b/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
+---
+
+
+
+
diff --git a/tests/fixtures/content/index.md b/tests/fixtures/content/index.md
index 363b24a1c045..8b1b8bcb83db 100644
--- a/tests/fixtures/content/index.md
+++ b/tests/fixtures/content/index.md
@@ -18,6 +18,7 @@ children:
   - search
   - get-started
   - early-access
+  - code-security
   # - account-and-profile
   # - authentication
   # - repositories
@@ -25,7 +26,6 @@ children:
   # - billing
   # - site-policy
   # - organizations
-  # - code-security
   # - pull-requests
   # - issues
   # - actions
diff --git a/tests/fixtures/data/allowed-topics.js b/tests/fixtures/data/allowed-topics.js
new file mode 100644
index 000000000000..41d9ffa189dc
--- /dev/null
+++ b/tests/fixtures/data/allowed-topics.js
@@ -0,0 +1 @@
+export default ['Advanced Security', 'Code scanning', 'Actions', 'Repositories', '2FA']
diff --git a/tests/rendering-fixtures/playwright-rendering.spec.ts b/tests/rendering-fixtures/playwright-rendering.spec.ts
index 0bc4d9606aa6..8d922394f145 100644
--- a/tests/rendering-fixtures/playwright-rendering.spec.ts
+++ b/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()
+})