From 161b1e0ea6e25777e00cbcedd1b883db456721b4 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 1 Jan 2020 06:34:19 -0800
Subject: [PATCH 1/2] test(link): add test for Link

---
 src/components/Link/Link.test.js              | 33 +++++++++++++++++++
 .../Link/__snapshots__/Link.test.js.snap      |  5 +++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/Link/Link.test.js
 create mode 100644 src/components/Link/__snapshots__/Link.test.js.snap

diff --git a/src/components/Link/Link.test.js b/src/components/Link/Link.test.js
new file mode 100644
index 00000000..d8979152
--- /dev/null
+++ b/src/components/Link/Link.test.js
@@ -0,0 +1,33 @@
+import { render } from '@testing-library/svelte';
+import Component from './Link.Story.svelte';
+
+describe('Link', () => {
+  function hasClass(element, className) {
+    return element.classList.contains(className);
+  }
+
+  test('default', () => {
+    const { getByText, container, rerender } = render(Component, {
+      href: '#',
+      inline: false,
+      disabled: false
+    });
+
+    const selector = '.bx--link';
+    let element = null;
+
+    element = container.querySelector(selector);
+    expect(element).toBeInTheDocument();
+    expect(element.getAttribute('href')).toEqual('#');
+    expect(hasClass(element, 'bx--link--inline')).toEqual(false);
+    expect(hasClass(element, 'bx--link--disabled')).toEqual(false);
+    expect(getByText('Link')).toBeInTheDocument();
+    expect(container.innerHTML).toMatchSnapshot();
+
+    rerender({ props: { inline: true, disabled: true } });
+    element = container.querySelector(selector);
+    expect(hasClass(element, 'bx--link--inline')).toEqual(true);
+    expect(hasClass(element, 'bx--link--disabled')).toEqual(true);
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Link/__snapshots__/Link.test.js.snap b/src/components/Link/__snapshots__/Link.test.js.snap
new file mode 100644
index 00000000..7036ee4a
--- /dev/null
+++ b/src/components/Link/__snapshots__/Link.test.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link default 1`] = `"<div><div class=\\"layout svelte-q1u82c\\"><div><a class=\\"bx--link\\" href=\\"#\\">Link</a></div></div></div>"`;
+
+exports[`Link default 2`] = `"<div><div class=\\"layout svelte-q1u82c\\"><div><p class=\\"bx--link bx--link--disabled bx--link--inline\\">Link</p></div></div></div>"`;

From a6cb552a529c2c0c1920b27159c779a81140c2ff Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 1 Jan 2020 12:12:41 -0800
Subject: [PATCH 2/2] test(link): use jest-dom matchers, remove snapshots

---
 src/components/Link/Link.test.js              | 46 ++++++++-----------
 .../Link/__snapshots__/Link.test.js.snap      |  5 --
 2 files changed, 18 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/Link/__snapshots__/Link.test.js.snap

diff --git a/src/components/Link/Link.test.js b/src/components/Link/Link.test.js
index d8979152..09e4c194 100644
--- a/src/components/Link/Link.test.js
+++ b/src/components/Link/Link.test.js
@@ -1,33 +1,23 @@
 import { render } from '@testing-library/svelte';
 import Component from './Link.Story.svelte';
 
-describe('Link', () => {
-  function hasClass(element, className) {
-    return element.classList.contains(className);
-  }
-
-  test('default', () => {
-    const { getByText, container, rerender } = render(Component, {
-      href: '#',
-      inline: false,
-      disabled: false
-    });
-
-    const selector = '.bx--link';
-    let element = null;
-
-    element = container.querySelector(selector);
-    expect(element).toBeInTheDocument();
-    expect(element.getAttribute('href')).toEqual('#');
-    expect(hasClass(element, 'bx--link--inline')).toEqual(false);
-    expect(hasClass(element, 'bx--link--disabled')).toEqual(false);
-    expect(getByText('Link')).toBeInTheDocument();
-    expect(container.innerHTML).toMatchSnapshot();
-
-    rerender({ props: { inline: true, disabled: true } });
-    element = container.querySelector(selector);
-    expect(hasClass(element, 'bx--link--inline')).toEqual(true);
-    expect(hasClass(element, 'bx--link--disabled')).toEqual(true);
-    expect(container.innerHTML).toMatchSnapshot();
+test('Link', () => {
+  const { container, rerender } = render(Component, {
+    href: '#',
+    inline: false,
+    disabled: false
   });
+
+  const selector = '.bx--link';
+  let element = null;
+
+  element = container.querySelector(selector);
+  expect(element).toHaveAttribute('href', '#');
+  expect(element).not.toHaveClass('bx--link--inline', 'bx--link--disabled');
+  expect(element).toHaveTextContent('Link');
+
+  rerender({ props: { inline: true, disabled: true } });
+
+  element = container.querySelector(selector);
+  expect(element).toHaveClass('bx--link--inline', 'bx--link--disabled');
 });
diff --git a/src/components/Link/__snapshots__/Link.test.js.snap b/src/components/Link/__snapshots__/Link.test.js.snap
deleted file mode 100644
index 7036ee4a..00000000
--- a/src/components/Link/__snapshots__/Link.test.js.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Link default 1`] = `"<div><div class=\\"layout svelte-q1u82c\\"><div><a class=\\"bx--link\\" href=\\"#\\">Link</a></div></div></div>"`;
-
-exports[`Link default 2`] = `"<div><div class=\\"layout svelte-q1u82c\\"><div><p class=\\"bx--link bx--link--disabled bx--link--inline\\">Link</p></div></div></div>"`;