Upgrade Dependencies and Migrate to Testing Library

package.json

@@ -19,15 +19,16 @@
     "sharing"
   ],
   "jest": {
-    "setupFiles": [
-      "./tests/testSetup.js"
+    "setupFilesAfterEnv": [
+      "./tests/test-utils.tsx"
     ],
     "collectCoverage": true,
     "coverageDirectory": "./coverage",
     "moduleNameMapper": {
-      "^.+\\.(css|styl|svg|jpg)$": "identity-obj-proxy"
+      "^.+\\.(css|styl|jpg)$": "identity-obj-proxy",
+      "\\.svg$": "<rootDir>/tests/mocks/svg.ts"
     },
-    "testURL": "http://localhost",
+    "testEnvironment": "jsdom",
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
     }
@@ -54,6 +55,8 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^12.1.5",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.20",
     "@types/parse-link-header": "^1.0.0",
@@ -64,7 +67,7 @@
     "@typescript-eslint/parser": "^4.14.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.0",
-    "clean-webpack-plugin": "^0.1.17",
+    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^0.28.7",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",

src/api/index.js

@@ -0,0 +1 @@
+// This file is intentionally left blank.

src/conf/index.js

@@ -0,0 +1,9 @@
+export default {
+  // REST APIs have a base URI to which the endpoint paths are appended. This
+  // one sets a base URI for the XSnippet API we need to communicate with.
+  API_BASE_URI: process.env.API_BASE_URI || '//api.xsnippet.org',
+
+  // When expanded with a snippet ID, it points to a raw snippet page (i.e. a
+  // plain/text page with snippet content and without markup).
+  RAW_SNIPPET_URI_FORMAT: process.env.RAW_SNIPPET_URI_FORMAT || '//xsnippet.org/%s/raw',
+}

src/entries/aceEditorOptions.js

@@ -0,0 +1 @@
+// This file is intentionally left blank.

src/entries/keyboardKeys.js

@@ -0,0 +1 @@
+// This file is intentionally left blank.

src/entries/snippetValidation.js

@@ -0,0 +1 @@
+// This file is intentionally left blank.

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { RecoilRoot } from 'recoil'
-import App from './components/App'
+import App from './components/App.jsx'
 
 ReactDOM.render(
   <RecoilRoot>

src/misc/download.js

@@ -0,0 +1 @@
+// This file is intentionally left blank.

src/misc/editor.js

@@ -0,0 +1,4 @@
+export const onEditorLoad = (editor) => {
+  // we want to disable built-in find in favor of browser's one
+  editor.commands.removeCommand('find')
+}

src/misc/editor.ts

@@ -1,4 +1,6 @@
-export const onEditorLoad = (editor: any): void => {
+import { Ace } from "ace-builds";
+
+export const onEditorLoad = (editor: Ace.Editor): void => {
   // we want to disable built-in find in favor of browser's one
   editor.commands.removeCommand('find')
 }

src/misc/modes.js

@@ -0,0 +1,28 @@
+import brace from 'brace'
+import 'brace/ext/modelist'
+
+export const getModesByName = () => brace.acequire('ace/ext/modelist')
+
+export const getCurrentMode = (syntax) => {
+  const { modesByName } = getModesByName()
+  return modesByName[syntax] || modesByName.text
+}
+
+export const getCurrentModeName = (syntax) => {
+  const mode = getCurrentMode(syntax)
+  return mode.name
+}
+
+export const getCurrentModeCaption = (syntax) => {
+  const mode = getCurrentMode(syntax)
+  return mode.caption
+}
+
+export const normalizedSyntaxes = (syntaxes) => {
+  const { modesByName } = getModesByName()
+
+  return syntaxes.map(item => ({
+    name: modesByName[item].caption,
+    value: item,
+  }))
+}

src/misc/modes.ts

@@ -9,12 +9,18 @@ type Mode = {
   name: string;
 }
 
+type Modelist = {
+  modesByName: {
+    [name: string]: Mode;
+  };
+}
+
 type NormalizedSyntax = {
   name: string;
   value: string;
 }
 
-export const getModesByName = (): any => brace.acequire('ace/ext/modelist')
+export const getModesByName = (): Modelist => brace.acequire('ace/ext/modelist')
 
 export const getCurrentMode = (syntax: string): Mode => {
   const { modesByName } = getModesByName()

src/misc/reqExp.js

@@ -0,0 +1 @@
+// This file is intentionally left blank.

src/misc/snippet.js

@@ -0,0 +1,21 @@
+import { getCurrentModeCaption } from './modes'
+import { getRawUrl } from './url'
+
+export const getSnippetTitle = (snippet) => snippet.title || `#${snippet.id}, Untitled`
+
+export const formatDate = (date) => {
+  const ISOdate = date.split('T')[0]
+
+  return ISOdate.split('-').reverse().join('.')
+}
+
+export const scrollTop = () => {
+  window.scroll({ top: 0, behavior: 'smooth' })
+}
+
+export const getSnippetMetadata = (snippet) => ({
+  syntax: getCurrentModeCaption(snippet.syntax),
+  title: getSnippetTitle(snippet),
+  rawUrl: getRawUrl(snippet.id),
+  createdAt: formatDate(snippet.created_at),
+})

src/misc/url.js

@@ -0,0 +1,7 @@
+import conf from '../conf'
+
+export const getRawUrl = (id) => conf.RAW_SNIPPET_URI_FORMAT.replace('%s', id)
+
+export const getApiUri = (endpoint, version = 'v1') => (
+  `${conf.API_BASE_URI}/${version}/${endpoint}`
+)

src/store/index.js

@@ -0,0 +1 @@
+// This file is intentionally left blank.

tests/components/Sidebar.test.tsx

@@ -1,53 +1,55 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { NavLink } from 'react-router-dom'
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 
-import Sidebar from '../../src/components/Sidebar'
+import Sidebar from '../../src/components/Sidebar';
 
 describe('Sidebar', () => {
   it('should have three items', () => {
-    const wrapper = shallow(<Sidebar />)
-    const navList = wrapper.find('.sidebar-list')
-
-    expect(navList.children()).toHaveLength(3)
-  })
+    render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const list = screen.getByRole('list');
+    const { getAllByRole } = within(list);
+    const items = getAllByRole('listitem');
+    expect(items.length).toBe(3);
+  });
 
   it('should have correct routes on sidebar items', () => {
-    const routes = {
-      0: '/',
-      1: '/recent',
-      2: '/about',
-    }
-    const wrapper = shallow(<Sidebar />)
-
-    expect(wrapper.find(NavLink).at(0).prop('to')).toEqual(routes['0'])
-    expect(wrapper.find(NavLink).at(1).prop('to')).toEqual(routes['1'])
-    expect(wrapper.find(NavLink).at(2).prop('to')).toEqual(routes['2'])
-  })
+    render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const links = screen.getAllByRole('link');
+    expect(links[0]).toHaveAttribute('href', '/');
+    expect(links[1]).toHaveAttribute('href', '/recent');
+    expect(links[2]).toHaveAttribute('href', '/about');
+  });
 
   it('should have correct icons on sidebar items', () => {
-    const icons = {
-      0: 'icon-new',
-      1: 'icon-recent',
-      2: 'icon-about',
-    }
-    const wrapper = shallow(<Sidebar />)
-
-    expect(wrapper.find('i').at(0).prop('className')).toEqual(icons['0'])
-    expect(wrapper.find('i').at(1).prop('className')).toEqual(icons['1'])
-    expect(wrapper.find('i').at(2).prop('className')).toEqual(icons['2'])
-  })
+    const { container } = render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const icons = container.querySelectorAll('i');
+    expect(icons[0]).toHaveClass('icon-new');
+    expect(icons[1]).toHaveClass('icon-recent');
+    expect(icons[2]).toHaveClass('icon-about');
+  });
 
   it('should have correct titles on sidebar items', () => {
-    const titles = {
-      0: 'New Snippet',
-      1: 'Recent Snippets',
-      2: 'About',
-    }
-    const wrapper = shallow(<Sidebar />)
-
-    expect(wrapper.find(NavLink).at(0).prop('title')).toEqual(titles['0'])
-    expect(wrapper.find(NavLink).at(1).prop('title')).toEqual(titles['1'])
-    expect(wrapper.find(NavLink).at(2).prop('title')).toEqual(titles['2'])
-  })
-})
+    render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const links = screen.getAllByRole('link');
+    expect(links[0]).toHaveAttribute('title', 'New Snippet');
+    expect(links[1]).toHaveAttribute('title', 'Recent Snippets');
+    expect(links[2]).toHaveAttribute('title', 'About');
+  });
+});

