test(ncform): complete ui.placeholder test cases

2026-07-19 18:23:32 -04:00 · 2019-03-10 14:25:43 +08:00
parent c34f45cb48
commit 840fdfbe18
2 changed files with 104 additions and 0 deletions
@@ -0,0 +1,24 @@
+/// <reference types="Cypress" />
+
+const md5 = require('blueimp-md5');
+
+context('ui.placeholder', () => {
+
+  before(() => {
+    cy.visit('http://localhost:3000/examples/components/vue-ncform/_ui.placeholder.html')
+  })
+
+  it('Display placeholder: text / dx', () => {
+    let id = md5('Display placeholder: text / dx');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('label').contains('firstname').next().find('input').then($input => {
+        cy.wrap($input.attr('placeholder')).should('equal', 'fill your firstname');
+        cy.wrap($input).type('daniel');
+      });
+      cy.get('label').contains('lastname').next().find('input').then($input => {
+        cy.wrap($input.attr('placeholder')).should('equal', 'your firstname: daniel');
+      });
+    })
+  })
+
+})
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>vue-ncform Example</title>
+
+    <link
+      rel="stylesheet"
+      href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
+    />
+  </head>
+
+  <body>
+    <div id="demo" class="container">
+      <template v-for="item in formSchemas">
+        <div
+          :data-cy="item.id"
+          v-if="mode !== 'only' || item.only"
+          :key="item.formName"
+        >
+          <h4>[CASE] {{ item.title }}</h4>
+          <ncform
+            :form-schema="item.formSchema"
+            v-model="item.formSchema.value"
+            :form-name="item.formName"
+          ></ncform>
+          <hr />
+        </div>
+      </template>
+    </div>
+
+    <script
+      type="text/javascript"
+      src="../../../node_modules/vue/dist/vue.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"
+    ></script>
+    <script type="text/javascript" src="../../../dist/vueNcform.js"></script>
+    <script type="text/javascript">
+      Vue.use(vueNcform);
+
+      new Vue({
+        el: '#demo',
+        data: {
+          mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
+          formSchemas: [
+            {
+              id: md5('Display placeholder: text / dx'),
+              title: 'Display placeholder: text / dx',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  firstname: {
+                    type: 'string',
+                    ui: {
+                      placeholder: 'fill your firstname'
+                    }
+                  },
+                  lastname: {
+                    type: 'string',
+                    ui: {
+                      placeholder: 'dx: "your firstname: " + {{$root.firstname}} '
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>