feat: Adds title-prop & tests to Link-component

Author: ChristianKienle

docs/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [["@vue/app", {useBuiltIns: "usage"}]]
+  presets: [["@vue/app", { useBuiltIns: "usage" }]]
 };

docs/src/api/_baseline.json

@@ -200,7 +200,7 @@
       "slots": {
         "": {
           "name": "",
-          "description": "Link Title"
+          "description": "Link Title. If not set the title-prop is used as a fallback."
         }
       },
       "events": {
@@ -211,6 +211,13 @@
       },
       "mixins": [],
       "props": {
+        "title": {
+          "name": "title",
+          "description": "Is used for two things: (1) title-attribute of the rendered anchor and (2) as fallback content when no default slot is provided.",
+          "required": false,
+          "types": ["String"],
+          "defaultValue": null
+        },
         "selected": {
           "name": "selected",
           "description": "whether link is selected",

docs/src/pages/Link/default.vue

@@ -1,5 +1,19 @@
 <title>Link</title>
+<tip>
+You can provide the visible title of the link by using a default slot or by using the `title`-prop.
+If both are provided the `title`-prop is only used for the `title` attribute of the anchor. This means that
 
+```html
+<FdLink href="#" title="foo bar" />
+```
+
+is **equivialent** to
+
+```html
+<FdLink href="#" title="foo bar">foo bar</FdLink>
+```
+
+</tip>
 <template>
   <div>
     <h3>Normal</h3>
@@ -31,6 +45,9 @@
 <script>
 export default {
   methods: {
+    handleFocus() {
+      console.log("focus");
+    },
     handleClick() {
       console.log("clicked");
     }

ui/jest.config.js

@@ -1,30 +1,22 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue',
-    'ts',
-    'tsx'
-  ],
+  moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
   transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.tsx?$': 'ts-jest'
+    "^.+\\.vue$": "vue-jest",
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+    "^.+\\.tsx?$": "ts-jest"
   },
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
+    "^@/(.*)$": "<rootDir>/src/$1"
   },
-  snapshotSerializers: [
-    'jest-serializer-vue'
-  ],
+  snapshotSerializers: ["jest-serializer-vue"],
   testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
   ],
-  testURL: 'http://localhost/',
+  testURL: "http://localhost/",
   globals: {
-    'ts-jest': {
+    "ts-jest": {
       babelConfig: true
     }
   }
-}
+};

ui/src/components/Link/Link.vue

@@ -1,21 +1,24 @@
 <template>
-  <a v-on="listeners" @click="click" :class="classes" href="#">
-    <slot />
+  <a v-on="listeners" @click="click" :class="classes" href="#" :title="title">
+    <slot>{{ title }}</slot>
   </a>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import { PropValidator } from "vue/types/options";
 
 export default Vue.extend({
   name: "FdLink",
   props: {
-    selected: { type: Boolean, default: false } as PropValidator<boolean>,
-    disabled: { type: Boolean, default: false } as PropValidator<boolean>
+    title: String,
+    selected: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
   },
   methods: {
     click(event: Event): void {
+      if (event.defaultPrevented) {
+        return;
+      }
       if (this.disabled) {
         event.preventDefault();
         event.stopPropagation();

ui/src/components/Link/__tests__/Link.test.ts

@@ -0,0 +1,50 @@
+import FdLink from "./../Link.vue";
+import { mount, createLocalVue } from "@vue/test-utils";
+import FundamentalVue from "@/index";
+
+describe("Link", () => {
+  it("can be disabled", async () => {
+    const localVue = createLocalVue();
+    localVue.use(FundamentalVue);
+    const wrapper = await mount(FdLink, { propsData: { disabled: true } });
+    expect(wrapper.classes("is-disabled")).toBe(true);
+    const anchor = wrapper.find("a");
+    expect(anchor.exists()).toBe(true);
+    // @click events are not emitted
+    anchor.trigger("click");
+    expect(wrapper.emitted("click")).toBeUndefined();
+  });
+
+  it("can have custom href", async () => {
+    const localVue = createLocalVue();
+    localVue.use(FundamentalVue);
+    const wrapper = await mount(FdLink, {
+      propsData: { href: "https://localhost:10000" }
+    });
+    expect(wrapper.attributes("href")).toBe("https://localhost:10000");
+  });
+
+  it("renders default slot", async () => {
+    const localVue = createLocalVue();
+    localVue.use(FundamentalVue);
+    const wrapper = await mount(FdLink, {
+      slots: {
+        default: "foo bar"
+      }
+    });
+    expect(wrapper.find("a").text()).toBe("foo bar");
+  });
+
+  it("renders title as both: title-attr and content", async () => {
+    const localVue = createLocalVue();
+    localVue.use(FundamentalVue);
+    const wrapper = await mount(FdLink, {
+      propsData: {
+        title: "foo bar"
+      }
+    });
+    const anchor = wrapper.find("a");
+    expect(anchor.text()).toBe("foo bar");
+    expect(anchor.attributes("title")).toBe("foo bar");
+  });
+});