Repository: draft-js-plugins/draft-js-plugins
Pull request #1640 (2020-12-14 16:02:07)

Migrating of @draft-js-plugins/undo to jest/testing library
## Checklist

- [x] Fix any eslint errors that occur
- [x] Update change-log for every plugin you touch
- [x] Add/Update tests if you add/change new functionality
- [x] Add/Update docs if you add/change functionality
- [x] Enable "Allow edits from maintainers" for this PR

## Use-case/Problem

Fixes part of #1477

## Implementation

This PR migrates the `@draft-js-plugins/undo` to TypeScript, jest and @testing-library/react



Patch:
diff --git a/packages/linkify/src/Link/Link.tsx b/packages/linkify/src/Link/Link.tsx
index b8732ac1..fdc0c36e 100644
--- a/packages/linkify/src/Link/Link.tsx
+++ b/packages/linkify/src/Link/Link.tsx
@@ -20,20 +20,20 @@ export interface LinkProps {
   theme?: LinkifyPluginTheme;
   component?: ComponentType<ComponentProps>;
   children: ReactNode;
-  target: string;
-  rel: string;
-  className: string;
+  target?: string;
+  rel?: string;
+  className?: string;
 
   // following props are not used
-  entityKey: unknown;
-  getEditorState: unknown;
-  offsetKey: unknown;
-  setEditorState: unknown;
-  contentState: unknown;
-  blockKey: unknown;
-  dir: unknown;
-  start: unknown;
-  end: unknown;
+  entityKey?: unknown;
+  getEditorState?: unknown;
+  offsetKey?: unknown;
+  setEditorState?: unknown;
+  contentState?: unknown;
+  blockKey?: unknown;
+  dir?: unknown;
+  start?: unknown;
+  end?: unknown;
 }
 
 // The component we render when we encounter a hyperlink in the text


