ADFCONNECT-19100_Neo Angular Ramp up and Adjustments: (#11)

* ADFCONNECT-19100_Neo Angular Ramp up and Adjustments:
- added neo (css library) dependency
- added html files for current example components
- applied neo classes to faux button
- added stories
- added global scss file
- rewrote tests with karma jasmine

* ADFCONNECT-19100: Neo Angular Ramp up and Adjustments
- files updated following format command

angular.json

@@ -28,6 +28,7 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "tsConfig": "projects/examples/tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
             "polyfills": [
               "zone.js",
               "zone.js/testing"

karma.conf.js

@@ -0,0 +1,55 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+      require('karma-chrome-launcher'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['ChromeHeadlessNoSandbox'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '/coverage/neo-angular'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'lcovonly' },
+        { type: 'text-summary' }
+      ]
+    },
+    singleRun: true,
+    captureTimeout: 210000,
+    browserDisconnectTimeout: 100000,
+    browserDisconnectTolerance: 3,
+    browserNoActivityTimeout: 600000,
+    restartOnFileChange: true
+  });
+};

package.json

@@ -14,8 +14,8 @@
     "build:github": "npm i && npm run lint && npm run format:check && npm run test && npm run build:release",
     "build:release": "ng build examples --configuration production",
     "build-storybook": "ng run examples:build-storybook",
-    "test": "ng test --browsers ChromeHeadless --watch false",
-    "test:watch": "ng test",
+    "test": "ng test --browsers ChromeHeadless --watch false --code-coverage",
+    "test:watch": "ng test --code-coverage",
     "publish:lib": "npm publish ./dist/examples/",
     "ng": "ng",
     "start": "ng serve",
@@ -31,6 +31,8 @@
     "@angular/platform-browser": "17.2.0",
     "@angular/platform-browser-dynamic": "17.2.0",
     "@angular/router": "17.2.0",
+    "@avaya/neo": "3.80.3",
+    "lodash-es": "4.17.21",
     "rxjs": "7.8.0",
     "tslib": "2.3.0",
     "zone.js": "0.14.3"
@@ -52,6 +54,7 @@
     "@storybook/blocks": "7.6.17",
     "@storybook/test": "7.6.17",
     "@types/jasmine": "5.1.0",
+    "@types/lodash-es": "4.17.5",
     "@typescript-eslint/eslint-plugin": "6.19.0",
     "@typescript-eslint/parser": "6.19.0",
     "eslint": "8.56.0",

projects/examples/src/lib/FauxButton/faux-button.component.html

@@ -0,0 +1,3 @@
+<button class="neo-btn neo-btn-{{ type }} neo-btn-{{ type }}--warning">
+  {{ label }}
+</button>

projects/examples/src/lib/FauxButton/faux-button.component.ts

@@ -1,16 +1,18 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, ViewEncapsulation } from "@angular/core";
 
 @Component({
   selector: "lib-neo-faux-button",
   standalone: true,
-  template: `<button>{{ label }}</button> `,
+  templateUrl: "./faux-button.component.html",
+  styleUrls: ["../../styles.scss"],
+  encapsulation: ViewEncapsulation.None,
 })
 export class FauxButtonComponent {
   /**
    * Button contents
    *
    * @required
    */
-  @Input()
-  label = "Button";
+  @Input() label = "Button 222";
+  @Input() type = "tertiary";
 }

projects/examples/src/lib/FauxButton/faux-button.spec.ts

@@ -1,22 +1,15 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
 import { FauxButtonComponent } from "./faux-button.component";
 
 describe("FauxButtonComponent", () => {
   let component: FauxButtonComponent;
-  let fixture: ComponentFixture<FauxButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FauxButtonComponent],
-    }).compileComponents();
 
