test: add test case.

core/src/Block.test.tsx

@@ -0,0 +1,17 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from './';
+
+it('renders <Login.Block /> test case', () => {
+  render(
+    <Login>
+      <Render>{({ blocks, fields, $$index, extra }, data) => <label>{blocks.title}</label>}</Render>
+      <Login.Block data-testid="block" keyname="title">
+        Login
+      </Login.Block>
+    </Login>,
+  );
+  const block = screen.getByTestId('block');
+  expect(block.parentElement?.tagName).toBe('LABEL');
+  expect(block.tagName).toBe('DIV');
+  expect(block.innerHTML).toBe('Login');
+});

core/src/Button.test.tsx

@@ -0,0 +1,16 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from './';
+
+it('renders <Login.Button /> test case', () => {
+  render(
+    <Login>
+      <Render>{({ blocks, buttons, fields, $$index, extra }, data) => <label>{buttons.submit}</label>}</Render>
+      <Login.Button data-testid="button" keyname="submit" type="submit">
+        Login
+      </Login.Button>
+    </Login>,
+  );
+  const button = screen.getByTestId('button');
+  expect(button).toHaveProperty('type', 'submit');
+  expect(button.innerHTML).toBe('Login');
+});

core/src/Input.test.tsx

@@ -0,0 +1,23 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from './';
+
+it('renders <Login.Input /> test case', () => {
+  render(
+    <Login>
+      <Render>
+        {({ blocks, fields, $$index, extra }, data) => (
+          <label>
+            {fields.password} {extra.password}
+          </label>
+        )}
+      </Render>
+      <Login.Input data-testid="input" name="password" type="password" placeholder="Password">
+        <span> extra content </span>
+      </Login.Input>
+    </Login>,
+  );
+  const input = screen.getByTestId('input');
+  expect(input.parentElement?.tagName).toBe('LABEL');
+  expect(input.tagName).toBe('INPUT');
+  expect(input.nextElementSibling?.innerHTML).toBe(' extra content ');
+});

core/src/Render.test.tsx

@@ -0,0 +1,27 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from './';
+
+it('renders <Login /> <Render> test case', () => {
+  render(
+    <Login data-testid="login">
+      <Render>xxx</Render>
+    </Login>,
+  );
+  const login = screen.getByTestId('login');
+  expect(login.tagName).toBe('DIV');
+});
+
+it('renders <Login /> <Render> test case', () => {
+  render(
+    <Login data-testid="login">
+      <Render>
+        <div>xxx</div>
+      </Render>
+    </Login>,
+  );
+  const login = screen.getByTestId('login');
+  expect(login.tagName).toBe('DIV');
+  expect(login.children.length).toBe(1);
+  expect(login.children[0].tagName).toBe('DIV');
+  expect(login.children[0].innerHTML).toBe('xxx');
+});

core/src/Select.test.tsx

@@ -0,0 +1,29 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from './';
+
+it('renders <Login.Select /> test case', () => {
+  render(
+    <Login>
+      <Render>{({ blocks, fields, $$index, extra }, data) => <label>{fields.selectname}</label>}</Render>
+      <Login.Select data-testid="select" name="selectname">
+        <option value="1" data-testid="option1">
+          One
+        </option>
+        <option value="2" data-testid="option2">
+          Two
+        </option>
+      </Login.Select>
+    </Login>,
+  );
+  const select = screen.getByTestId('select');
+  expect(select.parentElement?.tagName).toBe('LABEL');
+  expect(select.tagName).toBe('SELECT');
+
+  const option1 = screen.getByTestId('option1');
+  expect(option1.tagName).toBe('OPTION');
+  expect(option1.innerHTML).toBe('One');
+
+  const option2 = screen.getByTestId('option2');
+  expect(option2.tagName).toBe('OPTION');
+  expect(option2.innerHTML).toBe('Two');
+});

core/src/Textarea.test.tsx

