Merge pull request #3 from juanjotorres90/develop

develop into main

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  push:
+    branches: ['develop', 'main']
+  pull_request:
+    branches: ['develop', 'main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm install
+      - run: npm run lint:all --if-present
+      - run: npm run unit-tests:all --if-present
+      - run: npm run build:all --if-present

.gitignore

@@ -7,8 +7,6 @@ tmp
 
 # dependencies
 node_modules
-package-lock.json
-bun.lockb
 
 # IDEs and editors
 /.idea

.husky/pre-push

@@ -1 +1 @@
-npm run build:all
+npm run lint:all && npm run unit-tests:all && npm run build:all

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [17.2.2] - 2024-03-11
+
+### Added
+
+- Add linting and unit tests execution on pre-commit and ci.
+
+### Fixed
+
+- Fix flags css on library build.
+
 ## [17.2.1] - 2024-03-10
 
 ### Added

libs/ngx-material-intl-tel-input-lib/.eslintrc.json

@@ -31,13 +31,6 @@
       "files": ["*.html"],
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": "error"
-      }
     }
   ]
 }

libs/ngx-material-intl-tel-input-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-material-intl-tel-input",
-  "version": "17.2.1",
+  "version": "17.2.2",
   "license": "MIT",
 	"repository": {
 		"type": "git",
@@ -29,7 +29,9 @@
   "description": "Angular Material international telephone input",
   "peerDependencies": {
     "@angular/common": "^17.2.0",
-    "@angular/core": "^17.2.0"
+    "@angular/core": "^17.2.0",
+    "@angular/forms": "^17.2.0",
+    "rxjs": "^7.8.0"
   },
   "dependencies": {
     "@angular/cdk": "^17.2.1",

libs/ngx-material-intl-tel-input-lib/src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.spec.ts

@@ -1,14 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgxMaterialIntlTelInputComponent } from './ngx-material-intl-tel-input-lib.component';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
+import { Country } from '../types/country.model';
 
 describe('NgxMaterialIntlTelInputComponent', () => {
   let component: NgxMaterialIntlTelInputComponent;
   let fixture: ComponentFixture<NgxMaterialIntlTelInputComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NgxMaterialIntlTelInputComponent, NoopAnimationsModule],
+      imports: [NgxMaterialIntlTelInputComponent, NoopAnimationsModule]
     }).compileComponents();
 
     fixture = TestBed.createComponent(NgxMaterialIntlTelInputComponent);
@@ -19,4 +21,69 @@ describe('NgxMaterialIntlTelInputComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should initialize component with default values', () => {
+    component.ngOnInit();
+    expect(component.prefixCtrl.value).toBeNull();
+    expect(component.prefixFilterCtrl.value).toBe('');
+    expect(component.fieldControl.value).toBe('');
+    expect(component.required).toBe(false);
+    expect(component.disabled).toBe(false);
+    expect(component.enablePlaceholder).toBe(true);
+    expect(component.autoIpLookup).toBe(true);
+    expect(component.autoSelectCountry).toBe(true);
+    expect(component.autoSelectedCountry).toBe('');
+    expect(component.numberValidation).toBe(true);
+    expect(component.iconMakeCall).toBe(true);
+    expect(component.initialValue).toBe('');
+    expect(component.preferredCountries).toEqual([]);
+    expect(component.visibleCountries).toEqual([]);
+    expect(component.textLabels).toEqual({
+      mainLabel: 'Phone number',
+      codePlaceholder: 'Code',
+      searchPlaceholderLabel: 'Search',
+      noEntriesFoundLabel: 'No countries found',
+      nationalNumberLabel: 'Number',
+      hintLabel: 'Select country and type your phone number',
+      invalidNumberError: 'Number is not valid',
+      requiredError: 'This field is required'
+    });
+    expect(component.isFocused).toBe(false);
+    expect(component.isLoading).toBe(true);
+  });
+
+  it('should set fieldControl value to the entered phone number when is not valid', () => {
+    component.ngOnInit();
+    const phoneNumber = '678906543';
+    component.telForm.get('numberControl')?.setValue(phoneNumber);
+    expect(component.fieldControl.value).toBe(phoneNumber);
+  });
+
+  it('should set fieldControl value to the entered phone number when is valid', () => {
+    component.ngOnInit();
+    const phoneNumber = '+34678906543';
+    const phoneNumberUtil = PhoneNumberUtil.getInstance();
+    const parsed = phoneNumberUtil.parse(phoneNumber);
+    const formatted = phoneNumberUtil.format(
+      parsed,
+      PhoneNumberFormat.INTERNATIONAL
+    );
+    component.telForm.get('numberControl')?.setValue(phoneNumber);
+    expect(component.fieldControl.value).toBe(formatted);
+  });
+
+  it('should select a country from the dropdown', () => {
+    component.ngOnInit();
+    const country: Country = {
+      name: 'Spain (España)',
+      iso2: 'es',
+      dialCode: '34',
+      priority: 0,
+      htmlId: 'country-code__es',
+      flagClass: 'country-code__es',
+      placeHolder: '612 34 56 78'
+    };
+    component.prefixCtrl.setValue(country);
+    expect(component.prefixCtrl.value).toEqual(country);
+  });
 });