tests/components/common/Spinner.test.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import { shallow } from 'enzyme'
+import React from "react";
+import { render, screen } from "@testing-library/react";
 
-import Spinner from '../../../src/components/common/Spinner'
+import Spinner from "../../../src/components/common/Spinner";
 
-describe('Spinner', () => {
-  it('should have one child', () => {
-    const wrapper = shallow(<Spinner />)
-    expect(wrapper.children()).toHaveLength(1)
-  })
-})
+describe("Spinner", () => {
+  it("should render an image", () => {
+    render(<Spinner />);
+    const spinnerElement = screen.getByAltText("Loading...");
+    expect(spinnerElement).toBeInTheDocument();
+  });
+});

tests/components/common/Title.test.tsx

@@ -1,23 +1,23 @@
-import React from 'react'
-import { shallow } from 'enzyme'
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 
-import Title from '../../../src/components/common/Title'
+import Title from '../../../src/components/common/Title';
 
 const title = 'Snippet page';
 
 describe('Title', () => {
   it('should return correct title', () => {
-    const wrapper = shallow(<Title title={title} />)
-    expect(wrapper.text()).toEqual(title)
-  })
+    render(<Title title={title} />);
+    expect(screen.getByText(title)).toBeInTheDocument();
+  });
 
   it('should have additional class if one was provided', () => {
-    const wrapper = shallow(<Title title={title} additionalClass="custom-title" />)
-    expect(wrapper.hasClass('custom-title')).toEqual(true)
-  })
+    render(<Title title={title} additionalClass="custom-title" />);
+    expect(screen.getByText(title)).toHaveClass('custom-title');
+  });
 
-  it('should not have additional class if one wasn\'t provided', () => {
-    const wrapper = shallow(<Title title={title} />)
-    expect(wrapper.hasClass('custom-title')).toEqual(false)
-  })
-})
+  it("should not have additional class if one wasn't provided", () => {
+    render(<Title title={title} />);
+    expect(screen.getByText(title)).not.toHaveClass('custom-title');
+  });
+});

tests/mocks/svg.ts

@@ -0,0 +1 @@
+export default "div";

tests/test-utils.tsx

@@ -0,0 +1,4 @@
+import "@testing-library/jest-dom";
+import { TextEncoder } from "util";
+
+global.TextEncoder = TextEncoder;

tsconfig.json

@@ -6,9 +6,14 @@
     "jsx": "react",
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "types": [
+      "node",
+      "@testing-library/jest-dom"
+    ]
   },
   "include": [
-    "src/"
+    "src/",
+    "tests/"
   ]
 }