-    fixture = TestBed.createComponent(FauxButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+  beforeEach(() => {
+    component = new FauxButtonComponent();
   });
 
-  it("should create", () => {
-    expect(component).toBeTruthy();
+  describe("component", () => {
+    it("should create", () => {
+      expect(component).toBeTruthy();
+    });
   });
 });

projects/examples/src/lib/FauxButton/faux-button.stories.ts

@@ -19,6 +19,14 @@ type Story = StoryObj<FauxButtonComponent>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const LabelOne: Story = {
   args: {
-    label: "Primary",
+    label: "Example 1",
+    type: "primary",
+  },
+};
+
+export const LabelTwo: Story = {
+  args: {
+    label: "Another Example",
+    type: "secondary",
   },
 };

projects/examples/src/lib/Static/static.component.html

@@ -0,0 +1,10 @@
+<p>the static component works!</p>
+<lib-neo-faux-button
+  [label]="'a primary button'"
+  [type]="'primary'"
+></lib-neo-faux-button>
+<br />
+<lib-neo-faux-button
+  [label]="'a secondary button'"
+  [type]="'secondary'"
+></lib-neo-faux-button>

projects/examples/src/lib/Static/static.component.ts

@@ -1,9 +1,10 @@
 import { Component } from "@angular/core";
+import { FauxButtonComponent } from "../FauxButton";
 
 @Component({
   selector: "lib-neo-static",
   standalone: true,
-  imports: [],
-  template: ` <p>the static component works!</p> `,
+  imports: [FauxButtonComponent],
+  templateUrl: "./static.component.html",
 })
 export class StaticComponent {}

projects/examples/src/lib/Static/static.spec.ts

@@ -1,22 +1,15 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
 import { StaticComponent } from "./static.component";
 
 describe("StaticComponent", () => {
   let component: StaticComponent;
-  let fixture: ComponentFixture<StaticComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [StaticComponent],
-    }).compileComponents();
 
-    fixture = TestBed.createComponent(StaticComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+  beforeEach(() => {
+    component = new StaticComponent();
   });
 
-  it("should create", () => {
-    expect(component).toBeTruthy();
+  describe("component", () => {
+    it("should create", () => {
+      expect(component).toBeTruthy();
+    });
   });
 });

projects/examples/src/stories/header.component.ts

@@ -40,29 +40,29 @@ import type { User } from "./user";
             Welcome, <b>{{ user.name }}</b
             >!
           </span>
-          <storybook-button
+          <lib-storybook-button
             *ngIf="user"
             size="small"
             (onClick)="handleLogout.emit($event)"
             label="Log out"
-          ></storybook-button>
+          ></lib-storybook-button>
         </div>
         <div *ngIf="!user">
-          <storybook-button
+          <lib-storybook-button
             *ngIf="!user"
             size="small"
             class="margin-left"
             (onClick)="handleLogin.emit($event)"
             label="Log in"
-          ></storybook-button>
-          <storybook-button
+          ></lib-storybook-button>
+          <lib-storybook-button
             *ngIf="!user"
             size="small"
             [primary]="true"
             class="margin-left"
             (onClick)="handleCreateAccount.emit($event)"
             label="Sign up"
-          ></storybook-button>
+          ></lib-storybook-button>
         </div>
       </div>
     </div>

projects/examples/src/stories/page.component.ts

@@ -9,12 +9,12 @@ import type { User } from "./user";
   standalone: true,
   imports: [CommonModule, HeaderComponent],
   template: `<article>
-    <storybook-header
+    <lib-storybook-header
       [user]="user"
       (onLogout)="doLogout()"
       (onLogin)="doLogin()"
       (onCreateAccount)="doCreateAccount()"
-    ></storybook-header>
+    ></lib-storybook-header>
     <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>

projects/examples/src/styles.scss

@@ -0,0 +1,7 @@
+// @import "~@avaya/neo/neo/dist/css/neo/neo.min.css";
+// @import "../../node_modules/@avaya/neo/neo/dist/css/neo/neo.css"
+@import "../../../node_modules/@avaya/neo/neo/dist/css/neo/neo.min.css";
+
+button {
+  margin: 20px;
+}

tsconfig.json

@@ -11,7 +11,13 @@
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
     "paths": {
-      "examples": ["./dist/examples"]
+      "examples": ["./dist/examples"],
+      "lodash/*": [
+        "/node_modules/@types/lodash-es/*"
+      ],
+      "node_modules/*": [
+        "/node_modules/*"
+      ]
     },
     "esModuleInterop": true,
     "sourceMap": true,