hendrik/lens
1
0 Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Deployed c6b73e8db to master with MkDocs 1.1.2 and mike 0.5.5

Browse Source
This commit is contained in:
GitHub Action committed 2020-12-03 16:04:42 +00:00
1 parent 9d3c895217
commit 197e799a0d
201 files changed
+7258 -3400
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

master/extensions/testing-and-publishing/testing/index.html
+82 -5
View File
@@ -658,12 +658,33 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#renderer-process-unit-testing" class="md-nav__link">
Renderer Process Unit Testing
</a>
</li>
<li class="md-nav__item">
<a href="#main-process-unit-testing" class="md-nav__link">
Main Process Unit Testing
</a>
</li>
<li class="md-nav__item">
<a href="#tips" class="md-nav__link">
Tips
</a>
<nav class="md-nav" aria-label="Tips">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#consolelog" class="md-nav__link">
Console.log
</a>
<nav class="md-nav" aria-label="Console.log">
<ul class="md-nav__list">
</li>
<li class="md-nav__item">
<a href="#renderer-process-logs" class="md-nav__link">
@@ -864,12 +885,33 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#renderer-process-unit-testing" class="md-nav__link">
Renderer Process Unit Testing
</a>
</li>
<li class="md-nav__item">
<a href="#main-process-unit-testing" class="md-nav__link">
Main Process Unit Testing
</a>
</li>
<li class="md-nav__item">
<a href="#tips" class="md-nav__link">
Tips
</a>
<nav class="md-nav" aria-label="Tips">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#consolelog" class="md-nav__link">
Console.log
</a>
<nav class="md-nav" aria-label="Console.log">
<ul class="md-nav__list">
</li>
<li class="md-nav__item">
<a href="#renderer-process-logs" class="md-nav__link">
@@ -905,7 +947,42 @@
<h1 id="testing-extensions">Testing Extensions<a class="headerlink" href="#testing-extensions" title="Permanent link">#</a></h1>
<h2 id="consolelog">Console.log<a class="headerlink" href="#consolelog" title="Permanent link">#</a></h2>
<h2 id="renderer-process-unit-testing">Renderer Process Unit Testing<a class="headerlink" href="#renderer-process-unit-testing" title="Permanent link">#</a></h2>
<p>UI components in extension renderer process are based on React/ReactDOM. These components can be tested by popular React testing tools like <a href="https://github.com/testing-library/react-testing-library">React Testing Library</a>.</p>
<p>If you are using the <a href="https://github.com/lensapp/generator-lens-ext">Yeoman Lens Extension Generator</a> to scaffold extension project. The testing environment for render process are already setup for you. Just use <code>npm start</code> or <code>yarn test</code> to run the tests.</p>
<p>For example, I have a component <code>GlobalPageMenuIcon</code> and want to test if <code>props.navigate</code> is called when user clicks the icon.</p>
<p>My component <code>GlobalPageMenuIcon</code></p>
<div class="highlight"><pre><span></span><code>import React from &quot;react&quot;
import { Component: { Icon } } from &quot;@k8slens/extensions&quot;;
const GlobalPageMenuIcon = ({ navigate }: { navigate?: () =&gt; void }): JSX.Element =&gt; (
&lt;Icon
material=&quot;trip_origin&quot;
onClick={() =&gt; navigate()}
data-testid=&quot;global-page-menu-icon&quot;
/&gt;
)
</code></pre></div>
<p>The test</p>
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span><span class="p">,</span> <span class="nx">fireEvent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@testing-library/react&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">GlobalPageMenuIcon</span> <span class="nx">from</span> <span class="s2">&quot;./GlobalPageMenuIcon&quot;</span><span class="p">;</span>
<span class="nx">test</span><span class="p">(</span><span class="s2">&quot;click called navigate()&quot;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
<span class="kr">const</span> <span class="nx">navigate</span> <span class="o">=</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">();</span>
<span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">GlobalPageMenuIcon</span> <span class="nx">navigate</span><span class="o">=</span><span class="p">{</span><span class="nx">navigate</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">);</span>
<span class="nx">fireEvent</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">getByTestId</span><span class="p">(</span><span class="s2">&quot;global-page-menu-icon&quot;</span><span class="p">));</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">navigate</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
<span class="p">});</span>
</code></pre></div>
<p>In the example we used <a href="https://github.com/testing-library/react-testing-library">React Testing Library</a> but any React testing framework can be used to test renderer process UI components.</p>
<p>There are more example tests in the generator's <a href="https://github.com/lensapp/generator-lens-ext/tree/main/generators/app/templates/ext-ts/components">template</a>. Extend your tests based on the examples.</p>
<h2 id="main-process-unit-testing">Main Process Unit Testing<a class="headerlink" href="#main-process-unit-testing" title="Permanent link">#</a></h2>
<p>Code in the extension main process are just normal JavaScript files that has access to extension api, you can write unit tests using any testing framework.</p>
<p>If you are using the <a href="https://github.com/lensapp/generator-lens-ext">Yeoman Lens Extension Generator</a> to scaffold your extension project. The testing environment <a href="https://jestjs.io/">Jest</a> are setup for you. Just use <code>npm start</code> or <code>yarn test</code> to run the tests.</p>
<h2 id="tips">Tips<a class="headerlink" href="#tips" title="Permanent link">#</a></h2>
<h3 id="consolelog">Console.log<a class="headerlink" href="#consolelog" title="Permanent link">#</a></h3>
<p>Extension developers might find <code>console.log()</code> useful for printing out information and errors from extensions. To use <code>console.log()</code>, note that Lens is based on Electron, and that Electron has two types of processes: <a href="https://www.electronjs.org/docs/tutorial/quick-start#main-and-renderer-processes">Main and Renderer</a>.</p>
<h3 id="renderer-process-logs">Renderer Process Logs<a class="headerlink" href="#renderer-process-logs" title="Permanent link">#</a></h3>
<p>In the Renderer process, <code>console.log()</code> is printed in the Console in Developer Tools (<strong>View</strong> &gt; <strong>Toggle Developer Tools</strong>).</p>