Testing Fuselage Components

Robust testing practices are essential to ensuring the reliability, performance, and functionality of the Fuselage components. Several techniques are employed when necessary to iterate through components or packages used in our flagship project.

In cases where Storybook or the local environment proves insufficient, the following approaches are implemented. It is important to note that all examples assume a directory structure where the work tree directories are organized as siblings, as illustrated below:

- fuselage
  - .git
  - packages
    - ...on
  - ...
- Rocket.Chat
  - .git
  - apps
    - meteor
      - ...
    - ...
  - ...

This configuration serves as the foundation for the following techniques.

This guide will explore the various testing techniques and best practices to test Rocket.Chat effectively Fuselage.

Technique 1: `yarn fuselage` script

We've created a convenient helper script to streamline the testing and deployment process for Fuselage packages. The source code of this bash script can be accessed at fuselage.sh directory.

This script is designed to be used with the command, yarn fuselage -a [action] -p [package] to provide a flexible way to perform various actions. Actions are specified using the -a | --action flag, and the available options are: [link|undo|unlink|latest|latest-all].

link: Creates a symbolic link for the fuselage package
undo or unlink: Removes the symbolic link for the fuselage package
latest: Update dependencies with the @latest npm package version
latest-all: Update ALL fuselage dependencies with the @latest npm packages version

The packages that the action will be performed are specified with -p | --package flag, this option can contain multiple packages separated by a semicolon (;) like [package1;package2]

Example usage

Create a symbolic link in multiple fuselage packages using this command:
```
yarn fuselage -a link -p fuselage;fuselage-icons;message-parser
```

Remove the symbolic link with this command:
```
yarn fuselage -a undo
```

Update dependencies to the @rocket.chat/fuselage@latest npm package version:
```
yarn fuselage -a latest -p fuselage
```
Update ALL fuselage dependencies with the @latest npm packages version:
```
yarn fuselage -a latest-all
```

Technique 2: Yarn's `link:` protocol

Add a link

Run webpack in watch mode on @rocket.chat/fuselage:
```
cd fuselage/packages/fuselage
yarn start
cd -
```

Add a relative-path link resolution for @rocket.chat/fuselage on the root package.json:

// Rocket.Chat/package.json
{
  // ...
  "resolutions": {
    // ...
    "@rocket.chat/fuselage": "link:../fuselage/packages/fuselage"
  }
}

Update yarn.lock:
```
cd Rocket.Chat
yarn
cd -
```

Undo the link

Run the following commands:

cd Rocket.Chat
yarn unlink --all ../fuselage
cd -

Why not use `yarn link`?

While the yarn link command typically achieves the desired outcome; Yarn seems to favor the "portal:" protocol, which can lead to dependency conflicts between work trees. This preference poses limitations, making it unsuitable for this particular use case.

yarn link ../fuselage/packages/fuselage                                                                                                                                                                                    26581ms 
➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: @rocket.chat/css-in-js@workspace:~: Workspace not found (@rocket.chat/css-in-js@workspace:~)
    at ze.getWorkspaceByDescriptor (/Users/tasso/Projetos/Rocket.Chat/.yarn/releases/yarn-3.2.0.cjs:441:3273)
    at md.getCandidates (/Users/tasso/Projetos/Rocket.Chat/.yarn/releases/yarn-3.2.0.cjs:394:29907)
    at wd.getCandidates (/Users/tasso/Projetos/Rocket.Chat/.yarn/releases/yarn-3.2.0.cjs:395:1281)
    at wd.getCandidates (/Users/tasso/Projetos/Rocket.Chat/.yarn/releases/yarn-3.2.0.cjs:395:1281)
    at /Users/tasso/Projetos/Rocket.Chat/.yarn/releases/yarn-3.2.0.cjs:441:7765
    at Pg (/Users/tasso/Projetos/Rocket.Chat/.yarn/releases/yarn-3.2.0.cjs:394:11098)
    at le (/Users/tasso/Projetos/Rocket.Chat/.yarn/releases/yarn-3.2.0.cjs:441:7745)
➤ YN0000: └ Completed in 0s 391ms
➤ YN0000: Failed with errors in 0s 398ms

Technique 3: Symbolic links in `node_modules`

To test your Fuselage package code within the Rocket.Chat main repository, you can use this technique. Create a symbolic link (symlink) pointing to the corresponding fuselage/{package} directory within the Rocket.Chat repository.

In the Rocket.Chat repository root directory, run this command to install dependencies and build packages:
```
yarn && yarn build
```

Create a symlink to fuselage/{package} at meteor node_moduleswith this command:

yarn && yarn build
cd apps/meteor/node_modules/@rocket.chat # To find meteor node_modules/@rocket.chat directory where the fuselage packages are installed
rm -rf {package} # Where {package} is the name of fuselage package, e.g: fuselage, message-parser, ui-kit, icons and others...
ln -s ../../../../../fuselage/packages/{package} ./{package} # Where {package} is the name of fuselage package and the path needs to aligned to your project location

Navigate back to the main repository root and start the server:
```
yarn dsv
```
After following these steps, your application should reflect the changes.

Testing Fuselage Components

Technique 1: yarn fuselage script

Technique 2: Yarn's link: protocol

Add a link

Undo the link

Technique 3: Symbolic links in node_modules

Technique 1: `yarn fuselage` script

Technique 2: Yarn's `link:` protocol

Technique 3: Symbolic links in `node_modules`