From 8230222444c0a66f46c6a7d907e50c71446817dc Mon Sep 17 00:00:00 2001
From: ResuBaka <resubaka@gmail.com>
Date: Thu, 11 Aug 2022 15:38:07 +0200
Subject: [PATCH] test: add cypress test for markdown links that they are build
 correctly

---
 .../vue3/cypress/integration/markdown-links.js    | 13 +++++++++++++
 examples/vue3/cypress/integration/search.js       |  2 +-
 examples/vue3/cypress/integration/stories-list.js |  2 +-
 .../vue3/src/components/MarkdownLinks.story.vue   | 15 +++++++++++++++
 4 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 examples/vue3/cypress/integration/markdown-links.js
 create mode 100644 examples/vue3/src/components/MarkdownLinks.story.vue

diff --git a/examples/vue3/cypress/integration/markdown-links.js b/examples/vue3/cypress/integration/markdown-links.js
new file mode 100644
index 00000000..1cb62be5
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/examples/vue3/cypress/integration/search.js b/examples/vue3/cypress/integration/search.js
index e1c1064e..815b48b4 100644
--- a/examples/vue3/cypress/integration/search.js
+++ b/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')
   })
 })
diff --git a/examples/vue3/cypress/integration/stories-list.js b/examples/vue3/cypress/integration/stories-list.js
index 7108a0d7..7d23b5a9 100644
--- a/examples/vue3/cypress/integration/stories-list.js
+++ b/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
diff --git a/examples/vue3/src/components/MarkdownLinks.story.vue b/examples/vue3/src/components/MarkdownLinks.story.vue
new file mode 100644
index 00000000..b076cc21
--- /dev/null
+++ b/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>