axe-web-public
/
block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added option to generate test variations.

test-gpt-generated
Roman Axelrod 2 years ago
parent
9818067013
commit
15dbe26220
4 changed files with 127 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      layouts/scripts/dist/index.min.js
  2. 2
      layouts/scripts/dist/index.min.js.map
  3. 59
      layouts/scripts/toolbar/data-options/DataOptions.jsx
  4. 14
      layouts/scripts/toolbar/data-options/data-options.style.js

77
layouts/scripts/dist/index.min.js
View File

@ -9583,7 +9583,8 @@ const SidebarStyle = qe.div`
}
pre, textarea {
min-height: 480px;
height: 100%;
//min-height: 480px;
resize: vertical;
overflow-x: auto;
padding: 0.5rem;
@ -9593,12 +9594,19 @@ const SidebarStyle = qe.div`
border: 1px solid #cbd5e0;
width: 100%;
box-sizing: border-box;
margin-bottom: 0.5rem;
margin: 0.5rem 0;
display: block;
white-space: pre;
}
.alert {
.actions {
display: flex;
width: 100%;
justify-content: space-between;
}
.alert--error {
color: red;
}
`;
@ -9892,6 +9900,7 @@ function DesignPreview({
}
}
const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
function DataOptions(props = {}) {
props.rootAttributes = props.rootAttributes ?? {};
const initialState = {
@ -9900,7 +9909,8 @@ function DataOptions(props = {}) {
dataText: '{}',
dataOptions: [],
designPreview: [],
jsonError: false
errorMessage: null,
loading: false
};
const [state, setState] = react.exports.useState(initialState);
const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
@ -9955,7 +9965,8 @@ function DataOptions(props = {}) {
name: "data",
id: "data-options",
onChange: e => changeDataOption(e),
value: state.dataName
value: state.dataName,
disabled: state.loading
}, state.dataOptions.map(item => {
const isSelected = state.dataName === item;
return /*#__PURE__*/React.createElement("option", {
@ -9964,18 +9975,60 @@ function DataOptions(props = {}) {
}, item);
}))), state.data && /*#__PURE__*/React.createElement("textarea", {
value: state.dataText,
onChange: dataOptionUpdate
}), state.jsonError && /*#__PURE__*/React.createElement("p", {
onChange: dataOptionUpdate,
disabled: state.loading
}), state.errorMessage && /*#__PURE__*/React.createElement("p", {
className: 'alert alert--error'
}, state.errorMessage), state.loading && /*#__PURE__*/React.createElement("p", {
className: 'alert'
}, "Invalid JSON entered."), /*#__PURE__*/React.createElement("button", {
}, "Loading, please wait..."), /*#__PURE__*/React.createElement("div", {
className: 'actions'
}, /*#__PURE__*/React.createElement("button", {
className: "btn btn--secondary",
disabled: state.loading,
onClick: e => copyToClipboard(e, state.data)
}, "Copy to Clipboard")));
}, "Copy to Clipboard"), /*#__PURE__*/React.createElement("button", {
className: "btn btn--secondary",
disabled: state.loading,
onClick: e => generateVariation(e, state.data)
}, "Generate Test"))));
//
// Functions
//
function generateVariation() {
const url = PRODUCTION_REGISTRY_URL + '/content-generator/';
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
const requestOptions = {
method: 'POST',
headers: myHeaders,
body: JSON.stringify({
json: state.data
})
};
updateState({
loading: true,
errorMessage: null
});
return fetch(url, requestOptions).then(response => response.json()).then(result => {
if (result.statusCode !== 200) {
throw new Error(result.message);
}
const data = result.variation;
updateState({
dataText: JSON.stringify(data, null, 2),
data
});
updateIframe(data);
}).catch(error => {
updateState({
loading: false,
errorMessage: 'Something went wrong, please try again.'
});
});
}
function dataOptionUpdate(e) {
let data;
try {
@ -9983,14 +10036,14 @@ function DataOptions(props = {}) {
} catch (err) {
updateState({
dataText: e.target.value,
jsonError: true
errorMessage: 'Invalid JSON, please review and try again.'
});
return;
}
updateState({
dataText: e.target.value,
data,
jsonError: false
errorMessage: null
});
updateIframe(data);
}
@ -10035,7 +10088,7 @@ function DataOptions(props = {}) {
const dataOptions = await fetchDataOptions(dataName);
updateIframe(dataOptions.data);
const newState = Object.assign({
jsonError: false
errorMessage: null
}, dataOptions, {
dataName
}, {

2
layouts/scripts/dist/index.min.js.map
View File

File diff suppressed because one or more lines are too long

59
layouts/scripts/toolbar/data-options/DataOptions.jsx
View File

@ -9,6 +9,8 @@ import {
import {isClickOutside, isEscHit} from "../responsive-button/ResponsiveButton.jsx";
import {DesignPreview} from "./DesignPreview.jsx";
export const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
function DataOptions(props = {}) {
props.rootAttributes = props.rootAttributes ?? {};
@ -18,7 +20,8 @@ function DataOptions(props = {}) {
dataText: '{}',
dataOptions: [],
designPreview: [],
jsonError: false,
errorMessage: null,
loading: false,
};
const [state, setState] = useState(initialState);
@ -73,7 +76,7 @@ function DataOptions(props = {}) {
<SidebarDataOptionsStyle>
<label htmlFor="data-options">Data Options</label>
<select name="data" id="data-options" onChange={(e) => changeDataOption(e)} value={state.dataName}>
<select name="data" id="data-options" onChange={(e) => changeDataOption(e)} value={state.dataName} disabled={state.loading}>
{state.dataOptions.map((item) => {
const isSelected = state.dataName === item;
return <option value={item} selected={isSelected}>{item}</option>
@ -83,14 +86,21 @@ function DataOptions(props = {}) {
}
{state.data &&
<textarea value={state.dataText} onChange={dataOptionUpdate}/>
<textarea value={state.dataText} onChange={dataOptionUpdate} disabled={state.loading}/>
}
{state.errorMessage &&
<p className={'alert alert--error'}>{state.errorMessage}</p>
}
{state.jsonError &&
<p className={'alert'}>Invalid JSON entered.</p>
{state.loading &&
<p className={'alert'}>Loading, please wait...</p>
}
<button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
<div className={'actions'}>
<button className='btn btn--secondary' disabled={state.loading} onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
<button className='btn btn--secondary' disabled={state.loading} onClick={(e) => generateVariation(e, state.data)}>Generate Test</button>
</div>
</SidebarStyle>
</div>;
@ -98,17 +108,48 @@ function DataOptions(props = {}) {
// Functions
//
function generateVariation() {
const url = PRODUCTION_REGISTRY_URL + '/content-generator/';
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
const requestOptions = {
method: 'POST',
headers: myHeaders,
body: JSON.stringify({json: state.data}),
};
updateState({loading: true, errorMessage: null});
return fetch(url, requestOptions)
.then(response => response.json())
.then(result => {
if (result.statusCode !== 200) {
throw new Error(result.message);
}
const data = result.variation;
updateState({dataText: JSON.stringify(data, null, 2), data});
updateIframe(data);
})
.catch(error => {
updateState({loading: false, errorMessage: 'Something went wrong, please try again.'})
});
}
function dataOptionUpdate(e) {
let data;
try {
data = JSON.parse(e.target.value);
} catch (err) {
updateState({dataText: e.target.value, jsonError: true});
updateState({dataText: e.target.value, errorMessage: 'Invalid JSON, please review and try again.'});
return;
}
updateState({dataText: e.target.value, data, jsonError: false});
updateState({dataText: e.target.value, data, errorMessage: null});
updateIframe(data);
}
@ -160,7 +201,7 @@ function DataOptions(props = {}) {
const dataOptions = await fetchDataOptions(dataName);
updateIframe(dataOptions.data);
const newState = Object.assign({jsonError: false},
const newState = Object.assign({errorMessage: null},
dataOptions,
{dataName},
{dataText: JSON.stringify(dataOptions.data, null, 2)},

14
layouts/scripts/toolbar/data-options/data-options.style.js
View File

@ -25,7 +25,8 @@ export const SidebarStyle = styled.div`
}
pre, textarea {
min-height: 480px;
height: 100%;
//min-height: 480px;
resize: vertical;
overflow-x: auto;
padding: 0.5rem;
@ -35,12 +36,19 @@ export const SidebarStyle = styled.div`
border: 1px solid #cbd5e0;
width: 100%;
box-sizing: border-box;
margin-bottom: 0.5rem;
margin: 0.5rem 0;
display: block;
white-space: pre;
}
.alert {
.actions {
display: flex;
width: 100%;
justify-content: space-between;
}
.alert--error {
color: red;
}
`;

Write Preview
Loading…
Cancel
Save