chore: Add framer-motion example (#416)

Author: dmtrKovalenko

README.md

@@ -186,6 +186,7 @@ Spec | Description
 [select React component](cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js) | Uses [cypress-react-selector](https://github.com/abhinaba-ghosh/cypress-react-selector) to find DOM elements using React component name and state values
 [lazy-loaded](cypress/component/advanced/lazy-loaded-suspense) | Uses multiple chunks and async components with `React.lazy` + `React.Suspense`.
 [i18n](cypress/component/advanced/i18n) | Uses[react-i18next](https://react.i18next.com/) for localizaiton.
+[framer-motion](cypress/component/advanced/framer-motion) | Uses [framer motion](https://www.framer.com/motion/) for javascript-based animation.
 <!-- prettier-ignore-end -->
 
 ### Full examples

circle.yml

@@ -61,7 +61,7 @@ workflows:
           install-command: npm install
           verify-command: echo 'Already verified'
           no-workspace: true
-          working_directory: examples/using-babel-typesceript
+          working_directory: examples/using-babel-typescript
           command: npm test
           store_artifacts: true
 

cypress/component/advanced/framer-motion/Motion.css

@@ -0,0 +1,11 @@
+body {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(180deg, #d309e1 0%, rgb(156, 26, 255) 100%);
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

cypress/component/advanced/framer-motion/Motion.spec.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Motion } from './Motion'
+import { mount } from 'cypress-react-unit-test'
+
+describe('framer-motion', () => {
+  it('Renders component and retries the animation', () => {
+    mount(<Motion />)
+
+    cy.get("[data-testid='motion']").should('have.css', 'border-radius', '50%')
+    cy.get("[data-testid='motion']").should('have.css', 'border-radius', '20%')
+  })
+
+  it('Mocks setTimeout and requestAnimationFrame', () => {
+    cy.clock()
+    mount(<Motion />)
+
+    // CI is slow, so check only the approximate values
+    cy.tick(800)
+    cy.get("[data-testid='motion']").within(element => {
+      expect(parseInt(element.css('borderRadius'))).to.equal(43)
+    })
+
+    cy.tick(100)
+    cy.get("[data-testid='motion']").within(element => {
+      expect(parseInt(element.css('borderRadius'))).to.equal(48)
+    })
+  })
+})

cypress/component/advanced/framer-motion/Motion.tsx

@@ -0,0 +1,24 @@
+import './Motion.css'
+import * as React from 'react'
+import { motion } from 'framer-motion'
+
+export const Motion = () => {
+  return (
+    <motion.div
+      data-testid="motion"
+      style={{ width: 100, height: 100, backgroundColor: 'white' }}
+      animate={{
+        scale: [1, 2, 2, 1, 1],
+        rotate: [0, 0, 270, 270, 0],
+        borderRadius: ['20%', '20%', '50%', '50%', '20%'],
+      }}
+      transition={{
+        duration: 2,
+        ease: 'easeInOut',
+        times: [0, 0.2, 0.5, 0.8, 1],
+        loop: false,
+        repeatDelay: 1,
+      }}
+    />
+  )
+}

examples/using-babel-typescript/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "example-using-babel",
-  "description": "Component testing for projects using Babel config",
+  "name": "example-using-babel-typescript",
+  "description": "Component testing for TypeScript projects using Babel config",
   "private": true,
   "scripts": {
-    "test": "node ../../scripts/cypress-expect run --passing 17",
+    "test": "node ../../scripts/cypress-expect run --passing 1",
     "cy:open": "../../node_modules/.bin/cypress open"
   },
   "devDependencies": {

package-lock.json

@@ -134,6 +134,7 @@
     "babel-plugin-istanbul": "6.0.0",
     "debug": "4.1.1",
     "find-webpack": "2.0.0",
+    "framer-motion": "2.6.13",
     "i18next": "19.7.0",
     "mime-types": "2.1.26",
     "react-i18next": "11.7.2",