Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support react 19 #1040

Merged
merged 1 commit into from
Dec 9, 2024
Merged

feat: support react 19 #1040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Loading