Metorik Helper v2

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 4
+
+[*.{json,yml,md}]
+indent_style = space
+indent_size = 2
+
+[{*.txt,wp-config-sample.php}]
+end_of_line = crlf

.github/workflows/prettier.yml

@@ -0,0 +1,44 @@
+name: Prettier (JS)
+on:
+  push:
+    branches:
+      - "master"
+      - "main"
+    paths-ignore:
+      - "**.md"
+  pull_request:
+    paths-ignore:
+      - "**.md"
+  workflow_dispatch:
+
+concurrency:
+  group: "${{ github.workflow }}-${{ github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  prettier:
+    name: Prettier (JS)
+    runs-on: ubuntu-latest
+    permissions:
+      # Give the default GITHUB_TOKEN write permission to commit and push the
+      # added or changed files to the repository.
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+      - name: Get changed js/vue files
+        id: changed-files-specific
+        uses: tj-actions/changed-files@v44
+        with:
+          files: |
+            **.js
+            **.vue
+      - name: Prettify code
+        if: steps.changed-files-specific.outputs.any_changed == 'true'
+        env:
+          ALL_CHANGED_FILES: ${{ steps.changed-files-specific.outputs.all_changed_files }}
+        run: |
+          echo "Files that have changed: $ALL_CHANGED_FILES"
+          npx prettier --write $ALL_CHANGED_FILES
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Prettier: auto-formatting"

.github/workflows/tests.yml

@@ -0,0 +1,96 @@
+name: Continuous integration tests
+
+on:
+  push:
+    branches:
+      - "master"
+      - "main"
+    paths-ignore:
+      - "**.md"
+  pull_request:
+    paths-ignore:
+      - "**.md"
+  workflow_dispatch:
+
+concurrency:
+  group: "${{ github.workflow }}-${{ github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  unit_tests:
+    name: "1️⃣ Unit tests"
+    runs-on: "ubuntu-latest"
+    continue-on-error: ${{ matrix.allowed_failure }}
+    strategy:
+      fail-fast: false
+      matrix:
+        php: [ '8.1', '8.2', '8.3' ]
+        allowed_failure: [ false ]
+        dependencies:
+          - "highest"
+    steps:
+      - name: "Set up PHP"
+        uses: "shivammathur/setup-php@v2"
+        with:
+          php-version: "${{ matrix.php }}"
+          coverage: "xdebug"
+
+      - name: "Checkout code"
+        uses: "actions/checkout@v4"
+
+      - name: "Install dependencies"
+        uses: "ramsey/composer-install@v2"
+        with:
+          dependency-versions: "${{ matrix.dependencies }}"
+          custom-cache-suffix: $(date -u -d "-0 month -$(($(date +%d)-1)) days" "+%F")
+
+      - name: "Setup test suite"
+        run: "./vendor/bin/wp-pest setup plugin --plugin-slug=metorik-helper --skip-delete"
+
+      - name: "Execute unit tests"
+        run: "./vendor/bin/pest --group=unit"
+
+  integration_tests:
+    name: "2️⃣ Integration tests"
+    runs-on: "ubuntu-latest"
+    continue-on-error: ${{ matrix.allowed_failure }}
+    strategy:
+      fail-fast: false
+      matrix:
+        php: [ '8.1', '8.2', '8.3' ]
+        allowed_failure: [ false ]
+        dependencies:
+          - "highest"
+    steps:
+      - name: "Set up PHP"
+        uses: "shivammathur/setup-php@v2"
+        with:
+          php-version: "${{ matrix.php }}"
+          coverage: "xdebug"
+
+      - uses: "mirromutth/mysql-action@v1.1"
+        with:
+          mysql version: '5.6'
+          mysql database: 'mtk_test'
+          mysql root password: 'password'
+
+      - name: "Checkout code"
+        uses: "actions/checkout@v4"
+
+      - name: "Install dependencies"
+        uses: "ramsey/composer-install@v2"
+        with:
+          dependency-versions: "${{ matrix.dependencies }}"
+          custom-cache-suffix: $(date -u -d "-0 month -$(($(date +%d)-1)) days" "+%F")
+
+      - name: "Add woocommerce plugin"
+        run:  |
+          wget https://downloads.wordpress.org/plugin/woocommerce.zip
+          unzip woocommerce.zip
+          mv woocommerce ../
+
+      - name: "Setup test suite"
+        run: "./vendor/bin/wp-pest setup plugin --plugin-slug=metorik-helper --skip-delete --wp-version=6.4.3"
+
+      - name: "Execute integration tests"
+        run: "./vendor/bin/pest --group=integration"

.gitignore

