Freecodecamp: [Beta] ES6 Section: some missing tests and titles, text needs formatting

[HKuz]

Challenge Name

This is a generic issue to help track a few QA tasks for the ES6 section.

Issue Description

The challenges in the ES6 section are all listed below. Each one can benefit from some formatting tweaks in the challenge copy. Also, the challenge titles should follow the [Verb] [Object Clause] format that's used elsewhere (e.g. "Use Conditional Logic with If Statements" or "Comment Your JavaScript Code") and two challenges are missing titles. There are a number of challenges with placeholder tests that need to be written.

• Explore Problems with the var Keyword
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Add test to make sure let keyword is used instead of var
  
  
• Compare Scopes of the var and let Keywords
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Temporarily disabled ES6 syntax test
  
  
• Declare a Read-Only Variable with the const Keyword
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Mutate an Array Declared with const
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use Arrow Functions to Write Concise Anonymous Functions
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Write Arrow Functions with Parameters
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Write Higher Order Arrow Functions
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Set Default Parameters for Your Functions
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write one missing test
  
  
• Use the Rest Operator with Function Parameters
  
  
  
  • [x] Add title (suggested title: Use the Rest Operator with Function Parameters)
  
  
  • [x] Formatting fixes
  
  
• Use the Spread Operator to Evaluate Arrays In-Place
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use Destructuring Assignment to Assign Variables from Objects
  
  
  
  • [x] Add title
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use Destructuring Assignment to Assign Variables from Nested Objects
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use Destructuring Assignment to Assign Variables from Arrays
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use Destructuring Assignment to Pass an Object as a Function's Parameters
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Interpolate a String Using Backquotes
  
  
  
  • [ ] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Write Concise Object Literal Declarations Using Simple Fields
  
  
  
  • [ ] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Write Concise Declarative Functions with ES6
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use class Syntax to Define a Constructor Function
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Use getters and setters to Control Access to an Object
  
  
  
  • [x] Formatting fixes
  
  
  • [ ] Write missing tests
  
  
• Understand the Differences Between import and require
  
  
  
  • [x] Formatting fixes
  
  
• Use export to Reuse a Code Block
  
  
  
  • [x] Formatting fixes
  
  
• Use * to Import Everything from a File
  
  
  
  • [x] Formatting fixes
  
  
• Create an Export Fallback with export default
  
  
  
  • [x] Formatting fixes
  
  
• Importing a Default Export
  
  
  
  • [x] Formatting fixes
  
  

Formatting suggestions for the challenge copy:

• any JS keyword, operator, or method name, etc. should go in code tags. This puts the term in pink-colored text (or green, in night mode). The first instance of a term that is being defined can go in <dfn> tags
• multi-line code examples should go in blockquote tags, where lines are separated with the br tag. See this example in the code base.
• Replace the "Instructions" line with a single <hr> tag (the <hr> should be on its own line in the seed file)
• Notes use <strong>Note</strong><br>Rest of note text... format

One person does not have to do all of these changes. Comment below which challenge(s) you'd like to work on (UPDATE: given some issues writing tests using regex for these challenges noted below it's okay if you just want to work on fixing formatting). Then after the PR is accepted, you can check off what's done. Thank you!

[robbawebba]

@HKuz If these are still up for grabs, I would like to work on the 3 arrow function challenges. I'll change the titles to follow the '${verb} ${object clause}' format as well 😄

[HKuz]

Excellent @robbawebba - those are all yours! And thanks for fixing the titles, too 👍

[HKuz]

Hi folks, FYI looks like there's an issue using regex tests to check for ES6 implementation in the camper's code for this section. It was isolated by @Greenheart in issue #12913 (comment). Basically, the code is transpiled into ES5 before the tests are run, so anything checking for ES6 syntax will fail.

[BrendanSweeny]

I am working on reformatting, re-titling (where needed), and fixing grammatical errors in the first four challenges for this section ("Problems with the var keyword" through "An Immutable Object a const does not make"). For now, I will focus on reformatting the instructions to conform with the style of the previous section, Basic Javascript. If there is a fix for the regex test issue, I may be able to help fill in some of the missing tests.

[HKuz]

Awesome, thanks so much @BrendanSweeny! Don't worry about the tests - we can get formatting fixes done in the first round of edits and tests later. I can update the original post to separate them if they're outstanding.

[BrendanSweeny]

Progress update: I have created a pull request with my proposed changes to the formatting for the first four challenges. Again, the tests for challenges 3 and 4 still need attention.

PR: #12956

[Greenheart]

http://beta.freecodecamp.com/en/challenges/es6/using-the-const-keyword has an issue with it's tests: It doesn't check that the variables were renamed to UPPERCASE, despite having instructions stating that the camper needs to do this.

Could be a i flag (ignore capitalization) for the regex used in the tests. If so, fix this by removing it.

