Improve the web tests (#1430)

* Improve the web tests

* That's not portable

* Use regex here

* Set concurrency on web CI

.github/workflows/web.yml

@@ -1,11 +1,12 @@
 name: Web CI
-
 on:
   push:
     branches: [main]
   pull_request:
     branches: [main]
-
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 jobs:
   build:
     runs-on: ubuntu-latest

web/components/Docs.tsx

@@ -31,7 +31,7 @@ export default function Docs({ docs, braces, assign }: DocsProps) {
             >
               <div className="flex">
                 <div className="px-2 py-3">
-                  <Link href={`#${doc.name}`}>
+                  <Link href={`#${doc.name}`} data-anchor-name={doc.name}>
                     <LinkIcon size={20} />
                   </Link>
                 </div>

web/components/Header.tsx

@@ -56,8 +56,8 @@ export default function Header({
     <div className="border-b-1 backdrop-blur-lg bg-white dark:bg-black bg-opacity-20 dark:bg-opacity-20 transition">
       <header className="max-w-3xl mx-auto m-0 p-1 grow flex w-full">
         <h1 className="px-2 text-3xl dark:text-white self-end">
-          <Link href="/">
+          <Link href="/" className="font-bold" data-cy="top-link">
-            <strong>{name}</strong>
+            {name}
           </Link>
         </h1>
         {router.asPath != '/' && (

web/cypress.config.js

@@ -1,8 +1,10 @@
-const { defineConfig } = require('cypress');
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
+  scrollBehavior: 'center',
   e2e: {
     baseUrl: 'http://localhost:3000',
     supportFile: false,
   },
-});
+})

web/cypress/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["eslint:recommended", "plugin:cypress/recommended", "prettier"],
+  "plugins": ["cypress"],
+  "settings": {
+    "sort-imports": "error"
+  }
+}

web/cypress/e2e/basic.cy.js

@@ -4,7 +4,7 @@ describe('check index renders', () => {
   })
 
   it('displays the title text', () => {
-    cy.get('h1').contains('Conky')
+    cy.get('[data-cy="top-link"]').contains(/^Conky$/)
   })
 })
 describe('check config settings', () => {
@@ -13,7 +13,8 @@ describe('check config settings', () => {
   })
 
   it('displays the title text', () => {
-    cy.get('h1').contains('Configuration settings')
+    cy.get('[data-cy="top-link"]').contains(/^Conky$/)
+    cy.get('[data-cy="page-heading"]').contains(/^Configuration settings$/)
   })
 })
 describe('check variables', () => {
@@ -22,7 +23,11 @@ describe('check variables', () => {
   })
 
   it('displays the title text', () => {
-    cy.get('h1').contains('Variables')
+    cy.get('[data-cy="top-link"]').contains(/^Conky$/)
+    cy.get('[data-cy="page-heading"]').contains(/^Variables$/)
+  })
+  it('has anchor links and can focus on them', () => {
+    cy.get('[data-anchor-name="cpu"]').click().and('be.visible')
   })
 })
 describe('check lua', () => {
@@ -31,6 +36,7 @@ describe('check lua', () => {
   })
 
   it('displays the title text', () => {
-    cy.get('h1').contains('Lua API')
+    cy.get('[data-cy="top-link"]').contains(/^Conky$/)
+    cy.get('[data-cy="page-heading"]').contains(/^Lua API$/)
   })
 })

web/package-lock.json

@@ -38,6 +38,7 @@
         "eslint": "^8.34.0",
         "eslint-config-next": "^13.2.1",
         "eslint-config-prettier": "^8.6.0",
+        "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-mdx": "^2.0.5",
         "js-yaml": "^4.1.0",
         "netlify-plugin-cypress": "^2.2.1",
@@ -5105,6 +5106,27 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-plugin-cypress": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.12.1.tgz",
+      "integrity": "sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==",
+      "dev": true,
+      "dependencies": {
+        "globals": "^11.12.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 3.2.1"
+      }
+    },
+    "node_modules/eslint-plugin-cypress/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/eslint-plugin-import": {
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",

web/package.json

@@ -52,6 +52,7 @@
     "eslint": "^8.34.0",
     "eslint-config-next": "^13.2.1",
     "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-mdx": "^2.0.5",
     "js-yaml": "^4.1.0",
     "netlify-plugin-cypress": "^2.2.1",

web/pages/config_settings.tsx

@@ -22,7 +22,9 @@ export default function ConfigSettings(props: ConfigSettingsProps) {
       />
       <main className="w-full">
         <div>
-          <h1 className="text-2xl">Configuration settings</h1>
+          <h1 className="text-2xl" data-cy="page-heading">
+            Configuration settings
+          </h1>
         </div>
         <Docs docs={props.config_settings} braces={false} assign={true} />
       </main>

web/pages/lua.tsx

@@ -15,7 +15,9 @@ export default function Lua(props: LuaProps) {
       <SEO title="Conky – Lua API" description="Conky Lua API documentation" />
       <main className="w-full">
         <div>
-          <h1 className="text-2xl">Lua API</h1>
+          <h1 className="text-2xl" data-cy="page-heading">
+            Lua API
+          </h1>
         </div>
         <Docs docs={props.lua} braces={false} assign={false} />
       </main>

web/pages/variables.tsx

@@ -17,9 +17,9 @@ export default function Variables(props: VariablesProps) {
         description="Conky object variables documentation"
       />
       <main className="w-full">
-        <div>
+        <h1 className="text-2xl" data-cy="page-heading">
-          <h1 className="text-2xl">Variables</h1>
+          Variables
-        </div>
+        </h1>
         <Docs docs={props.variables} braces={true} assign={false} />
       </main>
     </Layout>