test: add test case.

Author: jaywcjlove

core/README.md

@@ -30,7 +30,7 @@ The new version [**v2**](https://raw.githack.com/uiwjs/react-json-view/v2-docs/i
 
 - [x] Complete all features of displaying JSON in v1.
 - [ ] Add editing functionality to v2.
-- [ ] Add test cases to v2.
+- [x] Add test cases to v2.
 
 ## Quick Start
 

core/src/symbol/BraceRight.test.tsx

@@ -0,0 +1,43 @@
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from '..';
+
+it('renders <JsonView.BraceRight /> test case', async () => {
+  const demo = {
+    value: '123',
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.BraceRight data-testid="brace">x</JsonView.BraceRight>
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const arrow = screen.getByTestId('brace');
+    expect(arrow.tagName).toBe('SPAN');
+    expect(arrow.innerHTML).toBe('x');
+  });
+});
+
+it('renders <JsonView.BraceRight render /> test case', async () => {
+  const demo = {
+    value: '123',
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.BraceRight
+        data-testid="brace"
+        render={(props) => {
+          expect(props.style).toHaveProperty('color', 'var(--w-rjv-curlybraces-color, #236a7c)');
+          return <span {...props}>.......</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const arrow = screen.getByTestId('brace');
+    expect(arrow.tagName).toBe('SPAN');
+    expect(arrow.className).toBe('w-rjv-curlybraces-end');
+    expect(arrow.innerHTML).toBe('.......');
+  });
+});

core/src/symbol/BracketsLeft.test.tsx

@@ -0,0 +1,43 @@
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from '..';
+
+it('renders <JsonView.BracketsLeft /> test case', async () => {
+  const demo = {
+    value: ['123'],
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.BracketsLeft data-testid="brace">x</JsonView.BracketsLeft>
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const arrow = screen.getByTestId('brace');
+    expect(arrow.tagName).toBe('SPAN');
+    expect(arrow.innerHTML).toBe('x');
+  });
+});
+
+it('renders <JsonView.BracketsLeft render /> test case', async () => {
+  const demo = {
+    value: ['123'],
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.BracketsLeft
+        data-testid="brace"
+        render={(props) => {
+          expect(props.style).toHaveProperty('color', 'var(--w-rjv-brackets-color, #236a7c)');
+          return <span {...props}>.......</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const arrow = screen.getByTestId('brace');
+    expect(arrow.tagName).toBe('SPAN');
+    expect(arrow.className).toBe('w-rjv-brackets-start');
+    expect(arrow.innerHTML).toBe('.......');
+  });
+});

core/src/symbol/BracketsRight.test.tsx

@@ -0,0 +1,43 @@
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from '..';
+
+it('renders <JsonView.BracketsRight /> test case', async () => {
+  const demo = {
+    value: ['123'],
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.BracketsRight data-testid="brace">x</JsonView.BracketsRight>
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const arrow = screen.getByTestId('brace');
+    expect(arrow.tagName).toBe('SPAN');
+    expect(arrow.innerHTML).toBe('x');
+  });
+});
+
+it('renders <JsonView.BracketsRight render /> test case', async () => {
+  const demo = {
+    value: ['123'],
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.BracketsRight
+        data-testid="brace"
+        render={(props) => {
+          expect(props.style).toHaveProperty('color', 'var(--w-rjv-brackets-color, #236a7c)');
+          return <span {...props}>.......</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const arrow = screen.getByTestId('brace');
+    expect(arrow.tagName).toBe('SPAN');
+    expect(arrow.className).toBe('w-rjv-brackets-end');
+    expect(arrow.innerHTML).toBe('.......');
+  });
+});

core/src/symbol/Colon.test.tsx

@@ -0,0 +1,43 @@
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from '..';
+
+it('renders <JsonView.Colon /> test case', async () => {
+  const demo = {
+    value: 123,
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.Colon data-testid="brace">x</JsonView.Colon>
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const elm = screen.getByTestId('brace');
+    expect(elm.tagName).toBe('SPAN');
+    expect(elm.innerHTML).toBe('x');
+  });
+});
+
+it('renders <JsonView.Colon render /> test case', async () => {
+  const demo = {
+    value: 123,
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.Colon
+        data-testid="colon"
+        render={(props) => {
+          expect(props.style).toHaveProperty('color', 'var(--w-rjv-colon-color, var(--w-rjv-color))');
+          return <span {...props}>.......</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const elm = screen.getByTestId('colon');
+    expect(elm.tagName).toBe('SPAN');
+    expect(elm.className).toBe('w-rjv-colon');
+    expect(elm.innerHTML).toBe('.......');
+  });
+});