Merge pull request #2704 from framer/feature/ci

Adding e2e tests to CI

.circleci/config.yml

@@ -1,22 +1,70 @@
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 #
-version: 2.1
 jobs:
-    build:
+    test:
         docker:
-            # This python image includes node 14.17.1 according to
-            # https://circleci.com/developer/images/image/cimg/python#image-tags
-            # It's a bit weird to use a python image when we care about node
-            # first, but it's needed to get node-gyp to work to build iltorb
-            - image: cimg/python:3.12.2-node
+            - image: cimg/node:lts-browsers
+
+        working_directory: ~/repo
+        resource_class: large
+        steps:
+            - checkout
 
-            # Specify service dependencies here if necessary
-            # CircleCI maintains a library of pre-built images
-            # documented at https://circleci.com/docs/2.0/circleci-images/
-            # - image: circleci/mongo:3.4.4
+            # Download and cache dependencies
+            - restore_cache:
+                  keys:
+                      - v1-dependencies-{{ checksum "package.json" }}
+                      # fallback to using the latest cache if no exact match is found
+                      - v1-dependencies-
+
+            - run:
+                  name: Test Jest
+                  command: make test-jest
+
+            - store_test_results:
+                  path: test_reports
+
+            - save_cache:
+                  paths:
+                      - node_modules
+                  key: v1-dependencies-{{ checksum "package.json" }}
+
+    test-react:
+        docker:
+            - image: cimg/node:lts-browsers
 
         working_directory: ~/repo
+        parallelism: 6
+        resource_class: large
+        steps:
+            - checkout
 
+            # Download and cache dependencies
+            - restore_cache:
+                  keys:
+                      - v1-dependencies-{{ checksum "package.json" }}
+                      # fallback to using the latest cache if no exact match is found
+                      - v1-dependencies-
+
+            - run:
+                  name: React tests
+                  command: make test-react
+                  environment:
+                      JEST_JUNIT_OUTPUT: test_reports/framer-motion-react.xml
+
+            - store_test_results:
+                  path: test_reports
+
+            - save_cache:
+                  paths:
+                      - node_modules
+                  key: v1-dependencies-{{ checksum "package.json" }}
+
+    test-html:
+        docker:
+            - image: cimg/node:lts-browsers
+        resource_class: large
+        working_directory: ~/repo
         steps:
             - checkout
 
@@ -27,11 +75,30 @@ jobs:
                       # fallback to using the latest cache if no exact match is found
                       - v1-dependencies-
 
-            # run tests!
-            - run: |
-                  make test-ci
+            - run:
+                  name: HTML tests
+                  command: make test-html
+                  environment:
+                      JEST_JUNIT_OUTPUT: test_reports/framer-motion-html.xml
+
+            - run:
+                  name: Next.js tests
+                  command: make test-nextjs
+                  environment:
+                      JEST_JUNIT_OUTPUT: test_reports/framer-motion-next.xml
+
+            - store_test_results:
+                  path: test_reports
 
             - save_cache:
                   paths:
                       - node_modules
                   key: v1-dependencies-{{ checksum "package.json" }}
+
+workflows:
+    version: 2
+    build:
+        jobs:
+            - test
+            - test-react
+            - test-html

.gitignore

