Răsfoiți Sursa

HUE-9090 [frontend] Update the docs with js testing changes

Johan Ahlen 6 ani în urmă
părinte
comite
60b4fa5069

+ 29 - 17
docs/docs-site/content/developer/development/_index.md

@@ -431,7 +431,15 @@ app look at home in Hue.
 
 After changing the CSS in a .less file, rebuilding with:
 
-    make css
+    npm run less
+    
+Or run in watch mode that will generate the .css on any change to the .less files:
+
+    npm run less-dev
+
+After less changes make sure linting is run with:
+
+    npm run less-lint
 
 ### Icons
 
@@ -476,7 +484,7 @@ How to run just some parts of the tests, e.g.:
     build/env/bin/hue test specific impala.tests:TestMockedImpala
     build/env/bin/hue test specific impala.tests:TestMockedImpala.test_basic_flow
 
-Jasmine tests:
+Jest tests:
 
     npm run test
 
@@ -541,34 +549,38 @@ Add the following options:
 
     ./build/env/bin/hue test unit --with-xunit --with-cover
 
+For js run:
+
+    npm run test-coverage
 
-#### Create and run the Jasmine tests
+#### Create and run the Jest tests
 
-Add them in a "spec" subfolder relative to the file under test and the filename of the test has to end with "Spec.js".
+Add them next to the file under test, the filename of the test has to end with ".test.js".
 
-    someFile.js              <- File under test
-    ├── spec/
-    │   ├── someFileSpec.js  <- File containing tests
+    someFile.js         <- File under test
+    someFile.test.js    <- File containing tests
 
 Run all the tests once with:
 
     npm run test
 
-Optionally to use Karma and headless chrome for the tests you can run
+To run the tests in watch mode:
 
-    npm run test-karma
-
-See ```desktop/core/src/desktop/js/spec/karma.config.js``` for various options
+    npm run test-dev
 
+While in watch mode Jest will detect changes to all files and re-run related tests. There are
+also options to target specific files or tests. Press 'w' in the console to see the options.
 
 #### Testing KO components and bindings
 
-jasmineSetup provides utilities to test knockout components and bindings using jsdom.
+koSetup provides utilities to test knockout components and bindings using jsdom from jest.
 
 An example of component test:
 
 ```
-import { koSetup } from 'spec/jasmineSetup';
+import { koSetup } from 'jest/koTestUtils';
+
+import 'ko/someComponent';
 
 describe('ko.someComponent.js', () => {
   const setup = koSetup(); // Adds the necessary setup and teardown
@@ -576,9 +588,9 @@ describe('ko.someComponent.js', () => {
   it('should render component', async () => {
     const someParams = {}
 
-    const wrapper = await setup.renderComponent('someComponent', someParams);
+    const element = await setup.renderComponent('someComponent', someParams);
 
-    expect(wrapper.querySelector('[data-test="'some-test-id'"]')).toBeTruthy();
+    expect(element.innerHTML).toMatchSnapshot();
   });
 
   it('should change after observable update', async () => {
@@ -598,8 +610,8 @@ An example of a binding test:
 
 ```
 import ko from 'knockout';
