Editing Shortcuts and Source Control

Using Editor Groups

Let’s get back into the rhythm of TDD. For our project, we’re going to write a function that finds all palindromes in a string. A palindrome is a phrase that’s spelled the same forwards and backwards (ignoring spaces and punctuation). For example:

palindromes('What number is never odd or even, asked the Sphinx?')

would return:

['neveroddoreven']

As frivolous as a program for finding palindromes may sound, it’s a good approximation of a real project in one important sense: the requirements aren’t precisely defined. Whereas Fizz Buzz had crystal-clear rules that we could translate directly into tests, figuring out a reasonable set of rules for the palindrome finder will require creativity and experimentation.

Create a “New Untitled File” (⌘ N on macOS, ^ N on Windows and Linux), then save it (⌘ S on macOS, ^ S on Windows and Linux) as palindromes.js. Repeat for palindromes.test.js.

Now let’s try viewing the two files side-by-side: palindromes.js on the left, palindromes.test.js on the right. There are several ways to do this. If you’re a mouse person, the fastest way is to click-and-drag the palindromes.test.js tab to the right edge of the editor area. If you’d rather stick with the keyboard, trigger the “Move Editor into Right Group” command from the Command Palette.

Now all the relevant parts of the project are in view. You can move the focus to different editor groups by pressing the primary modifier key (⌘ on macOS, ^ on Windows and Linux) with the number corresponding to the group’s ordinal position. So palindromes.js is ⌘ 1 or ^ 1, and palindromes.test.js is ⌘ 2 or ^ 2. This even works from the Terminal.

• In palindromes.test.js, create the first test:

  // palindromes.test.js
  const palindromes = require('./palindromes')
  
  describe('palindromes()', () => {
    it('correctly identifies one-word palindromes', () => {
      expect(palindromes('madam')).toEqual(['madam']); //1
    });
  });
  

1. Previously, we’ve made equality assertions with toBe(). However, toBe() does a strict equality check, which would fail here. The toEqual() assertion method, by contrast, checks for deep object equality. So the assertion expect(x).toEqual(['madam']) passes as long as x is an array with the string "madam" as its only entry.

• In palindromes.js, write a placeholder implementation:

  // palindromes.js
  module.exports = (str) => {
    return [str];
  };
  

• Then open the integrated Terminal and start Jest in watch mode:

  $ npx jest --watchAll
  

The resulting layout should resemble the following screenshot, with your code and test output visible all at once: