.1915763867792649:e81136b2d3906f9243189ec35dbda8f3_69e348b10650b9d450180c0a.69e34fb90650b9d450180fdd.69e34fb8104f7437b56bcb32:Trae CN.T(2026/4/18 17:32:41)

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/animation_events_spec.js

@@ -0,0 +1,263 @@
+describe('Animation Events', function() {
+  context('Basic event triggering', function() {
+    let aosInStub;
+    let aosOutStub;
+
+    beforeEach(() => {
+      aosInStub = cy.stub();
+      aosOutStub = cy.stub();
+
+      cy.visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in', aosInStub);
+          document.addEventListener('aos:out', aosOutStub);
+        });
+    });
+
+    it('Should trigger aos:in event for visible elements on init', function() {
+      cy.initAOS();
+
+      cy.wait(0, () => {
+        expect(aosInStub).to.have.callCount(6);
+        expect(aosOutStub).to.not.be.called;
+      });
+    });
+
+    it('Should trigger aos:in event when elements become visible on scroll', function() {
+      cy.initAOS();
+
+      cy.wait(0, () => {
+        expect(aosInStub).to.have.callCount(6);
+      });
+
+      cy.scrollTo(0, 400);
+
+      cy.wait(0, () => {
+        expect(aosInStub.callCount).to.be.greaterThan(6);
+      });
+    });
+
+    it('Should trigger aos:out event when elements become invisible on scroll', function() {
+      cy.initAOS();
+
+      cy.wait(0, () => {
+        expect(aosOutStub).to.not.be.called;
+      });
+
+      cy.scrollTo(0, 800);
+      cy.wait(100);
+
+      cy.scrollTo('top');
+
+      cy.wait(0, () => {
+        expect(aosOutStub).to.be.called;
+      });
+    });
+
+    it('Should pass element detail in event', function() {
+      let receivedElement;
+
+      cy.visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in', (e) => {
+            receivedElement = e.detail;
+          });
+        })
+        .initAOS();
+
+      cy.wait(0, () => {
+        expect(receivedElement).to.exist;
+        expect(receivedElement.classList).to.include('aos-item');
+        expect(receivedElement.hasAttribute('data-aos')).to.be.true;
+      });
+    });
+  });
+
+  context('Custom ID events', function() {
+    let customInStub;
+    let customOutStub;
+
+    beforeEach(() => {
+      customInStub = cy.stub();
+      customOutStub = cy.stub();
+
+      cy.visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in:super-duper', customInStub);
+          document.addEventListener('aos:out:super-duper', customOutStub);
+        });
+    });
+
+    it('Should trigger custom ID event when element with data-aos-id is animated', function() {
+      cy.initAOS();
+
+      cy.wait(0, () => {
+        expect(customInStub).to.not.be.called;
+      });
+
+      cy.scrollTo(0, 350);
+
+      cy.wait(0, () => {
+        expect(customInStub).to.be.calledOnce;
+      });
+    });
+
+    it('Should trigger custom ID out event when element scrolls out', function() {
+      cy.initAOS();
+
+      cy.scrollTo(0, 350);
+      cy.wait(100);
+
+      cy.scrollTo('top');
+
+      cy.wait(0, () => {
+        expect(customOutStub).to.be.called;
+      });
+    });
+  });
+
+  context('Event behavior with once option', function() {
+    let aosInStub;
+    let aosOutStub;
+
+    beforeEach(() => {
+      aosInStub = cy.stub();
+      aosOutStub = cy.stub();
+
+      cy.visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in', aosInStub);
+          document.addEventListener('aos:out', aosOutStub);
+        });
+    });
+
+    it('Should not trigger aos:out when once option is true', function() {
+      cy.initAOS({
+        once: true
+      });
+
+      cy.wait(0, () => {
+        const initialCallCount = aosInStub.callCount;
+        expect(aosOutStub).to.not.be.called;
+      });
+
+      cy.scrollTo(0, 800);
+      cy.wait(100);
+
+      cy.scrollTo('top');
+
+      cy.wait(0, () => {
+        expect(aosOutStub).to.not.be.called;
+      });
+    });
+
+    it('Should trigger aos:in only once per element', function() {
+      cy.initAOS({
+        once: true
+      });
+
+      cy.wait(0, () => {
+        const initialCallCount = aosInStub.callCount;
+
+        cy.scrollTo(0, 800);
+        cy.wait(100);
+
+        cy.scrollTo('top');
+        cy.wait(100);
+
+        cy.scrollTo(0, 800);
+
+        cy.wait(0, () => {
+          expect(aosInStub.callCount).to.be.lessThan(initialCallCount * 3);
+        });
+      });
+    });
+  });
+
+  context('Event behavior with mirror option', function() {
+    let aosInStub;
+    let aosOutStub;
+
+    beforeEach(() => {
+      aosInStub = cy.stub();
+      aosOutStub = cy.stub();
+
+      cy.visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in', aosInStub);
+          document.addEventListener('aos:out', aosOutStub);
+        });
+    });
+
+    it('Should trigger multiple in/out events with mirror option', function() {
+      cy.initAOS({
+        mirror: true
+      });
+
+      cy.wait(0, () => {
+        const initialInCount = aosInStub.callCount;
+
+        cy.scrollTo(0, 800);
+        cy.wait(100);
+
+        cy.scrollTo('top');
+
+        cy.wait(0, () => {
+          expect(aosOutStub).to.be.called;
+        });
+      });
+    });
+  });
+
+  context('Event dispatch details', function() {
+    it('Should dispatch events as CustomEvent with proper detail', function() {
+      let eventType, eventDetail;
+
+      cy.visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in', (e) => {
+            eventType = e.constructor.name;
+            eventDetail = e.detail;
+          });
+        })
+        .initAOS();
+
+      cy.wait(0, () => {
+        expect(eventType).to.equal('CustomEvent');
+        expect(eventDetail).to.exist;
+        expect(eventDetail.nodeType).to.equal(1);
+      });
+    });
+
+    it('Should not trigger duplicate events for already animated elements', function() {
+      let callCounts = [];
+
+      cy.visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in', () => {
+            callCounts.push(Date.now());
+          });
+        })
+        .initAOS();
+
+      cy.wait(0, () => {
+        const firstCount = callCounts.length;
+
+        cy.window().then(({ AOS }) => {
+          AOS.refresh();
+        });
+
+        cy.wait(0, () => {
+          expect(callCounts.length).to.equal(firstCount);
+        });
+      });
+    });
+  });
+});