From 956d617c0e60ef239e133a3f6fa20f4750b055f0 Mon Sep 17 00:00:00 2001
From: chris48s <git@chris-shaw.dev>
Date: Thu, 23 Mar 2023 20:19:24 +0000
Subject: [PATCH] cypress tests

---
 cypress/e2e/main-page.cy.js                   | 57 +++++++++----------
 .../src/theme/ApiDemoPanel/Response/index.js  |  5 +-
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/cypress/e2e/main-page.cy.js b/cypress/e2e/main-page.cy.js
index 14a9c216137ad..4b2bbb6c5c782 100644
--- a/cypress/e2e/main-page.cy.js
+++ b/cypress/e2e/main-page.cy.js
@@ -2,16 +2,9 @@ import { registerCommand } from 'cypress-wait-for-stable-dom'
 
 registerCommand()
 
-describe('Main page', function () {
+describe('Frontend', function () {
   const backendUrl = Cypress.env('backend_url')
-  const SEARCH_INPUT = 'input[placeholder="search"]'
-
-  function expectBadgeExample(title, previewUrl, pattern) {
-    cy.contains('tr', `${title}:`).find('code').should('have.text', pattern)
-    cy.contains('tr', `${title}:`)
-      .find('img')
-      .should('have.attr', 'src', previewUrl)
-  }
+  const SEARCH_INPUT = 'input[placeholder="Search"]'
 
   function visitAndWait(page) {
     cy.visit(page)
@@ -26,36 +19,38 @@ describe('Main page', function () {
     cy.contains('PyPI - License')
   })
 
-  it('Shows badge from category', function () {
-    visitAndWait('/category/chat')
+  it('Shows badges from category', function () {
+    visitAndWait('/badges')
+
+    cy.contains('Build')
+    cy.contains('Chat').click()
 
-    expectBadgeExample(
-      'Discourse status',
-      'http://localhost:8080/badge/discourse-online-brightgreen',
-      '/discourse/status?server=https%3A%2F%2Fmeta.discourse.org'
-    )
+    cy.contains('Discourse status')
+    cy.contains('Stack Exchange questions')
   })
 
-  it('Customizate badges', function () {
-    visitAndWait('/')
+  it('Shows expected code examples', function () {
+    visitAndWait('/badges/static-badge')
 
-    cy.get(SEARCH_INPUT).type('issues')
+    cy.contains('button', 'URL').should('have.class', 'api-code-tab')
+    cy.contains('button', 'Markdown').should('have.class', 'api-code-tab')
+    cy.contains('button', 'rSt').should('have.class', 'api-code-tab')
+    cy.contains('button', 'AsciiDoc').should('have.class', 'api-code-tab')
+    cy.contains('button', 'HTML').should('have.class', 'api-code-tab')
+  })
 
-    cy.contains('/github/issues/:user/:repo').click()
+  it('Build a badge', function () {
+    visitAndWait('/badges/git-hub-issues')
 
-    cy.get('input[name="user"]').type('badges')
-    cy.get('input[name="repo"]').type('shields')
-    cy.get('table input[name="color"]').type('orange')
+    cy.contains('/github/issues/:user/:repo')
 
-    cy.get(`img[src='${backendUrl}/github/issues/badges/shields?color=orange']`)
-  })
+    cy.get('input[placeholder="user"]').type('badges')
+    cy.get('input[placeholder="repo"]').type('shields')
 
-  it('Do not duplicate example parameters', function () {
-    visitAndWait('/category/funding')
+    cy.contains('Execute').click()
 
-    cy.contains('GitHub Sponsors').click()
-    cy.get('[name="style"]').should($style => {
-      expect($style).to.have.length(1)
-    })
+    cy.intercept('GET', `${backendUrl}/github/issues/badges/shields`).as('get')
+    cy.wait('@get').its('response.statusCode').should('eq', 200)
+    cy.get('img[id="badge-preview"]')
   })
 })
diff --git a/frontend/src/theme/ApiDemoPanel/Response/index.js b/frontend/src/theme/ApiDemoPanel/Response/index.js
index 916365c0470f8..15d6a34e758eb 100644
--- a/frontend/src/theme/ApiDemoPanel/Response/index.js
+++ b/frontend/src/theme/ApiDemoPanel/Response/index.js
@@ -44,7 +44,10 @@ function Response() {
   return (
     <FloatingButton label="Clear" onClick={() => dispatch(clearResponse())}>
       {(response.startsWith('<svg ') && (
-        <img src={`data:image/svg+xml;utf8,${encodeURIComponent(response)}`} />
+        <img
+          id="badge-preview"
+          src={`data:image/svg+xml;utf8,${encodeURIComponent(response)}`}
+        />
       )) || (
         <pre
           style={{