ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity
Ocelot-Social/docs/webapp/testing.html

559 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Frontend tests · Ocelot.Social – Developer Documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<meta name="author" content="busFaktor() e.V.">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-hints/plugin-hints.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-tabs2/tabs.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="../backend/testing.html" />
<link rel="prev" href="../cypress/" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" data-path="../edit-this-documentation.html">
<a href="../edit-this-documentation.html">
Edit this Documentation
</a>
</li>
<li class="chapter " data-level="1.3" data-path="../neo4j/">
<a href="../neo4j/">
Neo4J
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../backend/">
<a href="../backend/">
Backend
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../backend/graphql.html">
<a href="../backend/graphql.html">
GraphQL
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../backend/neo4j-graphql-js.html">
<a href="../backend/neo4j-graphql-js.html">
neo4j-graphql-js
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="./">
<a href="./">
Webapp
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="components.html">
<a href="components.html">
Components
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="html.html">
<a href="html.html">
HTML
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="scss.html">
<a href="scss.html">
SCSS
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="vue.html">
<a href="vue.html">
Vue
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../testing.html">
<a href="../testing.html">
Testing Guide
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="../cypress/">
<a href="../cypress/">
End-to-end tests
</a>
</li>
<li class="chapter active" data-level="1.6.2" data-path="testing.html">
<a href="testing.html">
Frontend tests
</a>
</li>
<li class="chapter " data-level="1.6.3" data-path="../backend/testing.html">
<a href="../backend/testing.html">
Backend tests
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="../DOCKER_MORE_CLOSELY.html">
<a href="../DOCKER_MORE_CLOSELY.html">
Docker More Closely
</a>
</li>
<li class="chapter " data-level="1.8" >
<a target="_blank" href="https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/blob/master/deployment/README.md">
Deployment
</a>
</li>
<li class="chapter " data-level="1.9" data-path="../CONTRIBUTING.html">
<a href="../CONTRIBUTING.html">
Contributing
</a>
</li>
<li class="chapter " data-level="1.10" data-path="../cypress/features.html">
<a href="../cypress/features.html">
Feature Specification
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../CODE_OF_CONDUCT.html">
<a href="../CODE_OF_CONDUCT.html">
Code of conduct
</a>
</li>
<li class="chapter " data-level="1.12" data-path="../LICENSE.html">
<a href="../LICENSE.html">
License
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Frontend tests</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="component-testing">Component Testing</h1>
<h2 id="linting">Linting</h2>
<p>We use <a href="https://eslint.org/" target="_blank">ESLint</a> to make sure all developers follow certain code guidelines when writing JavaScript.</p>
<p>Most code editors offer an ESLint plugin which helps detect mistakes already while you are writing code. To run the linter manually before pushing up new code type <code>yarn lint</code> into your terminal. Most minor issues can be fixed automatically with the command <code>yarn lint --fix</code>.</p>
<h2 id="unit-tests">Unit tests</h2>
<p>We write unit tests with the help of <a href="https://jestjs.io/" target="_blank">Jest</a> and <a href="https://vue-test-utils.vuejs.org/" target="_blank">Vue Test Utils</a> to make sure our components work in the way they should. In these tests we usually check that a certain input leads to the expected output. They are used to test <em>functionality</em>.</p>
<p>To run all tests use the command <code>yarn test</code> in the <code>/webapp</code> directory. Other useful commands are:</p>
<ul>
<li><code>yarn test -t test-name</code> to run tests including <code>test-name</code> in their file or test names</li>
<li><code>yarn test -o</code> to run tests related to files that have been changed since the latest commit</li>
<li><code>yarn test path/to/component.spec.js</code> to run a single test file</li>
</ul>
<h2 id="documentation-and-manual-testing">Documentation and manual testing</h2>
<p><a href="https://vue-test-utils.vuejs.org/" target="_blank">Storybook</a> is a great tool that performs two important functions in our project:</p>
<h3 id="component-documentation">Component documentation</h3>
<p>With Storybook our components can be documented in detail and offer a visual reference to other developers. When all components are properly documented, Storybook can be used as a big component library &#x2013; where developers can browse through design tokens and components and immediately verify that the component offers the desired functionality.</p>
<h3 id="manual-testing-in-an-isolated-environment">Manual testing in an isolated environment</h3>
<p>When adding new components or changing existing ones, Storybook can be helpful not only to document the feature for future use, but also to test different use cases (e.g. by passing different types of <code>props</code>) in an isolated playground.</p>
<p>With the right addons, Storybook also gives immediate feedback on how well the component complies with accessibility guidelines.</p>
<hr>
<p>To run Storybook, first start the app, then enter the following command in a new terminal window: <code>yarn storybook</code>. The output should look similar to this:</p>
<p><img src="../.gitbook/assets/storybook-output.png" alt="Storybook output"></p>
<p>The ocelot.social Storybook will then be available on <code>http://localhost:3002</code>.</p>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="../cypress/" class="navigation navigation-prev " aria-label="Previous page: End-to-end tests">
<i class="fa fa-angle-left"></i>
</a>
<a href="../backend/testing.html" class="navigation navigation-next " aria-label="Next page: Backend tests">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Frontend tests","level":"1.6.2","depth":2,"next":{"title":"Backend tests","level":"1.6.3","depth":2,"path":"backend/testing.md","ref":"backend/testing.md","articles":[]},"previous":{"title":"End-to-end tests","level":"1.6.1","depth":2,"path":"cypress/README.md","ref":"cypress/README.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","-sharing","hints","tabs2","theme-simple@git+https://github.com/plugins-zander/gitbook-plugin-theme-simple.git","search-pro@git+https://github.com/plugins-zander/gitbook-plugin-search-pro.git","splitter@git+https://github.com/plugins-zander/gitbook-plugin-splitter.git","edit-link@git+https://github.com/plugins-zander/gitbook-plugin-edit-link.git","gtag@git+https://github.com/plugins-zander/gitbook-plugin-gtag.git","chapter-fold@git+https://github.com/plugins-zander/gitbook-plugin-chapter-fold.git","copy-code-button@git+https://github.com/plugins-zander/gitbook-plugin-copy-code-button.git"],"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"},"pluginsConfig":{"chapter-fold":{},"splitter":{},"search-pro":{},"hints":{"danger":"fa fa-exclamation-circle","info":"fa fa-info-circle","tip":"fa fa-mortar-board","working":"fa fa-wrench"},"sitemap-general":{"prefix":"https://zlogs.net/gitbook-action/"},"fontsettings":{"theme":"white","family":"sans","size":2},"gtag":{"token":""},"tabs2":{},"highlight":{},"theme-simple":{"showLevel":false,"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}},"copy-code-button":{},"edit-link":{"label":"EDIT","base":"https://github.com/Ocelot-Social-Community/Ocelot-Social/edit/master/"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","author":"busFaktor() e.V.","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Ocelot.Social – Developer Documentation","gitbook":"3.2.3","description":"Developer Documentation by Gitbook-Action"},"file":{"path":"webapp/testing.md","mtime":"2020-11-16T08:43:15.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2023-08-15T15:04:47.802Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../gitbook/gitbook-plugin-tabs2/tabs.js"></script>
<script src="../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
<script src="../gitbook/gitbook-plugin-search-pro/search.js"></script>
<script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-gtag/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.js"></script>
<script src="../gitbook/gitbook-plugin-copy-code-button/toggle.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink