Web Component / HtmlElement : unit testing












1















I'm trying to test a web component.
Here is my project structure :



├── package.json
├── src
│   ├── app.js
│   └── index.html
└── test
└── hello-world-test.html


Here is my working code :






class HelloWorld extends HTMLElement {
connectedCallback () {
this.innerHTML = 'Hello, World!'
}
}
customElements.define('hello-world', HelloWorld);

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<script src="app.js"></script>
</head>

<body>
<hello-world></hello-world>
</body>

</html>





I'm trying to test that web component with web-component-tester.
I installed the utility globally :



npm install -g web-component-tester


I declared it in the package.json file :



"devDependencies": {
"web-component-tester": "^6.9.0"
}


then, I wrote my test in the test folder and saved it to hello-world-test.html:



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../node_modules/web-component-tester/browser.js"></script>
<script src="app.js"></script>
</head>
<body>
<test-fixture id="hello-world-fixture">
<hello-world></hello-world>
</test-fixture>
<script>
suite('<hello-world>', function(){
let component = document.querySelector('hello-world');

test('contains hello world string ?', () => {
let index = component.innerText.indexOf('Hello');
assert.isAtLeast(index, 0);
});
});
</script>
</body>
</html>


Finally, I typed :



wct --npm


Then obtained the following error in Chrome :



Here is the result in Chrome



What am I missing to run the test correctly ?
The only decent materials I've found are this one and that one but they are outdated.










