feat: enhance component preview functionality and add counter component

- Constructed and logged the full URL for the component preview.
- Added logic to conditionally open the browser based on the OPEN_BROWSER environment variable.
- Introduced a new CounterComponent with increment, decrement, and reset functionalities.
- Created associated HTML, JavaScript, and metadata files for the CounterComponent.
- Added initial test setup for the CounterComponent.

Author: nrkruk

src/commands/lightning/dev/component.ts

@@ -129,7 +129,18 @@ export default class LightningDevComponent extends SfCommand<void> {
       targetOrgArg
     );
 
-    // Open the browser and navigate to the right page
-    await this.config.runCommand('org:open', launchArguments);
+    // Construct and log the full URL that will be opened
+    const connection = targetOrg.getConnection();
+    // Decode the path once to match what org:open actually opens
+    const decodedPath = decodeURIComponent(launchArguments[1]);
+    const fullUrl = `${connection.instanceUrl}/${decodedPath}`;
+    this.log(`PreviewURL: ${fullUrl}`);
+
+    // Open the browser and navigate to the right page (unless OPEN_BROWSER is set to true)
+    if (process.env.OPEN_BROWSER !== 'false') {
+      await this.config.runCommand('org:open', launchArguments);
+    } else {
+      // this.log('Skipping browser open due to OPEN_BROWSER environment variable');
+    }
   }
 }

test/projects/sfdx-lwc-project/force-app/main/default/lwc/counterComponent/__tests__/counterComponent.test.js

@@ -0,0 +1,25 @@
+import { createElement } from 'lwc';
+import CounterComponent from 'c/counterComponent';
+
+describe('c-counter-component', () => {
+  afterEach(() => {
+    // The jsdom instance is shared across test cases in a single file so reset the DOM
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('TODO: test case generated by CLI command, please fill in test logic', () => {
+    // Arrange
+    const element = createElement('c-counter-component', {
+      is: CounterComponent,
+    });
+
+    // Act
+    document.body.appendChild(element);
+
+    // Assert
+    // const div = element.shadowRoot.querySelector('div');
+    expect(1).toBe(1);
+  });
+});

test/projects/sfdx-lwc-project/force-app/main/default/lwc/counterComponent/counterComponent.html

@@ -0,0 +1,38 @@
+<template>
+  <div class="slds-card">
+    <div class="slds-card__header slds-grid">
+      <header class="slds-media slds-media_center slds-has-flexi-truncate">
+        <div class="slds-media__body">
+          <h2 class="slds-card__header-title">
+            <span>Counter Component</span>
+          </h2>
+        </div>
+      </header>
+    </div>
+    <div class="slds-card__body slds-card__body_inner">
+      <div class="slds-align_absolute-center slds-m-bottom_medium">
+        <span class="{countClass}" style="font-size: 3rem; font-weight: bold"> {count} </span>
+      </div>
+      <div class="slds-grid slds-grid_align-center slds-gutters">
+        <div class="slds-col">
+          <lightning-button
+            variant="destructive"
+            label="Decrement"
+            onclick="{decrement}"
+            class="slds-m-horizontal_x-small"
+          >
+          </lightning-button>
+        </div>
+        <div class="slds-col">
+          <lightning-button variant="neutral" label="Reset" onclick="{reset}" class="slds-m-horizontal_x-small">
+          </lightning-button>
+        </div>
+        <div class="slds-col">
+          <lightning-button variant="success" label="Increment" onclick="{increment}" class="slds-m-horizontal_x-small">
+          </lightning-button>
+        </div>
+        <div>test</div>
+      </div>
+    </div>
+  </div>
+</template>

test/projects/sfdx-lwc-project/force-app/main/default/lwc/counterComponent/counterComponent.js

@@ -0,0 +1,25 @@
+import { LightningElement } from 'lwc';
+
+export default class CounterComponent extends LightningElement {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    this.count--;
+  }
+
+  reset() {
+    this.count = 0;
+  }
+
+  get isNegative() {
+    return this.count < 0;
+  }
+
+  get isPositive() {
+    return this.count > 0;
+  }
+}

test/projects/sfdx-lwc-project/force-app/main/default/lwc/counterComponent/counterComponent.js-meta.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>62.0</apiVersion>
+    <isExposed>true</isExposed>
+    <targets>
+        <target>lightning__AppPage</target>
+        <target>lightning__RecordPage</target>
+        <target>lightning__HomePage</target>
+    </targets>
+</LightningComponentBundle>