test: add test scripts (#34)

* test: add test scripts

* ci: update github workflows

* ci: format gh-pages.yml

* ci: format gh-pages.yml

* ci: update gh-pages.yml

* docs: update README.md

* ci: update gh-pages.yml

.eslintrc.js

@@ -29,7 +29,8 @@ module.exports = {
     '@typescript-eslint/explicit-member-accessibility': OFF,
     '@typescript-eslint/no-namespace': OFF,
     '@typescript-eslint/explicit-module-boundary-types': OFF,
-    'react/display-name': OFF
+    'react/display-name': OFF,
+    'react/prop-types': OFF
   },
   settings: {
     react: {

.github/workflows/gh-pages.yml

@@ -0,0 +1,37 @@
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    runs-on: ubuntu-20.04
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 'lts/*'
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build:docs
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/master'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./docs/assets

.github/workflows/nodejs-ci.yml

@@ -0,0 +1,22 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+jobs:
+  test:
+    name: 'Test'
+    runs-on: ubuntu-latest
+    container: node:16
+
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install
+      - run: npm test

.github/workflows/nodejs-publish.yml

@@ -0,0 +1,30 @@
+# see https://help.github.com/cn/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    tags: ['*']
+
+jobs:
+  publish:
+    name: 'Publish'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Npm Publish
+        run: npm publish dist
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -1,6 +1,6 @@
 # react-code-view
 
-Let the React code in Markdown be rendered to the page, and support online editing.
+`react-code-view` is a React component based on `codemirror` and `marked`. It enables `jsx` code in `markdown` to be rendered to the page.
 
 ![preview](https://user-images.githubusercontent.com/1203827/44707274-a30c0f80-aad6-11e8-8cc5-9cf7daf4d9e2.gif)
 

__tests__/CodeEditor-test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import CodeEditor from '../src/CodeEditor';
+
+it('renders without crashing', async () => {
+  await act(async () => {
+    render(<CodeEditor />);
+  });
+});
+
+it('editor should be initialized', async () => {
+  await act(async () => {
+    const { container } = render(
+      <CodeEditor
+        onInitialized={() => {
+          expect(container.querySelector('.rcv-editor-loader')).toBeFalsy();
+        }}
+      />
+    );
+    expect(container.querySelector('.rcv-editor-loader')).toBeTruthy();
+  });
+});
+
+it('should be initialized code', async () => {
+  await act(async () => {
+    const { container } = render(
+      <CodeEditor
+        code={'const a = 1;'}
+        onInitialized={() => {
+          expect(container.querySelector('textarea').value).toBe('const a = 1;');
+          expect(container.querySelector('.CodeMirror').textContent).toBe('const a = 1;');
+        }}
+      />
+    );
+    expect(container.querySelector('.rcv-editor-loader')).toBeTruthy();
+  });
+});
+
+it('should call onChange callback', async () => {
+  await act(async () => {
+    const { container } = render(
+      <CodeEditor
+        code={'const a = 1;'}
+        onChange={value => {
+          expect(container.querySelector('textarea').value).toBe('const a = 1;');
+          expect(value).toBe('const a = 2;');
+        }}
+        onInitialized={editor => {
+          editor.setValue('const a = 2;');
+        }}
+      />
+    );
+  });
+});

__tests__/ErrorBoundary-test.js

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import ErrorBoundary from '../src/ErrorBoundary';
+
+it('renders error message', () => {
+  const { getByText } = render(<ErrorBoundary hasError errorMessage="test message" />);
+
+  expect(getByText('test message')).toBeTruthy();
+});
+
+it('render child elements', () => {
+  const { getByText } = render(<ErrorBoundary>child</ErrorBoundary>);
+  expect(getByText('child')).toBeTruthy();
+});

__tests__/Preview-test.js

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import Preview from '../src/Preview';
+
+it('renders without crashing', () => {
+  const { container } = render(<Preview />);
+  expect(container).toBeTruthy();
+});
+
+it('render a loader', () => {
+  const { container } = render(<Preview />);
+  expect(container.querySelector('.rcv-render-loader')).toBeTruthy();
+});
+
+it('render child elements', () => {
+  const { getByText } = render(
+    <Preview>
+      <button>test</button>
+    </Preview>
+  );
+  expect(getByText('test')).toBeTruthy();
+});

babel.config.js

@@ -10,7 +10,7 @@ module.exports = (api, options) => {
   return {
     presets: [
       ['@babel/preset-env', { modules, loose: true }],
-      ['@babel/preset-react', { development: dev }],
+      ['@babel/preset-react', { development: dev, runtime: 'automatic' }],
       '@babel/typescript'
     ],
     plugins: [

docs/example.md

@@ -2,7 +2,7 @@
 
 ---
 
-Let the React code in Markdown be rendered to the page, and support online editing.
+`react-code-view` is a React component based on `codemirror` and `marked`. It enables `jsx` code in `markdown` to be rendered to the page.
 
 ## Install
 

jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.js']
+};

package.json

@@ -10,18 +10,25 @@
     "build:cjs": "NODE_ENV=commonjs npx babel --extensions .ts,.tsx src --out-dir dist/cjs",
     "build:types": "npx tsc --emitDeclarationOnly --outDir dist/cjs && npx tsc --emitDeclarationOnly --outDir dist/esm",
     "build:gulp": "gulp build",
+    "build:docs": "rm -rf assets && webpack --mode production --config ./docs/webpack.config.js",
     "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types && npm run build:gulp",
     "clean": "rimraf dist",
     "dev": "webpack serve --mode development --port 3100 --host 0.0.0.0 --progress --config ./docs/webpack.config.js",
-    "docs": "rm -rf assets && webpack --mode production --config ./docs/webpack.config.js",
+    "format": "prettier --write \"{src,test}/**/*.{tsx,ts,js}\"",
+    "format:check": "prettier --list-different \"{src,test}/**/*.{tsx,ts,js}\"",
+    "lint": "eslint src/**/*.{ts,tsx}",
     "publish:docs": "node docs/gh-pages.js",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test:watch": "jest --watch ",
+    "test": "npm run format:check && npm run lint && jest"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/simonguo/react-code-view.git"
   },
   "keywords": [
+    "markdown-viewer",
+    "markdown-loader",
     "code-view",
     "editor"
   ],
@@ -57,9 +64,14 @@
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.12.7",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@types/jest": "^28.1.4",
     "@types/node": "^18.0.3",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.1.0",
     "css-loader": "^6.7.1",
@@ -77,6 +89,8 @@
     "gulp-rename": "^2.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
     "less": "^4.1.3",
     "less-loader": "^11.0.0",
     "markdown-loader": "^8.0.0",