refactor: files{} -> challengeFiles[], and key -> fileKey (#43023)

* fix(client): fix client

* fix propType and add comment

* revert user.json prettification

* slight type refactor and payload correction

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* update ChallengeFile type imports

* add cypress test for code-storage

* update test and storage epic

* fix Shaun's tired brain's logic

* refactor with suggestions

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* update codeReset

* increate cypress timeout because firefox is slow

* remove unused import to make linter happy

* use focus on editor

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* use more specific seletor for cypress editor test

* account for silly null challengeFiles

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Shaun Hamilton
2021-08-12 19:48:28 +01:00
committed by GitHub
parent 1f62dfe2b3
commit 59f17f237b
41 changed files with 916 additions and 910 deletions

View File

@@ -49,7 +49,7 @@ const applyFunction = fn =>
const composeFunctions = (...fns) =>
fns.map(applyFunction).reduce((f, g) => x => f(x).then(g));
function buildSourceMap(files) {
function buildSourceMap(challengeFiles) {
// TODO: concatenating the source/contents is a quick hack for multi-file
// editing. It is used because all the files (js, html and css) end up with
// the same name 'index'. This made the last file the only file to appear in
@@ -57,22 +57,26 @@ function buildSourceMap(files) {
// A better solution is to store and handle them separately. Perhaps never
// setting the name to 'index'. Use 'contents' instead?
// TODO: is file.source ever defined?
return files.reduce(
(sources, file) => {
sources[file.name] += file.source || file.contents;
sources.editableContents += file.editableContents || '';
const source = challengeFiles.reduce(
(sources, challengeFile) => {
sources[challengeFile.name] +=
challengeFile.source || challengeFile.contents;
sources.editableContents += challengeFile.editableContents || '';
return sources;
},
{ index: '', editableContents: '' }
);
return source;
}
function checkFilesErrors(files) {
const errors = files.filter(({ error }) => error).map(({ error }) => error);
function checkFilesErrors(challengeFiles) {
const errors = challengeFiles
.filter(({ error }) => error)
.map(({ error }) => error);
if (errors.length) {
throw errors;
}
return files;
return challengeFiles;
}
const buildFunctions = {
@@ -140,41 +144,48 @@ async function getDOMTestRunner(buildData, { proxyLogger }, document) {
runTestInTestFrame(document, testString, testTimeout);
}
export function buildDOMChallenge({ files, required = [], template = '' }) {
export function buildDOMChallenge({
challengeFiles,
required = [],
template = ''
}) {
const finalRequires = [...globalRequires, ...required, ...frameRunner];
const loadEnzyme = Object.keys(files).some(key => files[key].ext === 'jsx');
const loadEnzyme = challengeFiles.some(
challengeFile => challengeFile.ext === 'jsx'
);
const toHtml = [jsToHtml, cssToHtml];
const pipeLine = composeFunctions(...getTransformers(), ...toHtml);
const finalFiles = Object.keys(files)
.map(key => files[key])
.map(pipeLine);
const finalFiles = challengeFiles.map(pipeLine);
return Promise.all(finalFiles)
.then(checkFilesErrors)
.then(files => ({
.then(challengeFiles => ({
challengeType: challengeTypes.html,
build: concatHtml({ required: finalRequires, template, files }),
sources: buildSourceMap(files),
build: concatHtml({ required: finalRequires, template, challengeFiles }),
sources: buildSourceMap(challengeFiles),
loadEnzyme
}));
}
export function buildJSChallenge({ files }, options) {
export function buildJSChallenge({ challengeFiles }, options) {
const pipeLine = composeFunctions(...getTransformers(options));
const finalFiles = Object.keys(files)
.map(key => files[key])
.map(pipeLine);
const finalFiles = challengeFiles.map(pipeLine);
return Promise.all(finalFiles)
.then(checkFilesErrors)
.then(files => ({
.then(challengeFiles => ({
challengeType: challengeTypes.js,
build: files
build: challengeFiles
.reduce(
(body, file) => [...body, file.head, file.contents, file.tail],
(body, challengeFile) => [
...body,
challengeFile.head,
challengeFile.contents,
challengeFile.tail
],
[]
)
.join('\n'),
sources: buildSourceMap(files)
sources: buildSourceMap(challengeFiles)
}));
}