2281 - Fix node-sass certificate issue

.github/workflows/ci.yml

@@ -189,3 +189,17 @@ jobs:
 
             -   name: Run tests
                 run: composer test
+
+    npm:
+        name: "npm"
+        runs-on: ubuntu-latest
+        container: "node"
+        steps:
+            -   name: Checkout repository
+                uses: actions/checkout@v2
+
+            -   name: Install dependencies
+                run: npm install
+
+            -   name: Run tests
+                run: npm test

assets/scss/_payments.scss

@@ -1,20 +1,22 @@
+@use 'sass:math';
+
 // THEPAY PAYMENTS GRID
 // Container for payment buttons.
 .tp-btn-grid {
     display: $tp-btn-grid-display;
     flex-wrap: $tp-btn-grid-wrap;
     justify-content: $tp-btn-grid-justify;
 
-    margin: -$tp-btn-grid-spacing / 2;
+    margin: math.div(-$tp-btn-grid-spacing, 2);
 
     // Button in grid
     .tp-btn {
-        margin: $tp-btn-grid-spacing / 2;
+        margin: math.div($tp-btn-grid-spacing, 2);
         width: calc(100% - #{$tp-btn-grid-spacing});
         min-width: $tp-btn-grid-min-btn-width;
         @each $breakpoint, $count in $tp-btn-grid-cols {
             @include tp-media-breakpoint-up($breakpoint){
-                width: calc(#{100% / $count} - #{$tp-btn-grid-spacing});
+                width: calc(#{math.div(100%, $count)} - #{$tp-btn-grid-spacing});
             }
         }
 
@@ -29,7 +31,6 @@
     text-align: center;
     display: inline-block;
     box-sizing: border-box;
-    text-align: center;
     max-width: 100%;
     border: $tp-btn-border solid $tp-btn-border-color;
     box-shadow: $tp-btn-shadow;
@@ -39,7 +40,6 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        border-radius: 5px;
         background-color: $tp-icon-bg;
         margin: $tp-icon-margin;
         transition: $tp-icon-transition;

assets/scss/_variables.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 
 // THEPAY COLOR VARIABLES
 $tp-white:      #ffffff !default;
@@ -63,7 +64,7 @@ $tp-icon-bg:                $tp-white !default;
 $tp-icon-border:            $tp-border !default;
 $tp-icon-border-color:      $tp-border-color !default;
 $tp-icon-shadow:            none !default;
-$tp-icon-margin:            0 0 $tp-spacing / 2 !default;
+$tp-icon-margin:            0 0 math.div($tp-spacing, 2) !default;
 $tp-icon-transition:        .3s !default;
 $tp-icon-hover-border-color: $tp-main-color !default;
 $tp-icon-hover-shadow:      0 4px 5px transparentize($tp-icon-hover-border-color, .31) !default;

assets/tests/dist.test.js

@@ -0,0 +1,14 @@
+const fs = require('node:fs');
+const path = require('node:path');
+
+let assetContent = (filename) => fs.readFileSync(path.resolve('assets', filename)).toString();
+
+test('Dist style is minified', () => {
+    // Minified style does not have more than 5 lines.
+    return expect(assetContent('dist/thepay.css').split(/\n/).length).toBeLessThan(5);
+});
+
+test('Dist script is minified', () => {
+    // Minified script does not have more than 5 lines.
+    return expect(assetContent('dist/thepay.js').split(/\n/).length).toBeLessThan(5);
+});

jest.config.js

@@ -0,0 +1,9 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  // The root directory that Jest should scan for tests and modules within
+  rootDir: 'assets/tests',
+};

package.json

@@ -1,18 +1,14 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "build": "mix --production",
+        "test": "jest"
     },
-
     "devDependencies": {
-        "cross-env": "^7.0.2",
-        "laravel-mix": "^5.0.4",
-        "node-sass": "^4.14.1"
+        "jest": "^29.1.2",
+        "laravel-mix": "^6.0.49",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.55.0",
+        "sass-loader": "^12.1.0"
     }
 }

tests/CreatePaymentTest.php

@@ -98,28 +98,6 @@ public function testGetPaymentMethods()
         // todo: complete test, implementation was not final at this moment
     }
 
-    /**
-     * @return void
-     */
-    public function testGetInlineStyles()
-    {
-        $result = $this->client->getInlineStyles();
-        $lines = count(explode("\n", $result));
-        // Minified style does not have more than 5 lines.
-        static::assertLessThanOrEqual(5, $lines, 'TheClient::getInlineStyles() has more than 5 lines. Fix this bug with "npm run production"');
-    }
-
-    /**
-     * @return void
-     */
-    public function testGetInlineScripts()
-    {
-        $result = $this->client->getInlineScripts();
-        $lines = count(explode("\n", $result));
-        // Minified javascript does not have more than 5 lines.
-        static::assertLessThanOrEqual(5, $lines, 'TheClient::getInlineScript() has more than 5 lines. Fix this bug with "npm run production"');
-    }
-
     /**
      * @return void
      */