@@ -0,0 +1,23 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from './';
+
+it('renders <Login.Textarea /> test case', () => {
+  render(
+    <Login>
+      <Render>
+        {({ blocks, fields, $$index, extra }, data) => (
+          <label>
+            {fields.textarea} {extra.textarea}
+          </label>
+        )}
+      </Render>
+      <Login.Textarea data-testid="textarea" keyname="textarea" defaultValue="default">
+        extra content
+      </Login.Textarea>
+    </Login>,
+  );
+  const textarea = screen.getByTestId('textarea');
+  expect(textarea.parentElement?.tagName).toBe('LABEL');
+  expect(textarea.tagName).toBe('TEXTAREA');
+  expect(textarea.innerHTML).toBe('default');
+});

core/src/index.test.tsx

@@ -0,0 +1,13 @@
+import renderer from 'react-test-renderer';
+import { screen, render, waitFor, fireEvent } from '@testing-library/react';
+import Login, { Render } from './';
+
+it('renders <Login /> test case', () => {
+  const component = renderer.create(<Login />);
+  const tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children');
+  expect(tree).toHaveProperty('type', 'div');
+  expect(tree).toHaveProperty('props.className', 'login-page ');
+});

core/src/logo/Logo.test.tsx

@@ -0,0 +1,19 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from '../';
+import Logo from './Logo';
+
+it('renders <Logo /> test case', () => {
+  render(
+    <Login>
+      <Render>{({ blocks, buttons, fields, $$index, extra }, data) => <div>{blocks.logo}</div>}</Render>
+      <Login.Block keyname="logo" tagName="span">
+        <Logo data-testid="logo" />
+      </Login.Block>
+    </Login>,
+  );
+  const logo = screen.getByTestId('logo') as unknown as SVGSVGElement;
+  expect(logo.tagName).toBe('svg');
+  expect(logo.getAttribute('height')).toBe('35');
+  expect(logo.getAttribute('width')).toBe('93');
+  expect(logo.getAttribute('viewBox')).toBe('0 0 249 95');
+});

core/src/logo/LogoRect.test.tsx

@@ -0,0 +1,19 @@
+import { screen, render } from '@testing-library/react';
+import Login, { Render } from '../';
+import LogoRect from './LogoRect';
+
+it('renders <LogoRect /> test case', () => {
+  render(
+    <Login>
+      <Render>{({ blocks, buttons, fields, $$index, extra }, data) => <div>{blocks.logo}</div>}</Render>
+      <Login.Block keyname="logo" tagName="span">
+        <LogoRect data-testid="logo" />
+      </Login.Block>
+    </Login>,
+  );
+  const logo = screen.getByTestId('logo') as unknown as SVGSVGElement;
+  expect(logo.tagName).toBe('svg');
+  expect(logo.getAttribute('height')).toBe('28');
+  expect(logo.getAttribute('width')).toBe('28');
+  expect(logo.getAttribute('viewBox')).toBe('0 0 92 92');
+});

package.json

@@ -10,6 +10,8 @@
     "start": "npm run-script start --workspace website",
     "build": "lerna exec --scope @react-login-page/* --scope react-login-page -- npm run build",
     "⬆️⬆️⬆️⬆️⬆️ package ⬆️⬆️⬆️⬆️⬆️": "▲▲▲▲▲ package ▲▲▲▲▲",
+    "test": "lerna exec --scope react-login-page -- tsbb test",
+    "coverage": "lerna exec --scope react-login-page -- tsbb test --coverage --bail",
     "version": "lerna version --exact --force-publish --no-push --no-git-tag-version",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,json}'",
     "hoist": "lerna bootstrap --hoist",

website/package.json

@@ -17,6 +17,7 @@
     "@types/katex": "^0.16.0",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
+    "@types/react-test-renderer": "^18.0.2",
     "kkt": "^7.4.9",
     "source-map-explorer": "~2.5.2"
   },
@@ -42,6 +43,7 @@
     "react": "^18.2.0",
     "react-code-preview-layout": "^3.0.0",
     "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "react-login-page": "1.0.0",
     "react-router-dom": "^6.10.0",
     "styled-components": "^6.0.7"