test: add e2e tests for RouteLink (#1487)

Co-authored-by: Xinyu Liu <[email protected]>

e2e/docs/components/route-link.md

@@ -0,0 +1,49 @@
+## RouteLink
+
+### Home Page
+
+- <RouteLink to="/">text</RouteLink>
+- <RouteLink to="/README.md">text</RouteLink>
+- <RouteLink to="/index.html">text</RouteLink>
+
+### Non-Existent
+
+- <RouteLink to="/non-existent">text</RouteLink>
+- <RouteLink to="/non-existent.md">text</RouteLink>
+- <RouteLink to="/non-existent.html">text</RouteLink>
+
+### Non-ASCII
+
+- <RouteLink to="/routes/non-ascii-paths/中文目录名/中文文件名">text</RouteLink>
+- <RouteLink to="/routes/non-ascii-paths/中文目录名/中文文件名.md">text</RouteLink>
+- <RouteLink to="/routes/non-ascii-paths/中文目录名/中文文件名.html">text</RouteLink>
+
+### Non-ASCII Encoded
+
+- <RouteLink :to="encodeURI('/routes/non-ascii-paths/中文目录名/中文文件名')">text</RouteLink>
+- <RouteLink :to="encodeURI('/routes/non-ascii-paths/中文目录名/中文文件名.md')">text</RouteLink>
+- <RouteLink :to="encodeURI('/routes/non-ascii-paths/中文目录名/中文文件名.html')">text</RouteLink>
+
+### Active
+
+- <RouteLink to="/README.md" active="">text</RouteLink>
+- <RouteLink to="/README.md" active>text</RouteLink>
+- <RouteLink to="/README.md" :active="false">text</RouteLink>
+- <RouteLink to="/README.md">text</RouteLink>
+
+### Class
+
+- <RouteLink to="/README.md" class="custom-class">text</RouteLink>
+- <RouteLink to="/README.md" active class="custom-class">text</RouteLink>
+
+### Attrs
+
+- <RouteLink to="/README.md" title="Title">text</RouteLink>
+- <RouteLink to="/README.md" target="_blank">text</RouteLink>
+- <RouteLink to="/README.md" rel="noopener">text</RouteLink>
+- <RouteLink to="/README.md" aria-label="test">text</RouteLink>
+
+### Slots
+
+- <RouteLink to="/README.md"><span>text</span></RouteLink>
+- <RouteLink to="/README.md"><span>text</span><span>text</span></RouteLink>

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

@@ -0,0 +1,87 @@
+it('RouteLink', () => {
+  const E2E_BASE = Cypress.env('E2E_BASE')
+
+  cy.visit('/components/route-link.html')
+
+  cy.get(`.e2e-theme-content #home-page + ul > li`).each((el) => {
+    cy.wrap(el).within(() => {
+      cy.get('a').should('have.attr', 'href', E2E_BASE)
+      cy.get('a').should('have.text', 'text')
+    })
+  })
+
+  cy.get(`.e2e-theme-content #non-existent + ul > li`).each((el) => {
+    cy.wrap(el).within(() => {
+      cy.get('a').should('have.attr', 'href', `${E2E_BASE}non-existent.html`)
+      cy.get('a').should('have.text', 'text')
+    })
+  })
+
+  cy.get(`.e2e-theme-content #non-ascii + ul > li`).each((el) => {
+    cy.wrap(el).within(() => {
+      cy.get('a').should(
+        'have.attr',
+        'href',
+        encodeURI(
+          `${E2E_BASE}routes/non-ascii-paths/中文目录名/中文文件名.html`,
+        ),
+      )
+      cy.get('a').should('have.text', 'text')
+    })
+  })
+
+  cy.get(`.e2e-theme-content #non-ascii-encoded + ul > li`).each((el) => {
+    cy.wrap(el).within(() => {
+      cy.get('a').should(
+        'have.attr',
+        'href',
+        encodeURI(
+          `${E2E_BASE}routes/non-ascii-paths/中文目录名/中文文件名.html`,
+        ),
+      )
+      cy.get('a').should('have.text', 'text')
+    })
+  })
+
+  cy.get(`.e2e-theme-content #active + ul > li`).each((el, index) => {
+    cy.wrap(el).within(() => {
+      if (index < 2) {
+        cy.get('a').should('have.attr', 'class', 'route-link route-link-active')
+      } else {
+        cy.get('a').should('have.attr', 'class', 'route-link')
+      }
+      cy.get('a').should('have.text', 'text')
+    })
+  })
+
+  const classResults = [
+    'route-link custom-class',
+    'route-link route-link-active custom-class',
+  ]
+  cy.get(`.e2e-theme-content #class + ul > li`).each((el, index) => {
+    cy.wrap(el).within(() => {
+      cy.get('a').should('have.attr', 'class', classResults[index])
+      cy.get('a').should('have.text', 'text')
+    })
+  })
+
+  const attrName = ['title', 'target', 'rel', 'aria-label']
+  const attrValue = ['Title', '_blank', 'noopener', 'test']
+
+  cy.get(`.e2e-theme-content #attrs + ul > li`).each((el, index) => {
+    cy.wrap(el).within(() => {
+      cy.get('a').should('have.attr', attrName[index], attrValue[index])
+    })
+  })
+
+  cy.get(`.e2e-theme-content #slots + ul > li`).each((el, index) => {
+    cy.wrap(el).within(() => {
+      cy.get('a')
+        .children()
+        .should('have.lengthOf', index + 1)
+        .each((el) => {
+          cy.wrap(el).contains('span', 'text')
+        })
+    })
+  })
+})

packages/client/src/components/RouteLink.ts

@@ -81,3 +81,8 @@ export const RouteLink: FunctionalComponent<
 }
 
 RouteLink.displayName = 'RouteLink'
+RouteLink.props = {
+  active: Boolean,
+  activeClass: String,
+  to: String,
+}