test: fix e2e test

Author: Mister-Hope

e2e/docs/components/auto-link.md

@@ -8,7 +8,7 @@
   <AutoLink v-for="item in anchorLinksConfig" :config="item" />
 </div>
 
-<div id="aria-label">
+<div id="config">
   <AutoLink :config="{ text: 'text', link: '/', ariaLabel: 'label' }" />
 </div>
 

e2e/docs/components/route-link.md

@@ -58,7 +58,7 @@
 - <RouteLink to="/README.md"><span>text</span></RouteLink>
 - <RouteLink to="/README.md"><span>text</span><span>text2</span></RouteLink>
 - <RouteLink to="/"><span>text</span></RouteLink>
-- <RouteLink to="/"><span>text</span><span>text</span></RouteLink>
+- <RouteLink to="/"><span>text</span><span>text2</span></RouteLink>
 
 ### Hash and query
 

e2e/tests/components/auto-link.cy.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('components/auto-link.html')
+})
+
+test('should render route-link correctly', async ({ page }) => {
+  for (const el of await page
+    .locator('.e2e-theme-content #route-link a')
+    .all()) {
+    await expect(el).toHaveAttribute('class', /route-link/)
+  }
+})
+
+test('should render anchor-link correctly', async ({ page }) => {
+  for (const el of await page
+    .locator('.e2e-theme-content #anchor-link a')
+    .all()) {
+    await expect(el).toHaveAttribute('class', /anchor-link/)
+  }
+})
+
+test('should render config correctly', async ({ page }) => {
+  const locator = page.locator('.e2e-theme-content #config a')
+
+  await expect(locator).toHaveText('text')
+  await expect(locator).toHaveAttribute('href', '/')
+  await expect(locator).toHaveAttribute('aria-label', 'label')
+})

e2e/tests/components/auto-link.spec.ts

@@ -38,6 +38,10 @@ test('should render active status correctly', async ({ page }) => {
   const CONFIGS = [
     'route-link route-link-active',
     'route-link route-link-active',
+    'route-link route-link-active',
+    'route-link route-link-active',
+    'route-link',
+    'route-link',
     'route-link',
     'route-link',
   ]
@@ -53,6 +57,8 @@ test('should render class correctly', async ({ page }) => {
   const CONFIGS = [
     'route-link custom-class',
     'route-link route-link-active custom-class',
+    'route-link custom-class',
+    'route-link route-link-active custom-class',
   ]
 
   for (const [index, className] of CONFIGS.entries()) {
@@ -80,6 +86,22 @@ test('should render attributes correctly', async ({ page }) => {
       attrName: 'aria-label',
       attrValue: 'test',
     },
+    {
+      attrName: 'title',
+      attrValue: 'Title',
+    },
+    {
+      attrName: 'target',
+      attrValue: '_blank',
+    },
+    {
+      attrName: 'rel',
+      attrValue: 'noopener',
+    },
+    {
+      attrName: 'aria-label',
+      attrValue: 'test',
+    },
   ]
 
   for (const [index, { attrName, attrValue }] of CONFIGS.entries()) {
@@ -99,6 +121,14 @@ test('should render slots correctly', async ({ page }) => {
       spansCount: 2,
       spansText: ['text', 'text2'],
     },
+    {
+      spansCount: 1,
+      spansText: ['text'],
+    },
+    {
+      spansCount: 2,
+      spansText: ['text', 'text2'],
+    },
   ]
   for (const [index, { spansCount, spansText }] of CONFIGS.entries()) {
     const children = await page
@@ -114,6 +144,12 @@ test('should render slots correctly', async ({ page }) => {
 
 test('should render hash and query correctly', async ({ page }) => {
   const CONFIGS = [
+    `${BASE}#hash`,
+    `${BASE}?query`,
+    `${BASE}?query#hash`,
+    `${BASE}?query=1#hash`,
+    `${BASE}?query=1&query=2#hash`,
+    `${BASE}#hash?query=1&query=2`,
     `${BASE}#hash`,
     `${BASE}?query`,
     `${BASE}?query#hash`,
@@ -134,3 +170,20 @@ test('should render hash and query correctly', async ({ page }) => {
     ).toHaveAttribute('href', href)
   }
 })
+
+test('should render relative links correctly', async ({ page }) => {
+  const CONFIGS = [
+    BASE,
+    `${BASE}404.html`,
+    `${BASE}components/not-exist.html`,
+    BASE,
+    `${BASE}404.html`,
+    `${BASE}components/not-exist.html`,
+  ]
+
+  for (const [index, href] of CONFIGS.entries()) {
+    await expect(
+      page.locator('.e2e-theme-content #relative + ul > li a').nth(index),
+    ).toHaveAttribute('href', href)
+  }
+})