-import { koSetup } from 'spec/jasmineSetup';
-import '../ko.myBinding';
+import { koSetup } from 'jest/koTestUtils';
+import './ko.myBinding';
 
 describe('ko.myBinding.js', () => {
   const setup = koSetup();

+ 4 - 4
docs/docs-site/content/developer/parsers/_index.md

@@ -135,7 +135,7 @@ In the hue folder run:
 
 After the -new argument you specify an existing dialect to clone first and then the name of the new parser.
 
-Once executed the tool has cloned the generic parser with tests and generated a new postgresql parsers. The jison files can be found under `desktop/core/src/desktop/js/parse/jison/sql/postgresql/` and the jasmine specs can be found in `desktop/core/src/desktop/js/parse/sql/postgresql/spec`.
+Once executed the tool has cloned the generic parser with tests and generated a new postgresql parsers. The jison files can be found under `desktop/core/src/desktop/js/parse/jison/sql/postgresql/` and the testscan be found in `desktop/core/src/desktop/js/parse/sql/postgresql/test`.
 
 To regenerate the parsers after changes to the jison files run:
 
@@ -149,7 +149,7 @@ This gives you an idea on how to add custom syntax to the newly generated postgr
 
     REINDEX { INDEX | TABLE | DATABASE | SYSTEM } name [ FORCE ]
 
-We’ll start by adding a test, in `postgresqlAutocompleteParserSpec.js` in the specs folder inside the main describe function before the first `it('should...`:
+We’ll start by adding a test, in `postgresqlAutocompleteParser.test.js` in the test folder inside the main describe function before the first `it('should...`:
 
     fdescribe('REINDEX', () => {
       it('should handle "REINDEX TABLE foo FORCE; |"', () => {
@@ -227,7 +227,7 @@ For the next one we’ll add some keyword suggestions after the user has typed R
 
 Again, run `node tools/jison/generateParsers.js postgresql` then `npm run test` and the tests should both be green.
 
-We also want the autocompleter to suggest the keyword REINDEX when the user hasn’t typed anything, to do that let’s first add the following test with the other new ones in `postgresqlAutocompleteParserSpec.js`:
+We also want the autocompleter to suggest the keyword REINDEX when the user hasn’t typed anything, to do that let’s first add the following test with the other new ones in `postgresqlAutocompleteParser.test.js`:
 
     it('should suggest REINDEX for "|"', () => {
       assertAutoComplete({
@@ -243,7 +243,7 @@ We also want the autocompleter to suggest the keyword REINDEX when the user hasn
 
 For this to pass we need to add REINDEX to the list of DDL and DML keywords in the file `sqlParseSupport.js` next to the generated parser (`desktop/core/src/desktop/js/parse/sql/postgresql/sqlParseSupport.js/`). Find the function `parser.suggestDdlAndDmlKeywords` and add ‘REINDEX’ to the keywords array. Now run `npm run test` and the three tests should pass.
 
-Before you continue further be sure to remove the ‘f’ from ‘fdescribe’ in the spec to allow all other jasmine tests to run. Note that in this case there will be two new failing tests where the keyword ‘REINDEX’ has to be added.
+Before you continue further be sure to remove the ‘f’ from ‘fdescribe’ in the spec to allow all other tests to run. Note that in this case there will be two new failing tests where the keyword ‘REINDEX’ has to be added.
 
 In order to use the newly generated parsers we have to add them to the webpack bundles:
 

+ 3 - 3
docs/gethue/content/posts/2019-07-19-build-your-own-autocompleter.md

@@ -158,7 +158,7 @@ In the hue folder run:
 
 After the -new argument you specify an existing dialect to clone first and then the name of the new parser.
 
-Once executed the tool has cloned the generic parser with tests and generated a new postgresql parsers. The jison files can be found under `desktop/core/src/desktop/js/parse/jison/sql/postgresql/` and the jasmine specs can be found in `desktop/core/src/desktop/js/parse/sql/postgresql/spec`
+Once executed the tool has cloned the generic parser with tests and generated a new postgresql parsers. The jison files can be found under `desktop/core/src/desktop/js/parse/jison/sql/postgresql/` and the tests can be found in `desktop/core/src/desktop/js/parse/sql/postgresql/test`
 
 To regenerate the parsers after changes to the jison files run:
 
@@ -172,7 +172,7 @@ This gives you an idea on how to add custom syntax to the newly generated postgr
 
 <pre class="brush: plain; title: ; notranslate" title="">REINDEX { INDEX | TABLE | DATABASE | SYSTEM } name [ FORCE ]</pre>
 
-We&#8217;ll start by adding a test, in `postgresqlAutocompleteParserSpec.js` in the specs folder inside the main describe function before the first &#8216;it(&#8220;should &#8230;&#8217;:
+We&#8217;ll start by adding a test, in `postgresqlAutocompleteParser.test.js` in the test folder inside the main describe function before the first &#8216;it(&#8220;should &#8230;&#8217;:
 
 <pre class="brush: jscript; title: ; notranslate" title="">fdescribe('REINDEX', () =&gt; {
     it('should handle "REINDEX TABLE foo FORCE; |"', () =&gt; {
@@ -271,7 +271,7 @@ We also want the autocompleter to suggest the keyword REINDEX when the user hasn
 
 For this to pass we need to add `REINDEX` to the list of DDL and DML keywords in the file `sqlParseSupport.js` next to the generated parser (`desktop/core/src/desktop/js/parse/sql/postgresql/sqlParseSupport.js/`). Find the function `parser.suggestDdlAndDmlKeywords` and add &#8216;REINDEX&#8217; to the keywords array. Now run `npm run test` and the three tests should pass.
 
-Before you continue further be sure to remove the &#8216;f&#8217; from &#8216;fdescribe&#8217; in the spec to allow all other jasmine tests to run. Note that in this case there will be two new failing tests where the keyword &#8216;REINDEX&#8217; has to be added.
+Before you continue further be sure to remove the &#8216;f&#8217; from &#8216;fdescribe&#8217; in the spec to allow all other tests to run. Note that in this case there will be two new failing tests where the keyword &#8216;REINDEX&#8217; has to be added.
 
 In order to use the newly generated parsers we have to add them to the webpack bundles:
 

+ 26 - 16
docs/sdk/sdk.md

@@ -650,7 +650,15 @@ and possibly fix any issues it might report.
 
 After changing the CSS in a .less file, rebuilding with:
 
-    make css
+    npm run less
+    
+Or run in watch mode that will generate the .css on any change to the .less files:
+
+    npm run less-dev
+
+After less changes make sure linting is run with:
+
+    npm run less-lint
 
 ### SQL Autocomplete
 
@@ -1180,7 +1188,7 @@ Or just some parts of the tests, e.g.:
     build/env/bin/hue test specific impala.tests:TestMockedImpala
     build/env/bin/hue test specific impala.tests:TestMockedImpala.test_basic_flow
 
-Jasmine tests:
+Jest tests:
 
     npm run test
 
@@ -1231,32 +1239,34 @@ Point to an Impalad and trigger the Impala tests:
     build/env/bin/hue test impala impalad-01.gethue.com
 
 
-### Create and run the Jasmine tests
+### Create and run the Jest tests
 
-Add them in a "spec" subfolder relative to the file under test and the filename of the test has to end with "Spec.js".
+Add them next to the file under test and the filename of the test has to end with ".test.js".
 
-    someFile.js              <- File under test
-    ├── spec/
-    │   ├── someFileSpec.js  <- File containing tests
+    someFile.js         <- File under test
+    someFile.test.js    <- File containing tests
 
 Run all the tests once with:
 
     npm run test
 
-Optionally to use Karma and headless chrome for the tests you can run
+To run the tests in watch mode:
 
-    npm run test-karma
+    npm run test-dev
 
-See ```desktop/core/src/desktop/js/spec/karma.config.js``` for various options
+While in watch mode Jest will detect changes to files and re-run related tests. There are
+also options to target specific files or tests. Press 'w' in the console to see the options.
 
 #### Testing KO components and bindings
 
-jasmineSetup provides utilities to test knockout components and bindings using jsdom.
+koSetup provides utilities to test knockout components and bindings using jsdom from jest.
 
 An example of component test:
 
 ```
-import { koSetup } from 'spec/jasmineSetup';
+import { koSetup } from 'jest/koTestUtils';
+
+import 'ko/someComponent';
 
 describe('ko.someComponent.js', () => {
   const setup = koSetup(); // Adds the necessary setup and teardown
@@ -1264,9 +1274,9 @@ describe('ko.someComponent.js', () => {
   it('should render component', async () => {
     const someParams = {}
 
-    const wrapper = await setup.renderComponent('someComponent', someParams);
+    const element = await setup.renderComponent('someComponent', someParams);
 
-    expect(wrapper.querySelector('[data-test="'some-test-id'"]')).toBeTruthy();
+    expect(element.innerHTML).toMatchSnapshot();
   });
 
   it('should change after observable update', async () => {
@@ -1286,8 +1296,8 @@ An example of a binding test:
 
 ```
 import ko from 'knockout';
-import { koSetup } from 'spec/jasmineSetup';
-import '../ko.myBinding';
+import { koSetup } from 'jest/koTestUtils';
+import './ko.myBinding';
 
 describe('ko.myBinding.js', () => {
   const setup = koSetup();