[erictleung]

@Greenheart it probably has to do with the fact that the tests are just comments :smile: https://github.com/freeCodeCamp/freeCodeCamp/blob/541bde442c0167c4189b096afcaf0efe0e4a0960/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json#L180.

[Greenheart]

http://beta.freecodecamp.com/en/challenges/es6/problems-with-the-var-keyword needs an extra test that ensures the let keyword was used rather than the var keyword. Could be solved with regex, but only once we've got tests working properly for this section.

[dhcodes]

@HKuz I've noticed that attributes (ex. text-transform) in the titles of the beta challenges have an odd formatting. Currently, they are like this:
ex. Use the Text-transform Property...

I think this should be:
Use the text-transform Property...

where the attribute is lowercase in the title. If you agree, I'll add it to your list above and fix all with a PR. Happy to hear others' opinions on this.

[HKuz]

@BrendanSweeny - nice job on your PR, I saw it was just merged! I updated the structure of the comment at the top to break down what's been done more accurately.

@dhcodes - yes, we should make sure titles are all consistent, with your suggestion that the property names are lowercase. That'd be a huge help if you fix the oddball ones 👍 The titles in this issue almost all need to be re-worked into the [Verb] [Object Clause] format (top four are good, and there's an open PR for the arrow function ones). Everything else is fair game!

[robbawebba]

@HKuz If it's cool with you, I would like to work reformatting the next 4 challenges: Default Parameters, No Title One, Spread Operator, No Title Two 🙂

[HKuz]

@robbawebba - that'd be great, thank you! 👍 💯

[masters-george]

I have tried submitting the following code snippets and each one fails:

Version 1 - use strict inside function just before declaring variable with let
function checkScope() {
"use strict";
let i = "function scope";
if (true) {
i = "block scope";
console.log("Block scope i is: ", i);
}
console.log("Function scope i is: ", i);
return i;
}

Version 2 - use strict is first line of code
"use strict";
function checkScope() {

let i = "function scope";
if (true) {
i = "block scope";
console.log("Block scope i is: ", i);
}
console.log("Function scope i is: ", i);
return i;
}
// only change the code above this line
checkScope();

Using Chrome Browser Version 56.0.2924.87 (64-bit) on Linux 16.10 64-bit system.

[robbawebba]

@masters-george Thanks for your feedback! The tests for the ES6 challenges are not working properly at the moment, hence why they are in beta. Feel free to keep working on these challenges, but keep in mind that the tests for these challenges aren't working at the moment. Happy coding!

[robbawebba]

@HKuz just a heads up, I'm going to start working on the next 4 challenges: Nested Object Destructuring, Array Destructuring, Array Destructuring with Rest Operator, and Destructuring Function Parameters

[AngShiYa]

Hi, if it is ok I would like to work on reformatting the last 5 challenges ("Import vs. Require: What's the difference?" to "Importing a Default Export")

[Greenheart]

@AngShiYa That would be greatly appreciated! I don't think anyone has been working on that yet :blush:

[IanTeo]

Hi, can I work on the formatting changes for "class Syntax" and "class getters and setters"?

[Greenheart]

@IanTeo Sure! :smile:

[IanTeo]

@Greenheart I have a few questions..

1. Is it sufficient to change the name from "class Syntax" and "class getters and setters" to "Using class Syntax" and "Using getters and setters"?
2. In "class Syntax", there are class declarations using lowerCamelCase (var spaceShuttle... and class spaceShuttle...). If I am not mistaken, these should have the first letter capitalised right?

[robbawebba]

Hello! Do you mind if I work on the last 3 unclaimed challenges: String Interpolation using Backquotes, Enhanced Object Literals: Simple Fields, and Enhanced Object Literals: Functions?

[Greenheart]

@IanTeo

1. It seems like @dhcodes might just have updated the titles in the PR referenced just above this comment so you can leave the titles unchanged.
2. You're right, good catch! :+1:

If you want more tips and guidelines for creating challenges - see our newly added Challenge Style Guide.

@robbawebba That'd be awesome!

Thanks to you both! :smile:

[SebastianPetak]

I've noticed a small typo in the __Use class Syntax to Define a Constructor Function__ challenge. The constructor spaceShuttle should be capitalized in both blockquotes of the description:

var zeus = new spaceShuttle('Jupiter');

Should be:

var zeus = new SpaceShuttle('Jupiter');

Running Chromium 55.0.2883.87 (64 bit) on Ubuntu 16.04, 64 bit-OS

I'll fix it if this change is approved.

[erictleung]

@SebastianPetak someone's created an issue about that here https://github.com/freeCodeCamp/freeCodeCamp/issues/13812. Feel free to carry on the conversation over there.

[QuincyLarson]

I'm closing this issue as stale since it hasn't been active lately. If you think this is still relevant to the newly updated platform, please explain why, then reopen it.