Merge pull request #5285 from nextcloud/backport/5279/stable27

[stable27] fix(sync): push local changes on reconnect

.github/workflows/cypress-component.yml

@@ -0,0 +1,56 @@
+name: Cypress Component Tests
+
+on: pull_request
+
+env:
+  # Adjust APP_NAME if your repository name is different
+  APP_NAME: ${{ github.event.repository.name }}
+
+  # This represents the server branch to checkout.
+  # Usually it's the base branch of the PR, but for pushes it's the branch itself.
+  # e.g. 'main', 'stable27' or 'feature/my-feature
+  # n.b. server will use head_ref, as we want to test the PR branch.
+  BRANCH: ${{ github.base_ref || github.ref_name }}
+
+jobs:
+  cypress-component:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout app
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@8205673bab74a63eb9b8093402fd9e0e018663a1 # v2.2
+        id: versions
+        with:
+          fallbackNode: "^20"
+          fallbackNpm: "^9"
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
+        with:
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
+
+      - name: Install node dependencies
+        run: |
+          npm ci
+
+      - name: Cypress component tests
+        uses: cypress-io/github-action@ebe8b24c4428922d0f793a5c4c96853a633180e3 # v6.6.0
+        with:
+          component: true
+        env:
+          # Needs to be prefixed with CYPRESS_
+          CYPRESS_BRANCH: ${{ env.BRANCH }}
+          # https://github.com/cypress-io/github-action/issues/124
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          # Needed for some specific code workarounds
+          TESTING: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_BUILD_ID: ${{ github.sha }}-${{ github.run_number }}
+          CYPRESS_GROUP: Run component
+          npm_package_name: ${{ env.APP_NAME }}

.github/workflows/node.yml

@@ -58,6 +58,14 @@ jobs:
         run: |
           npm ci
           npm run build --if-present
+          npm run stats --if-present
+
+      - name: Send bundle stats to RelativeCI
+        uses: relative-ci/agent-action@e92b0c712e5ad0a039faf1026cbe438b8e7fed16 # v2
+        with:
+          webpackStatsFile: ./webpack-stats.json
+          key: ${{ secrets.RELATIVE_CI_KEY }}
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Check webpack build changes
         run: |

.gitignore

@@ -12,3 +12,4 @@ cypress/downloads/
 /tests/clover.xml
 /tests/.phpunit.result.cache
 dist/
+webpack-stats.json

cypress.config.js

@@ -31,6 +31,12 @@ module.exports = defineConfig({
 		experimentalSessionAndOrigin: true,
 		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
 	},
+	component: {
+		devServer: {
+			framework: "vue",
+			bundler: "webpack",
+		},
+	},
 	retries: {
 		runMode: 2,
 		// do not retry in `cypress open`

cypress/component/helpers/yjs.cy.js

@@ -0,0 +1,77 @@
+/*
+ * @copyright Copyright (c) 2023 Jonas <jonas@nextcloud.com>
+ *
+ * @author Jonas <jonas@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import * as Y from 'yjs'
+import { getDocumentState, getUpdateMessage, applyUpdateMessage } from '../../../src/helpers/yjs.js'
+
+describe('Yjs base64 wrapped with our helpers', function() {
+	it('applies step in wrong order', function() {
+		const source = new Y.Doc()
+		const target = new Y.Doc()
+		const sourceMap = source.getMap()
+		const targetMap = target.getMap()
+
+		target.on('afterTransaction', (tr, doc) => {
+			// console.log('afterTransaction', tr)
+		})
+
+		const state0 = getDocumentState(source)
+
+		// Add keyA to source and apply to target
+		sourceMap.set('keyA', 'valueA')
+
+		const stateA = getDocumentState(source)
+		const update0A = getUpdateMessage(source, state0)
+		applyUpdateMessage(target, update0A)
+		expect(targetMap.get('keyA')).to.be.eq('valueA')
+
+		// Add keyB to source, don't apply to target yet
+		sourceMap.set('keyB', 'valueB')
+		const stateB = getDocumentState(source)
+		const updateAB = getUpdateMessage(source, stateA)
+
+		// Add keyC to source, apply to target
+		sourceMap.set('keyC', 'valueC')
+		const updateBC = getUpdateMessage(source, stateB)
+		applyUpdateMessage(target, updateBC)
+		expect(targetMap.get('keyB')).to.be.eq(undefined)
+		expect(targetMap.get('keyC')).to.be.eq(undefined)
+
+		// Apply keyB to target
+		applyUpdateMessage(target, updateAB)
+		expect(targetMap.get('keyB')).to.be.eq('valueB')
+		expect(targetMap.get('keyC')).to.be.eq('valueC')
+	})
+
+	it('update message is empty if no additional state exists', function() {
+		const source = new Y.Doc()
+		const sourceMap = source.getMap()
+		const state0 = getDocumentState(source)
+		sourceMap.set('keyA', 'valueA')
+		const stateA = getDocumentState(source)
+		const update0A = getUpdateMessage(source, state0)
+		const updateAA = getUpdateMessage(source, stateA)
+		expect(update0A.length).to.be.eq(29)
+		expect(updateAA).to.be.eq(undefined)
+	})
+
+})

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands.js'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue2'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)