(bento-timeago) added e2e test (ampproject#36395)

Added i-amphtml-built class to bento web components when mounted
PHCCorso · Oct 20, 2021 · 5d21b6a · 5d21b6a
1 parent 9308f06
commit 5d21b6a
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 0 deletions.
diff --git a/extensions/amp-timeago/1.0/test-e2e/test-bento-timeago.js b/extensions/amp-timeago/1.0/test-e2e/test-bento-timeago.js
@@ -0,0 +1,43 @@
+describes.endtoend(
+  'bento-timeago',
+  {
+    version: '1.0',
+    fixture: 'bento/bento-timeago.html',
+    environments: ['single'],
+  },
+  (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    const setup = async () => {
+      return [
+        await controller.findElement('bento-timeago'),
+        await controller.findElement('#displayTimeInput'),
+        await controller.findElement('#bentoChangeTimeFormSubmit'),
+      ];
+    };
+
+    it('should render how long ago a time was set to', async () => {
+      const [timeago, timeInput, timeSubmit] = await setup();
+
+      await expect(controller.getElementAttribute(timeago, 'class')).to.equal(
+        'i-amphtml-built'
+      );
+      await expect(controller.getElementText(timeago)).to.contain(
+        '3 years ago'
+      );
+
+      const currentTime = new Date();
+      await controller.type(timeInput, currentTime.toISOString());
+      await controller.click(timeSubmit);
+
+      await expect(
+        controller.getElementAttribute(timeago, 'datetime')
+      ).to.equal(currentTime.toISOString());
+      await expect(controller.getElementText(timeago)).to.contain('just now');
+    });
+  }
+);
diff --git a/src/preact/bento-ce.js b/src/preact/bento-ce.js
@@ -62,6 +62,7 @@ if (typeof AMP !== 'undefined' && AMP.BaseElement) {
 
         /** */
         connectedCallback() {
+          this.classList.add('i-amphtml-built');
           this.implementation.mountCallback();
           this.implementation.buildCallback();
         }

diff --git a/test/fixtures/e2e/bento/bento-timeago.html b/test/fixtures/e2e/bento/bento-timeago.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Bento Timeago</title>
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <script
+      async
+      src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"
+    ></script>
+  </head>
+  <body>
+    <h1>Time Ago</h1>
+    <p>
+      <bento-timeago id="timeago" style="height: 1.2em">
+        fallback display time goes here
+      </bento-timeago>
+    </p>
+    <!-- form to change time -->
+    <h2>Time ago input form</h2>
+    <form id="bentoChangeTimeForm" style="margin-top: 2em">
+      <p>
+        <time id="displayTime"></time>
+      </p>
+      <label>
+        display time
+        <input id="displayTimeInput" type="text" />
+      </label>
+      <button type="submit" id="bentoChangeTimeFormSubmit">change time</button>
+    </form>
+
+    <script>
+      const timeInput = document.querySelector('#displayTimeInput');
+      const displayTime = document.querySelector('#displayTime');
+      const threeYearsAgo = new Date();
+      threeYearsAgo.setFullYear(threeYearsAgo.getFullYear() - 3);
+
+      displayTime.innerHTML = threeYearsAgo.toISOString();
+      const bentoTimeAgo = document.querySelector('bento-timeago');
+
+      bentoTimeAgo.setAttribute('datetime', threeYearsAgo.toISOString());
+
+      // form controls to change the timeago time
+      document.getElementById('bentoChangeTimeForm').onsubmit = (e) => {
+        e.preventDefault();
+
+        bentoTimeAgo.setAttribute('datetime', timeInput.value);
+        displayTime.innerHTML = timeInput.value;
+        timeInput.value = '';
+      };
+    </script>
+  </body>
+</html>