feat: STRF-13448 Support --port for stencil start (#1288)

Author: jairo-bc

bin/stencil-start.js

@@ -23,7 +23,8 @@ program
     .option(
         '-cu, --channelUrl [channelUrl]',
         'Set a custom domain url to bypass dns/proxy protection',
-    );
+    )
+    .option('-p --port [portnumber]', 'Set port number to listen dev server');
 const cliOptions = prepareCommand(program);
 const options = {
     open: cliOptions.open,
@@ -33,6 +34,7 @@ const options = {
     tunnel: cliOptions.tunnel,
     cache: cliOptions.cache,
     channelUrl: cliOptions.channelUrl,
+    port: cliOptions.port,
 };
 
 async function run() {

lib/stencil-start.js

@@ -57,7 +57,7 @@ class StencilStart {
         }
         const initialStencilConfig = await this._stencilConfigManager.read();
         // Use initial (before updates) port for BrowserSync
-        const browserSyncPort = initialStencilConfig.port;
+        const browserSyncPort = cliOptions.port || initialStencilConfig.port;
         const channelUrl = await this.getChannelUrl(initialStencilConfig, cliOptions);
         const storeInfoFromAPI = await this._themeApiClient.checkCliVersion({
             storeUrl: channelUrl,
@@ -72,7 +72,7 @@ class StencilStart {
         );
         await this.startLocalServer(cliOptions, updatedStencilConfig);
         this._logger.log(this.getStartUpInfo(updatedStencilConfig));
-        await this.startBrowserSync(cliOptions, updatedStencilConfig, browserSyncPort);
+        await this.startBrowserSync(cliOptions, browserSyncPort);
     }
 
     async getStoreSettingsLocale(cliOptions, stencilConfig) {
@@ -131,7 +131,6 @@ class StencilStart {
             ...stencilConfig,
             storeUrl: storeInfoFromAPI.sslUrl,
             normalStoreUrl: storeInfoFromAPI.baseUrl,
-            port: Number(stencilConfig.port) + 1,
         };
     }
 
@@ -151,7 +150,7 @@ class StencilStart {
         });
     }
 
-    async startBrowserSync(cliOptions, stencilConfig, browserSyncPort) {
+    async startBrowserSync(cliOptions, browserSyncPort) {
         const DEFAULT_WATCH_FILES = ['/assets', '/templates', '/lang', '/.config'];
         const DEFAULT_WATCH_IGNORED = ['/assets/scss', '/assets/css'];
         const { themePath, configPath } = this._themeConfigManager;
@@ -218,7 +217,7 @@ class StencilStart {
                 ignoreInitial: true,
                 ignored: watchIgnored.map((val) => path.join(themePath, val)),
             },
-            proxy: `localhost:${stencilConfig.port}`,
+            proxy: `localhost:${Number(browserSyncPort) + 1}`,
             tunnel,
         });
         // Handle manual reloading of browsers by typing 'rs';

lib/stencil-start.spec.js

@@ -10,18 +10,30 @@ describe('StencilStart unit tests', () => {
         init: jest.fn(),
     });
     const getThemeApiClientStub = () => ({
-        checkCliVersion: jest.fn(),
+        checkCliVersion: jest.fn().mockResolvedValue({
+            baseUrl: 'example.com',
+            sslUrl: 'https://example.com',
+        }),
+        getStoreHash: jest.fn().mockResolvedValue('storeHash_value'),
+        getStoreChannels: jest
+            .fn()
+            .mockResolvedValue([{ channel_id: 5, url: 'https://www.example.com' }]),
     });
     const getFsUtilsStub = () => ({
-        existsSync: jest.fn(),
-        parseJsonFile: jest.fn(),
+        existsSync: jest.fn().mockReturnValue(true),
+        parseJsonFile: jest.fn().mockResolvedValue({}),
         recursiveReadDir: jest.fn(),
     });
     const getCliCommonStub = () => ({
         checkNodeVersion: jest.fn(),
     });
-    const getThemeConfigManagerStub = () => ({});
-    const getStencilConfigManagerStub = () => ({});
+    const getThemeConfigManagerStub = () => ({
+        themePath: '/some/absolute/config/path',
+        configPath: '/some/absolute/config/path',
+    });
+    const getStencilConfigManagerStub = (config = {}) => ({
+        read: jest.fn().mockResolvedValue(config),
+    });
     const getBuildConfigManagerStub = () => ({});
     const getTemplateAssemblerStub = () => ({});
     const getCyclesDetectorConstructorStub = () => jest.fn();
@@ -32,6 +44,9 @@ describe('StencilStart unit tests', () => {
         log: jest.fn(),
         error: jest.fn(),
     });
+    const getStoreSettingsApiClientStub = () => ({
+        getStoreSettingsLocale: jest.fn().mockResolvedValue({ default_shopper_language: 'en_US' }),
+    });
     const createStencilStartInstance = ({
         browserSync,
         fsUtils,
@@ -44,6 +59,7 @@ describe('StencilStart unit tests', () => {
         CyclesDetector,
         stencilPushUtils,
         logger,
+        storeSettingsApiClient,
     } = {}) => {
         const passedArgs = {
             browserSync: browserSync || getBrowserSyncStub(),
@@ -57,6 +73,7 @@ describe('StencilStart unit tests', () => {
             CyclesDetector: CyclesDetector || getCyclesDetectorConstructorStub(),
             stencilPushUtils: stencilPushUtils || getStencilPushUtilsStub(),
             logger: logger || getLoggerStub(),
+            storeSettingsApiClient: storeSettingsApiClient || getStoreSettingsApiClientStub(),
         };
         const instance = new StencilStart(passedArgs);
         return {
@@ -151,4 +168,42 @@ describe('StencilStart unit tests', () => {
             expect(result).toEqual(channelUrl);
         });
     });
+
+    describe('port option', () => {
+        it('should read port from the config file', async () => {
+            const port = 1234;
+            const browserSyncStub = getBrowserSyncStub();
+            const { instance } = createStencilStartInstance({
+                browserSync: browserSyncStub,
+                stencilConfigManager: getStencilConfigManagerStub({ port }),
+            });
+            instance.startLocalServer = jest.fn();
+            instance.getStartUpInfo = jest.fn().mockReturnValue('Start up info');
+            instance.checkLangFiles = jest.fn();
+            await instance.run({});
+            expect(browserSyncStub.init).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    port,
+                }),
+            );
+        });
+
+        it('should read port from the cli', async () => {
+            const port = 1234;
+            const browserSyncStub = getBrowserSyncStub();
+            const { instance } = createStencilStartInstance({
+                browserSync: browserSyncStub,
+                stencilConfigManager: getStencilConfigManagerStub({ port: 5678 }),
+            });
+            instance.startLocalServer = jest.fn();
+            instance.getStartUpInfo = jest.fn().mockReturnValue('Start up info');
+            instance.checkLangFiles = jest.fn();
+            await instance.run({ port });
+            expect(browserSyncStub.init).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    port,
+                }),
+            );
+        });
+    });
 });