test: add cypress test for markdown links that they are build correctly

examples/vue3/cypress/integration/markdown-links.js

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+describe('Markdown links', () => {
+ it('should be just #welcome and not contain attribute target="_blank"', () => {
+ cy.visit('/story/src-components-markdownlinks-story-vue?variantId=_default')
+ cy.get('#link-to-welcome').should('have.attr', 'href', '#welcome').should('not.have.attr', 'target')
+ })
+
+ it('should have target="_blank" set when they external', () => {
+ cy.visit('/story/src-components-markdownlinks-story-vue?variantId=_default')
+ cy.get('#link-to-history').should('have.attr', 'href', 'https://histoire.dev/').should('have.attr', 'target', '_blank')
+ })
+})

examples/vue3/cypress/integration/search.js

@@ -48,7 +48,7 @@ describe('Search', () => {
  cy.visit('/')
  cy.get('[data-test-id="search-btn"]').click()
  cy.get('[data-test-id="search-modal"] input').type('welcome')
- cy.get('[data-test-id="search-item"]').should('have.length', 1)
+ cy.get('[data-test-id="search-item"]').should('have.length', 2)
  cy.get('[data-test-id="search-item"]').contains('Introduction')
  })
 })

examples/vue3/cypress/integration/stories-list.js

@@ -4,7 +4,7 @@ describe('Stories list', () => {
  it('should display the stories', () => {
  cy.clearLocalStorage()
  cy.visit('/')
- cy.get('[data-test-id="story-list-item"]').should('have.length', 23)
+ cy.get('[data-test-id="story-list-item"]').should('have.length', 24)
  cy.get('[data-test-id="story-list-item"]').contains('🐱 Meow')
  cy.get('[data-test-id="story-list-item"]').contains('BaseButton')
  .contains('3') // Variants count

examples/vue3/src/components/MarkdownLinks.story.vue

@@ -0,0 +1,15 @@
+<template>
+ <Story
+ group="top"
+ docs-only
+ icon="carbon:bookmark"
+ />
+</template>
+
+<docs lang="md">
+[Link to welcome header](#welcome){id="link-to-welcome"}
+
+# Welcome
+
+This is just a link to [Histoire.dev](https://histoire.dev/){id="link-to-history"}.
+</docs>