Skip to content

Commit

Permalink
Update more tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Jack Pope committed Mar 5, 2024
1 parent b81de30 commit 48f7664
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 113 deletions.
154 changes: 99 additions & 55 deletions packages/react-art/src/__tests__/ReactART-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,8 @@ import Wedge from 'react-art/Wedge';

// Isolate DOM renderer.
jest.resetModules();

const ReactDOMClient = require('react-dom/client');
const act = require('internal-test-utils').act;

// Isolate test renderer.
jest.resetModules();
const ReactTestRenderer = require('react-test-renderer');
let act = require('internal-test-utils').act;

// Isolate the noop renderer
jest.resetModules();
Expand All @@ -45,8 +40,16 @@ let TestComponent;
let waitFor;
let groupRef;

// let ReactDOMClient;
// let ReactTestRenderer
// let ReactNoop
// let Scheduler
// let act;

const Missing = {};

// function setup()

function testDOMNodeStructure(domNode, expectedStructure) {
expect(domNode).toBeDefined();
expect(domNode.nodeName).toBe(expectedStructure.nodeName);
Expand All @@ -73,6 +76,7 @@ describe('ReactART', () => {
let container;

beforeEach(() => {
jest.resetModules();
container = document.createElement('div');
document.body.appendChild(container);

Expand Down Expand Up @@ -449,85 +453,125 @@ describe('ReactART', () => {
});

describe('ReactARTComponents', () => {
it('should generate a <Shape> with props for drawing the Circle', () => {
const circle = ReactTestRenderer.create(
<Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
);
let ReactTestRenderer;
beforeEach(() => {
jest.resetModules();
ReactTestRenderer = require('react-test-renderer');
act = require('internal-test-utils').act;
});

it('should generate a <Shape> with props for drawing the Circle', async () => {
let circle;
await act(() => {
circle = ReactTestRenderer.create(
<Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
);
});
expect(circle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with props for drawing the Rectangle', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle width={50} height={50} stroke="green" fill="blue" />,
);
it('should generate a <Shape> with props for drawing the Rectangle', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle width={50} height={50} stroke="green" fill="blue" />,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with positive width when width prop is negative', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle width={-50} height={50} />,
);
it('should generate a <Shape> with positive width when width prop is negative', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle width={-50} height={50} />,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with positive height when height prop is negative', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle height={-50} width={50} />,
);
it('should generate a <Shape> with positive height when height prop is negative', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle height={-50} width={50} />,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with a radius property of 0 when top left radius prop is negative', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle radiusTopLeft={-25} width={50} height={50} />,
);
it('should generate a <Shape> with a radius property of 0 when top left radius prop is negative', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle radiusTopLeft={-25} width={50} height={50} />,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with a radius property of 0 when top right radius prop is negative', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle radiusTopRight={-25} width={50} height={50} />,
);
it('should generate a <Shape> with a radius property of 0 when top right radius prop is negative', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle radiusTopRight={-25} width={50} height={50} />,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with a radius property of 0 when bottom right radius prop is negative', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle radiusBottomRight={-30} width={50} height={50} />,
);
it('should generate a <Shape> with a radius property of 0 when bottom right radius prop is negative', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle radiusBottomRight={-30} width={50} height={50} />,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with a radius property of 0 when bottom left radius prop is negative', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle radiusBottomLeft={-25} width={50} height={50} />,
);
it('should generate a <Shape> with a radius property of 0 when bottom left radius prop is negative', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle radiusBottomLeft={-25} width={50} height={50} />,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> where top radius is 0 if the sum of the top radius is greater than width', () => {
const rectangle = ReactTestRenderer.create(
<Rectangle
radiusTopRight={25}
radiusTopLeft={26}
width={50}
height={40}
/>,
);
it('should generate a <Shape> where top radius is 0 if the sum of the top radius is greater than width', async () => {
let rectangle;
await act(() => {
rectangle = ReactTestRenderer.create(
<Rectangle
radiusTopRight={25}
radiusTopLeft={26}
width={50}
height={40}
/>,
);
});
expect(rectangle.toJSON()).toMatchSnapshot();
});

it('should generate a <Shape> with props for drawing the Wedge', () => {
const wedge = ReactTestRenderer.create(
<Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
);
it('should generate a <Shape> with props for drawing the Wedge', async () => {
let wedge;
await act(() => {
wedge = ReactTestRenderer.create(
<Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
);
});
expect(wedge.toJSON()).toMatchSnapshot();
});

it('should return null if startAngle equals to endAngle on Wedge', () => {
const wedge = ReactTestRenderer.create(
<Wedge outerRadius={50} startAngle={0} endAngle={0} fill="blue" />,
);
it('should return null if startAngle equals to endAngle on Wedge', async () => {
let wedge;
await act(() => {
wedge = ReactTestRenderer.create(
<Wedge outerRadius={50} startAngle={0} endAngle={0} fill="blue" />,
);
});
expect(wedge.toJSON()).toBeNull();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,10 @@ describe('React hooks DevTools integration', () => {
return <div>count:{count}</div>;
}

const renderer = ReactTestRenderer.create(<MyComponent />);
let renderer;
await act(() => {
renderer = ReactTestRenderer.create(<MyComponent />);
});
expect(renderer.toJSON()).toEqual({
type: 'div',
props: {},
Expand Down Expand Up @@ -107,7 +110,10 @@ describe('React hooks DevTools integration', () => {
);
}

const renderer = ReactTestRenderer.create(<MyComponent />);
let renderer;
await act(() => {
renderer = ReactTestRenderer.create(<MyComponent />);
});
expect(renderer.toJSON()).toEqual({
type: 'div',
props: {},
Expand Down Expand Up @@ -155,7 +161,10 @@ describe('React hooks DevTools integration', () => {
return <div>count:{count}</div>;
}

const renderer = ReactTestRenderer.create(<MyComponent />);
let renderer;
await act(() => {
renderer = ReactTestRenderer.create(<MyComponent />);
});
expect(renderer.toJSON()).toEqual({
type: 'div',
props: {},
Expand Down Expand Up @@ -192,14 +201,16 @@ describe('React hooks DevTools integration', () => {
function MyComponent() {
return 'Done';
}

const renderer = ReactTestRenderer.create(
<div>
<React.Suspense fallback={'Loading'}>
<MyComponent />
</React.Suspense>
</div>,
);
let renderer;
await act(() => {
renderer = ReactTestRenderer.create(
<div>
<React.Suspense fallback={'Loading'}>
<MyComponent />
</React.Suspense>
</div>,
);
});
const fiber = renderer.root._currentFiber().child;
if (__DEV__) {
// First render was locked
Expand Down Expand Up @@ -254,7 +265,6 @@ describe('React hooks DevTools integration', () => {
<MyComponent />
</React.Suspense>
</div>,
{unstable_isConcurrent: true},
),
);

Expand Down
Loading

0 comments on commit 48f7664

Please sign in to comment.