nx/packages/angular/src/migrations/update-20-2-0/migrate-mf-imports-to-new-package.spec.ts
Colum Ferry 76d61ea5e6
feat(module-federation): consolidate module federation utils into module-federation package (#28919)
- feat(module-federation): consolidate module federation utils into
module-federation package
- chore(module-federation): fix tests and linting

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
Our current support for Module Federation relies on utilities that are
spread and duplicated across the `@nx/webpack` package and the
`@nx/rspack` package.



## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Now that we have a `@nx/module-federation` package, dedupe the utils and
consolidate them into a single package

## Todo
- [x] Migrations for React + Angular to install `@nx/module-federation`
and point `ModuleFederationConfig` export to that package from
webpack.config and rspack.config files
2024-11-18 14:15:10 -05:00

335 lines
10 KiB
TypeScript

import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
import migrateMfImportsToNewPackage from './migrate-mf-imports-to-new-package';
jest.mock('@nx/devkit', () => {
const original = jest.requireActual('@nx/devkit');
return {
...original,
createProjectGraphAsync: jest.fn().mockResolvedValue(
Promise.resolve({
dependencies: {
shell: [
{
source: 'shell',
target: 'npm:@nx/webpack',
type: 'static',
},
],
remote: [
{
source: 'remote',
target: 'npm:@nx/webpack',
type: 'static',
},
],
},
nodes: {
shell: {
name: 'shell',
type: 'app',
data: {
root: 'apps/shell',
sourceRoot: 'shell/src',
targets: {},
},
},
remote: {
name: 'remote',
type: 'app',
data: {
root: 'apps/remote',
sourceRoot: 'remote/src',
targets: {},
},
},
},
})
),
};
});
describe('migrate-mf-imports-to-new-package', () => {
it('should update the ModuleFederationConfig import to change the import when its a single line', async () => {
// ARRANGE
const tree = createTreeWithEmptyWorkspace();
tree.write(
'apps/shell/webpack.config.js',
`import { ModuleFederationConfig } from '@nx/webpack';`
);
tree.write(
'apps/shell/module-federation.config.ts',
`import { ModuleFederationConfig } from '@nx/webpack';`
);
tree.write(
'apps/remote/webpack.config.ts',
`import { ModuleFederationConfig } from '@nx/webpack';`
);
tree.write(
'apps/remote/module-federation.config.js',
`import { ModuleFederationConfig } from '@nx/webpack';`
);
// ACT
await migrateMfImportsToNewPackage(tree);
// ASSERT
expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/remote/webpack.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/shell/module-federation.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/remote/module-federation.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
});
it('should not update the ModuleFederationConfig import when its correct', async () => {
// ARRANGE
const tree = createTreeWithEmptyWorkspace();
tree.write(
'apps/shell/webpack.config.js',
`import { ModuleFederationConfig } from '@nx/module-federation';`
);
tree.write(
'apps/shell/module-federation.config.ts',
`import { ModuleFederationConfig } from '@nx/module-federation';`
);
tree.write(
'apps/remote/webpack.config.ts',
`import { ModuleFederationConfig } from '@nx/module-federation';`
);
tree.write(
'apps/remote/module-federation.config.js',
`import { ModuleFederationConfig } from '@nx/module-federation';`
);
// ACT
await migrateMfImportsToNewPackage(tree);
// ASSERT
expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/remote/webpack.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/shell/module-federation.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/remote/module-federation.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
});
it('should update the ModuleFederationConfig import to change the import when its across multiple lines', async () => {
// ARRANGE
const tree = createTreeWithEmptyWorkspace();
tree.write(
'apps/shell/webpack.config.js',
`import {
ModuleFederationConfig
} from '@nx/webpack';`
);
tree.write(
'apps/shell/module-federation.config.ts',
`import {
ModuleFederationConfig
} from '@nx/webpack';`
);
tree.write(
'apps/remote/webpack.config.ts',
`import {
ModuleFederationConfig
} from '@nx/webpack';`
);
tree.write(
'apps/remote/module-federation.config.js',
`import {
ModuleFederationConfig
} from '@nx/webpack';`
);
// ACT
await migrateMfImportsToNewPackage(tree);
// ASSERT
expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/remote/webpack.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/shell/module-federation.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
expect(tree.read('apps/remote/module-federation.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
"
`);
});
it('should update the ModuleFederationConfig import to change the import when its a part of multiple imports', async () => {
// ARRANGE
const tree = createTreeWithEmptyWorkspace();
tree.write(
'apps/shell/webpack.config.js',
`import { something, ModuleFederationConfig } from '@nx/webpack';`
);
tree.write(
'apps/shell/module-federation.config.ts',
`import { ModuleFederationConfig, something} from '@nx/webpack';`
);
tree.write(
'apps/remote/webpack.config.ts',
`import { something, ModuleFederationConfig } from '@nx/webpack';`
);
tree.write(
'apps/remote/module-federation.config.js',
`import { ModuleFederationConfig, something } from '@nx/webpack';`
);
// ACT
await migrateMfImportsToNewPackage(tree);
// ASSERT
expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
expect(tree.read('apps/remote/webpack.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
expect(tree.read('apps/shell/module-federation.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
expect(tree.read('apps/remote/module-federation.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
});
it('should update the ModuleFederationConfig import to change the import when its a part of multiple imports across multiple lines', async () => {
// ARRANGE
const tree = createTreeWithEmptyWorkspace();
tree.write(
'apps/shell/webpack.config.js',
`import {
something,
ModuleFederationConfig
} from '@nx/webpack';`
);
tree.write(
'apps/shell/module-federation.config.ts',
`import {
ModuleFederationConfig,
something
} from '@nx/webpack';`
);
tree.write(
'apps/remote/webpack.config.ts',
`import {
something,
ModuleFederationConfig
} from '@nx/webpack';`
);
tree.write(
'apps/remote/module-federation.config.js',
`import {
ModuleFederationConfig,
something
} from '@nx/webpack';`
);
// ACT
await migrateMfImportsToNewPackage(tree);
// ASSERT
expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
expect(tree.read('apps/remote/webpack.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
expect(tree.read('apps/shell/module-federation.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
expect(tree.read('apps/remote/module-federation.config.js', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { something } from '@nx/webpack';
"
`);
});
it('should not incorrectly update import when it is run twice', async () => {
// ARRANGE
const tree = createTreeWithEmptyWorkspace();
tree.write(
`apps/shell/webpack.config.ts`,
`import { composePlugins, withNx, ModuleFederationConfig } from '@nx/webpack';
import { withReact } from '@nx/react';
import { withModuleFederation } from '@nx/react/module-federation';`
);
// ACT
await migrateMfImportsToNewPackage(tree);
await migrateMfImportsToNewPackage(tree);
// ASSERT
expect(tree.read('apps/shell/webpack.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { ModuleFederationConfig } from '@nx/module-federation';
import { composePlugins, withNx } from '@nx/webpack';
import { withReact } from '@nx/react';
import { withModuleFederation } from '@nx/react/module-federation';
"
`);
});
});