Merge pull request #130 from t-ho/fix/position-calculation-tests

fix: Update position calculation test expectations

Author: t-ho

.github/workflows/test.yml

@@ -16,33 +16,41 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x, 20.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+      
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache Node.js modules
-        uses: actions/cache@v2
+          cache: 'npm'
+          
+      - name: Install dependencies
+        run: npm ci
+        
+      - name: Setup Chrome
+        uses: browser-actions/setup-chrome@v1
         with:
-          path: ~/.npm
-          key: ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
-
-      - name: Install deps
-        run: npm install
+          chrome-version: stable
+          
       - name: Linting
-        run: npx ng lint
-      - name: Build lib
-        run: npx ng build ngx-ui-loader
+        run: npm run lint
+        
+      - name: Build library
+        run: npm run build:lib
+        
+      - name: Build schematics
+        run: npm run build:schematics
+        
       - name: Testing
-        run: npm test
+        run: npm run test
+        
       - name: Upload codecov report
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v4
+        with:
+          fail_ci_if_error: false
+          
       - name: Production build
-        run: npx ng build
+        run: npm run build

angular.json

@@ -161,6 +161,7 @@
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": false
   }
 }

projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.spec.ts

@@ -233,7 +233,7 @@ describe('NgxUiLoaderComponent', () => {
     expect(fgSpinnerEl.style.color).toBe('blue');
     expect(fgSpinnerEl.style.width).toBe('70px');
     expect(fgSpinnerEl.style.height).toBe('70px');
-    expect(fgSpinnerEl.style.top).toBe('calc((50% - 12px) - 15px)'); // gap
+    expect(fgSpinnerEl.style.top).toBe('calc(50% - 27px)'); // gap
     expect(fgContainerEl.style.borderRadius).toBe('120px');
     expect(fgContainerEl.style.backgroundColor).toBe('white');
     expect(progressBarEl.style.color).toBe('teal');
@@ -264,9 +264,9 @@ describe('NgxUiLoaderComponent', () => {
     });
     fixture.detectChanges();
     logoEl = ngxUiLoaderEl.querySelector('.ngx-loading-logo');
-    expect(logoEl.style.top).toBe('calc(((50% - 30px) - 12px) - 24px)');
-    expect(fgSpinnerEl.style.top).toBe('calc((50% + 60px) - 12px)');
-    expect(textEl.style.top).toBe('calc(50% + 60px + 24px + 30px)');
+    expect(logoEl.style.top).toBe('calc(50% - 66px)');
+    expect(fgSpinnerEl.style.top).toBe('calc(50% + 48px)');
+    expect(textEl.style.top).toBe('calc(50% + 114px)');
   });
 
   it('#determinePosition - spinner and logo are center-center', () => {
@@ -284,8 +284,8 @@ describe('NgxUiLoaderComponent', () => {
     });
     fixture.detectChanges();
     logoEl = ngxUiLoaderEl.querySelector('.ngx-loading-logo');
-    expect(logoEl.style.top).toBe('calc((50% - 30px) - 12px)');
-    expect(fgSpinnerEl.style.top).toBe('calc(50% + 60px + 12px)');
+    expect(logoEl.style.top).toBe('calc(50% - 42px)');
+    expect(fgSpinnerEl.style.top).toBe('calc(50% + 72px)');
     expect(textEl.style.top).toBe('30px');
   });
 
@@ -305,8 +305,8 @@ describe('NgxUiLoaderComponent', () => {
     fixture.detectChanges();
     logoEl = ngxUiLoaderEl.querySelector('.ngx-loading-logo');
     expect(logoEl.style.top).toBe('30px');
-    expect(fgSpinnerEl.style.top).toBe('calc((50% - 12px) - 12px)');
-    expect(textEl.style.top).toBe('calc(50% + 30px + 12px)');
+    expect(fgSpinnerEl.style.top).toBe('calc(50% - 24px)');
+    expect(textEl.style.top).toBe('calc(50% + 42px)');
   });
 
   it('#determinePosition - logo and text are center-center', () => {
@@ -324,9 +324,9 @@ describe('NgxUiLoaderComponent', () => {
     });
     fixture.detectChanges();
     logoEl = ngxUiLoaderEl.querySelector('.ngx-loading-logo');
-    expect(logoEl.style.top).toBe('calc((50% - 12px) - 12px)');
+    expect(logoEl.style.top).toBe('calc(50% - 24px)');
     expect(fgSpinnerEl.style.top).toBe('30px');
-    expect(textEl.style.top).toBe('calc(50% + 60px + 12px)');
+    expect(textEl.style.top).toBe('calc(50% + 72px)');
   });
 
   it('#determinePosition - logo, spinner and text are bottom-center', () => {