Merge pull request #99 from metonym/test

test(components): add InlineLoading, Loading unit tests

package.json

@@ -92,6 +92,9 @@
       "js",
       "svelte"
     ],
+    "moduleNameMapper": {
+      "^carbon-icons-svelte*": "<rootDir>src/internal/Icon.stub.svelte"
+    },
     "setupFilesAfterEnv": [
       "regenerator-runtime/runtime",
       "@testing-library/jest-dom/extend-expect"

src/components/InlineLoading/InlineLoading.test.js

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/svelte';
+import Component from './InlineLoading.svelte';
+
+test('InlineLoading', () => {
+  const { container, rerender } = render(Component, {
+    description: 'description',
+    iconDescription: 'icon description'
+  });
+
+  expect(container.querySelector('.bx--inline-loading')).toHaveTextContent('description');
+  expect(container.querySelector('.bx--loading')).toBeInTheDocument();
+
+  rerender({ props: { status: 'error' } });
+  expect(container.querySelector('.bx--inline-loading--error')).toBeInTheDocument();
+
+  rerender({ props: { status: 'finished' } });
+  expect(container.querySelector('.bx--inline-loading__checkmark-container')).toBeInTheDocument();
+});

src/components/Loading/Loading.test.js

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/svelte';
+import Component from './Loading.svelte';
+
+test('Loading', () => {
+  const { container, rerender } = render(Component);
+
+  let element = container.querySelector('.bx--loading-overlay');
+
+  expect(element).toBeInTheDocument();
+  expect(element).not.toHaveClass('bx--loading-overlay--stop');
+  expect(element.querySelector('.bx--loading__stroke')).toHaveAttribute('r', '37.5');
+
+  rerender({ props: { active: false, small: true, withOverlay: false } });
+
+  element = container.querySelector('.bx--loading');
+  expect(element).toHaveClass('bx--loading--small', 'bx--loading--stop');
+  expect(element.querySelector('.bx--loading__background')).toHaveAttribute('r', '26.8125');
+});

src/internal/Icon.stub.svelte

@@ -0,0 +1,45 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = 'will-change: transform;';
+
+  const preserveAspectRatio = 'xMidYMid meet';
+  $: ariaLabel = $$props['aria-label'];
+  $: ariaLabelledBy = $$props['aria-labelledby'];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-hidden': labelled ? undefined : true,
+    role: labelled ? 'img' : undefined,
+    focusable: tabindex === '0' ? true : focusable,
+    tabindex
+  };
+</script>
+
+<svg
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keyup
+  on:keydown
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  width="16"
+  height="16"
+  class={className}
+  {preserveAspectRatio}
+  {style}
+  {id}
+  {...attributes}>
+  <slot>
+    {#if title}
+      <title>{title}</title>
+    {/if}
+  </slot>
+</svg>