Evaluate Vue scripts & do tests using single HTML file

How do you test your Vue code blocks and theories?

Of course, you can simply have a test Vue project and throw in a single file component each time. Or, you could follow a simple structure to create a HTML/JS files.

Or, you could just create everything in a single HTML page and clone it for quick tests. Not a new concept by any means - but I still wonder why I stick to SFCs each and every time.

Code below -

<!DOCTYPE html>
<html>
  <head>
    <title>Test. Test. Test</title>
    <script src="https://unpkg.com/vue"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"
      integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk="
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div id="app" class="panel">
      <p class="panel-heading has-text-centered is-top-8">
        Test String Manipulations
      </p>
      <div class="panel-block columns has-text-centered">
        <div class="column">
          <input
            v-model="testStr"
            placeholder="Enter some text.."
            class="is-primary is-size-4"
          />
        </div>
      </div>
      <div class="panel-block has-text-centered">
        <p class="column">Length: {{ testStr.length }}</p>
      </div>
      <div class="panel-block has-text-centered">
        <p class="column">Reverse: {{ reverseTest }}</p>
      </div>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        data: {
          testStr: ""
        },
        computed: {
          reverseTest() {
            return this.testStr
              ? this.testStr
                  .split("")
                  .reverse()
                  .join("")
              : "...";
          }
        }
      });
    </script>
  </body>
</html>

See the above code in action - vue-test-single-html-file

So, if we can do all this within a single HTML file - why use SFCs for testing at all?

Well, SFCs are particularly useful when you are testing a whole bunch of stuff - e.g. Vuetify + that new sweet alert, test how the newest charting library looks like in Quasar, using abstraction when dealing with GraphQL, or just test Vuex modules across SFCs!

comments powered by Disqus