gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: index.css/js to styles/script (#44356)

Browse Source 
* fix: replace index with script/styles as needed

* fix: remove redundant fileKey

It's overwritten by createPoly, so the parser does not need to create it

* fix: curriculum test suite

* Update client/src/templates/Challenges/classic/MultifileEditor.js

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Oliver Eyton-Williams
2021-12-03 21:32:29 +01:00
committed by GitHub
parent 7a5e805769
commit f613a1e5fd
14 changed files with 115 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap
View File

@ -60,7 +60,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -72,10 +71,9 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
@ -86,10 +84,9 @@ for (let index = 0; index < array.length; index++) {
}",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "custom-name",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -129,7 +126,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -141,20 +137,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -222,7 +216,6 @@ Object {
23,
],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -246,20 +239,18 @@ a {
9,
],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": " // this runs before the user's code is evaluated.",
"id": "final-key",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -307,7 +298,6 @@ a {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -327,19 +317,17 @@ a {
color: green;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "final-key",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -393,7 +381,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -405,20 +392,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -440,7 +425,6 @@ Object {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -451,20 +435,18 @@ Object {
background: white;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';
\`\`",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -499,7 +481,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -511,20 +492,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -565,7 +544,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -577,20 +555,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -626,7 +602,6 @@ Object {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -637,20 +612,18 @@ Object {
background: white;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';
\`\`",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],

7
tools/challenge-parser/parser/plugins/__snapshots__/add-seed.test.js.snap
View File

@ -10,7 +10,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -22,20 +21,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],

7
tools/challenge-parser/parser/plugins/__snapshots__/add-solution.test.js.snap
View File

@ -10,7 +10,6 @@ Object {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -21,20 +20,18 @@ Object {
background: white;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';
\`\`",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],

1
tools/challenge-parser/parser/plugins/add-seed.js
View File

@ -2,7 +2,6 @@ const { isEmpty } = require('lodash');
const { root } = require('mdast-builder');
const visitChildren = require('unist-util-visit-children');
const getAllBetween = require('./utils/between-headings');
// const visit = require('unist-util-visit');
const { getFileVisitor } = require('./utils/get-file-visitor');
const editableRegionMarker = '--fcc-editable-region--';

87
tools/challenge-parser/parser/plugins/add-seed.test.js
View File

@ -42,15 +42,13 @@ describe('add-seed plugin', () => {
});
it('adds test objects to the challengeFiles array following a schema', () => {
expect.assertions(17);
expect.assertions(15);
plugin(simpleAST, file);
const {
data: { challengeFiles }
} = file;
const testObject = challengeFiles.find(x => x.fileKey === 'indexjs');
expect(Object.keys(testObject).length).toEqual(8);
expect(testObject).toHaveProperty('fileKey');
expect(typeof testObject['fileKey']).toBe('string');
const testObject = challengeFiles.find(x => x.ext === 'js');
expect(Object.keys(testObject).length).toEqual(7);
expect(testObject).toHaveProperty('ext');
expect(typeof testObject['ext']).toBe('string');
expect(testObject).toHaveProperty('name');
@ -73,16 +71,16 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.contents).toBe(`var x = 'y';`);
expect(scriptjs.contents).toBe(`var x = 'y';`);
expect(indexhtml.contents).toBe(`<html>
<body>
</body>
</html>`);
expect(indexcss.contents).toBe(`body {
expect(stylescss.contents).toBe(`body {
background: green;
}`);
});
@ -93,10 +91,10 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexcss.contents).not.toMatch('--fcc-editable-region--');
expect(indexcss.editableRegionBoundaries).toEqual([1, 4]);
expect(stylescss.contents).not.toMatch('--fcc-editable-region--');
expect(stylescss.editableRegionBoundaries).toEqual([1, 4]);
});
// TODO: can we reuse 'name'? It's always 'index', I think, which suggests
@ -107,13 +105,13 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexhtml.id).toBe('');
expect(indexcss.id).toBe('key-for-css');
expect(indexjs.id).toBe('key-for-js');
expect(stylescss.id).toBe('key-for-css');
expect(scriptjs.id).toBe('key-for-js');
});
it('throws if an id is anywhere except directly before a code node', () => {
@ -140,13 +138,13 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.head).toBe('');
expect(scriptjs.head).toBe('');
expect(indexhtml.head).toBe(`<!-- comment -->`);
expect(indexcss.head).toBe(`body {
expect(stylescss.head).toBe(`body {
etc: ''
}`);
});
@ -157,15 +155,15 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.tail).toBe(`function teardown(params) {
expect(scriptjs.tail).toBe(`function teardown(params) {
// after
}`);
expect(indexhtml.tail).toBe('');
expect(indexcss.tail).toBe(`body {
expect(stylescss.tail).toBe(`body {
background: blue;
}`);
});
@ -194,16 +192,16 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.head).toBe('');
expect(indexjs.tail).toBe('function teardown(params) {\n // after\n}');
expect(scriptjs.head).toBe('');
expect(scriptjs.tail).toBe('function teardown(params) {\n // after\n}');
expect(indexhtml.head).toBe('');
expect(indexhtml.tail).toBe('');
expect(indexcss.head).toBe('');
expect(indexcss.tail).toBe('body {\n background: blue;\n}');
expect(stylescss.head).toBe('');
expect(stylescss.tail).toBe('body {\n background: blue;\n}');
});
it('quietly ignores empty after sections', () => {
@ -212,16 +210,16 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.head).toBe('');
expect(indexjs.tail).toBe('');
expect(scriptjs.head).toBe('');
expect(scriptjs.tail).toBe('');
expect(indexhtml.head).toBe('<!-- comment -->');
expect(indexhtml.tail).toBe('');
expect(indexcss.head).toBe("body {\n etc: ''\n}");
expect(indexcss.tail).toBe('');
expect(stylescss.head).toBe("body {\n etc: ''\n}");
expect(stylescss.tail).toBe('');
});
it('throws an error (with line number) if 2 markers appear on 1 line', () => {
@ -239,12 +237,12 @@ describe('add-seed plugin', () => {
});
it('handles jsx', () => {
expect.assertions(4);
expect.assertions(3);
plugin(jsxSeedAST, file);
const {
data: { challengeFiles }
} = file;
const indexjsx = challengeFiles.find(x => x.fileKey === 'indexjsx');
const indexjsx = challengeFiles.find(x => x.ext === 'jsx');
expect(indexjsx.head).toBe(`function setup() {}`);
expect(indexjsx.tail).toBe(`function teardown(params) {
@ -256,7 +254,6 @@ describe('add-seed plugin', () => {
const Button = () => {
return <button> {/* another comment! */} text </button>;
};`);
expect(indexjsx.fileKey).toBe(`indexjsx`);
});
it('combines all the code of a specific language into a single file', () => {

32
tools/challenge-parser/parser/plugins/add-solution.test.js
View File

@ -34,17 +34,13 @@ describe('add solution plugin', () => {
});
it('adds solution objects to the challengeFiles array following a schema', () => {
expect.assertions(15);
expect.assertions(13);
plugin(mockAST, file);
const {
data: { solutions }
} = file;
const testObject = solutions[0].find(
solution => solution.fileKey === 'indexjs'
);
expect(Object.keys(testObject).length).toEqual(7);
expect(testObject).toHaveProperty('fileKey');
expect(typeof testObject['fileKey']).toBe('string');
const testObject = solutions[0].find(solution => solution.ext === 'js');
expect(Object.keys(testObject).length).toEqual(6);
expect(testObject).toHaveProperty('ext');
expect(typeof testObject['ext']).toBe('string');
expect(testObject).toHaveProperty('name');
@ -66,24 +62,22 @@ describe('add solution plugin', () => {
data: { solutions }
} = file;
expect(solutions.length).toBe(3);
expect(
solutions[0].find(solution => solution.fileKey === 'indexjs').contents
).toBe("var x = 'y';");
expect(
solutions[1].find(solution => solution.fileKey === 'indexhtml').contents
).toBe(`<html>
expect(solutions[0].find(solution => solution.ext === 'js').contents).toBe(
"var x = 'y';"
);
expect(solutions[1].find(solution => solution.ext === 'html').contents)
.toBe(`<html>
<body>
solution number two
</body>
</html>`);
expect(
solutions[1].find(solution => solution.fileKey === 'indexcss').contents
).toBe(`body {
expect(solutions[1].find(solution => solution.ext === 'css').contents)
.toBe(`body {
background: white;
}`);
expect(
solutions[2].find(solution => solution.fileKey === 'indexjs').contents
).toBe("var x = 'y3';");
expect(solutions[2].find(solution => solution.ext === 'js').contents).toBe(
"var x = 'y3';"
);
});
it('should reject solutions with editable region markers', () => {

23
tools/challenge-parser/parser/plugins/utils/get-file-visitor.js
View File

@ -12,9 +12,8 @@ const supportedLanguages = ['js', 'css', 'html', 'jsx', 'py'];
function defaultFile(lang, id) {
return {
fileKey: `index${lang}`,
ext: lang,
name: 'index',
name: getFilenames(lang),
contents: '',
head: '',
tail: '',
@ -22,6 +21,14 @@ function defaultFile(lang, id) {
};
}
function getFilenames(lang) {
const langToFilename = {
js: 'script',
css: 'styles'
};
return langToFilename[lang] ?? 'index';
}
function getFileVisitor(seeds, seedKey, validate) {
return (node, index, parent) => {
if (is(node, 'root')) return;
@ -43,21 +50,21 @@ function codeToData(node, seeds, seedKey, validate) {
Please use one of js, css, html, jsx or py
`);
const fileKey = `index${lang}`;
const id = seeds[fileKey] ? seeds[fileKey].id : '';
const fileId = `index${lang}`;
const id = seeds[fileId] ? seeds[fileId].id : '';
// the contents will be missing if there is an id preceding this code
// block.
if (!seeds[fileKey]) {
seeds[fileKey] = defaultFile(lang, id);
if (!seeds[fileId]) {
seeds[fileId] = defaultFile(lang, id);
}
if (isEmpty(node.value) && seedKey !== 'contents') {
const section = keyToSection[seedKey];
throw Error(`Empty code block in --${section}-- section`);
}
seeds[fileKey][seedKey] = isEmpty(seeds[fileKey][seedKey])
seeds[fileId][seedKey] = isEmpty(seeds[fileId][seedKey])
? node.value
: seeds[fileKey][seedKey] + '\n' + node.value;
: seeds[fileId][seedKey] + '\n' + node.value;
}
function idToData(node, index, parent, seeds) {