Allow rename of lwc component inside of __tests__ directory

[dehru]

What does this PR do?

This PR adjusts the when clause for the Rename Component command so that it works in any file in a subdirectory of the default lwc or aura with the right file extensions. It also adds a simple utility function that will resolve the directory above the __tests__ directory so that the rest of the rename component functionality works as expected.

What issues does this PR fix or reference?

##4053, @W-11152868@

Functionality Before

rename-before.mov

Functionality After

lwc-component-rename.mov

[dehru]

Basically, show the command to the user on anything inside the /lwc/ and /aura/ directories that have these file extensions. This includes the component subdirectory named __tests__ and files inside there.

If the user comes up with their own folder structure with a folder named lwc, this should still work to resolve the parent component directory.

[jeffb-sfdc]

since path.sep is coming from a module we're importing, I don't think it needs to be passed into getParentDirectoryOfTestFolder()

[dehru]

This is where i got tripped up with Windows vs OSX in unit testing. How you suggested was my original implementation. I'd appreciate your thoughts on it.

If I use path.sep inside the function itself instead of passing it in, it works great at runtime. The path that is generated by the OS can be parsed using path.sep.

But during testing, i wanted to unit test that this function works on both platforms. if I want to pass in a string like this force-app/main/default/lwc/helloworld/__tests__ and verify that it get parsed and the __tests__ directory removed, the test only passes on my OSX operating system and fails on our Windows CI. Because on Windows the function under unit test is now looking for \ and the unit test fails.

I thought about generating the string in the unit test dynamically like force-app${path.sep}main${path.sep}default${path.sep}lwc${path.sep}helloworld${path.sep}__tests__. And maybe that's better, but it just seemed hard to read and might be hard to debug a failure.

So anyway, I opted to pass in the path.sep into the function, and this allowed me to unit test the function for both operating systems, and it's easy to read the unit test.

So options are:

1. Leave it as is ( pass the separator into the function )
2. Generate the path dynamically in the unit test and use path.sep inside the function.
3. Use an if/else in the unit test. Like if ( path.sep === '/' ) {} else {} inside the it( statement of the unit test based on environment.

[jeffb-sfdc]

I looked trough our codebase, but I don't see many places where we are creating platform-specific tests. I just ran through the exercise of, "what tests would I write if I had written getParentDirectoryOfTestFolder()"?

I started off with just the implementation:

export function getParentDirectoryOfTestFolder(sourceFsPath: string): string {
  const directories = sourceFsPath.split(path.sep);
  directories.splice(directories.length - 1);
  return directories.join(path.sep);
}

...and then thought about writing a test for it. This is what immediately came to mind:

it('validates getParentDirectoryOfTestFolder', () => {
    const folders = ['path', 'to', 'tests']; // mocked(fake) path
    const folderPath = folders.join(path.sep);

    const parentFolder = folders.slice(0, -1);
    const parentFolderPath = parentFolder.join(path.sep);

    const parentDirectory = getParentDirectoryOfTestFolder(folderPath);
    expect(parentDirectory).to.equal(parentFolderPath)
  });

With this test, it validates the logic & behavior inside the function, and leaves the implementation as a black box.

OK, so, thinking out loud here... I could then see one saying that my test is just mirroring the implementation of what's in getParentDirectoryOfTestFolder(), which I would say, that's OK, we just want to validate that it works.
But if that wan't acceptable, the next thing I came up with was a test like this:

it('validates getParentDirectoryOfTestFolder', () => {
    const folderPath = 'path|to|tests'.replace(/\|/g, path.sep);
    const parentFolderPath = 'path|to'.replace(/\|/g, path.sep);

    const parentDirectory = getParentDirectoryOfTestFolder(folderPath);
    expect(parentDirectory).to.equal(parentFolderPath)
  });

[dehru]

@jeffb-sfdc - I ended up with your first suggestion. I think this is a good balance. Thanks for the input.

[klewis-sfdc]

I can see the right-click option to rename the component when I am over a .json file within the component directory structure, but the command doesn't work if that file is within another directory (like accountMap/tests/data). What do you think about either hiding the option from the right click menu here, or updating so that the rename action works correctly?

2022-06-29_07-34-45.mp4

Another example would be files within the "/templates" directory (looking at errorPanel component in eBikes)

[dehru]

@klewis-sfdc Thanks for pointing me to eBikes as a source of interesting folder structure inside the aura and lwc directories that I hadn't considered. This led me to refactor how we look up the component directory. Now we search the directory path until we find the last instance 'lwc' or 'aura', and then the component directory exists below that.

Here's a movie showing me exercise the bugs you found above.

rename-refactored.mov

[dehru]

NOTE, I'm seeing that same error from CI locally. sobjects-faux-generator is getting a 404 from npm trying to install @types for eslint.

[dehru]

@sbudhirajadoc - I added a pop-tart message if there is ever an error running this command. I noticed that we also throw a generic failure message. So this might not be necessary. Let me know what you think.

The nasty details of the error message will display in the output channel.

[sbudhirajadoc]

@dehru I am not clear on what the action "Update manually and redeploy once all the changes have been made" means. What do they update? How do they redeploy?

[klewis-sfdc]

Looks great @dehru! Thanks for the improvements!

• [x ] SFDX: Rename Component command shows up in right click menu when under main files within tests directory under LWC or Aura component structure
• [x ] SFDX: Rename Component command works to rename main files with same name as component under LWC or Aura component structure