e2e test

ampproject · Nov 3, 2020 · ba5d222 · ba5d222
1 parent 15148c3
commit ba5d222
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 23 deletions.
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-advance.js b/extensions/amp-base-carousel/0.1/test-e2e/test-advance.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {getNextArrow, getPrevArrow, getSlides} from './helpers';
+import sleep from 'sleep-promise';
+
+const pageWidth = 500;
+const pageHeight = 800;
+
+describes.endtoend(
+  'AMP carousel advance',
+  {
+    testUrl:
+      'http://localhost:8000/test/manual/amp-base-carousel/advance.amp.html',
+    experiments: ['amp-base-carousel'],
+    environments: ['single'],
+    initialRect: {width: pageWidth, height: pageHeight},
+  },
+  async (env) => {
+    let controller;
+    let nextArrow;
+    let prevArrow;
+
+    function css(handle, name) {
+      return controller.getElementCssValue(handle, name);
+    }
+
+    function rect(el) {
+      return controller.getElementRect(el);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+
+      nextArrow = await getNextArrow(controller);
+    });
+
+    it('should move forwards once', async () => {
+      await controller.click(nextArrow);
+      await sleep(500);
+      prevArrow = await getPrevArrow(controller);
+      await expect(css(prevArrow, 'opacity')).to.equal('1');
+      await expect(css(nextArrow, 'opacity')).to.equal('1');
+
+      const slides = await getSlides(controller);
+      const slideOne = await rect(slides[0]);
+      const slideTwo = await rect(slides[1]);
+
+      await expect(slideOne['x']).to.be.lessThan(0);
+      await expect(slideTwo['x']).to.be.at.least(0);
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test/test-carousel.js b/extensions/amp-base-carousel/0.1/test/test-carousel.js
@@ -238,28 +238,29 @@ describes.realWin('carousel implementation', {}, (env) => {
   });
 
   describe('resetScrollReferencePoint_', () => {
-    it('currentElementOffset_ & currentIndex_ should be set when it is a' + 
-    ' programmatic scroll', async () => {
-      setStyle(element, 'width', '299.2px');
-
-      const carousel = await createCarousel({
-        slideCount: 12,
-        loop: false,
-      });
-
-      // Fake the scroll that ends short of the correct index.
-      // This is handled by scroll event listener.
-      carousel.touching_ = false;
-      carousel.requestedIndex_ = 1;
-      carousel.currentIndex_ = 0;
-      carousel.restingIndex_ = 0;
-      carousel.currentElementOffset_ = -0.99382;
-
-      carousel.resetScrollReferencePoint_();
-
-      expect(carousel.currentElementOffset_).to.equal(0);
-      expect(carousel.currentIndex_).to.equal(1);
-      expect(carousel.requestedIndex_).to.be.null;
-    });
+    it(
+      'currentElementOffset_ & currentIndex_ should be set when it is a' +
+        ' programmatic scroll',
+      async () => {
+        const carousel = await createCarousel({
+          slideCount: 12,
+          loop: false,
+        });
+
+        // Fake the scroll that ends short of the correct index.
+        // This is handled by scroll event listener.
+        carousel.touching_ = false;
+        carousel.requestedIndex_ = 1;
+        carousel.currentIndex_ = 0;
+        carousel.restingIndex_ = 0;
+        carousel.currentElementOffset_ = -0.99382;
+
+        carousel.resetScrollReferencePoint_();
+
+        expect(carousel.currentElementOffset_).to.equal(0);
+        expect(carousel.currentIndex_).to.equal(1);
+        expect(carousel.requestedIndex_).to.be.null;
+      }
+    );
   });
 });
diff --git a/test/manual/amp-base-carousel/advance.amp.html b/test/manual/amp-base-carousel/advance.amp.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html ⚡>
+
+<head>
+  <meta charset="utf-8">
+  <title>My AMP Page</title>
+  <link rel="canonical" href="self.html" />
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    amp-base-carousel .item {
+      padding: 40px;
+      border: 1px solid black;
+    }
+    #wrapper {
+      width: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="wrapper">
+  <amp-base-carousel class="gallery" layout="responsive" width="33" height="10" visible-count="3.3" advance-count="1" loop="false"> 
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+    <div class="item">5</div>
+    <div class="item">6</div>
+    <div class="item">7</div>
+    <div class="item">8</div>
+    <div class="item">9</div>
+    <div class="item">10</div>
+    <div class="item">11</div>
+    <div class="item">12</div>
+    <div class="item">13</div>
+  </amp-base-carousel>
+  </div>
+</body>
+
+</html>