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
Open

Update TestCase component for better form and checkbox handling #32065

Changes from all commits
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
171 changes: 95 additions & 76 deletions fixtures/dom/src/components/TestCase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,29 @@ const propTypes = {
};

class TestCase extends React.Component {
constructor(props, context) {
super(props, context);
constructor(props,context) {
super(props,context);

this.state = {
complete: false,
};
}

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 @@ -45,88 +54,97 @@ class TestCase extends React.Component {
let {complete} = this.state;

const {version} = parse(window.location.search);
const isTestFixed =
!version || !resolvedIn || semver.gte(version, resolvedIn);
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>
);
}
}

TestCase.propTypes = propTypes;
TestCase.propTypes=propTypes;

TestCase.Steps = class extends React.Component {
render() {
Expand All @@ -151,4 +169,5 @@ TestCase.ExpectedResult = class extends React.Component {
);
}
};

export default TestCase;
Loading