From 7d0bdc801768fe0dcba103ec0e29ca027623cc97 Mon Sep 17 00:00:00 2001
From: daniel-dx <danieldx666@126.com>
Date: Mon, 11 Mar 2019 00:23:08 +0800
Subject: [PATCH] test(ncform): complete nesting test cases

---
 .../integration/examples/nesting.spec.js      |  78 ++++++
 .../components/vue-ncform/_nesting.html       | 233 ++++++++++++++++++
 2 files changed, 311 insertions(+)
 create mode 100644 packages/ncform-e2e/ncform/cypress/integration/examples/nesting.spec.js
 create mode 100644 packages/ncform/examples/components/vue-ncform/_nesting.html

diff --git a/packages/ncform-e2e/ncform/cypress/integration/examples/nesting.spec.js b/packages/ncform-e2e/ncform/cypress/integration/examples/nesting.spec.js
new file mode 100644
index 0000000..dfaabd2
--- /dev/null
+++ b/packages/ncform-e2e/ncform/cypress/integration/examples/nesting.spec.js
@@ -0,0 +1,78 @@
+/// <reference types="Cypress" />
+
+const md5 = require('blueimp-md5');
+
+context('Nesting', () => {
+
+  before(() => {
+    cy.visit('http://localhost:3000/examples/components/vue-ncform/_nesting.html')
+  })
+
+  it('Object nested object', () => {
+    let id = md5('Object nested object');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('legend').contains('user').as('user').should('exist');
+      cy.get('@user').next().find('legend').contains('name').as('name').should('exist');
+      cy.get('@name').next().find('label:contains("name")').its('length').should('equal', 2);
+    })
+  })
+
+  it('Object nested array and table', () => {
+    let id = md5('Object nested array and table');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('legend').contains('company').as('company').should('exist');
+
+      cy.get('@company').next().find('legend').contains('users1').as('users1').should('exist');
+      cy.get('@users1').next().find('label:contains("users1 1")').its('length').should('equal', 1);
+      cy.get('@users1').next().find('input').its('length').should('equal', 1);
+
+      cy.get('@company').next().find('legend').contains('users2').as('users2').should('exist');
+      cy.get('@users2').next().find('th:contains("users2")').should('exist');
+      cy.get('@users2').next().find('input').its('length').should('equal', 1);
+    })
+  })
+
+  it('Arrays and table items are objects', () => {
+    let id = md5('Arrays and table items are objects');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('legend').contains('companies1').as('companies1').should('exist');
+      cy.get('@companies1').next().find('label:contains("companies1 1")').as('companies1Item').should('exist');
+      cy.get('@companies1Item').next().next().find('label:contains("name")').its('length').should('equal', 1);
+      cy.get('@companies1Item').next().next().find('input').its('length').should('equal', 1);
+
+      cy.get('legend').contains('companies2').as('companies2').should('exist');
+      cy.get('@companies2').next().find('th:contains("name")').should('exist');
+      cy.get('@companies2').next().find('input').its('length').should('equal', 1);
+    })
+  })
+
+  it.only('Arrays and table items are array and table', () => {
+    let id = md5('Arrays and table items are array and table');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('legend').contains('companies1').as('companies1').should('exist');
+      cy.get('@companies1').next().find('label:contains("companies1 1")').as('companies1Item').its('length').should('equal', 1);
+      cy.get('@companies1Item').next().next().find('legend').contains('User').as('users').should('exist');
+      cy.get('@users').next().find('label').contains('User 1').should('exist');
+      cy.get('@users').next().find('input').its('length').should('equal', 1);
+
+      cy.get('legend').contains('companies2').as('companies2').should('exist');
+      cy.get('@companies2').next().find('label:contains("companies2 1")').as('companies2Item').its('length').should('equal', 1);
+      cy.get('@companies2Item').next().next().find('legend').contains('User').as('users').should('exist');
+      cy.get('@users').next().find('th').contains('User').should('exist');
+      cy.get('@users').next().find('input').its('length').should('equal', 1);
+
+      cy.get('legend').contains('companies3').as('companies3').should('exist');
+      cy.get('@companies3').next().find('th').contains('companies3').should('exist');
+      cy.get('@companies3').next().find('td').find('legend').contains('User').as('users').should('exist');
+      cy.get('@users').next().find('label:contains("User 1")').should('exist');
+      cy.get('@users').next().find('input').its('length').should('equal', 1);
+
+      cy.get('legend').contains('companies4').as('companies4').should('exist');
+      cy.get('@companies4').next().find('th').contains('companies4').should('exist');
+      cy.get('@companies4').next().find('td').find('legend').contains('User').as('users').should('exist');
+      cy.get('@users').next().find('th').contains('User').should('exist');
+      cy.get('@users').next().find('input').its('length').should('equal', 1);
+    })
+  })
+
+})
diff --git a/packages/ncform/examples/components/vue-ncform/_nesting.html b/packages/ncform/examples/components/vue-ncform/_nesting.html
new file mode 100644
index 0000000..9114fcb
--- /dev/null
+++ b/packages/ncform/examples/components/vue-ncform/_nesting.html
@@ -0,0 +1,233 @@
+<!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('Object nested object'),
+              title: 'Object nested object',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  user: {
+                    type: 'object',
+                    properties: {
+                      name: {
+                        type: 'object',
+                        properties: {
+                          firstname: {
+                            type: 'string',
+                            ui: {
+                              columns: 6
+                            }
+                          },
+                          lastname: {
+                            type: 'string',
+                            ui: {
+                              columns: 6
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            {
+              id: md5('Object nested array and table'),
+              title: 'Object nested array and table',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  company: {
+                    type: 'object',
+                    properties: {
+                      users1: {
+                        type: 'array',
+                        items: {
+                          type: 'string'
+                        }
+                      },
+                      users2: {
+                        type: 'array',
+                        items: {
+                          type: 'string'
+                        },
+                        ui: {
+                          widget: 'array-table'
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            {
+              id: md5('Arrays and table items are objects'),
+              title: 'Arrays and table items are objects',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  companies1: {
+                    type: 'array',
+                    items: {
+                      type: 'object',
+                      properties: {
+                        name: {
+                          type: 'string'
+                        }
+                      }
+                    }
+                  },
+                  companies2: {
+                    type: 'array',
+                    items: {
+                      type: 'object',
+                      properties: {
+                        name: {
+                          type: 'string'
+                        }
+                      }
+                    },
+                    ui: {
+                      widget: 'array-table'
+                    }
+                  }
+                }
+              }
+            },
+            {
+              id: md5('Arrays and table items are array and table'),
+              title: 'Arrays and table items are array and table',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  companies1: {
+                    type: 'array',
+                    items: {
+                      type: 'array',
+                      items: {
+                        type: 'string',
+                        ui: {
+                          label: 'User'
+                        }
+                      },
+                      ui: {
+                        legend: 'User'
+                      }
+                    }
+                  },
+                  companies2: {
+                    type: 'array',
+                    items: {
+                      type: 'array',
+                      items: {
+                        type: 'string',
+                        ui: {
+                          label: 'User'
+                        }
+                      },
+                      ui: {
+                        legend: 'User',
+                        widget: 'array-table'
+                      }
+                    }
+                  },
+                  companies3: {
+                    type: 'array',
+                    items: {
+                      type: 'array',
+                      items: {
+                        type: 'string',
+                        ui: {
+                          label: 'User'
+                        }
+                      },
+                      ui: {
+                        legend: 'User'
+                      }
+                    },
+                    ui: {
+                      widget: 'array-table'
+                    }
+                  },
+                  companies4: {
+                    type: 'array',
+                    items: {
+                      type: 'array',
+                      items: {
+                        type: 'string',
+                        ui: {
+                          label: 'User'
+                        }
+                      },
+                      ui: {
+                        legend: 'User',
+                        widget: 'array-table'
+                      }
+                    },
+                    ui: {
+                      widget: 'array-table'
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>