@@ -16,8 +16,6 @@ yarn-error.log
 /packages/*/coverage
 /packages/*/cypress/screenshots
 /packages/*/cypress/videos
-/packages/*/cypress/fixtures/appear-tests.json
-/packages/*/cypress/fixtures/projection-tests.json
 .cache-loader
 
 .yarn/*

Makefile

@@ -52,6 +52,15 @@ build: bootstrap
 watch: bootstrap
 	cd packages/framer-motion && yarn watch
 
+check-status:
+	@BUILD_STATUS=$(shell gh api repos/framer/motion/commits/$(shell git rev-parse HEAD)/status | jq -r .state); \
+	echo "Build $$BUILD_STATUS"; \
+	if [ "$$BUILD_STATUS" != "success" ]; then \
+	 BUILD_URL=$(shell gh api repos/framer/motion/commits/$(shell git rev-parse HEAD)/status | jq -r .statuses[0].target_url); \
+	 echo "Build URL: $$BUILD_URL"; exit 1; \
+	fi;
+
+
 test-watch: bootstrap
 	if test -f coverage/lcov-report/index.html; then \
 	 open coverage/lcov-report/index.html; \
@@ -61,21 +70,33 @@ test-watch: bootstrap
 bump:
 	npm version patch
 
-publish: clean bootstrap
-	npm publish
-	git push
-
 test: bootstrap
 	yarn test
 
-test-ci: bootstrap
+test-mkdir:
 	mkdir -p $(TEST_REPORT_PATH)
-	JEST_JUNIT_OUTPUT=$(TEST_REPORT_PATH)/framer-motion.xml yarn test-ci
+
+test-jest: export JEST_JUNIT_OUTPUT ?= test_reports/framer-motion.xml
+test-jest: bootstrap test-mkdir
+	echo $(JEST_JUNIT_OUTPUT)
+	yarn test
+
+test-react: build test-mkdir
+	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless $(if $(CI), --spec $(shell cd packages/framer-motion && circleci tests glob "cypress/integration/*.ts" | circleci tests split), --reporter spec)"
+
+test-html: build test-mkdir
+	node dev/inc/collect-html-tests.js
+	yarn start-server-and-test "yarn dev-server" http://localhost:8000 "cd packages/framer-motion && cypress run --config-file=cypress.html.json $(if $(CI), --config video=false, --reporter spec)"
+
+test-nextjs: build test-mkdir
+	yarn start-server-and-test "yarn dev-server || true" http://localhost:3000 "cd packages/framer-motion && cypress run --headless --config-file=cypress.rsc.json $(if $(CI), --config video=false, --reporter spec)"
+
+test-e2e: test-nextjs test-html test-react
 
 lint: bootstrap
 	yarn lint
 
 pretty: bootstrap
 	prettier --write */**/*.tsx */**/*.ts
 
-.PHONY: dev lint
+.PHONY: dev lint test-e2e

dev/html/public/projection/animate-nested-scale-correction.html

@@ -95,7 +95,7 @@
                                 matchViewportBox(a, aOrigin)
                             })
                         })
-                    }, 120)
+                    }, 150)
                 })
             })
         </script>

dev/inc/collect-html-tests.js

@@ -15,13 +15,16 @@ function collect(sourceDir, outputFile) {
         "utf8",
         (err) => {
             if (err) {
-                return console.error("Fail to collect HTML tests:", err.message)
+                return console.error(
+                    `Fail to collect ${sourceDir} tests:`,
+                    err.message
+                )
             }
-
-            console.log("HTML tests collected!")
         }
     )
 }
 
 collect("optimized-appear", "appear-tests")
 collect("projection", "projection-tests")
+
+console.log("HTML tests collected!")

dev/react/src/tests/layout-exit.tsx

@@ -19,6 +19,7 @@ export const App = () => {
                         id="box"
                         layout
                         style={{ width: 100, height: 100, background: "blue" }}
+                        transition={{ duration: 0.1 }}
                         exit={animation}
                     />
                 )}

dev/react/src/tests/layout-shared-crossfade-a-b-transform-template.tsx

@@ -1,5 +1,5 @@
 import { motion, AnimatePresence } from "framer-motion"
-import { useState } from "react";
+import { useState } from "react"
 
 export const App = () => {
     const params = new URLSearchParams(window.location.search)
@@ -27,7 +27,7 @@ export const App = () => {
                         backgroundColor: state ? "#f00" : "#0f0",
                         borderRadius: state ? 0 : 20,
                     }}
-                    transition={{ duration: 0.2, ease: () => 0.5 }}
+                    transition={{ duration: 1, ease: () => 0.5 }}
                     onClick={() => setState(!state)}
                     transformTemplate={(_, generated) =>
                         `translate(-50%, -50%) ${generated}`

dev/react/src/tests/layout-shared-crossfade-nested-display-contents.tsx

@@ -1,7 +1,7 @@
 import { motion, AnimatePresence } from "framer-motion"
-import { useState } from "react";
+import { useState } from "react"
 
-const transition = { duration: 0.2, ease: () => 0.5 }
+const transition = { duration: 0.4, ease: () => 0.5 }
 export const App = () => {
     const params = new URLSearchParams(window.location.search)
     const type = params.get("type") || true

dev/react/src/tests/layout.tsx

@@ -1,5 +1,5 @@
 import { motion, useMotionValue } from "framer-motion"
-import { useState } from "react";
+import { useState } from "react"
 
 export const App = () => {
     const params = new URLSearchParams(window.location.search)
@@ -14,7 +14,7 @@ export const App = () => {
             layout={type}
             style={{ ...(state ? a : b), backgroundColor }}
             onClick={() => setState(!state)}
-            transition={{ duration: 0.1, ease: () => 0.5 }}
+            transition={{ duration: 0.2, ease: () => 0.5 }}
             onLayoutAnimationStart={() => backgroundColor.set("green")}
             onLayoutAnimationComplete={() => backgroundColor.set("blue")}
         />

dev/react/src/tests/waapi-sync.tsx

@@ -38,6 +38,9 @@ export const App = () => {
             ease: "linear",
         }
 
+        if (!waapiRef.current) return
+        if (!syncRef.current) return
+
         const waapiAnimation = animate(
             waapiRef.current,
             { opacity: [0, 1] },
@@ -63,15 +66,23 @@ export const App = () => {
         )
 
         const timeout = setTimeout(() => {
-            waapiStartTime.set(waapiAnimation.startTime?.toString() || "null")
-            syncStartTime.set(syncAnimation.startTime?.toString() || "null")
+            waapiStartTime.set(
+                waapiAnimation.startTime?.toString() ||
+                    "waapi start time not available"
+            )
+            syncStartTime.set(
+                syncAnimation.startTime?.toString() ||
+                    "sync start time not available"
+            )
             waapiExplicitStartTime.set(
-                waapiExplicitAnimation.startTime?.toString() || "null"
+                waapiExplicitAnimation.startTime?.toString() ||
+                    "waapi explicit start time not available"
             )
             syncExplicitStartTime.set(
-                syncExplicitAnimation.startTime?.toString() || "null"
+                syncExplicitAnimation.startTime?.toString() ||
+                    "sync explicit start time not available"
             )
-        }, 200)
+        }, 500)
 
         return () => {
             waapiAnimation.stop()

package.json

@@ -18,11 +18,10 @@
         "dev-server": "turbo run dev-server",
         "lint": "turbo run lint",
         "test": "turbo run test",
-        "test-e2e": "turbo run test-e2e",
         "test-ci": "turbo run test-ci --no-cache",
         "measure": "turbo run measure",
-        "prepare": "turbo run build measure test test-e2e",
         "version": "yarn install && git stage yarn.lock",
+        "prepare": "make check-status && turbo run build measure",
         "new": "lerna publish from-package",
         "new-alpha": "turbo run build && lerna publish from-package --canary --preid alpha"
     },
@@ -57,6 +56,7 @@
         "gsap": "^3.12.5",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-junit": "^16.0.0",
         "jest-watch-typeahead": "^2.2.2",
         "lerna": "^4.0.0",
         "lint-staged": "^8.0.4",

packages/framer-motion-3d/package.json

@@ -35,9 +35,7 @@
     "scripts": {
         "eslint": "yarn run lint",
         "lint": "yarn eslint src/**/*.ts",
