More tests

ampproject · Aug 2, 2023 · 45f69c5 · 45f69c5
1 parent d362447
commit 45f69c5
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/examples/visual-tests/amp-form/amp-form-server-error.amp.html b/examples/visual-tests/amp-form/amp-form-server-error.amp.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AMP Form</title>
+  <link rel="canonical" href="amp-form.amp.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+  <style amp-custom>
+  </style>
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+<form
+  id="form"
+  method="get"
+  action="/404"
+  action-xhr="/404"
+  target="_blank"
+  custom-validation-reporting="show-all-on-submit">
+  <div>
+    <input type="text"
+      id="name"
+      name="name"
+      placeholder="Name..."
+      required
+      pattern="\p{L}+\s\p{L}+">
+    <span visible-when-invalid="valueMissing" validation-for="name"></span>
+    <span visible-when-invalid="patternMismatch" validation-for="name">
+      Please enter your first and last name separated by a space (e.g. Jane Miller)
+    </span>
+  </div>
+  <div>
+    <input type="email"
+      id="email"
+      name="email"
+      placeholder="Email..."
+      required>
+    <span visible-when-invalid="valueMissing" validation-for="email"></span>
+    <span visible-when-invalid="typeMismatch" validation-for="email"></span>
+  </div>
+  <input id="submit" type="submit" value="Submit">
+  <div submit-success>
+    <template type="amp-mustache">
+      Success! Thanks for trying the <code>amp-form</code> demo!
+    </template>
+  </div>
+  <div submit-error>
+    <template type="amp-mustache">
+      Error!
+    </template>
+  </div>
+</form>
+</body>
+</html>
diff --git a/examples/visual-tests/amp-form/amp-form-server-error.js b/examples/visual-tests/amp-form/amp-form-server-error.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/verifiers');
+
+module.exports = {
+  'try to submit to a dead server': async (page, name) => {
+    await page.tap('#name');
+    await page.keyboard.type('Jane Miller');
+    await page.tap('#email');
+    await page.keyboard.type('jane.miller@ampproject.org');
+    await page.tap('#submit');
+    await verifySelectorsVisible(page, name, [
+      '#form.user-valid',
+      'div[submit-error] div[id^="rendered-message-amp-form-"]',
+    ]);
+  },
+};
diff --git a/examples/visual-tests/amp-form/amp-form.js b/examples/visual-tests/amp-form/amp-form.js
@@ -38,21 +38,4 @@ module.exports = {
       'div[submit-success] div[id^="rendered-message-amp-form-"]',
     ]);
   },
-
-  // TODO(danielrozenberg): fix and restore this test
-  /*
-  'try to submit to a dead server': async (page, name) => {
-    page.on('request', interceptedRequest => interceptedRequest.abort());
-
-    await page.tap('#name');
-    await page.keyboard.type('Jane Miller');
-    await page.tap('#email');
-    await page.keyboard.type('jane.miller@ampproject.org');
-    await page.tap('#submit');
-    await verifySelectorsVisible(page, name, [
-      '#form.user-valid',
-      'div[submit-error] div[id^="rendered-message-amp-form-"]',
-    ]);
-  }
-  */
 };
diff --git a/test/visual-diff/visual-tests.jsonc b/test/visual-diff/visual-tests.jsonc
@@ -618,6 +618,12 @@
       "name": "amp-form",
       "interactive_tests": "examples/visual-tests/amp-form/amp-form.js"
     },
+    {
+      "url": "examples/visual-tests/amp-form/amp-form-server-error.amp.html",
+      "name": "amp-form (server error)",
+      "interactive_tests": "examples/visual-tests/amp-form/amp-form-server-error.js",
+      "no_base_test": true
+    },
     {
       "url": "examples/visual-tests/amp-accordion/amp-accordion.html",
       "name": "amp-accordion: page loads",