share|improve this question





























    1















    I'm trying to test a web component.
    Here is my project structure :



    ├── package.json
    ├── src
    │   ├── app.js
    │   └── index.html
    └── test
    └── hello-world-test.html


    Here is my working code :






    class HelloWorld extends HTMLElement {
    connectedCallback () {
    this.innerHTML = 'Hello, World!'
    }
    }
    customElements.define('hello-world', HelloWorld);

    <!doctype html>
    <html>

    <head>
    <meta charset="utf-8">
    <script src="app.js"></script>
    </head>

    <body>
    <hello-world></hello-world>
    </body>

    </html>





    I'm trying to test that web component with web-component-tester.
    I installed the utility globally :



    npm install -g web-component-tester


    I declared it in the package.json file :



    "devDependencies": {
    "web-component-tester": "^6.9.0"
    }


    then, I wrote my test in the test folder and saved it to hello-world-test.html:



    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="../node_modules/web-component-tester/browser.js"></script>
    <script src="app.js"></script>
    </head>
    <body>
    <test-fixture id="hello-world-fixture">
    <hello-world></hello-world>
    </test-fixture>
    <script>
    suite('<hello-world>', function(){
    let component = document.querySelector('hello-world');

    test('contains hello world string ?', () => {
    let index = component.innerText.indexOf('Hello');
    assert.isAtLeast(index, 0);
    });
    });
    </script>
    </body>
    </html>


    Finally, I typed :



    wct --npm


    Then obtained the following error in Chrome :



    Here is the result in Chrome



    What am I missing to run the test correctly ?
    The only decent materials I've found are this one and that one but they are outdated.










    share|improve this question



























      1












      1








      1








      I'm trying to test a web component.
      Here is my project structure :



      ├── package.json
      ├── src
      │   ├── app.js
      │   └── index.html
      └── test
      └── hello-world-test.html


      Here is my working code :






      class HelloWorld extends HTMLElement {
      connectedCallback () {
      this.innerHTML = 'Hello, World!'
      }
      }
      customElements.define('hello-world', HelloWorld);

      <!doctype html>
      <html>

      <head>
      <meta charset="utf-8">
      <script src="app.js"></script>
      </head>

      <body>
      <hello-world></hello-world>
      </body>

      </html>





      I'm trying to test that web component with web-component-tester.
      I installed the utility globally :



      npm install -g web-component-tester


      I declared it in the package.json file :



      "devDependencies": {
      "web-component-tester": "^6.9.0"
      }


      then, I wrote my test in the test folder and saved it to hello-world-test.html:



      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <script src="../node_modules/web-component-tester/browser.js"></script>
      <script src="app.js"></script>
      </head>
      <body>
      <test-fixture id="hello-world-fixture">
      <hello-world></hello-world>
      </test-fixture>
      <script>
      suite('<hello-world>', function(){
      let component = document.querySelector('hello-world');

      test('contains hello world string ?', () => {
      let index = component.innerText.indexOf('Hello');
      assert.isAtLeast(index, 0);
      });
      });
      </script>
      </body>
      </html>


      Finally, I typed :



      wct --npm


      Then obtained the following error in Chrome :



      Here is the result in Chrome



      What am I missing to run the test correctly ?
      The only decent materials I've found are this one and that one but they are outdated.










      share|improve this question
















      I'm trying to test a web component.
      Here is my project structure :



      ├── package.json
      ├── src
      │   ├── app.js
      │   └── index.html
      └── test
      └── hello-world-test.html


      Here is my working code :






      class HelloWorld extends HTMLElement {
      connectedCallback () {
      this.innerHTML = 'Hello, World!'
      }
      }
      customElements.define('hello-world', HelloWorld);

      <!doctype html>
      <html>

      <head>
      <meta charset="utf-8">
      <script src="app.js"></script>
      </head>

      <body>
      <hello-world></hello-world>
      </body>

      </html>





      I'm trying to test that web component with web-component-tester.
      I installed the utility globally :



      npm install -g web-component-tester


      I declared it in the package.json file :



      "devDependencies": {
      "web-component-tester": "^6.9.0"
      }


      then, I wrote my test in the test folder and saved it to hello-world-test.html:



      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <script src="../node_modules/web-component-tester/browser.js"></script>
      <script src="app.js"></script>
      </head>
      <body>
      <test-fixture id="hello-world-fixture">
      <hello-world></hello-world>
      </test-fixture>
      <script>
      suite('<hello-world>', function(){
      let component = document.querySelector('hello-world');

      test('contains hello world string ?', () => {
      let index = component.innerText.indexOf('Hello');
      assert.isAtLeast(index, 0);
      });
      });
      </script>
      </body>
      </html>


      Finally, I typed :



      wct --npm


      Then obtained the following error in Chrome :



      Here is the result in Chrome



      What am I missing to run the test correctly ?
      The only decent materials I've found are this one and that one but they are outdated.






      class HelloWorld extends HTMLElement {
      connectedCallback () {
      this.innerHTML = 'Hello, World!'
      }
      }
      customElements.define('hello-world', HelloWorld);

      <!doctype html>
      <html>

      <head>
      <meta charset="utf-8">
      <script src="app.js"></script>
      </head>

      <body>
      <hello-world></hello-world>
      </body>

      </html>





      class HelloWorld extends HTMLElement {
      connectedCallback () {
      this.innerHTML = 'Hello, World!'
      }
      }
      customElements.define('hello-world', HelloWorld);

      <!doctype html>
      <html>

      <head>
      <meta charset="utf-8">
      <script src="app.js"></script>
      </head>

      <body>
      <hello-world></hello-world>
      </body>

      </html>






      html unit-testing web-component web-component-tester






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 30 '18 at 5:35









      artkoshelev

      643418




      643418










      asked Nov 24 '18 at 23:13









      LooLoo

      83




      83
























          1 Answer
          1






          active

          oldest

          votes


















          0














          There are many errors :




          • First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :



          Components which wish to support npm-based installation should include
          wct-browser-legacy in their devDependencies, which is a package that
          contains only the client-side javascript necessary for executing WCT
          tests in an npm-based environment. WCT will attempt to identify which
          package provides the client-side code by checking for compatible
          packages in the following order of preference: wct-mocha,
          wct-browser-legacy and web-component-tester. If you want to specify
          which package provides WCT client-side code, use the
          --wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.




          So you will need to add wct-browser-legacy in your devDependencies




          • Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

          • You should add the type="module" to that import

          • You declared a fixture but didn't take profit of it through the function fixture


          If I had to correct your code :




          • The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :





          module.exports = {
          npm:true,
          verbose: true,
          plugins: {
          local: {
          browsers: ["chrome"]
          }
          },
          wctPackageName: "wct-browser-legacy"
          };






          • Your test should be modified as following :





          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <script src="../node_modules/web-component-tester/browser.js"></script>
          <script src="../src/app.js"></script>
          </head>
          <body>
          <test-fixture id="helloWorldFixture">
          <template>
          <hello-world>
          </hello-world>
          </template>
          </test-fixture>
          <script>
          suite('<hello-world>', () => {
          let component;
          setup(() => {
          component = fixture('helloWorldFixture');
          });

          test('contains hello world string ?', () => {
          let index = component.innerText.indexOf('Hello');
          assert.isAtLeast(index, 0);
          });
          });
          </script>
          </body>
          </html>





          Please, notice that I used the fixture's id and put the component initialisation in the setup function.






          share|improve this answer





















          • 1





            your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

            – daKmoR
            Jan 2 at 2:38






          • 1





            @daKmoR thank you ! I will check this out ;)

            – Zakaria
            Jan 2 at 21:00











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463201%2fweb-component-htmlelement-unit-testing%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          There are many errors :




          • First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :



          Components which wish to support npm-based installation should include
          wct-browser-legacy in their devDependencies, which is a package that
          contains only the client-side javascript necessary for executing WCT
          tests in an npm-based environment. WCT will attempt to identify which
          package provides the client-side code by checking for compatible
          packages in the following order of preference: wct-mocha,
          wct-browser-legacy and web-component-tester. If you want to specify
          which package provides WCT client-side code, use the
          --wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.




          So you will need to add wct-browser-legacy in your devDependencies




          • Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

          • You should add the type="module" to that import

          • You declared a fixture but didn't take profit of it through the function fixture


          If I had to correct your code :




          • The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :





          module.exports = {
          npm:true,
          verbose: true,
          plugins: {
          local: {
          browsers: ["chrome"]
          }
          },
          wctPackageName: "wct-browser-legacy"
          };






          • Your test should be modified as following :





          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <script src="../node_modules/web-component-tester/browser.js"></script>
          <script src="../src/app.js"></script>
          </head>
          <body>
          <test-fixture id="helloWorldFixture">
          <template>
          <hello-world>
          </hello-world>
          </template>
          </test-fixture>
          <script>
          suite('<hello-world>', () => {
          let component;
          setup(() => {
          component = fixture('helloWorldFixture');
          });

          test('contains hello world string ?', () => {
          let index = component.innerText.indexOf('Hello');
          assert.isAtLeast(index, 0);
          });
          });
          </script>
          </body>
          </html>





          Please, notice that I used the fixture's id and put the component initialisation in the setup function.






          share|improve this answer





















          • 1





            your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

            – daKmoR
            Jan 2 at 2:38






          • 1





            @daKmoR thank you ! I will check this out ;)

            – Zakaria
            Jan 2 at 21:00
















          0














          There are many errors :




          • First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :



          Components which wish to support npm-based installation should include
          wct-browser-legacy in their devDependencies, which is a package that
          contains only the client-side javascript necessary for executing WCT
          tests in an npm-based environment. WCT will attempt to identify which
          package provides the client-side code by checking for compatible
          packages in the following order of preference: wct-mocha,
          wct-browser-legacy and web-component-tester. If you want to specify
          which package provides WCT client-side code, use the
          --wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.




          So you will need to add wct-browser-legacy in your devDependencies




          • Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

          • You should add the type="module" to that import

          • You declared a fixture but didn't take profit of it through the function fixture


          If I had to correct your code :




          • The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :





          module.exports = {
          npm:true,
          verbose: true,
          plugins: {
          local: {
          browsers: ["chrome"]
          }
          },
          wctPackageName: "wct-browser-legacy"
          };






          • Your test should be modified as following :





          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <script src="../node_modules/web-component-tester/browser.js"></script>
          <script src="../src/app.js"></script>
          </head>
          <body>
          <test-fixture id="helloWorldFixture">
          <template>
          <hello-world>
          </hello-world>
          </template>
          </test-fixture>
          <script>
          suite('<hello-world>', () => {
          let component;
          setup(() => {
          component = fixture('helloWorldFixture');
          });

          test('contains hello world string ?', () => {
          let index = component.innerText.indexOf('Hello');
          assert.isAtLeast(index, 0);
          });
          });
          </script>
          </body>
          </html>





          Please, notice that I used the fixture's id and put the component initialisation in the setup function.






          share|improve this answer





















          • 1





            your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

            – daKmoR
            Jan 2 at 2:38






          • 1





            @daKmoR thank you ! I will check this out ;)

            – Zakaria
            Jan 2 at 21:00














          0












          0








          0







          There are many errors :




          • First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :



          Components which wish to support npm-based installation should include
          wct-browser-legacy in their devDependencies, which is a package that
          contains only the client-side javascript necessary for executing WCT
          tests in an npm-based environment. WCT will attempt to identify which
          package provides the client-side code by checking for compatible
          packages in the following order of preference: wct-mocha,
          wct-browser-legacy and web-component-tester. If you want to specify
          which package provides WCT client-side code, use the
          --wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.




          So you will need to add wct-browser-legacy in your devDependencies




          • Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

          • You should add the type="module" to that import

          • You declared a fixture but didn't take profit of it through the function fixture


          If I had to correct your code :




          • The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :





          module.exports = {
          npm:true,
          verbose: true,
          plugins: {
          local: {
          browsers: ["chrome"]
          }
          },
          wctPackageName: "wct-browser-legacy"
          };






          • Your test should be modified as following :





          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <script src="../node_modules/web-component-tester/browser.js"></script>
          <script src="../src/app.js"></script>
          </head>
          <body>
          <test-fixture id="helloWorldFixture">
          <template>
          <hello-world>
          </hello-world>
          </template>
          </test-fixture>
          <script>
          suite('<hello-world>', () => {
          let component;
          setup(() => {
          component = fixture('helloWorldFixture');
          });

          test('contains hello world string ?', () => {
          let index = component.innerText.indexOf('Hello');
          assert.isAtLeast(index, 0);
          });
          });
          </script>
          </body>
          </html>





          Please, notice that I used the fixture's id and put the component initialisation in the setup function.






          share|improve this answer















          There are many errors :




          • First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :



          Components which wish to support npm-based installation should include
          wct-browser-legacy in their devDependencies, which is a package that
          contains only the client-side javascript necessary for executing WCT
          tests in an npm-based environment. WCT will attempt to identify which
          package provides the client-side code by checking for compatible
          packages in the following order of preference: wct-mocha,
          wct-browser-legacy and web-component-tester. If you want to specify
          which package provides WCT client-side code, use the
          --wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.




          So you will need to add wct-browser-legacy in your devDependencies




          • Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

          • You should add the type="module" to that import

          • You declared a fixture but didn't take profit of it through the function fixture


          If I had to correct your code :




          • The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :





          module.exports = {
          npm:true,
          verbose: true,
          plugins: {
          local: {
          browsers: ["chrome"]
          }
          },
          wctPackageName: "wct-browser-legacy"
          };






          • Your test should be modified as following :





          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <script src="../node_modules/web-component-tester/browser.js"></script>
          <script src="../src/app.js"></script>
          </head>
          <body>
          <test-fixture id="helloWorldFixture">
          <template>
          <hello-world>
          </hello-world>
          </template>
          </test-fixture>
          <script>
          suite('<hello-world>', () => {
          let component;
          setup(() => {
          component = fixture('helloWorldFixture');
          });

          test('contains hello world string ?', () => {
          let index = component.innerText.indexOf('Hello');
          assert.isAtLeast(index, 0);
          });
          });
          </script>
          </body>
          </html>





          Please, notice that I used the fixture's id and put the component initialisation in the setup function.






          module.exports = {
          npm:true,
          verbose: true,
          plugins: {
          local: {
          browsers: ["chrome"]
          }
          },
          wctPackageName: "wct-browser-legacy"
          };





          module.exports = {
          npm:true,
          verbose: true,
          plugins: {
          local: {
          browsers: ["chrome"]
          }
          },
          wctPackageName: "wct-browser-legacy"
          };





          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <script src="../node_modules/web-component-tester/browser.js"></script>
          <script src="../src/app.js"></script>
          </head>
          <body>
          <test-fixture id="helloWorldFixture">
          <template>
          <hello-world>
          </hello-world>
          </template>
          </test-fixture>
          <script>
          suite('<hello-world>', () => {
          let component;
          setup(() => {
          component = fixture('helloWorldFixture');
          });

          test('contains hello world string ?', () => {
          let index = component.innerText.indexOf('Hello');
          assert.isAtLeast(index, 0);
          });
          });
          </script>
          </body>
          </html>





          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <script src="../node_modules/web-component-tester/browser.js"></script>
          <script src="../src/app.js"></script>
          </head>
          <body>
          <test-fixture id="helloWorldFixture">
          <template>
          <hello-world>
          </hello-world>
          </template>
          </test-fixture>
          <script>
          suite('<hello-world>', () => {
          let component;
          setup(() => {
          component = fixture('helloWorldFixture');
          });

          test('contains hello world string ?', () => {
          let index = component.innerText.indexOf('Hello');
          assert.isAtLeast(index, 0);
          });
          });
          </script>
          </body>
          </html>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 25 '18 at 20:23

























          answered Nov 25 '18 at 17:32









          ZakariaZakaria

          9,8461874120




          9,8461874120








          • 1





            your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

            – daKmoR
            Jan 2 at 2:38






          • 1





            @daKmoR thank you ! I will check this out ;)

            – Zakaria
            Jan 2 at 21:00














          • 1





            your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

            – daKmoR
            Jan 2 at 2:38






          • 1





            @daKmoR thank you ! I will check this out ;)

            – Zakaria
            Jan 2 at 21:00








          1




          1





          your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

          – daKmoR
          Jan 2 at 2:38





          your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

          – daKmoR
          Jan 2 at 2:38




          1




          1





          @daKmoR thank you ! I will check this out ;)

          – Zakaria
          Jan 2 at 21:00





          @daKmoR thank you ! I will check this out ;)

          – Zakaria
          Jan 2 at 21:00


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463201%2fweb-component-htmlelement-unit-testing%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

          Calculate evaluation metrics using cross_val_predict sklearn

          Insert data from modal to MySQL (multiple modal on website)