-        "test": "yarn test-unit",
-        "test-ci": "yarn test-unit",
-        "test-unit": "jest --coverage --config jest.config.json --max-workers=2",
+        "test": "jest --coverage --config jest.config.json --max-workers=2",
         "build": "yarn clean && tsc -p . && rollup -c",
         "dev": "yarn watch",
         "clean": "rm -rf types dist lib",

packages/framer-motion/cypress.html.json

@@ -0,0 +1,11 @@
+{
+    "baseUrl": "http://localhost:8000",
+    "integrationFolder": "cypress/integration-html",
+    "video": true,
+    "screenshots": false,
+    "retries": 2,
+    "reporter": "junit",
+    "reporterOptions": {
+        "mochaFile": "../../test_reports/framer-motion-html.xml"
+    }
+}

packages/framer-motion/cypress.json

@@ -2,5 +2,9 @@
     "baseUrl": "http://localhost:9990",
     "video": true,
     "screenshots": false,
-    "retries": 2
+    "retries": 2,
+    "reporter": "junit",
+    "reporterOptions": {
+        "mochaFile": "../../test_reports/framer-motion-[hash].xml"
+    }
 }

packages/framer-motion/cypress.rsc.json

@@ -3,5 +3,9 @@
     "integrationFolder": "cypress/integration-rsc",
     "video": true,
     "screenshots": false,
-    "retries": 2
+    "retries": 2,
+    "reporter": "junit",
+    "reporterOptions": {
+        "mochaFile": "../../test_reports/framer-motion-rsc.xml"
+    }
 }

packages/framer-motion/cypress/fixtures/projection-tests.json

