docs: Added Frontend Tests section

docs/assets/prism.css

@@ -0,0 +1 @@
+[data-color-mode="dark"],[data-dark-theme="dark"]{--color:#f8f8f2;--shadow:0 1px rgba(0,0,0,.3)}[data-color-mode="light"],[data-dark-theme="light"]{--color:#000;--shadow:none}code[class*="language-"],pre[class*="language-"]{color:var(--color);background:0 0;text-shadow:var(--shadow);font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre) >code[class*="language-"],pre[class*="language-"]{background:#272822}:not(pre) >code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

docs/index.html

@@ -7,6 +7,7 @@
     <meta charset="utf-8">
     <title>VeganCheck.me Installation Guide</title>
     <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css">
+    <link rel="stylesheet" href="assets/prism.css">
     <style>
     body {
         width: 50%;
@@ -31,6 +32,7 @@
             </svg>
             main
         </span>
+
         <span class="Label mr-1 Label--success">Stable</span>
         <img width="80px" src="https://raw.githubusercontent.com/JokeNetwork/vegancheck.me/main/public/img/hero_icon.png" align="right" alt="VeganCheck Logo" class="logo_12">
         <h1>VeganCheck.me Installation Guide</h1>
@@ -46,23 +48,31 @@
         </ul>
         <h2 id="get-started">Get started</h2>
         <p>Download the <a href="https://github.com/JokeNetwork/vegancheck.me/releases">latest release</a> or just use the following command:</p>
-        <pre><code class="lang-bash">$ git clone https://github.com/JokeNetwork/vegancheck.me.git</code></pre>
+        <div class="highlight"><pre class="highlight"><code class="language-bash">$ git clone https://github.com/JokeNetwork/vegancheck.me.git</code></pre></div>
         <h2 id="install-dependencies">Install dependencies</h2>
         <p>Use the following commands to install all at once: </p>
-        <pre><code class="lang-bash">$ npm <span class="hljs-keyword">install</span></code></pre>
+        <div class="highlight"><pre class="highlight"><code class="lang-bash">$ npm <span class="hljs-keyword">install</span></code></pre></div>
         <p>or:</p>
-        <pre><code class="lang-bash">$ yarn <span class="hljs-keyword">install</span></code></pre>
+        <div class="highlight"><pre class="highlight"><code class="lang-bash">$ yarn <span class="hljs-keyword">install</span></code></pre></div>
-        <h2 id="configure-environment-variables">Start the service</h2>
+        <h2 id="start-the-service">Start the service</h2>
         <p>In a local environment you can just run:</p>
-        <pre><code class="lang-bash">$ npm run start</span></code></pre>
+        <div class="highlight"><pre class="highlight"><code class="lang-bash">$ npm run start</span></code></pre></div>
     <p>or:</p>
-    <pre><code class="lang-bash">$ yarn start</span></code></pre>
+    <div class="highlight"><pre class="highlight"><code class="lang-bash">$ yarn start</span></code></pre></div>
         <p>To build the service just run:</p>
-        <pre><code class="lang-bash">$ npm run build</span></code></pre>
+        <div class="highlight"><pre class="highlight"><code class="lang-bash">$ npm run build</span></code></pre></div>
 <p>or:</p>
-    <pre><code class="lang-bash">$ yarn build</span></code></pre>
+    <div class="highlight"><pre class="highlight"><code class="lang-bash">$ yarn build</span></code></pre></div>
         <p>You can then run the code in a normal Node.js production environment (Like with the help of <a href="http://supervisord.org">supervisord</a>).</p>
         <p>Please note that the service runs on <code>Port 1030</code>. You can change the port by editing the "start" command in the <a href="https://github.com/JokeNetwork/vegancheck.me/blob/main/package.json">package.json</a> at <code>"start": "next start -p [Desired port]"</code>.</p>
+        <h2 id="use-tests">Use Frontend Tests</h2>
+        <p>We use the Playwright Framework for our Frontend tests.<br />
+        For more information about Playwright, please visit <a href="https://playwright.dev">https://playwright.dev</a>.</p>
+        <p>To run the tests, just start the dev-environment:</p>
+        <div class="highlight"><pre class="highlight"><code class="lang-bash">$ npm run dev</code></pre></div>
+        <p>and then</p>
+        <div class="highlight"><pre class="highlight"><code class="lang-bash">$ npm run test</code></pre></div>
+        <p>All test should pass. Those test only check for the usabilty of the page. If you want to write your own tests, you can find the tests in <code>src/tests/usability.spec.ts</code>.</p>
         <h2 id="use-of-icons">Use of icons</h2>
         <ul>
             <li>The VeganCheck.me Logo and the app icons are free to use under the terms of the <a href="https://github.com/JokeNetwork/vegancheck.me/blob/main/LICENSE">MIT License</a>.</li>
@@ -85,6 +95,7 @@
             <p class="color-fg-muted mt-2">&copy; 2023 <a href="//vegancheck.me">VeganCheck.me</a> - Licensed under <a href="https://github.com/JokeNetwork/vegancheck.me/blob/main/LICENSE">MIT</a></p>
         </footer>
     </div>
+    <script src="assets/prism.js"></script>
 </body>
 
 </html>