test: update drawer snap

2020-08-14 14:53:07 +08:00 · 2020-08-14 14:53:07 +08:00 · 07fe94d0a4
parent 9c3e9f3d18
commit 07fe94d0a4
6 changed files with 90 additions and 106 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 77eb896f2c0cf51093ed3f000c29ed380c440706
+Subproject commit 75cbe79669f7ce5dfe6c1a02d9dd4e2443840c08
--- a/components/drawer/tests/DrawerEvent.test.js
+++ b/components/drawer/tests/DrawerEvent.test.js
@ -34,14 +34,10 @@ const DrawerEventTester = {
  },
  render() {
    const drawerProps = {
-      props: {
-        visible: this.visible,
-        getContainer: false,
-        ...this.$props,
-      },
-      on: {
-        close: this.onClose,
-      },
+      visible: this.visible,
+      getContainer: false,
+      ...this.$props,
+      onClose: this.onClose,
    };
    return (
      <div>
@ -60,8 +56,8 @@ describe('Drawer', () => {
    await asyncExpect(() => {
      const body = wrapper.find('.ant-drawer-body').exists();
      expect(body).toBe(true);
-      wrapper.find('button.ant-btn').trigger('click');
-      const content = wrapper.find('.ant-drawer-body').vnode.elm.innerHTML;
+      wrapper.find('.ant-btn').trigger('click');
+      const content = wrapper.find('.ant-drawer-body').element.innerHTML;
      expect(content).toBe('Here is content of Drawer');

      expect(wrapper.html()).toMatchSnapshot();
@ -122,9 +118,7 @@ describe('Drawer', () => {
      wrapper.find('button.ant-btn').trigger('click');
      expect(wrapper.find('.ant-drawer-wrapper-body').exists()).toBe(true);

-      wrapper.setData({
-        visible: false,
-      });
+      wrapper.vm.visible = false;
      wrapper.find('.ant-drawer-wrapper-body').trigger('transitionend');
    });
    await asyncExpect(() => {
--- a/components/drawer/tests/MultiDrawer.test.js
+++ b/components/drawer/tests/MultiDrawer.test.js
@ -34,41 +34,27 @@ const MultiDrawer = {
  },
  render() {
    const drawerProps = {
-      props: {
-        title: 'Multi-level drawer',
-        width: 520,
-        visible: this.visible,
-        getContainer: false,
-        wrapClassName: 'test_drawer',
-        placement: this.placement,
-      },
-      on: {
-        close: this.onClose,
-      },
+      title: 'Multi-level drawer',
+      width: 520,
+      visible: this.visible,
+      getContainer: false,
+      wrapClassName: 'test_drawer',
+      placement: this.placement,
+      onClose: this.onClose,
    };
    const childrenDrawerProps = {
-      props: {
-        title: 'Two-level Drawer',
-        width: 320,
-        wrapClassName: 'Two-level',
-        visible: this.childrenDrawer,
-        getContainer: false,
-        placement: this.placement,
-      },
-      on: {
-        close: this.onChildrenDrawerClose,
-      },
+      title: 'Two-level Drawer',
+      width: 320,
+      wrapClassName: 'Two-level',
+      visible: this.childrenDrawer,
+      getContainer: false,
+      placement: this.placement,
+      onClose: this.onChildrenDrawerClose,
    };
    const buttonProps = {
-      props: {
-        type: 'primary',
-      },
-      attrs: {
-        id: 'open_drawer',
-      },
-      on: {
-        click: this.showDrawer,
-      },
+      type: 'primary',
+      id: 'open_drawer',
+      onClick: this.showDrawer,
    };
    return (
      <div>
--- a/components/drawer/tests/snapshots/Drawer.test.js.snap
+++ b/components/drawer/tests/snapshots/Drawer.test.js.snap
@ -8,7 +8,7 @@ exports[`Drawer class is test_drawer 1`] = `
      <div class="ant-drawer-content">
        <div class="ant-drawer-wrapper-body">
          <div class="ant-drawer-header-no-title">
-            <!----><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
+            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
          <div class="ant-drawer-body">Here is content of Drawer</div>
        </div>
      </div>
@ -60,7 +60,7 @@ exports[`Drawer have a title 1`] = `
      <div class="ant-drawer-content">
        <div class="ant-drawer-wrapper-body">
          <div class="ant-drawer-header">
-            <div class="ant-drawer-title">Test Title</div><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+            <div class="ant-drawer-title">Test Title</div><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
          </div>
          <div class="ant-drawer-body">Here is content of Drawer</div>
        </div>
@ -79,7 +79,7 @@ exports[`Drawer render correctly 1`] = `
      <div class="ant-drawer-content">
        <div class="ant-drawer-wrapper-body">
          <div class="ant-drawer-header-no-title">
-            <!----><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
+            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
          <div class="ant-drawer-body">Here is content of Drawer</div>
        </div>
      </div>
@ -97,7 +97,7 @@ exports[`Drawer render top drawer 1`] = `
      <div class="ant-drawer-content">
        <div class="ant-drawer-wrapper-body">
          <div class="ant-drawer-header-no-title">
-            <!----><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
+            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
          <div class="ant-drawer-body">Here is content of Drawer</div>
        </div>
      </div>
--- a/components/drawer/tests/snapshots/DrawerEvent.test.js.snap
+++ b/components/drawer/tests/snapshots/DrawerEvent.test.js.snap
@ -1,17 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Drawer render correctly 1`] = `
-<div><button type="button" class="ant-btn" ant-click-animating-without-extra-node="false"><span>open</span></button>
+<div><button class="ant-btn" type="button" ant-click-animating-without-extra-node="false">
+    <!----><span>open</span></button>
  <div class="">
-    <div tabindex="-1" class="ant-drawer ant-drawer-right">
+    <div class="ant-drawer ant-drawer-right" tabindex="-1">
      <div class="ant-drawer-mask"></div>
      <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
        <div class="ant-drawer-content">
          <div class="ant-drawer-wrapper-body">
-            <div class="ant-drawer-header-no-title"><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
+            <div class="ant-drawer-header-no-title">
+              <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
            <div class="ant-drawer-body">Here is content of Drawer</div>
          </div>
        </div>
+        <!---->
      </div>
    </div>
  </div>
--- a/components/drawer/tests/snapshots/demo.test.js.snap
+++ b/components/drawer/tests/snapshots/demo.test.js.snap
@ -1,56 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders ./antdv-demo/docs/drawer/demo/basic-right.md correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
-  <!---->
-</div>
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Open</span></button>
+<!---->
 `;

 exports[`renders ./antdv-demo/docs/drawer/demo/form-in-drawer.md correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>New account</span></button>
-  <!---->
-</div>
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>New account</span></button>
+<!---->
 `;

 exports[`renders ./antdv-demo/docs/drawer/demo/multi-level-drawer.md correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
-  <!---->
-</div>
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Open</span></button>
+<!---->
 `;

 exports[`renders ./antdv-demo/docs/drawer/demo/placement.md correctly 1`] = `
-<div>
-  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>
-      top
-    </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>
-      right
-    </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>
-      bottom
-    </span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>
-      left
-    </span></label></div> <button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
-  <!---->
-</div>
+<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span> top </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span> right </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span> bottom </span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span> left </span></label></div><button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Open</span></button>
+<!---->
 `;

 exports[`renders ./antdv-demo/docs/drawer/demo/render-in-current.md correctly 1`] = `
-<div style="height: 200px; overflow: hidden; position: relative; border: 1px solid #ebedf0; border-radius: 2px; padding: 48px; text-align: center; background: rgb(250, 250, 250);">
-  Render in this
-  <div style="margin-top: 16px;"><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button></div>
+<div style="height: 200px; overflow: hidden; position: relative; border: 1px solid #ebedf0; border-radius: 2px; padding: 48px; text-align: center; background: rgb(250, 250, 250);"> Render in this <div style="margin-top: 16px;"><button class="ant-btn ant-btn-primary" type="button">
+      <!----><span>Open</span></button></div>
  <div class="">
-    <div tabindex="-1" class="ant-drawer ant-drawer-right" style="position: absolute;">
+    <div class="ant-drawer ant-drawer-right" style="position: absolute;" tabindex="-1">
      <div class="ant-drawer-mask"></div>
      <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
        <div class="ant-drawer-content">
          <div class="ant-drawer-wrapper-body">
            <div class="ant-drawer-header">
              <div class="ant-drawer-title">Basic Drawer</div>
+              <!---->
            </div>
            <div class="ant-drawer-body">
              <p>Some contents...</p>
            </div>
          </div>
        </div>
+        <!---->
      </div>
    </div>
  </div>
@ -58,39 +50,48 @@ exports[`renders ./antdv-demo/docs/drawer/demo/render-in-current.md correctly 1`
 `;

 exports[`renders ./antdv-demo/docs/drawer/demo/user-profile.md correctly 1`] = `
-<div>
-  <div class="ant-list ant-list-split ant-list-bordered">
-    <div class="ant-spin-nested-loading">
-      <div class="ant-spin-container">
-        <ul class="ant-list-items">
-          <li class="ant-list-item">
-            <div class="ant-list-item-meta">
-              <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
-              <div class="ant-list-item-meta-content">
-                <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
-                <div class="ant-list-item-meta-description">Progresser XTech</div>
-              </div>
+<div class="ant-list ant-list-split ant-list-bordered">
+  <!---->
+  <!---->
+  <div class="ant-spin-nested-loading">
+    <!---->
+    <div class="ant-spin-container">
+      <ul class="ant-list-items">
+        <li class="ant-list-item">
+          <div class="ant-list-item-meta">
+            <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
+            <div class="ant-list-item-meta-content">
+              <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
+              <div class="ant-list-item-meta-description">Progresser XTech</div>
            </div>
-            <ul class="ant-list-item-action">
-              <li><a>View Profile</a></li>
-            </ul>
-          </li>
-          <li class="ant-list-item">
-            <div class="ant-list-item-meta">
-              <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
-              <div class="ant-list-item-meta-content">
-                <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
-                <div class="ant-list-item-meta-description">Progresser XTech</div>
-              </div>
+          </div>
+          <ul class="ant-list-item-action">
+            <li><a>View Profile</a>
+              <!---->
+            </li>
+          </ul>
+          <!---->
+        </li>
+        <li class="ant-list-item">
+          <div class="ant-list-item-meta">
+            <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
+            <div class="ant-list-item-meta-content">
+              <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
+              <div class="ant-list-item-meta-description">Progresser XTech</div>
            </div>
-            <ul class="ant-list-item-action">
-              <li><a>View Profile</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
+          </div>
+          <ul class="ant-list-item-action">
+            <li><a>View Profile</a>
+              <!---->
+            </li>
+          </ul>
+          <!---->
+        </li>
+      </ul>
    </div>
  </div>
  <!---->
+  <!---->
 </div>
+<!---->
 `;