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

Update TestCase component for better form and checkbox handling #32065

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+95 −76
Open

Update TestCase component for better form and checkbox handling #32065

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec8dc8c
Update TestCase component for better form and checkbox handling
Hemant77777777 Jan 14, 2025
8c7c432
space issue
Hemant77777777 Jan 16, 2025
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
177 changes: 98 additions & 79 deletions fixtures/dom/src/components/TestCase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import cn from 'classnames';
import semver from 'semver';
import PropTypes from 'prop-types';
import IssueList from './IssueList';
import {parse} from 'query-string';
import {semverString} from './propTypes';
import { parse } from 'query-string';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please ensure the code adheres to the project's ESLint rules. Avoid adding unnecessary spaces.

import { semverString } from './propTypes';

const React = window.React;

Expand All @@ -24,12 +24,21 @@ class TestCase extends React.Component {
};
}

handleChange = e => {
handleChange = (e) => {
this.setState({
complete: e.target.checked,
});
};

handleSubmit = (e) => {
e.preventDefault(); // Prevent default form behavior
console.log('Form submitted with state:', this.state);
};

handleReset = () => {
this.setState({ complete: false }); // Explicitly reset the checkbox state
};

render() {
const {
title,
Expand All @@ -42,86 +51,95 @@ class TestCase extends React.Component {
children,
} = this.props;

let {complete} = this.state;
let { complete } = this.state;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here.


const {version} = parse(window.location.search);
const isTestFixed =
!version || !resolvedIn || semver.gte(version, resolvedIn);
const { version } = parse(window.location.search);
Hemant77777777 marked this conversation as resolved.
Show resolved Hide resolved
const isTestFixed = !version || !resolvedIn || semver.gte(version, resolvedIn);

complete = !isTestFixed || complete;

return (
<section className={cn('test-case', complete && 'test-case--complete')}>
<h2 className="test-case__title type-subheading">
<label>
<input
className="test-case__title__check"
type="checkbox"
checked={complete}
onChange={this.handleChange}
/>{' '}
{title}
</label>
</h2>

<dl className="test-case__details">
{introducedIn && <dt>First broken in: </dt>}
{introducedIn && (
<dd>
<a
href={'https://github.com/facebook/react/tag/v' + introducedIn}>
<code>{introducedIn}</code>
</a>
</dd>
)}

{resolvedIn && <dt>First supported in: </dt>}
{resolvedIn && (
<dd>
<a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
<code>{resolvedIn}</code>
</a>
</dd>
)}

{resolvedBy && <dt>Fixed by: </dt>}
{resolvedBy && (
<dd>
<a
href={
'https://github.com/facebook/react/pull/' +
resolvedBy.slice(1)
}>
<code>{resolvedBy}</code>
</a>
</dd>
)}

{affectedBrowsers && <dt>Affected browsers: </dt>}
{affectedBrowsers && <dd>{affectedBrowsers}</dd>}

{relatedIssues && <dt>Related Issues: </dt>}
{relatedIssues && (
<dd>
<IssueList issues={relatedIssues} />
</dd>
)}
</dl>

<p className="test-case__desc">{description}</p>

<div className="test-case__body">
{!isTestFixed && (
<p className="test-case__invalid-version">
<strong>Note:</strong> This test case was fixed in a later version
of React. This test is not expected to pass for the selected
version, and that's ok!
</p>
)}

{children}
<form
onSubmit={this.handleSubmit} // Handle form submission
onReset={this.handleReset} // Handle form reset
className="test-case-form"
>
<section className={cn('test-case', complete && 'test-case--complete')}>
<h2 className="test-case__title type-subheading">
<label>
<input
className="test-case__title__check"
type="checkbox"
checked={complete}
onChange={this.handleChange}
/>{' '}
{title}
</label>
</h2>

<dl className="test-case__details">
{introducedIn && <dt>First broken in: </dt>}
{introducedIn && (
<dd>
<a href={`https://github.com/facebook/react/tag/v${introducedIn}`}>
<code>{introducedIn}</code>
</a>
</dd>
)}

{resolvedIn && <dt>First supported in: </dt>}
{resolvedIn && (
<dd>
<a href={`https://github.com/facebook/react/tag/v${resolvedIn}`}>
<code>{resolvedIn}</code>
</a>
</dd>
)}

{resolvedBy && <dt>Fixed by: </dt>}
{resolvedBy && (
<dd>
<a
href={`https://github.com/facebook/react/pull/${resolvedBy.slice(
1
)}`}
>
<code>{resolvedBy}</code>
</a>
</dd>
)}

{affectedBrowsers && <dt>Affected browsers: </dt>}
{affectedBrowsers && <dd>{affectedBrowsers}</dd>}

{relatedIssues && <dt>Related Issues: </dt>}
{relatedIssues && (
<dd>
<IssueList issues={relatedIssues} />
</dd>
)}
</dl>

<p className="test-case__desc">{description}</p>

<div className="test-case__body">
{!isTestFixed && (
<p className="test-case__invalid-version">
<strong>Note:</strong> This test case was fixed in a later version
of React. This test is not expected to pass for the selected
version, and that's ok!
</p>
)}

{children}
</div>
</section>

<div className="test-case__actions">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</section>
</form>
);
}
}
Expand All @@ -130,7 +148,7 @@ TestCase.propTypes = propTypes;

TestCase.Steps = class extends React.Component {
render() {
const {children} = this.props;
const { children } = this.props;
return (
<div>
<h3>Steps to reproduce:</h3>
Expand All @@ -142,7 +160,7 @@ TestCase.Steps = class extends React.Component {

TestCase.ExpectedResult = class extends React.Component {
render() {
const {children} = this.props;
const { children } = this.props;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here as well.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok sir

return (
<div>
<h3>Expected Result:</h3>
Expand All @@ -151,4 +169,5 @@ TestCase.ExpectedResult = class extends React.Component {
);
}
};

export default TestCase;