Skip to content

Commit

Permalink
feat: support react 19 (#1040)
Browse files Browse the repository at this point in the history
  • Loading branch information
@redonkulus
redonkulus authored Dec 9, 2024
1 parent fb0b0d5 commit 541567d
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 70 deletions.
13 changes: 7 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/register": "^7.9.0",
"@testing-library/react": "^16.0.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@wdio/cli": "^9.4.1",
"@wdio/local-runner": "^9.4.1",
"@wdio/mocha-framework": "^9.2.8",
Expand All @@ -78,17 +79,17 @@
"mocha": "^11.0.1",
"pre-commit": "^1.0.0",
"prettier": "^3.4.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-test-renderer": "^18.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-test-renderer": "^19.0.0",
"wdio-chromedriver-service": "^8.0.0",
"webpack": "^5.41.1",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.0.4"
},
"peerDependencies": {
"react": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
"react": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"precommit": [
"lint",
Expand Down
187 changes: 123 additions & 64 deletions tests/unit/Sticky.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@

process.env.NODE_ENV = 'development';

require('@testing-library/jest-dom');
const ee = require('subscribe-ui-event/dist/globalVars').EE;
const { act, render } = require('@testing-library/react');
const { act, render, screen } = require('@testing-library/react');
const React = require('react');
const Sticky = require('../../dist/cjs/Sticky');

Expand Down Expand Up @@ -484,73 +485,131 @@ describe('Sticky', () => {
*/
});

test('should allow the sticky functionality to be toggled off', () => {
var ReactTestUtils = require('react-dom/test-utils');
var React = require('react');

// setup a wrapper to simulate the controlling of the sticky prop
class TestComponent extends React.Component {
constructor(props) {
super(props);

this.sticky = null;
this.setTextInputRef = (element) => {
this.sticky = element;
};

this.state = { boundary: '', enabled: true, name: 'JOE' };
}

render() {
return (
describe('should allow the sticky functionality to be toggled off', () => {
// eslint-disable-next-line react/prop-types
const TestComponent = ({ enabled, boundary, name }) => {
return (
<>
<Sticky
/* eslint-disable-next-line react/no-string-refs */
ref="sticky"
bottomBoundary={`#boundary{this.state.boundary}`}
enabled={this.state.enabled}
bottomBoundary={`#boundary${boundary}`}
enabled={enabled}
>
{this.state.name}
{this.state.enabled && <div id="boundary" />}
{name}
{enabled && <div id="boundary" />}
</Sticky>
);
}
}

var parent = ReactTestUtils.renderIntoDocument(
React.createElement(TestComponent, {}),
);

// toggle the enabled prop off
act(() => {
parent.setState({ enabled: false });
});
expect(parent.refs.sticky.props.enabled).toEqual(false);
expect(parent.refs.sticky.state.activated).toEqual(false);
expect(parent.refs.sticky.props.children).toContain('JOE');

// should not error while not enabled & other props changed
act(() => {
parent.setState({ name: 'JENKINS' });
});
expect(parent.refs.sticky.props.enabled).toEqual(false);
expect(parent.refs.sticky.props.children).toContain('JENKINS');

// should not error while not enabled & boundary changes
act(() => {
parent.setState({ boundary: '-not-present' });
});
expect(parent.refs.sticky.props.enabled).toEqual(false);
expect(parent.refs.sticky.props.children).toContain('JENKINS');
act(() => {
parent.setState({ boundary: '' });
});

// toggle the enabled prop on
act(() => {
parent.setState({ enabled: true });
</>
);
};

test('toggles the enabled prop off', () => {
const { rerender } = render(
React.createElement(TestComponent, {
enabled: true,
boundary: '',
name: 'JOE',
}),
);

// Assert initial state
expect(screen.getByText('JOE')).toBeInTheDocument();

// Use queryByTestId or queryById if 'boundary' refers to an element
const boundaryElement =
screen.queryByTestId('boundary') ||
document.getElementById('boundary');
expect(boundaryElement).toBeInTheDocument(); // This verifies the element exists

// Toggle the enabled prop off
rerender(
React.createElement(TestComponent, {
enabled: false,
boundary: '',
name: 'JOE',
}),
);
expect(screen.getByText('JOE')).toBeInTheDocument();
expect(screen.queryByText('boundary')).toBeNull(); // No boundary div when disabled
});

test('updates name while not enabled', () => {
const { rerender } = render(
React.createElement(TestComponent, {
enabled: false,
boundary: '',
name: 'JOE',
}),
);

// Update the name prop
rerender(
React.createElement(TestComponent, {
enabled: false,
boundary: '',
name: 'JENKINS',
}),
);

// Assert updated state
expect(screen.getByText('JENKINS')).toBeInTheDocument();
expect(screen.queryByText('boundary')).toBeNull(); // Still disabled
});

test('updates boundary while not enabled', () => {
const { rerender } = render(
React.createElement(TestComponent, {
enabled: false,
boundary: '',
name: 'JENKINS',
}),
);

// Update the boundary prop
rerender(
React.createElement(TestComponent, {
enabled: false,
boundary: '-not-present',
name: 'JENKINS',
}),
);
expect(screen.getByText('JENKINS')).toBeInTheDocument();
expect(screen.queryByText('boundary')).toBeNull(); // Still disabled

// Reset the boundary
rerender(
React.createElement(TestComponent, {
enabled: false,
boundary: '',
name: 'JENKINS',
}),
);
expect(screen.getByText('JENKINS')).toBeInTheDocument();
expect(screen.queryByText('boundary')).toBeNull(); // Still disabled
});

test('toggles the enabled prop on', () => {
const { rerender } = render(
React.createElement(TestComponent, {
enabled: false,
boundary: '',
name: 'JENKINS',
}),
);

// Toggle the enabled prop on
rerender(
React.createElement(TestComponent, {
enabled: true,
boundary: '',
name: 'JENKINS',
}),
);
expect(screen.getByText('JENKINS')).toBeInTheDocument();
// Use queryByTestId or queryById if 'boundary' refers to an element
const boundaryElement =
screen.queryByTestId('boundary') ||
document.getElementById('boundary');
expect(boundaryElement).toBeInTheDocument(); // Boundary div appears
});
expect(parent.refs.sticky.props.enabled).toEqual(true);
expect(parent.refs.sticky.state.activated).toEqual(true);
});

test('should apply custom class props', () => {
Expand Down

0 comments on commit 541567d

Please sign in to comment.