Test patch:
diff --git a/packages/linkify/src/Link/__test__/Link.js b/packages/linkify/src/Link/__test__/Link.js
deleted file mode 100644
index 076e539c..00000000
--- a/packages/linkify/src/Link/__test__/Link.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-has-content,react/no-children-prop */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import { expect } from 'chai';
-import Link from '../Link';
-
-describe('Link', () => {
-  it('applies the className based on the theme property `link`', () => {
-    const theme = { link: 'custom-class-name' };
-    const result = shallow(<Link theme={theme} />);
-    expect(result).to.have.prop('className', 'custom-class-name');
-  });
-
-  it('applies any custom passed prop', () => {
-    const result = shallow(<Link data-custom="unicorn" />);
-    expect(result).to.have.prop('data-custom', 'unicorn');
-  });
-
-  it('renders the passed in children', () => {
-    const result = shallow(
-      <Link children="https://www.draft-js-plugins.com/" />
-    );
-    expect(result).to.have.prop(
-      'children',
-      'https://www.draft-js-plugins.com/'
-    );
-  });
-
-  it('applies a custom className as well as the theme', () => {
-    const theme = { link: 'custom-class-name' };
-    const result = shallow(<Link theme={theme} className="link" />);
-    expect(result).to.have.prop('className').to.contain('link');
-    expect(result).to.have.prop('className').to.contain('custom-class-name');
-  });
-
-  it('uses the decoratedText prop as href', () => {
-    const result = shallow(
-      <Link decoratedText="https://www.draft-js-plugins.com/" />
-    );
-    expect(result)
-      .to.have.prop('href')
-      .to.contain('https://www.draft-js-plugins.com/');
-  });
-
-  it('applies http prefix when none is supplied', () => {
-    const result = shallow(<Link decoratedText="draft-js-plugins.com/" />);
-    expect(result)
-      .to.have.prop('href')
-      .to.contain('http://draft-js-plugins.com/');
-  });
-
-  it('does not apply a prefix when one is already supplied', () => {
-    const result = shallow(
-      <Link decoratedText="ftp://draft-js-plugins.com/" />
-    );
-    expect(result)
-      .to.have.prop('href')
-      .to.contain('ftp://draft-js-plugins.com/');
-  });
-
-  it('generates correct href to localhost with port', () => {
-    const result = shallow(<Link decoratedText="http://localhost:8000" />);
-    expect(result).to.have.prop('href').to.contain('http://localhost:8000');
-  });
-
-  it('generates mailto href when supplied with email', () => {
-    const result = shallow(<Link decoratedText="name@example.com" />);
-    expect(result).to.have.prop('href').to.contain('mailto:name@example.com');
-  });
-
-  it('uses _self as the default target value', () => {
-    const result = shallow(<Link />);
-    expect(result).to.have.prop('target').to.contain('_self');
-  });
-
-  it('applies custom target value', () => {
-    // eslint-disable-next-line react/jsx-no-target-blank
-    const result = shallow(<Link target="_blank" />);
-    expect(result).to.have.prop('target').to.contain('_blank');
-  });
-});
diff --git a/packages/linkify/src/Link/__test__/Link.test.tsx b/packages/linkify/src/Link/__test__/Link.test.tsx
new file mode 100644
index 00000000..f81f6c6c
--- /dev/null
+++ b/packages/linkify/src/Link/__test__/Link.test.tsx
@@ -0,0 +1,86 @@
+/* eslint-disable jsx-a11y/anchor-has-content,react/no-children-prop */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import Link from '../Link';
+
+describe('Link', () => {
+  it('applies the className based on the theme property `link` and property', () => {
+    const theme = { link: 'custom-class-name' };
+    const { getByRole } = render(
+      <Link theme={theme} className="link">
+        Link
+      </Link>
+    );
+    const link = getByRole('link');
+    expect(link).toHaveClass('custom-class-name');
+    expect(link).toHaveClass('link');
+    expect(link).toHaveAttribute('target', '_self');
+  });
+
+  it('applies any custom passed prop', () => {
+    const { getByRole } = render(<Link data-custom="unicorn">Link</Link>);
+    expect(getByRole('link')).toHaveAttribute('data-custom', 'unicorn');
+  });
+
+  it('renders the passed in children', () => {
+    const { getByRole } = render(
+      <Link>https://www.draft-js-plugins.com/</Link>
+    );
+    expect(getByRole('link')).toHaveTextContent(
+      'https://www.draft-js-plugins.com/'
+    );
+  });
+
+  it('uses the decoratedText prop as href', () => {
+    const { getByRole } = render(
+      <Link decoratedText="https://www.draft-js-plugins.com/">Link</Link>
+    );
+    expect(getByRole('link')).toHaveAttribute(
+      'href',
+      'https://www.draft-js-plugins.com/'
+    );
+  });
+
+  it('applies http prefix when none is supplied', () => {
+    const { getByRole } = render(
+      <Link decoratedText="draft-js-plugins.com/">Link</Link>
+    );
+    expect(getByRole('link')).toHaveAttribute(
+      'href',
+      'http://draft-js-plugins.com/'
+    );
+  });
+
+  it('does not apply a prefix when one is already supplied', () => {
+    const { getByRole } = render(
+      <Link decoratedText="ftp://draft-js-plugins.com/">Link</Link>
+    );
+    expect(getByRole('link')).toHaveAttribute(
+      'href',
+      'ftp://draft-js-plugins.com/'
+    );
+  });
+
+  it('generates correct href to localhost with port', () => {
+    const { getByRole } = render(
+      <Link decoratedText="http://localhost:8000">Link</Link>
+    );
+    expect(getByRole('link')).toHaveAttribute('href', 'http://localhost:8000');
+  });
+
+  it('generates mailto href when supplied with email', () => {
+    const { getByRole } = render(
+      <Link decoratedText="name@example.com">Link</Link>
+    );
+    expect(getByRole('link')).toHaveAttribute(
+      'href',
+      'mailto:name@example.com'
+    );
+  });
+
+  it('applies custom target value', () => {
+    const { getByRole } = render(<Link target="_blank">Link</Link>);
+    expect(getByRole('link')).toHaveAttribute('target', '_blank');
+  });
+});
diff --git a/packages/video/src/__test__/createVideoPlugin.js b/packages/video/src/__test__/createVideoPlugin.test.ts
similarity index 82%
rename from packages/video/src/__test__/createVideoPlugin.js
rename to packages/video/src/__test__/createVideoPlugin.test.ts
index b66547c7..477fc0d0 100644
--- a/packages/video/src/__test__/createVideoPlugin.js
+++ b/packages/video/src/__test__/createVideoPlugin.test.ts
@@ -1,29 +1,28 @@
-import { expect } from 'chai';
 import { isYoutube, getYoutubeSrc, isVimeo, getVimeoSrc } from '../video/utils';
 
 describe("CreateVideoPlugin's  utils can parse correct youtube and vimeo ulr without config", () => {
   it('default video plugin handle youtube url', () => {
     const url = 'https://www.youtube.com/watch?v=YsRMoWYGLNA';
     const result = isYoutube(url);
-    expect(result).to.eq(true);
+    expect(result).toBeTruthy();
     const src = getYoutubeSrc(url);
     const expectSrc = {
       srcID: 'YsRMoWYGLNA',
       srcType: 'youtube',
       url: 'https://www.youtube.com/watch?v=YsRMoWYGLNA',
     };
-    expect(src).to.deep.equal(expectSrc);
+    expect(src).toEqual(expectSrc);
   });
   it('default video plugin handle vimeo url', () => {
     const url = 'https://vimeo.com/153979733';
     const result = isVimeo(url);
-    expect(result).to.eq(true);
+    expect(result).toBeTruthy();
     const src = getVimeoSrc(url);
     const expectSrc = {
       srcID: '153979733',
       srcType: 'vimeo',
       url: 'https://vimeo.com/153979733',
     };
-    expect(src).to.deep.equal(expectSrc);
+    expect(src).toEqual(expectSrc);
   });
 });