@@ -0,0 +1 @@
+["animate-nested-scale-correction.html","animate-relative-instant.html","animate-relative-interrupt.html","animate-relative-mixed-transition.html","animate-relative-nested-deep.html","animate-relative-nested.html","animate-relative-parent-delayed.html","animate-relative-skip-parent.html","animate-relative.html","animate-single-element-layout-change-with-child.html","animate-single-element.html","animate-undo-layout-change.html","element-page-scroll-non-zero.html","element-scroll-layout-change.html","element-scroll-non-zero.html","element-scroll-remove.html","element-scroll-to-layout.html","element-scroll.html","fixed-child-from-static.html","fixed-child-layout-change.html","fixed-child-page-scroll-layout-change.html","fixed-child-page-scroll.html","fixed-child-to-static.html","fixed-page-scroll-layout-change.html","fixed-page-scroll.html","fixed-within-element-scroll.html","flexbox-siblings-layout-group.html","flexbox-siblings-to-grid-page-scroll-interrupt.html","flexbox-siblings-to-grid-page-scroll.html","flexbox-siblings-to-grid.html","flexbox-siblings.html","nested-layout-change-mid-projection.html","nested-layout-change-scale-correction.html","new-element-concurrent.html","perf-neighbours.html","perf-parent-child-static-grandchild.html","perf-parent-child.html","perf-shared-deep.html","perf-shared-single.html","perf-single.html","shared-block-update-promote-new.html","shared-mix-finish.html","shared-nested-promote-new-mix-interrupt.html","shared-promote-needs-reset.html","shared-promote-new-mix-interrupt.html","shared-promote-new-mix-remove.html","shared-promote-new-mix-rotate-layout.html","shared-promote-new-mix-rotate-remove.html","shared-promote-new-mix-rotate-scale-correction.html","shared-promote-new-mix-rotate.html","shared-promote-new-mix-skew.html","shared-promote-new-mix.html","shared-promote-new-rotate.html","shared-promote-new.html","shared-promote-target.html","shared-relative-new-child.html","shared-scroll-a-b-animate.html","shared-scroll-a-b.html","shared-scroll-b-a-animate.html","shared-scroll-b-a.html","shared-transform-parents-animate-2.html","shared-transform-parents-animate.html","shared-transform-parents.html","single-element-block-update.html","single-element-element-scroll-scale.html","single-element-layout-change-page-scroll.html","single-element-layout-change-perspective-container.html","single-element-layout-change-rotate-change.html","single-element-layout-change-rotate-container.html","single-element-layout-change-rotate.html","single-element-layout-change-skew-change.html","single-element-layout-change-skew-container.html","single-element-layout-change-skew.html","single-element-layout-change-with-child-page-scroll.html","single-element-layout-change-with-child-rotate-animate.html","single-element-layout-change-with-child-rotate.html","single-element-layout-change-with-child.html","single-element-layout-change.html","single-element-page-scroll-animated-overlay.html","single-element-page-scroll-overlay.html","single-element-page-scroll-scale.html","single-element-page-scroll.html","single-element-with-child-block-update.html","single-element-with-child-layout-change-interrupt.html","single-element-with-child-layout-change-page-scroll.html","single-element-with-child-layout-change.html","single-element.html","sticky-child-scroll-change-offset.html","sticky-child-scroll-change.html","sticky-child.html","sticky-element-scroll-child.html","sticky-element-scroll-shared-child.html","sticky-element-scroll.html","sticky-scroll-change-no-stick.html","sticky-scroll-change-with-stick.html","sticky-scroll-no-layout-change-stick.html","sticky-scroll-no-layout-change.html","sticky-shared-to-fixed-page-scroll-no-stick.html","sticky-shared-to-fixed-page-scroll-stick.html","sticky-to-fixed.html","transform-nested-parent-layout-change-scale-child-layout-change-transform.html","transform-nested-parent-layout-change-scale-child-layout-change.html","transform-nested-parent-scale-child-layout-change.html","transform-single-layout-change-with-scale-change.html","transform-single-layout-change-with-scale.html","transform-single-layout-change-with-translate.html","transform-single-with-scale-change.html","transform-single-with-scale.html"]

packages/framer-motion/cypress/integration/drag-to-reorder.ts

@@ -195,18 +195,19 @@ describe("Drag to reorder", () => {
             const delta = 20
             chain = chain
                 .trigger("pointerdown", 360, baseY, { force: true })
-                .wait(50)
+                .wait(150)
+
             steps.forEach((step) => {
                 Array.from({ length: Math.abs(step) }).forEach(() => {
                     const y = step > 0 ? delta : -delta
                     chain = chain
                         .trigger("pointermove", 360, baseY + y, { force: true })
-                        .wait(100)
+                        .wait(150)
                 })
             })
             return chain
                 .trigger("pointerup", 360, baseY, { force: true })
-                .wait(100)
+                .wait(150)
         }
 
         const chain = checkBox(