fix: add test for and slight rewrite to hazards of imperative (#35331)

* fix: add test for and slight rewrite to hazards of imperative

* fix: Resolve merge conflict

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.english.md

Co-Authored-By: ojeytonwilliams <ojeytonwilliams@gmail.com>

* fix: Make the only mistake in seed the use of splice

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.english.md

@@ -14,12 +14,16 @@ JavaScript offers many predefined methods that handle common tasks so you don't
 Consider the scenario: you are browsing the web in your browser, and want to track the tabs you have opened. Let's try to model this using some simple object-oriented code.
 A Window object is made up of tabs, and you usually have more than one Window open. The titles of each open site in each Window object is held in an array. After working in the browser (opening new tabs, merging windows, and closing tabs), you want to print the tabs that are still open. Closed tabs are removed from the array and new tabs (for simplicity) get added to the end of it.
 The code editor shows an implementation of this functionality with functions for <code>tabOpen()</code>, <code>tabClose()</code>, and <code>join()</code>. The array <code>tabs</code> is part of the Window object that stores the name of the open pages.
+
+
 </section>
 
+
 ## Instructions
 <section id='instructions'>
-Run the code in the editor. It's using a method that has side effects in the program, causing incorrect output. The final list of open tabs should be <code>['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']</code> but the output will be slightly different.
-Work through the code and see if you can figure out the problem, then advance to the next challenge to learn more.
+Examine the code in the editor. It's using a method that has side effects in the program, causing incorrect behaviour. The final list of open tabs, stored in <code>finalTabs.tabs</code>, should be <code>['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']</code> but the list produced by the code is slightly different.
+
+Change <code>Window.prototype.tabClose</code> so that it removes the correct tab.  
 </section>
 
 ## Tests
@@ -27,8 +31,8 @@ Work through the code and see if you can figure out the problem, then advance to
 
 ```yml
 tests:
-  - text: Move ahead to understand the error.
-    testString: '' # assert(true, 'Move ahead to understand the error.');
+  - text: <code>finalTabs.tabs</code> should be <code>['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']</code>
+    testString: assert.deepEqual(finalTabs.tabs, ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab'])
 
 ```
 
@@ -59,8 +63,63 @@ Window.prototype.tabOpen = function (tab) {
 
 // When you close a tab
 Window.prototype.tabClose = function (index) {
+
+  // Only change code below this line
+
   var tabsBeforeIndex = this.tabs.splice(0, index); // get the tabs before the tab
-  var tabsAfterIndex = this.tabs.splice(index); // get the tabs after the tab
+  var tabsAfterIndex = this.tabs.splice(index + 1); // get the tabs after the tab
+
+  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // join them together
+
+  // Only change code above this line
+
+  return this;
+ };
+
+// Let's create three browser windows
+var workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
+var socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
+var videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); //  Entertainment sites
+
+// Now perform the tab opening, closing, and other operations
+var finalTabs = socialWindow
+                    .tabOpen() // Open a new tab for cat memes
+                    .join(videoWindow.tabClose(2)) // Close third tab in video window, and join
+                    .join(workWindow.tabClose(1).tabOpen());
+console.log(finalTabs.tabs);
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```js
+// tabs is an array of titles of each site open within the window
+var Window = function(tabs) {
+  this.tabs = tabs; // we keep a record of the array inside the object
+};
+
+// When you join two windows into one window
+Window.prototype.join = function (otherWindow) {
+  this.tabs = this.tabs.concat(otherWindow.tabs);
+  return this;
+};
+
+// When you open a new tab at the end
+Window.prototype.tabOpen = function (tab) {
+  this.tabs.push('new tab'); // let's open a new tab for now
+  return this;
+};
+
+// When you close a tab
+Window.prototype.tabClose = function (index) {
+  var tabsBeforeIndex = this.tabs.slice(0, index); // get the tabs before the tab
+  var tabsAfterIndex = this.tabs.slice(index + 1); // get the tabs after the tab
 
   this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // join them together
   return this;
@@ -76,20 +135,5 @@ var finalTabs = socialWindow
                     .tabOpen() // Open a new tab for cat memes
                     .join(videoWindow.tabClose(2)) // Close third tab in video window, and join
                     .join(workWindow.tabClose(1).tabOpen());
-
-alert(finalTabs.tabs);
-```
-
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
 ```
 </section>