-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.component-tests.html
30 lines (28 loc) · 12 KB
/
search.component-tests.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SearchComponent Testing Notes | MWB Documentation</title>
<meta name="description" content="Data migration workbench">
<link rel="preload" href="/mwb-docs/assets/css/0.styles.f856d471.css" as="style"><link rel="preload" href="/mwb-docs/assets/js/app.a7583053.js" as="script"><link rel="preload" href="/mwb-docs/assets/js/26.e7229fbe.js" as="script"><link rel="prefetch" href="/mwb-docs/assets/js/14.63eaeec2.js"><link rel="prefetch" href="/mwb-docs/assets/js/2.cd3fbe18.js"><link rel="prefetch" href="/mwb-docs/assets/js/3.e5d6ffde.js"><link rel="prefetch" href="/mwb-docs/assets/js/4.5aee960d.js"><link rel="prefetch" href="/mwb-docs/assets/js/5.31efbd1b.js"><link rel="prefetch" href="/mwb-docs/assets/js/6.a75e5a13.js"><link rel="prefetch" href="/mwb-docs/assets/js/7.8a1efbd8.js"><link rel="prefetch" href="/mwb-docs/assets/js/8.43eff26f.js"><link rel="prefetch" href="/mwb-docs/assets/js/9.4257e60b.js"><link rel="prefetch" href="/mwb-docs/assets/js/10.b23970bc.js"><link rel="prefetch" href="/mwb-docs/assets/js/11.21e89f2a.js"><link rel="prefetch" href="/mwb-docs/assets/js/12.c9ded795.js"><link rel="prefetch" href="/mwb-docs/assets/js/13.7569e760.js"><link rel="prefetch" href="/mwb-docs/assets/js/15.15d8439f.js"><link rel="prefetch" href="/mwb-docs/assets/js/16.003eec02.js"><link rel="prefetch" href="/mwb-docs/assets/js/17.d272c3f2.js"><link rel="prefetch" href="/mwb-docs/assets/js/18.28d2d373.js"><link rel="prefetch" href="/mwb-docs/assets/js/19.6f14f780.js"><link rel="prefetch" href="/mwb-docs/assets/js/20.5a0ab772.js"><link rel="prefetch" href="/mwb-docs/assets/js/21.6c516c23.js"><link rel="prefetch" href="/mwb-docs/assets/js/22.eb780789.js"><link rel="prefetch" href="/mwb-docs/assets/js/23.d60688de.js"><link rel="prefetch" href="/mwb-docs/assets/js/24.e0c7f95f.js"><link rel="prefetch" href="/mwb-docs/assets/js/25.a03bcc83.js"><link rel="prefetch" href="/mwb-docs/assets/js/27.5b7facd5.js"><link rel="prefetch" href="/mwb-docs/assets/js/28.f7daa03e.js"><link rel="prefetch" href="/mwb-docs/assets/js/29.fa78f538.js"><link rel="prefetch" href="/mwb-docs/assets/js/30.6e46af23.js"><link rel="prefetch" href="/mwb-docs/assets/js/31.9c9aa942.js"><link rel="prefetch" href="/mwb-docs/assets/js/32.2dc8a33b.js"><link rel="prefetch" href="/mwb-docs/assets/js/33.4f0214a4.js"><link rel="prefetch" href="/mwb-docs/assets/js/34.bcdd55ce.js"><link rel="prefetch" href="/mwb-docs/assets/js/35.08bcc98d.js"><link rel="prefetch" href="/mwb-docs/assets/js/36.39c27025.js"><link rel="prefetch" href="/mwb-docs/assets/js/37.2bb75089.js"><link rel="prefetch" href="/mwb-docs/assets/js/38.30e861d1.js">
<link rel="stylesheet" href="/mwb-docs/assets/css/0.styles.f856d471.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/mwb-docs/" class="home-link router-link-active"><!----> <span class="site-name">MWB Documentation</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/mwb-docs/" class="nav-link">Overview</a></div><div class="nav-item"><a href="/mwb-docs/measure-calculation/" class="nav-link">Measure Calculation</a></div><div class="nav-item"><a href="/mwb-docs/dashboard-thumbnail/" class="nav-link">DashboardThumbnail</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Redux Store</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-store.html" class="nav-link">Overview</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-middleware.html" class="nav-link">Middleware</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-selector-helpers.html" class="nav-link">Selector Helpers</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-computed-state.html" class="nav-link">Computed State</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-observable-arrays.html" class="nav-link">Observable Arrays</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-reducer-testing.html" class="nav-link">Reducer Testing</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Testing</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/cypress-e2e-tests.html" class="nav-link">Cypress e2e Testing</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/cypress-test-results.html" class="nav-link">Cypress Test Results</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/unit-test-results.html" class="nav-link">Unit Tests</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/code-coverage.html" class="nav-link">Code Coverage</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/webpack-bundle-analyzer-results.html" class="nav-link">Webpack Bundle Analyzer</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/npm-audit.html" class="nav-link">npm audit security report</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/RichardMatsen/mwb-v2-redux" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/mwb-docs/" class="nav-link">Overview</a></div><div class="nav-item"><a href="/mwb-docs/measure-calculation/" class="nav-link">Measure Calculation</a></div><div class="nav-item"><a href="/mwb-docs/dashboard-thumbnail/" class="nav-link">DashboardThumbnail</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Redux Store</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-store.html" class="nav-link">Overview</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-middleware.html" class="nav-link">Middleware</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-selector-helpers.html" class="nav-link">Selector Helpers</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-computed-state.html" class="nav-link">Computed State</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-observable-arrays.html" class="nav-link">Observable Arrays</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/redux/redux-reducer-testing.html" class="nav-link">Reducer Testing</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Testing</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/cypress-e2e-tests.html" class="nav-link">Cypress e2e Testing</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/cypress-test-results.html" class="nav-link">Cypress Test Results</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/unit-test-results.html" class="nav-link">Unit Tests</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/code-coverage.html" class="nav-link">Code Coverage</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/webpack-bundle-analyzer-results.html" class="nav-link">Webpack Bundle Analyzer</a></li><li class="dropdown-item"><!----> <a href="/mwb-docs/testing/npm-audit.html" class="nav-link">npm audit security report</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/RichardMatsen/mwb-v2-redux" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>SearchComponent Testing Notes</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/mwb-docs/search.component-tests.html#searchcomponent-testing-notes" class="sidebar-link">SearchComponent Testing Notes</a><ul class="sidebar-sub-headers"></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h2 id="searchcomponent-testing-notes"><a href="#searchcomponent-testing-notes" aria-hidden="true" class="header-anchor">#</a> SearchComponent Testing Notes</h2> <ol><li>Uses Location.path to determine which page is active, and decide if it's searchable (not strictly necessary after move of the search control from the nav-bar to the common page component)<br>
Need to use SpyLocation to mock Location.</li></ol> <ul><li>Can't use a standard jasmine mockLocation (component will not compile).</li> <li>Note, jasmine mock is sufficient for similar tests on a service</li> <li>use a simple constructor call to new-up a service:</li> <li>searchService = new SearchService(mockLocation, mockNgReduxDispatcher, mockActions);</li></ul> <p>Info on SpyLocation:</p> <ul><li>Angular docs page for SpyLocation is missing</li> <li>the library for Spylocation is reported in various places over time</li> <li>currently (June 2017) is: import { SpyLocation } from "@angular/common/testing";</li></ul> <p>Set up SpyLocation:</p> <ul><li>in TestBed.configureTestingModule:
<ul><li>providers: [{provide: Location, useClass: SpyLocation}],</li></ul></li> <li>get a reference to it:
<ul><li>location = TestBed.get(Location);</li></ul></li> <li>Router and routes not needed for this test</li> <li>To mock Location.path(), use:
<ul><li>location.go('notSearchablePage')</li></ul></li></ul> <ol start="2"><li><p>Refactor the component to make use of NgRedux/store more granular.
This makes testing easier, as internal steps can be simply tested by expecting calls on mockActions.</p></li> <li><p>Use NgRedux test helpers to set up the store:
MockNgRedux.reset();
setupMockStore(['search'], { page: 'validations', searchTerm: 'test', results: [] })
setupMockStore(['pages', 'validations', 'visibleFiles'], testFiles)
logMockStore(); // Debugging: Check what is in the store</p></li></ol></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">9/3/2018, 8:47:06 PM</span></div></div> <!----> </div> <!----></div></div>
<script src="/mwb-docs/assets/js/26.e7229fbe.js" defer></script><script src="/mwb-docs/assets/js/app.a7583053.js" defer></script>
</body>
</html>