Skip to content

Commit fdeeaca

Browse files
Ghost---Shadowclaude
Ghost---Shadow
and
claude
committed
Add modern React test fixtures using hooks and functional components
Add hook-based equivalents of class component test fixtures: - modern-hooks: useState/useEffect version of first-test - modern-prop-types: functional component version of experimental-class-properties - modern-idempotence: already-translated hooks code passes through unchanged - modern-partially-translated: mixed translated/untranslated hooks component Original class-based fixtures kept for backward compatibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 8490b8f commit fdeeaca

8 files changed

Lines changed: 294 additions & 0 deletions

File tree

‎test/fixtures/modern-hooks/code.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useState, useEffect } from 'react';
2+
import logo from './logo.svg';
3+
import './App.css';
4+
import api from './api';
5+
6+
const App = ({ greeting = 'Hello visitor' }) => {
7+
const [stuff, setStuff] = useState('src/App.js');
8+
const [status, setStatus] = useState('Loading data');
9+
10+
const thisHardcodedString = 'Another string';
11+
12+
useEffect(() => {
13+
const route = '/api/post';
14+
api.post(route).then(() => {
15+
setStatus('Data loaded');
16+
});
17+
}, []);
18+
19+
const hardCodedString = 'Some string';
20+
let aLetString = null;
21+
aLetString = 'Assignment Expression';
22+
23+
return (
24+
<div className="App">
25+
<div className="App-header">
26+
<img src={logo} className="App-logo" alt="logo" />
27+
<h2>Welcome to React</h2>
28+
<p>{greeting}</p>
29+
<p>{hardCodedString}</p>
30+
<p>{thisHardcodedString}</p>
31+
<p>{`${hardCodedString} ${thisHardcodedString}`}</p>
32+
<p>{aLetString}</p>
33+
<p>{status}</p>
34+
</div>
35+
<p className="App-intro">
36+
To get started, edit
37+
{' '}
38+
<code>{stuff}</code>
39+
{' '}
40+
and save to reload.
41+
</p>
42+
</div>
43+
);
44+
};
45+
46+
export default App;

‎test/fixtures/modern-hooks/output.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import i18n from 'i18next';import k from '~/i18n/keys';import React, { useState, useEffect } from 'react';
2+
import logo from './logo.svg';
3+
import './App.css';
4+
import api from './api';
5+
6+
const App = ({ greeting = 'Hello visitor' }) => {
7+
const [stuff, setStuff] = useState('src/App.js');
8+
const [status, setStatus] = useState('Loading data');
9+
10+
const thisHardcodedString = i18n.t(k.ANOTHER_STRING);
11+
12+
useEffect(() => {
13+
const route = '/api/post';
14+
api.post(route).then(() => {
15+
setStatus('Data loaded');
16+
});
17+
}, []);
18+
19+
const hardCodedString = i18n.t(k.SOME_STRING);
20+
let aLetString = null;
21+
aLetString = i18n.t(k.ASSIGNMENT_EXPRESSION);
22+
23+
return (
24+
<div className="App">
25+
<div className="App-header">
26+
<img src={logo} className="App-logo" alt="logo" />
27+
<h2>{i18n.t(k.WELCOME_TO_REACT)}</h2>
28+
<p>{greeting}</p>
29+
<p>{hardCodedString}</p>
30+
<p>{thisHardcodedString}</p>
31+
<p>{`${hardCodedString} ${thisHardcodedString}`}</p>
32+
<p>{aLetString}</p>
33+
<p>{status}</p>
34+
</div>
35+
<p className="App-intro">
36+
{i18n.t(k.TO_GET_STARTED_EDIT)}
37+
{' '}
38+
<code>{stuff}</code>
39+
{' '}
40+
{i18n.t(k.AND_SAVE_TO_RELOAD)}
41+
</p>
42+
</div>);
43+
44+
};
45+
46+
export default App;

‎test/fixtures/modern-idempotence/code.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import i18n from 'i18next';
2+
import k from '~/i18n/keys';
3+
import React, { useState, useEffect } from 'react';
4+
import logo from './logo.svg';
5+
import './App.css';
6+
import api from './api';
7+
8+
const App = () => {
9+
const [stuff] = useState(i18n.t(k.SRC_APP_JS));
10+
11+
const thisHardcodedString = i18n.t(k.ANOTHER_STRING);
12+
13+
useEffect(() => {
14+
const route = '/api/post';
15+
api.post(route);
16+
}, []);
17+
18+
const hardCodedString = i18n.t(k.SOME_STRING);
19+
20+
return (
21+
<div className="App">
22+
<div className="App-header">
23+
<img src={logo} className="App-logo" alt="logo" />
24+
<h2>{i18n.t(k.WELCOME_TO_REACT)}</h2>
25+
<p>{hardCodedString}</p>
26+
<p>{thisHardcodedString}</p>
27+
<p>{`${hardCodedString} ${thisHardcodedString}`}</p>
28+
</div>
29+
<p className="App-intro">
30+
{i18n.t(k.TO_GET_STARTED_EDIT)}
31+
{' '}
32+
<code>{stuff}</code>
33+
{' '}
34+
{i18n.t(k.AND_SAVE_TO_RELOAD)}
35+
</p>
36+
</div>
37+
);
38+
};
39+
40+
export default App;