@@ -0,0 +1,11 @@
+/vendor/
+/node_modules/
+*.DS_Store
+._*
+
+# Tests - local only
+/wp-content
+/wp
+/tests/coverage
+.phpunit.result.cache
+

.prettierignore

@@ -0,0 +1,8 @@
+# Ignore built files:
+vendor
+node_modules
+assets
+composer.json
+composer.lock
+package.json
+.github

.prettierrc

@@ -0,0 +1,13 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "printWidth": 120,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "semi": true,
+    "arrowParens": "always",
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "vueIndentScriptAndStyle": false,
+    "htmlWhitespaceSensitivity": "css"
+}

README.md

@@ -19,3 +19,31 @@ gulp magic
 ```
 
 To compile a minified JS file.
+
+---
+
+## Testing
+
+As of v2 of the plugin, we now have some limited unit & integration testing in the plugin.
+
+In order to run the tests you'll first need to set up dependencies using `composer`:
+
+```
+composer install
+```
+
+Then you'll need to set up the test suite using `wp-pest`:
+
+```
+vendor/bin/wp-pest setup plugin --plugin-slug=metorik-helper --skip-delete --wp-version=6.4.2
+```
+(at the moment there is issues with installing WP 6.5+ with `wp-pest` so we are using 6.4.2)
+
+This will create the necessary files in your project to run the tests.
+
+Then you can run the tests using:
+
+```
+composer test:unit
+composer test:integration
+```

assets/css/metorik.css

@@ -1,52 +1,83 @@
-/* Tippy Light Theme */
-.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-tooltip.light-theme{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-tooltip.light-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}
-
 /* Base styles for add to cart */
 .metorik-add-cart-email-form {
-  max-width: 300px;
-  padding: 18px 15px 20px;
-  text-align: left;
+	max-width: 300px;
+	padding: 18px 15px 20px;
+	text-align: left;
 }
 
 .metorik-add-cart-email-form h3 {
-  font-weight: 600;
-  margin-bottom: 20px;
+	font-weight: 600;
+	margin: 0 0 20px;
 }
 
 .metorik-add-cart-email-form .close-button {
-  color: #bbb;
-  cursor: pointer;
-  font-size: 15px;
-  position: absolute;
-  right: 28px;
-  top: 28px;
+	color: #bbb;
+	cursor: pointer;
+	font-size: 15px;
+	position: absolute;
+	right: 28px;
+	top: 28px;
 }
 
 .metorik-add-cart-email-form .close-button:hover {
-  color: #888;
+	color: #888;
 }
 
 .metorik-add-cart-email-form .email-input-wrapper {
-  position: relative;
+	position: relative;
 }
 
 .metorik-add-cart-email-form .email-input-wrapper.loading {
-  opacity: 0.75;
+	opacity: 0.75;
 }
 
 .metorik-add-cart-email-form .email-input-wrapper.success:after {
-  color: rgb(55,178,77);
-  content: "\2713";
-  font-size: 17px;
-  position: absolute;
-  right: 10px;
-  top: 10px;
+	color: rgb(55, 178, 77);
+	content: "\2713";
+	font-size: 17px;
+	position: absolute;
+	right: 10px;
+	top: 10px;
 }
 
 .metorik-add-cart-email-form .email-input {
-  width: 100%;
+	width: calc(100% - 20px);
+	padding: 5px;
 }
 
 .metorik-add-cart-email-form .email-usage-notice {
-  padding: 5px 0 0;
-}
+	padding: 5px 0 0;
+}
+
+/* tippy light theme */
+.tippy-box[data-theme~='light'] {
+	color: #26323d;
+	box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
+	0 4px 80px -8px rgba(36, 40, 47, 0.25),
+	0 4px 4px -2px rgba(91, 94, 105, 0.15);
+	background-color: #fff;
+}
+
+.tippy-box[data-theme~='light'] [data-placement^='top'] > .tippy-arrow::before {
+	border-top-color: #fff;
+}
+
+.tippy-box[data-theme~='light'] [data-placement^='bottom'] > .tippy-arrow::before {
+	border-bottom-color: #fff;
+}
+
+.tippy-box[data-theme~='light'] [data-placement^='left'] > .tippy-arrow::before {
+	border-left-color: #fff;
+}
+
+.tippy-box[data-theme~='light'] [data-placement^='right'] > .tippy-arrow::before {
+	border-right-color: #fff;
+}
+
+.tippy-box[data-theme~='light'] > .tippy-backdrop {
+	background-color: #fff;
+}
+
+.tippy-box[data-theme~='light'] > .tippy-svg-arrow {
+	fill: #fff;
+}