From 7b053b91a5eacb24616f56f13fb4fb4674b09494 Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 12:36:52 +0200
Subject: [PATCH 01/11] fix onTransitionEnd height comparison, #26

---
 packages/vue-collapsed/src/Collapse.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vue-collapsed/src/Collapse.vue b/packages/vue-collapsed/src/Collapse.vue
index cfac9f7..90c118b 100644
--- a/packages/vue-collapsed/src/Collapse.vue
+++ b/packages/vue-collapsed/src/Collapse.vue
@@ -212,18 +212,18 @@ watch(baseHeight, (newBaseHeight) => {
 // Transition events
 
 function onTransitionEnd(e: TransitionEvent) {
-   if (e.target === collapseRef.value && e.propertyName === 'height') {
+   if (e.target && e.target === collapseRef.value && e.propertyName === 'height') {
       /**
        * Reset styles to the initial style state,
        * we also make sure callbacks are triggered only once
        * when transitions are 100% finished.
        */
       if (isExpanded.value) {
-         if (collapseRef.value?.scrollHeight === getComputedHeight(collapseRef)) {
+         if (Math.abs(collapseRef.value.scrollHeight - getComputedHeight(collapseRef)) < 1) {
             onExpanded()
          }
       } else {
-         if (baseHeight.value === getComputedHeight(collapseRef)) {
+         if (Math.abs(collapseRef.value.scrollHeight - baseHeight.value) < 1) {
             onCollapsed()
          }
       }

From 622f14f967ea5f6b62dd0ce226d49612603682c1 Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 12:39:27 +0200
Subject: [PATCH 02/11] bump 1.3.2

---
 packages/vue-collapsed/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-collapsed/package.json b/packages/vue-collapsed/package.json
index 954d13e..1b11ad0 100644
--- a/packages/vue-collapsed/package.json
+++ b/packages/vue-collapsed/package.json
@@ -1,6 +1,6 @@
 {
    "name": "vue-collapsed",
-   "version": "1.3.1",
+   "version": "1.3.2",
    "private": false,
    "description": "Dynamic CSS height transition from any to auto and vice versa for Vue 3. Accordion ready.",
    "keywords": [

From 1555c274338017227c3cee101547e5bc214652f6 Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 12:42:25 +0200
Subject: [PATCH 03/11] up github actions node version

---
 .github/workflows/chrome-tests.yml  | 2 +-
 .github/workflows/firefox-tests.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/chrome-tests.yml b/.github/workflows/chrome-tests.yml
index 497d51f..2330294 100644
--- a/.github/workflows/chrome-tests.yml
+++ b/.github/workflows/chrome-tests.yml
@@ -11,7 +11,7 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: '18'
+              node-version: '20'
          - uses: pnpm/action-setup@v2
            name: Install pnpm
            with:
diff --git a/.github/workflows/firefox-tests.yml b/.github/workflows/firefox-tests.yml
index d5399a6..2db4bd5 100644
--- a/.github/workflows/firefox-tests.yml
+++ b/.github/workflows/firefox-tests.yml
@@ -11,7 +11,7 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: '18'
+              node-version: '20'
          - uses: pnpm/action-setup@v2
            name: Install pnpm
            with:

From 5305b4fccf3094d3e0ac7057ecda4e46af21f1a3 Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:00:21 +0200
Subject: [PATCH 04/11] fix height comparison, 2

---
 packages/vue-collapsed/src/Collapse.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-collapsed/src/Collapse.vue b/packages/vue-collapsed/src/Collapse.vue
index 90c118b..d6e6aa9 100644
--- a/packages/vue-collapsed/src/Collapse.vue
+++ b/packages/vue-collapsed/src/Collapse.vue
@@ -223,7 +223,7 @@ function onTransitionEnd(e: TransitionEvent) {
             onExpanded()
          }
       } else {
-         if (Math.abs(collapseRef.value.scrollHeight - baseHeight.value) < 1) {
+         if (Math.abs(baseHeight.value - getComputedHeight(collapseRef)) < 1) {
             onCollapsed()
          }
       }

From ddfae080cfd87c15ec9a505688d8d66409473504 Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:01:06 +0200
Subject: [PATCH 05/11] up deps

---
 package.json                        |  4 ++--
 packages/vue-collapsed/package.json | 20 ++++++++++----------
 playground/package.json             |  6 +++---
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 07f075e..e4276a3 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
    "devDependencies": {
       "concurrently": "^8.2.2",
       "husky": "^8.0.3",
-      "lint-staged": "^15.2.0",
-      "prettier": "^3.1.0"
+      "lint-staged": "^15.2.2",
+      "prettier": "^3.2.5"
    },
    "lint-staged": {
       "*.{js,ts,vue,json,css,md}": "prettier --write"
diff --git a/packages/vue-collapsed/package.json b/packages/vue-collapsed/package.json
index 1b11ad0..e84b15e 100644
--- a/packages/vue-collapsed/package.json
+++ b/packages/vue-collapsed/package.json
@@ -47,16 +47,16 @@
       "test:gui": "concurrently \"pnpm watch\" \"cypress open --component\""
    },
    "devDependencies": {
-      "@types/node": "^20.8.7",
-      "@vitejs/plugin-vue": "^4.4.0",
+      "@types/node": "^20.12.5",
+      "@vitejs/plugin-vue": "^4.6.2",
       "concurrently": "^8.2.2",
-      "cypress": "^13.3.2",
-      "cypress-wait-frames": "^0.9.4",
-      "husky": "^8.0.3",
-      "typescript": "^5.2.2",
-      "vite": "^4.5.0",
-      "vite-plugin-dts": "^3.6.0",
-      "vue": "^3.3.4",
-      "vue-tsc": "^1.8.19"
+      "cypress": "^13.7.2",
+      "cypress-wait-frames": "^0.9.8",
+      "husky": "^9.0.11",
+      "typescript": "^5.4.4",
+      "vite": "^4.5.3",
+      "vite-plugin-dts": "^3.8.1",
+      "vue": "^3.3.13",
+      "vue-tsc": "^1.8.27"
    }
 }
diff --git a/playground/package.json b/playground/package.json
index 52e26cc..aa9b6ff 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -14,8 +14,8 @@
    },
    "devDependencies": {
       "@nuxt/devtools": "latest",
-      "nuxt": "^3.8.2",
-      "vue": "^3.3.10",
-      "vue-router": "^4.2.5"
+      "nuxt": "^3.11.2",
+      "vue": "^3.4.21",
+      "vue-router": "^4.3.0"
    }
 }

From 5db75bb0cdee6d58f4b898afd353d40f1ba47cfb Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:06:35 +0200
Subject: [PATCH 06/11] attempt to fix github action cypress binary err

---
 .github/workflows/chrome-tests.yml  | 6 ++++--
 .github/workflows/firefox-tests.yml | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/chrome-tests.yml b/.github/workflows/chrome-tests.yml
index 2330294..6052384 100644
--- a/.github/workflows/chrome-tests.yml
+++ b/.github/workflows/chrome-tests.yml
@@ -11,12 +11,14 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: '20'
+              node-version: 20
          - uses: pnpm/action-setup@v2
            name: Install pnpm
            with:
               version: 8
-              run_install: true
+              run_install: false
+         - name: Install deps
+           run: pnpm i
          - name: Install Cypress binaries
            run: npx cypress install
          - name: Chrome tests
diff --git a/.github/workflows/firefox-tests.yml b/.github/workflows/firefox-tests.yml
index 2db4bd5..8ed7df4 100644
--- a/.github/workflows/firefox-tests.yml
+++ b/.github/workflows/firefox-tests.yml
@@ -6,17 +6,19 @@ on:
 
 jobs:
    cypress-ct:
-      runs-on: macos-latest
+      runs-on: ubuntu-latest
       steps:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: '20'
+              node-version: 20
          - uses: pnpm/action-setup@v2
            name: Install pnpm
            with:
               version: 8
-              run_install: true
+              run_install: false
+         - name: Install deps
+           run: pnpm i
          - name: Install Cypress binaries
            run: npx cypress install
          - name: Firefox tests

From 40211f57f040ce5e29a861ea1ac82fc95174e9a2 Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:08:24 +0200
Subject: [PATCH 07/11] attempt to fix github action cypress binary err, 2

---
 .github/workflows/chrome-tests.yml  | 2 +-
 .github/workflows/firefox-tests.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/chrome-tests.yml b/.github/workflows/chrome-tests.yml
index 6052384..c3d656d 100644
--- a/.github/workflows/chrome-tests.yml
+++ b/.github/workflows/chrome-tests.yml
@@ -20,6 +20,6 @@ jobs:
          - name: Install deps
            run: pnpm i
          - name: Install Cypress binaries
-           run: npx cypress install
+           run: pnpm dlx cypress install
          - name: Chrome tests
            run: pnpm test:chrome
diff --git a/.github/workflows/firefox-tests.yml b/.github/workflows/firefox-tests.yml
index 8ed7df4..75a266f 100644
--- a/.github/workflows/firefox-tests.yml
+++ b/.github/workflows/firefox-tests.yml
@@ -20,6 +20,6 @@ jobs:
          - name: Install deps
            run: pnpm i
          - name: Install Cypress binaries
-           run: npx cypress install
+           run: pnpm dlx cypress install
          - name: Firefox tests
            run: pnpm test:firefox

From 57e65cde5a0fc089de392e3c8fd6ccbc6daf0b2f Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:24:54 +0200
Subject: [PATCH 08/11] update test to match firefox 124 behavior, set node to
 21 to ci

---
 .github/workflows/chrome-tests.yml          | 2 +-
 .github/workflows/firefox-tests.yml         | 2 +-
 .github/workflows/publish.yml               | 2 +-
 packages/vue-collapsed/tests/Collapse.cy.ts | 6 +++++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/chrome-tests.yml b/.github/workflows/chrome-tests.yml
index c3d656d..edd9932 100644
--- a/.github/workflows/chrome-tests.yml
+++ b/.github/workflows/chrome-tests.yml
@@ -11,7 +11,7 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: 20
+              node-version: 21
          - uses: pnpm/action-setup@v2
            name: Install pnpm
            with:
diff --git a/.github/workflows/firefox-tests.yml b/.github/workflows/firefox-tests.yml
index 75a266f..b6bd8e9 100644
--- a/.github/workflows/firefox-tests.yml
+++ b/.github/workflows/firefox-tests.yml
@@ -11,7 +11,7 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: 20
+              node-version: 21
          - uses: pnpm/action-setup@v2
            name: Install pnpm
            with:
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index cb59944..05d3108 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -20,7 +20,7 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: '20.x'
+              node-version: '21.x'
               registry-url: 'https://registry.npmjs.org'
          - uses: pnpm/action-setup@v2
            name: Install pnpm
diff --git a/packages/vue-collapsed/tests/Collapse.cy.ts b/packages/vue-collapsed/tests/Collapse.cy.ts
index 78dc65f..5037aa3 100644
--- a/packages/vue-collapsed/tests/Collapse.cy.ts
+++ b/packages/vue-collapsed/tests/Collapse.cy.ts
@@ -275,10 +275,14 @@ describe('With baseHeight > 0', () => {
 
       cy.get('#TriggerButton').click()
 
+      const transition = 'height 0.3s cubic-bezier(0.33, 1, 0.68, 1)'
+
       cy.get('#Collapse').should(
          'have.css',
          'transition',
-         'height 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0s'
+         isFirefox
+            ? transition // Firefox >= 124 doesn't include '0s' by default anymore
+            : `${transition} 0s`
       )
 
       cy.get('#Collapse').and('have.attr', 'style').and('include', '--vc-auto-duration: 300ms')

From 4aa0f535c70ec85c77a76f6a2111167ccfd5610d Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:40:36 +0200
Subject: [PATCH 09/11] fix cypress firefox >= 124 ci bug

---
 packages/vue-collapsed/src/utils.ts         |  9 ++-
 packages/vue-collapsed/tests/Collapse.cy.ts | 67 ++++++++++++---------
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/packages/vue-collapsed/src/utils.ts b/packages/vue-collapsed/src/utils.ts
index 0ecffe6..699e352 100644
--- a/packages/vue-collapsed/src/utils.ts
+++ b/packages/vue-collapsed/src/utils.ts
@@ -39,9 +39,16 @@ export function isReducedOrDisabled(el: RefEl) {
 
    const { transition } = getComputedStyle(el.value)
 
+   console.log(
+      typeof window.requestAnimationFrame === 'undefined' ||
+         window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+         transition.includes('none') ||
+         transition.includes('height 0s')
+   )
+
    return (
       typeof window.requestAnimationFrame === 'undefined' ||
-      matchMedia('(prefers-reduced-motion: reduce)').matches ||
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
       transition.includes('none') ||
       transition.includes('height 0s')
    )
diff --git a/packages/vue-collapsed/tests/Collapse.cy.ts b/packages/vue-collapsed/tests/Collapse.cy.ts
index 5037aa3..80ccfad 100644
--- a/packages/vue-collapsed/tests/Collapse.cy.ts
+++ b/packages/vue-collapsed/tests/Collapse.cy.ts
@@ -1,6 +1,18 @@
 import App from './App.vue'
 import { getRandomIntInclusive, isFirefox } from '../cypress/support/component'
 
+beforeEach(() => {
+   /**
+    * For some unknown reason on Cypress Firefox >=124 (only on CI) reduced motion is always set to 'reduce',
+    * using this stub to force it to return true.
+    */
+   if (isFirefox) {
+      cy.stub(window, 'matchMedia').withArgs('(prefers-reduced-motion: reduce)').returns({
+         matches: false,
+      })
+   }
+})
+
 it('Should be able to set different tag name', () => {
    cy.mount(App, {
       props: {
@@ -113,42 +125,39 @@ it('Should update data-collapse attribute properly', () => {
    }
 })
 
-// Bugged CI test, works locally and with any other browser
-if (!isFirefox) {
-   describe('Should execute callbacks properly', () => {
-      function testCallbacks(isLastActionExpand: boolean) {
-         const repeatEven = getRandomIntInclusive(10, 20) * 2
-         for (let i = 0; i < repeatEven; i++) {
-            cy.get('#TriggerButton').click().wait(50)
-         }
-
-         cy.get('#CountExpand')
-            .should('have.text', `${repeatEven / 2}`)
-            .get('#CountExpanded')
-            .should('have.text', isLastActionExpand ? '0' : '1')
-            .get('#CountCollapse')
-            .should('have.text', `${repeatEven / 2}`)
-            .get('#CountCollapsed')
-            .should('have.text', isLastActionExpand ? '1' : '0')
+describe('Should execute callbacks properly', () => {
+   function testCallbacks(isLastActionExpand: boolean) {
+      const repeatEven = getRandomIntInclusive(10, 20) * 2
+      for (let i = 0; i < repeatEven; i++) {
+         cy.get('#TriggerButton').click().wait(50)
       }
 
-      it('Expand as last action', () => {
-         cy.mount(App)
+      cy.get('#CountExpand')
+         .should('have.text', `${repeatEven / 2}`)
+         .get('#CountExpanded')
+         .should('have.text', isLastActionExpand ? '0' : '1')
+         .get('#CountCollapse')
+         .should('have.text', `${repeatEven / 2}`)
+         .get('#CountCollapsed')
+         .should('have.text', isLastActionExpand ? '1' : '0')
+   }
 
-         testCallbacks(true)
-      })
+   it('Expand as last action', () => {
+      cy.mount(App)
 
-      it('Collapse as last action', () => {
-         cy.mount(App, {
-            props: {
-               initialValue: true,
-            },
-         })
+      testCallbacks(true)
+   })
 
-         testCallbacks(false)
+   it('Collapse as last action', () => {
+      cy.mount(App, {
+         props: {
+            initialValue: true,
+         },
       })
+
+      testCallbacks(false)
    })
-}
+})
 
 describe('With baseHeight > 0', () => {
    it('Should have correct styles if collapsed on mount', () => {

From edecb3380ca78bda1d56630b5d34be952d835cd2 Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:45:26 +0200
Subject: [PATCH 10/11] fix cypress firefox >= 124 ci bug, 2

---
 packages/vue-collapsed/src/utils.ts         |   7 -
 packages/vue-collapsed/tests/Collapse.cy.ts | 436 ++++++++++----------
 2 files changed, 219 insertions(+), 224 deletions(-)

diff --git a/packages/vue-collapsed/src/utils.ts b/packages/vue-collapsed/src/utils.ts
index 699e352..b80b6f4 100644
--- a/packages/vue-collapsed/src/utils.ts
+++ b/packages/vue-collapsed/src/utils.ts
@@ -39,13 +39,6 @@ export function isReducedOrDisabled(el: RefEl) {
 
    const { transition } = getComputedStyle(el.value)
 
-   console.log(
-      typeof window.requestAnimationFrame === 'undefined' ||
-         window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
-         transition.includes('none') ||
-         transition.includes('height 0s')
-   )
-
    return (
       typeof window.requestAnimationFrame === 'undefined' ||
       window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
diff --git a/packages/vue-collapsed/tests/Collapse.cy.ts b/packages/vue-collapsed/tests/Collapse.cy.ts
index 80ccfad..841b705 100644
--- a/packages/vue-collapsed/tests/Collapse.cy.ts
+++ b/packages/vue-collapsed/tests/Collapse.cy.ts
@@ -1,217 +1,66 @@
 import App from './App.vue'
 import { getRandomIntInclusive, isFirefox } from '../cypress/support/component'
 
-beforeEach(() => {
-   /**
-    * For some unknown reason on Cypress Firefox >=124 (only on CI) reduced motion is always set to 'reduce',
-    * using this stub to force it to return true.
-    */
-   if (isFirefox) {
-      cy.stub(window, 'matchMedia').withArgs('(prefers-reduced-motion: reduce)').returns({
-         matches: false,
-      })
-   }
-})
-
-it('Should be able to set different tag name', () => {
-   cy.mount(App, {
-      props: {
-         initialValue: true,
-         as: 'section',
-      },
-   })
-
-   cy.get('#Collapse').should('have.prop', 'tagName', 'SECTION')
-})
-
-it('Should have correct styles if collapsed on mount', () => {
-   cy.mount(App)
-
-   cy.get('#Collapse')
-      .should('have.css', 'display', 'none')
-      .and('have.css', 'padding', '0px')
-      .and('have.css', 'border', isFirefox ? '0px rgb(0, 0, 0)' : '0px none rgb(0, 0, 0)')
-      .and('have.css', 'margin', '0px')
-      .and('not.have.css', 'transition', '')
-      .and('not.have.css', 'overflow', 'hidden')
-      .and((element) => {
-         /**
-          * https://github.com/cypress-io/cypress/issues/6309
-          */
-         expect(getComputedStyle(element[0]).height).to.eq('auto')
-      })
-})
-
-it('Should have correct styles if expanded on mount', () => {
-   cy.mount(App, {
-      props: {
-         initialValue: true,
-      },
-   })
-
-   cy.get('#Collapse')
-      .should('have.css', 'padding', '0px')
-      .and('have.css', 'border', isFirefox ? '0px rgb(0, 0, 0)' : '0px none rgb(0, 0, 0)')
-      .and('have.css', 'margin', '0px')
-      .and('not.have.css', 'transition', '')
-      .and('not.have.css', 'display', 'none')
-      .and('not.have.css', 'overflow', 'hidden')
-})
-
-it('Should change height if resizing on expanded', () => {
-   cy.mount(App).viewport('macbook-13')
-
-   cy.get('#TriggerButton').click()
-
-   cy.waitFrames({
-      subject: () => cy.get('#Collapse'),
-      property: 'clientHeight',
-      frames: 30,
-   })
-
-   for (let i = 0; i < 10; i++) {
-      cy.get('#Collapse').invoke('height').as('desktopHeight')
-
-      cy.get('@desktopHeight').then((desktopHeight) => {
-         cy.viewport('iphone-x')
-
-         cy.get('#Collapse')
-            .invoke('height')
-            .should('be.greaterThan', desktopHeight)
-            .as('mobileHeight')
-      })
-
-      cy.get('@mobileHeight').then((mobileHeight) => {
-         cy.viewport('macbook-13')
-
-         cy.get('#Collapse').invoke('height').should('be.lessThan', mobileHeight)
-      })
-   }
-})
-
-it('Should update data-collapse attribute properly', () => {
-   cy.mount(App)
-
-   const randomIter = getRandomIntInclusive(5, 20)
-
-   for (let i = 0; i < randomIter; i++) {
-      cy.get('#TriggerButton')
-         .click()
-         .get('#Collapse')
-         .should('have.attr', 'data-collapse', 'expanding')
-
-      cy.waitFrames({
-         subject: () => cy.get('#Collapse'),
-         property: 'clientHeight',
-         frames: 10,
-      })
-
-      cy.get('#Collapse')
-         .should('have.attr', 'data-collapse', 'expanded')
-
-         .get('#TriggerButton')
-         .click()
-         .get('#Collapse')
-         .should('have.attr', 'data-collapse', 'collapsing')
-
-      cy.waitFrames({
-         subject: () => cy.get('#Collapse'),
-         property: 'clientHeight',
-         frames: 10,
-      })
-
-         .get('#Collapse')
-         .should('have.attr', 'data-collapse', 'collapsed')
-   }
-})
-
-describe('Should execute callbacks properly', () => {
-   function testCallbacks(isLastActionExpand: boolean) {
-      const repeatEven = getRandomIntInclusive(10, 20) * 2
-      for (let i = 0; i < repeatEven; i++) {
-         cy.get('#TriggerButton').click().wait(50)
+describe('Collapse', () => {
+   beforeEach(() => {
+      /**
+       * For some unknown reason on Cypress Firefox >=124 (only on CI) reduced motion is always set to 'reduce',
+       * using this stub to force it to return true.
+       */
+      if (isFirefox) {
+         cy.stub(window, 'matchMedia').withArgs('(prefers-reduced-motion: reduce)').returns({
+            matches: false,
+         })
       }
-
-      cy.get('#CountExpand')
-         .should('have.text', `${repeatEven / 2}`)
-         .get('#CountExpanded')
-         .should('have.text', isLastActionExpand ? '0' : '1')
-         .get('#CountCollapse')
-         .should('have.text', `${repeatEven / 2}`)
-         .get('#CountCollapsed')
-         .should('have.text', isLastActionExpand ? '1' : '0')
-   }
-
-   it('Expand as last action', () => {
-      cy.mount(App)
-
-      testCallbacks(true)
    })
 
-   it('Collapse as last action', () => {
+   it('Should be able to set different tag name', () => {
       cy.mount(App, {
          props: {
             initialValue: true,
+            as: 'section',
          },
       })
 
-      testCallbacks(false)
+      cy.get('#Collapse').should('have.prop', 'tagName', 'SECTION')
    })
-})
 
-describe('With baseHeight > 0', () => {
    it('Should have correct styles if collapsed on mount', () => {
-      cy.mount(App, {
-         props: {
-            initialValue: false,
-            baseHeight: 100,
-         },
-      })
+      cy.mount(App)
 
       cy.get('#Collapse')
-         .should('have.css', 'height', '100px')
-         .and('have.css', 'overflow', 'hidden')
+         .should('have.css', 'display', 'none')
+         .and('have.css', 'padding', '0px')
+         .and('have.css', 'border', isFirefox ? '0px rgb(0, 0, 0)' : '0px none rgb(0, 0, 0)')
+         .and('have.css', 'margin', '0px')
+         .and('not.have.css', 'transition', '')
+         .and('not.have.css', 'overflow', 'hidden')
+         .and((element) => {
+            /**
+             * https://github.com/cypress-io/cypress/issues/6309
+             */
+            expect(getComputedStyle(element[0]).height).to.eq('auto')
+         })
    })
 
    it('Should have correct styles if expanded on mount', () => {
       cy.mount(App, {
          props: {
             initialValue: true,
-            baseHeight: 100,
          },
       })
 
       cy.get('#Collapse')
          .should('have.css', 'padding', '0px')
          .and('have.css', 'border', isFirefox ? '0px rgb(0, 0, 0)' : '0px none rgb(0, 0, 0)')
-
          .and('have.css', 'margin', '0px')
          .and('not.have.css', 'transition', '')
          .and('not.have.css', 'display', 'none')
          .and('not.have.css', 'overflow', 'hidden')
    })
 
-   it('Should collapse to baseHeight', () => {
-      cy.mount(App, {
-         props: {
-            initialValue: true,
-            baseHeight: 100,
-         },
-      })
-
-      cy.get('#TriggerButton').click()
-      cy.get('#Collapse')
-         .should('have.css', 'height', '100px')
-         .and('have.css', 'overflow', 'hidden')
-   })
-
    it('Should change height if resizing on expanded', () => {
-      cy.mount(App, {
-         props: {
-            initialValue: false,
-            baseHeight: 100,
-         },
-      }).viewport('macbook-13')
+      cy.mount(App).viewport('macbook-13')
 
       cy.get('#TriggerButton').click()
 
@@ -241,59 +90,212 @@ describe('With baseHeight > 0', () => {
       }
    })
 
-   it('Should update collapsed height if editing value', () => {
-      const BASE_HEIGHT = 100
-      const INCREMENT = 10
+   it('Should update data-collapse attribute properly', () => {
+      cy.mount(App)
 
-      cy.mount(App, {
-         props: {
-            initialValue: false,
-            baseHeight: BASE_HEIGHT,
-         },
-      })
+      const randomIter = getRandomIntInclusive(5, 20)
 
-      const randomClicks = getRandomIntInclusive(5, 25)
-      for (let i = 1; i < randomClicks + 1; i++) {
-         cy.get('#BaseHeightIncr')
+      for (let i = 0; i < randomIter; i++) {
+         cy.get('#TriggerButton')
             .click()
             .get('#Collapse')
-            .should('have.css', 'height', `${BASE_HEIGHT + INCREMENT * i}px`)
-            .and('have.css', 'overflow', 'hidden')
+            .should('have.attr', 'data-collapse', 'expanding')
+
+         cy.waitFrames({
+            subject: () => cy.get('#Collapse'),
+            property: 'clientHeight',
+            frames: 10,
+         })
+
+         cy.get('#Collapse')
+            .should('have.attr', 'data-collapse', 'expanded')
+
+            .get('#TriggerButton')
+            .click()
+            .get('#Collapse')
+            .should('have.attr', 'data-collapse', 'collapsing')
+
+         cy.waitFrames({
+            subject: () => cy.get('#Collapse'),
+            property: 'clientHeight',
+            frames: 10,
+         })
+
+            .get('#Collapse')
+            .should('have.attr', 'data-collapse', 'collapsed')
       }
+   })
 
-      cy.get('#Collapse')
-         .invoke('height')
-         .then((height) => {
-            for (let i = 1; i < randomClicks + 1; i++) {
-               cy.get('#BaseHeightDecr').click()
-               cy.get('#Collapse')
-                  .should('have.css', 'height', `${Number(height) - INCREMENT * i}px`)
-                  .and('have.css', 'overflow', 'hidden')
-            }
+   describe('Should execute callbacks properly', () => {
+      function testCallbacks(isLastActionExpand: boolean) {
+         const repeatEven = getRandomIntInclusive(10, 20) * 2
+         for (let i = 0; i < repeatEven; i++) {
+            cy.get('#TriggerButton').click().wait(50)
+         }
+
+         cy.get('#CountExpand')
+            .should('have.text', `${repeatEven / 2}`)
+            .get('#CountExpanded')
+            .should('have.text', isLastActionExpand ? '0' : '1')
+            .get('#CountCollapse')
+            .should('have.text', `${repeatEven / 2}`)
+            .get('#CountCollapsed')
+            .should('have.text', isLastActionExpand ? '1' : '0')
+      }
+
+      it('Expand as last action', () => {
+         cy.mount(App)
+
+         testCallbacks(true)
+      })
+
+      it('Collapse as last action', () => {
+         cy.mount(App, {
+            props: {
+               initialValue: true,
+            },
          })
+
+         testCallbacks(false)
+      })
    })
 
-   it('Should play transition if was hidden on mount', () => {
-      cy.mount(App, {
-         props: {
-            hiddenOnMount: true,
-         },
+   describe('With baseHeight > 0', () => {
+      it('Should have correct styles if collapsed on mount', () => {
+         cy.mount(App, {
+            props: {
+               initialValue: false,
+               baseHeight: 100,
+            },
+         })
+
+         cy.get('#Collapse')
+            .should('have.css', 'height', '100px')
+            .and('have.css', 'overflow', 'hidden')
       })
 
-      cy.wait(2000) // Wait for onMounted effect
+      it('Should have correct styles if expanded on mount', () => {
+         cy.mount(App, {
+            props: {
+               initialValue: true,
+               baseHeight: 100,
+            },
+         })
 
-      cy.get('#TriggerButton').click()
+         cy.get('#Collapse')
+            .should('have.css', 'padding', '0px')
+            .and('have.css', 'border', isFirefox ? '0px rgb(0, 0, 0)' : '0px none rgb(0, 0, 0)')
+
+            .and('have.css', 'margin', '0px')
+            .and('not.have.css', 'transition', '')
+            .and('not.have.css', 'display', 'none')
+            .and('not.have.css', 'overflow', 'hidden')
+      })
+
+      it('Should collapse to baseHeight', () => {
+         cy.mount(App, {
+            props: {
+               initialValue: true,
+               baseHeight: 100,
+            },
+         })
+
+         cy.get('#TriggerButton').click()
+         cy.get('#Collapse')
+            .should('have.css', 'height', '100px')
+            .and('have.css', 'overflow', 'hidden')
+      })
+
+      it('Should change height if resizing on expanded', () => {
+         cy.mount(App, {
+            props: {
+               initialValue: false,
+               baseHeight: 100,
+            },
+         }).viewport('macbook-13')
+
+         cy.get('#TriggerButton').click()
+
+         cy.waitFrames({
+            subject: () => cy.get('#Collapse'),
+            property: 'clientHeight',
+            frames: 30,
+         })
+
+         for (let i = 0; i < 10; i++) {
+            cy.get('#Collapse').invoke('height').as('desktopHeight')
+
+            cy.get('@desktopHeight').then((desktopHeight) => {
+               cy.viewport('iphone-x')
 
-      const transition = 'height 0.3s cubic-bezier(0.33, 1, 0.68, 1)'
+               cy.get('#Collapse')
+                  .invoke('height')
+                  .should('be.greaterThan', desktopHeight)
+                  .as('mobileHeight')
+            })
+
+            cy.get('@mobileHeight').then((mobileHeight) => {
+               cy.viewport('macbook-13')
+
+               cy.get('#Collapse').invoke('height').should('be.lessThan', mobileHeight)
+            })
+         }
+      })
+
+      it('Should update collapsed height if editing value', () => {
+         const BASE_HEIGHT = 100
+         const INCREMENT = 10
+
+         cy.mount(App, {
+            props: {
+               initialValue: false,
+               baseHeight: BASE_HEIGHT,
+            },
+         })
+
+         const randomClicks = getRandomIntInclusive(5, 25)
+         for (let i = 1; i < randomClicks + 1; i++) {
+            cy.get('#BaseHeightIncr')
+               .click()
+               .get('#Collapse')
+               .should('have.css', 'height', `${BASE_HEIGHT + INCREMENT * i}px`)
+               .and('have.css', 'overflow', 'hidden')
+         }
+
+         cy.get('#Collapse')
+            .invoke('height')
+            .then((height) => {
+               for (let i = 1; i < randomClicks + 1; i++) {
+                  cy.get('#BaseHeightDecr').click()
+                  cy.get('#Collapse')
+                     .should('have.css', 'height', `${Number(height) - INCREMENT * i}px`)
+                     .and('have.css', 'overflow', 'hidden')
+               }
+            })
+      })
+
+      it('Should play transition if was hidden on mount', () => {
+         cy.mount(App, {
+            props: {
+               hiddenOnMount: true,
+            },
+         })
 
-      cy.get('#Collapse').should(
-         'have.css',
-         'transition',
-         isFirefox
-            ? transition // Firefox >= 124 doesn't include '0s' by default anymore
-            : `${transition} 0s`
-      )
+         cy.wait(2000) // Wait for onMounted effect
 
-      cy.get('#Collapse').and('have.attr', 'style').and('include', '--vc-auto-duration: 300ms')
+         cy.get('#TriggerButton').click()
+
+         const transition = 'height 0.3s cubic-bezier(0.33, 1, 0.68, 1)'
+
+         cy.get('#Collapse').should(
+            'have.css',
+            'transition',
+            isFirefox
+               ? transition // Firefox >= 124 doesn't include '0s' by default anymore
+               : `${transition} 0s`
+         )
+
+         cy.get('#Collapse').and('have.attr', 'style').and('include', '--vc-auto-duration: 300ms')
+      })
    })
 })

From a567cf261928db4da9e5a2c2cfa81e4952c65dbc Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Mon, 8 Apr 2024 13:48:46 +0200
Subject: [PATCH 11/11] remove firefox tests from ci (bugged as hell), cleanup

---
 .github/workflows/firefox-tests.yml         | 25 ---------------------
 packages/vue-collapsed/tests/Collapse.cy.ts | 12 ----------
 2 files changed, 37 deletions(-)
 delete mode 100644 .github/workflows/firefox-tests.yml

diff --git a/.github/workflows/firefox-tests.yml b/.github/workflows/firefox-tests.yml
deleted file mode 100644
index b6bd8e9..0000000
--- a/.github/workflows/firefox-tests.yml
+++ /dev/null
@@ -1,25 +0,0 @@
-name: Firefox Tests
-
-on:
-   push:
-   workflow_call:
-
-jobs:
-   cypress-ct:
-      runs-on: ubuntu-latest
-      steps:
-         - uses: actions/checkout@v3
-         - uses: actions/setup-node@v3
-           with:
-              node-version: 21
-         - uses: pnpm/action-setup@v2
-           name: Install pnpm
-           with:
-              version: 8
-              run_install: false
-         - name: Install deps
-           run: pnpm i
-         - name: Install Cypress binaries
-           run: pnpm dlx cypress install
-         - name: Firefox tests
-           run: pnpm test:firefox
diff --git a/packages/vue-collapsed/tests/Collapse.cy.ts b/packages/vue-collapsed/tests/Collapse.cy.ts
index 841b705..b83003d 100644
--- a/packages/vue-collapsed/tests/Collapse.cy.ts
+++ b/packages/vue-collapsed/tests/Collapse.cy.ts
@@ -2,18 +2,6 @@ import App from './App.vue'
 import { getRandomIntInclusive, isFirefox } from '../cypress/support/component'
 
 describe('Collapse', () => {
-   beforeEach(() => {
-      /**
-       * For some unknown reason on Cypress Firefox >=124 (only on CI) reduced motion is always set to 'reduce',
-       * using this stub to force it to return true.
-       */
-      if (isFirefox) {
-         cy.stub(window, 'matchMedia').withArgs('(prefers-reduced-motion: reduce)').returns({
-            matches: false,
-         })
-      }
-   })
-
    it('Should be able to set different tag name', () => {
       cy.mount(App, {
          props: {