‎test/fixtures/modern-idempotence/output.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import i18n from 'i18next';
2+
import k from '~/i18n/keys';
3+
import React, { useState, useEffect } from 'react';
4+
import logo from './logo.svg';
5+
import './App.css';
6+
import api from './api';
7+
8+
const App = () => {
9+
const [stuff] = useState(i18n.t(k.SRC_APP_JS));
10+
11+
const thisHardcodedString = i18n.t(k.ANOTHER_STRING);
12+
13+
useEffect(() => {
14+
const route = '/api/post';
15+
api.post(route);
16+
}, []);
17+
18+
const hardCodedString = i18n.t(k.SOME_STRING);
19+
20+
return (
21+
<div className="App">
22+
<div className="App-header">
23+
<img src={logo} className="App-logo" alt="logo" />
24+
<h2>{i18n.t(k.WELCOME_TO_REACT)}</h2>
25+
<p>{hardCodedString}</p>
26+
<p>{thisHardcodedString}</p>
27+
<p>{`${hardCodedString} ${thisHardcodedString}`}</p>
28+
</div>
29+
<p className="App-intro">
30+
{i18n.t(k.TO_GET_STARTED_EDIT)}
31+
{' '}
32+
<code>{stuff}</code>
33+
{' '}
34+
{i18n.t(k.AND_SAVE_TO_RELOAD)}
35+
</p>
36+
</div>);
37+
38+
};
39+
40+
export default App;

‎test/fixtures/modern-partially-translated/code.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import i18n from 'i18next';
2+
import k from '~/i18n/keys';
3+
import React, { useState, useEffect } from 'react';
4+
import logo from './logo.svg';
5+
import './App.css';
6+
import api from './api';
7+
8+
const App = () => {
9+
const [stuff] = useState(i18n.t(k.SRC_APP_JS));
10+
11+
const thisHardcodedString = 'Another string';
12+
13+
useEffect(() => {
14+
const route = '/api/post';
15+
api.post(route);
16+
}, []);
17+
18+
const hardCodedString = i18n.t(k.SOME_STRING);
19+
20+
return (
21+
<div className="App">
22+
<div className="App-header">
23+
<img src={logo} className="App-logo" alt="logo" />
24+
<h2>{i18n.t(k.WELCOME_TO_REACT)}</h2>
25+
<p>{hardCodedString}</p>
26+
<p>{thisHardcodedString}</p>
27+
<p>{`${hardCodedString} ${thisHardcodedString}`}</p>
28+
</div>
29+
<p className="App-intro">
30+
{i18n.t(k.TO_GET_STARTED_EDIT)}
31+
{' '}
32+
<code>{stuff}</code>
33+
{' '}
34+
and save to reload.
35+
</p>
36+
</div>
37+
);
38+
};
39+
40+
export default App;

‎test/fixtures/modern-partially-translated/output.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import i18n from 'i18next';
2+
import k from '~/i18n/keys';
3+
import React, { useState, useEffect } from 'react';
4+
import logo from './logo.svg';
5+
import './App.css';
6+
import api from './api';
7+
8+
const App = () => {
9+
const [stuff] = useState(i18n.t(k.SRC_APP_JS));
10+
11+
const thisHardcodedString = i18n.t(k.ANOTHER_STRING);
12+
13+
useEffect(() => {
14+
const route = '/api/post';
15+
api.post(route);
16+
}, []);
17+
18+
const hardCodedString = i18n.t(k.SOME_STRING);
19+
20+
return (
21+
<div className="App">
22+
<div className="App-header">
23+
<img src={logo} className="App-logo" alt="logo" />
24+
<h2>{i18n.t(k.WELCOME_TO_REACT)}</h2>
25+
<p>{hardCodedString}</p>
26+
<p>{thisHardcodedString}</p>
27+
<p>{`${hardCodedString} ${thisHardcodedString}`}</p>
28+
</div>
29+
<p className="App-intro">
30+
{i18n.t(k.TO_GET_STARTED_EDIT)}
31+
{' '}
32+
<code>{stuff}</code>
33+
{' '}
34+
{i18n.t(k.AND_SAVE_TO_RELOAD)}
35+
</p>
36+
</div>);
37+
38+
};
39+
40+
export default App;

‎test/fixtures/modern-prop-types/code.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const Checkbox = ({ label, handleCheckboxChange }) => {
5+
return (
6+
<div className={classes}>
7+
Some text
8+
<label>{label}</label>
9+
<button onClick={handleCheckboxChange}>
10+
Toggle checkbox
11+
</button>
12+
</div>
13+
);
14+
};
15+
16+
Checkbox.propTypes = {
17+
label: PropTypes.string.isRequired,
18+
handleCheckboxChange: PropTypes.func.isRequired,
19+
};
20+
21+
export default Checkbox;

‎test/fixtures/modern-prop-types/output.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import i18n from 'i18next';import k from '~/i18n/keys';import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const Checkbox = ({ label, handleCheckboxChange }) => {
5+
return (
6+
<div className={classes}>
7+
{i18n.t(k.SOME_TEXT)}
8+
<label>{label}</label>
9+
<button onClick={handleCheckboxChange}>
10+
{i18n.t(k.TOGGLE_CHECKBOX)}
11+
</button>
12+
</div>);
13+
14+
};
15+
16+
Checkbox.propTypes = {
17+
label: PropTypes.string.isRequired,
18+
handleCheckboxChange: PropTypes.func.isRequired
19+
};
20+
21+
export default Checkbox;

0 commit comments

Comments
 (0)