327544271: (feat) update texts in app (#310)

* 327544271: (feat) update texts in app

* 327544271: (fix) update text for description on monitoring time dropdown

---------

Co-authored-by: Volha Mardvilka <mardvilka@google.com>

modules/ui/src/app/app-routing.module.ts

@@ -18,7 +18,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: 'testrun',
+    path: 'testing',
     loadChildren: () =>
       import('./pages/testrun/progress.module').then(m => m.ProgressModule),
     title: 'Testrun',

modules/ui/src/app/app.component.html

@@ -26,9 +26,9 @@
         *ngTemplateOutlet="
           navButtonRoute;
           context: {
-            route: Routes.Testrun,
+            route: Routes.Testing,
             svgIcon: 'testrun_logo_small',
-            label: 'Testrun',
+            label: 'Testing',
             name: 'testrun'
           }
         ">
@@ -73,7 +73,7 @@
       </button>
       <a
         class="logo-link"
-        routerLink="{{ Routes.Testrun }}"
+        routerLink="{{ Routes.Testing }}"
         aria-label="Testrun ui logo">
         <mat-icon svgIcon="testrun_logo_color"></mat-icon>
         <h1 class="main-heading">Testrun</h1>
@@ -83,7 +83,7 @@ <h1 class="main-heading">Testrun</h1>
         #toggleSettingsBtn
         class="app-toolbar-button app-toolbar-button-general-settings"
         mat-icon-button
-        aria-label="Connection settings"
+        aria-label="System settings"
         (click)="openGeneralSettings(true)">
         <mat-icon>tune</mat-icon>
       </button>
@@ -95,11 +95,11 @@ <h1 class="main-heading">Testrun</h1>
           (click)="openSetting()"
           (keydown.enter)="openSetting()"
           (keydown.space)="openSetting()"
-          aria-label="The Connection settings link opens the panel. No redirect to other pages."
+          aria-label="The System settings link opens the panel. No redirect to other pages."
           tabindex="0"
           role="link"
           class="message-link"
-          >Settings</a
+          >System settings</a
         >
         panel.
       </app-callout>
@@ -111,12 +111,13 @@ <h1 class="main-heading">Testrun</h1>
           (click)="openSetting()"
           (keydown.enter)="openSetting()"
           (keydown.space)="openSetting()"
-          aria-label="The Connection settings link opens the panel. No redirect to other pages."
+          aria-label="The System settings link opens the panel. No redirect to other pages."
           tabindex="0"
           role="link"
           class="message-link"
-          >Connection settings</a
-        >.
+          >System settings</a
+        >
+        panel.
       </app-callout>
       <app-callout
         [type]="CalloutType.Info"
@@ -146,18 +147,17 @@ <h1 class="main-heading">Testrun</h1>
           isStatusLoaded === true &&
           (isTestrunStarted$ | async) === false
         ">
-        Step 3: Once device is created navigate to
+        Step 3: Once device is created, you are able to
         <a
           (click)="navigateToRuntime()"
           (keydown.enter)="navigateToRuntime()"
           (keydown.space)="navigateToRuntime()"
-          aria-label="The Testrun link redirects to the Testrun page and opens the dialogue there."
+          aria-label="The start testing link redirects to the Testing page and opens the dialogue there."
           tabindex="0"
           role="link"
           class="message-link"
-          >Testrun</a
-        >
-        tab.
+          >start testing</a
+        >.
       </app-callout>
       <router-outlet></router-outlet>
     </div>

modules/ui/src/app/app.component.spec.ts

@@ -233,7 +233,7 @@ describe('AppComponent', () => {
     button?.click();
     tick();
 
-    expect(router.url).toBe(Routes.Testrun);
+    expect(router.url).toBe(Routes.Testing);
   }));
 
   it('should navigate to the reports when "reports" button is clicked', fakeAsync(() => {
@@ -397,14 +397,14 @@ describe('AppComponent', () => {
         expect(calloutContent).toContain('Step 1');
       });
 
-      it('should have callout content with "Connection settings" link ', () => {
+      it('should have callout content with "System settings" link ', () => {
         const calloutLinkEl = compiled.querySelector(
           '.message-link'
         ) as HTMLAnchorElement;
         const calloutLinkContent = calloutLinkEl.innerHTML.trim();
 
         expect(calloutLinkEl).toBeTruthy();
-        expect(calloutLinkContent).toContain('Connection settings');
+        expect(calloutLinkContent).toContain('System settings');
       });
 
       keyboardCases.forEach(testCase => {
@@ -514,15 +514,15 @@ describe('AppComponent', () => {
         expect(calloutContent).toContain('Step 3');
       });
 
-      it('should have callout component with "Testrun" link', () => {
+      it('should have callout component with "testing" link', () => {
         const callout = compiled.querySelector('app-callout');
         const calloutLinkEl = compiled.querySelector(
           '.message-link'
         ) as HTMLAnchorElement;
         const calloutLinkContent = calloutLinkEl.innerHTML.trim();
 
         expect(callout).toBeTruthy();
-        expect(calloutLinkContent).toContain('Testrun');
+        expect(calloutLinkContent).toContain('testing');
       });
 
       keyboardCases.forEach(testCase => {
@@ -534,7 +534,7 @@ describe('AppComponent', () => {
           calloutLinkEl.dispatchEvent(testCase.event);
           flush();
 
-          expect(router.url).toBe(Routes.Testrun);
+          expect(router.url).toBe(Routes.Testing);
         }));
       });
     });

modules/ui/src/app/app.component.ts

@@ -135,7 +135,7 @@ export class AppComponent implements OnInit {
   }
 
   navigateToRuntime(): void {
-    this.route.navigate([Routes.Testrun]);
+    this.route.navigate([Routes.Testing]);
     this.testRunService.setIsOpenStartTestrun(true);
   }
 

modules/ui/src/app/model/routes.ts

@@ -16,6 +16,6 @@
 
 export enum Routes {
   Devices = '/devices',
-  Testrun = '/testrun',
+  Testing = '/testing',
   Reports = '/reports',
 }

modules/ui/src/app/pages/devices/device-repository.component.ts

@@ -93,7 +93,7 @@ export class DeviceRepositoryComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.destroy$))
       .subscribe(data => {
         if (data === 'testrunStarted') {
-          this.route.navigate([Routes.Testrun]);
+          this.route.navigate([Routes.Testing]);
         }
       });
   }

modules/ui/src/app/pages/settings/general-settings.component.html

@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 <div class="settings-drawer-header">
-  <h2 class="settings-drawer-header-title">Connection settings</h2>
+  <h2 class="settings-drawer-header-title">System settings</h2>
   <button
     (click)="closeSetting(EventType.Close)"
     aria-label="close"
@@ -41,16 +41,16 @@ <h2 class="settings-drawer-header-title">Connection settings</h2>
 
         <app-settings-dropdown
           [controlName]="FormKey.DEVICE"
-          groupLabel="Select port where you’ll connect the tested device"
-          description="Choose one of the options where you’ll connect IoT device for testing"
+          groupLabel="Device port"
+          description="Port where IoT device is connected for testing"
           label="Device connection port"
           key="device"
           [options]="vm.deviceOptions">
         </app-settings-dropdown>
         <app-settings-dropdown
           [controlName]="FormKey.INTERNET"
-          groupLabel="Select port used for Internet connection"
-          description="Choose one of the following ports on your Laptop or Desktop"
+          groupLabel="Internet port"
+          description="Port used for internet connection"
           label="Internet connection port"
           key="internet"
           [options]="vm.internetOptions">
@@ -67,19 +67,20 @@ <h2 class="settings-drawer-header-title">Connection settings</h2>
           class="message-link">
           Refresh
         </a>
-        the Connection settings
+        the System settings
       </p>
       <app-settings-dropdown
         [controlName]="FormKey.LOG_LEVEL"
-        groupLabel="Select the logging level for Testrun events"
+        groupLabel="Log level"
+        description="Logging level of details"
         label="Log level"
         key="log-level"
         [options]="vm.logLevelOptions">
       </app-settings-dropdown>
       <app-settings-dropdown
         [controlName]="FormKey.MONITOR_PERIOD"
-        groupLabel="Select device monitoring time period"
-        description="Choose one of the options for Monitoring Device time, when Testrun will observe the device before starting tests. The optimal time to pass the qualification is 300s."
+        groupLabel="Monitoring Time"
+        description="Time period for Testrun to observe the device before starting tests"
         label="Monitoring period"
         key="monitoring-period"
         [options]="vm.monitoringPeriodOptions">

modules/ui/src/app/pages/settings/general-settings.component.spec.ts

@@ -135,7 +135,7 @@ describe('GeneralSettingsComponent', () => {
       component.closeSetting(mockMessage);
 
       expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith(
-        `The ${mockMessage} finished. The connection setting panel is closed.`
+        `The ${mockMessage} finished. The system settings panel is closed.`
       );
     });
 

modules/ui/src/app/pages/settings/general-settings.component.ts

@@ -97,7 +97,7 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     this.resetForm();
     this.closeSettingEvent.emit();
     this.liveAnnouncer.announce(
-      `The ${message} finished. The connection setting panel is closed.`
+      `The ${message} finished. The system settings panel is closed.`
     );
     this.setDefaultFormValues();
   }