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

Author: simonguo

.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