From d7ca263cc450ed50d893630f106dc9b63a8a765f Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Mon, 15 Jul 2019 15:10:31 +0300 Subject: [PATCH] test(docs-infra): run tests in random order (and make them pass) (#31527) This commit updates the necessary config files to run the angular.io and docs tooling unit tests in random order (and fixes the tests that were failing due to their dependence on the previous ordered execution). Besides being a good idea anyway, running tests in random order is the new [default behavior in jasmine@3.0.0][1], so this commit is in preparation of upgrading jasmine to the latest version. [1]: https://github.com/jasmine/jasmine/blob/v3.0.0/release_notes/3.0.md#breaking-changes PR Close #31527 --- aio/karma.conf.js | 27 ++- aio/src/app/app.component.spec.ts | 5 + .../code/code-example.component.spec.ts | 3 + .../code/code-tabs.component.spec.ts | 3 + .../code/code.component.spec.ts | 99 +++++---- aio/src/testing/pretty-printer.service.ts | 13 ++ .../processors/convertToJson.spec.js | 4 +- .../processors/render-examples.spec.js | 3 +- .../services/region-parser.js | 188 +++++++++--------- aio/tools/transforms/test.js | 2 +- 10 files changed, 192 insertions(+), 155 deletions(-) create mode 100644 aio/src/testing/pretty-printer.service.ts diff --git a/aio/karma.conf.js b/aio/karma.conf.js index e580e5bfdd1..f6832bf81ae 100644 --- a/aio/karma.conf.js +++ b/aio/karma.conf.js @@ -10,17 +10,22 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), + {'reporter:jasmine-seed': ['type', JasmineSeedReporter]}, ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser + jasmine: { + random: true, + seed: '', + }, }, coverageIstanbulReporter: { dir: require('path').join(__dirname, './coverage/site'), reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true + fixWebpackSourcePaths: true, }, - reporters: ['progress', 'kjhtml'], + reporters: ['progress', 'kjhtml', 'jasmine-seed'], port: 9876, colors: true, logLevel: config.LOG_INFO, @@ -28,6 +33,18 @@ module.exports = function (config) { browsers: ['Chrome'], browserNoActivityTimeout: 60000, singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; + +// Helpers +function JasmineSeedReporter(baseReporterDecorator) { + baseReporterDecorator(this); + + this.onBrowserComplete = (browser, result) => { + const seed = result.order && result.order.random && result.order.seed; + if (seed) this.write(`${browser}: Randomized with seed ${seed}.\n`); + }; + + this.onRunComplete = () => undefined; +} diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index 00f44c74767..54b069ba84b 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -630,6 +630,11 @@ describe('AppComponent', () => { }; + beforeEach(() => { + tocContainer = null; + toc = null; + }); + it('should show/hide `` based on `hasFloatingToc`', () => { expect(tocContainer).toBeFalsy(); expect(toc).toBeFalsy(); diff --git a/aio/src/app/custom-elements/code/code-example.component.spec.ts b/aio/src/app/custom-elements/code/code-example.component.spec.ts index 54431dad806..1183e623ded 100644 --- a/aio/src/app/custom-elements/code/code-example.component.spec.ts +++ b/aio/src/app/custom-elements/code/code-example.component.spec.ts @@ -5,6 +5,8 @@ import { CodeExampleComponent } from './code-example.component'; import { CodeExampleModule } from './code-example.module'; import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; +import { MockPrettyPrinter } from 'testing/pretty-printer.service'; +import { PrettyPrinter } from './pretty-printer.service'; describe('CodeExampleComponent', () => { let hostComponent: HostComponent; @@ -19,6 +21,7 @@ describe('CodeExampleComponent', () => { ], providers: [ { provide: Logger, useClass: MockLogger }, + { provide: PrettyPrinter, useClass: MockPrettyPrinter }, ] }); diff --git a/aio/src/app/custom-elements/code/code-tabs.component.spec.ts b/aio/src/app/custom-elements/code/code-tabs.component.spec.ts index a7be5e8f4c0..b922219a10f 100644 --- a/aio/src/app/custom-elements/code/code-tabs.component.spec.ts +++ b/aio/src/app/custom-elements/code/code-tabs.component.spec.ts @@ -2,10 +2,12 @@ import { Component, ViewChild, NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; +import { MockPrettyPrinter } from 'testing/pretty-printer.service'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { CodeTabsComponent } from './code-tabs.component'; import { CodeTabsModule } from './code-tabs.module'; +import { PrettyPrinter } from './pretty-printer.service'; describe('CodeTabsComponent', () => { let fixture: ComponentFixture; @@ -19,6 +21,7 @@ describe('CodeTabsComponent', () => { schemas: [ NO_ERRORS_SCHEMA ], providers: [ { provide: Logger, useClass: MockLogger }, + { provide: PrettyPrinter, useClass: MockPrettyPrinter }, ] }); diff --git a/aio/src/app/custom-elements/code/code.component.spec.ts b/aio/src/app/custom-elements/code/code.component.spec.ts index 320542fbe02..1e9937169af 100644 --- a/aio/src/app/custom-elements/code/code.component.spec.ts +++ b/aio/src/app/custom-elements/code/code.component.spec.ts @@ -1,114 +1,104 @@ import { Component, ViewChild, AfterViewInit } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { MatSnackBar } from '@angular/material/snack-bar'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { first } from 'rxjs/operators'; import { CodeComponent } from './code.component'; import { CodeModule } from './code.module'; import { CopierService } from 'app/shared//copier.service'; import { Logger } from 'app/shared/logger.service'; +import { MockPrettyPrinter } from 'testing/pretty-printer.service'; import { PrettyPrinter } from './pretty-printer.service'; const oneLineCode = 'const foo = "bar";'; -const smallMultiLineCode = ` -<hero-details> +const smallMultiLineCode = +`<hero-details> <h2>Bah Dah Bing</h2> <hero-team> <h3>NYC Team</h3> </hero-team> </hero-details>`; -const bigMultiLineCode = smallMultiLineCode + smallMultiLineCode + smallMultiLineCode; +const bigMultiLineCode = `${smallMultiLineCode}\n${smallMultiLineCode}\n${smallMultiLineCode}`; describe('CodeComponent', () => { let hostComponent: HostComponent; let fixture: ComponentFixture; - // WARNING: Chance of cross-test pollution - // CodeComponent injects PrettyPrintService - // Once PrettyPrintService runs once _anywhere_, its ctor loads `prettify.js` - // which sets `window['prettyPrintOne']` - // That global survives these tests unless - // we take strict measures to wipe it out in the `afterAll` - // and make sure THAT runs after the tests by making component creation async - afterAll(() => { - delete (window as any)['prettyPrint']; - delete (window as any)['prettyPrintOne']; - }); - beforeEach(() => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, CodeModule ], declarations: [ HostComponent ], providers: [ - PrettyPrinter, CopierService, - {provide: Logger, useClass: TestLogger } + { provide: Logger, useClass: TestLogger }, + { provide: PrettyPrinter, useClass: MockPrettyPrinter }, ] - }).compileComponents(); - }); + }); - // Must be async because - // CodeComponent creates PrettyPrintService which async loads `prettify.js`. - // If not async, `afterAll` finishes before tests do! - beforeEach(async(() => { fixture = TestBed.createComponent(HostComponent); hostComponent = fixture.componentInstance; fixture.detectChanges(); - })); + }); describe('pretty printing', () => { - const untilCodeFormatted = () => { - const emitter = hostComponent.codeComponent.codeFormatted; - return emitter.pipe(first()).toPromise(); - }; - const hasLineNumbers = async () => { - // presence of `
  • `s are a tell-tale for line numbers - await untilCodeFormatted(); - return 0 < fixture.nativeElement.querySelectorAll('li').length; - }; + const getFormattedCode = () => fixture.nativeElement.querySelector('code').innerHTML; - it('should format a one-line code sample', async () => { + it('should format a one-line code sample without linenums by default', () => { hostComponent.setCode(oneLineCode); - await untilCodeFormatted(); - - // 'pln' spans are a tell-tale for syntax highlighting - const spans = fixture.nativeElement.querySelectorAll('span.pln'); - expect(spans.length).toBeGreaterThan(0, 'formatted spans'); + expect(getFormattedCode()).toBe( + `Formatted code (language: auto, linenums: false): ${oneLineCode}`); }); - it('should format a one-line code sample without linenums by default', async () => { + it('should add line numbers to one-line code sample when linenums is `true`', () => { hostComponent.setCode(oneLineCode); - expect(await hasLineNumbers()).toBe(false); + hostComponent.linenums = true; + fixture.detectChanges(); + + expect(getFormattedCode()).toBe( + `Formatted code (language: auto, linenums: true): ${oneLineCode}`); }); - it('should add line numbers to one-line code sample when linenums set true', async () => { + it('should add line numbers to one-line code sample when linenums is `\'true\'`', () => { + hostComponent.setCode(oneLineCode); hostComponent.linenums = 'true'; fixture.detectChanges(); - expect(await hasLineNumbers()).toBe(true); + expect(getFormattedCode()).toBe( + `Formatted code (language: auto, linenums: true): ${oneLineCode}`); }); it('should format a small multi-line code without linenums by default', async () => { hostComponent.setCode(smallMultiLineCode); - expect(await hasLineNumbers()).toBe(false); + expect(getFormattedCode()).toBe( + `Formatted code (language: auto, linenums: false): ${smallMultiLineCode}`); }); it('should add line numbers to a big multi-line code by default', async () => { hostComponent.setCode(bigMultiLineCode); - expect(await hasLineNumbers()).toBe(true); + expect(getFormattedCode()).toBe( + `Formatted code (language: auto, linenums: true): ${bigMultiLineCode}`); }); - it('should format big multi-line code without linenums when linenums set false', async () => { + it('should format big multi-line code without linenums when linenums is `false`', async () => { + hostComponent.setCode(bigMultiLineCode); hostComponent.linenums = false; fixture.detectChanges(); + expect(getFormattedCode()).toBe( + `Formatted code (language: auto, linenums: false): ${bigMultiLineCode}`); + }); + + it('should format big multi-line code without linenums when linenums is `\'false\'`', async () => { hostComponent.setCode(bigMultiLineCode); - expect(await hasLineNumbers()).toBe(false); + hostComponent.linenums = 'false'; + fixture.detectChanges(); + + expect(getFormattedCode()).toBe( + `Formatted code (language: auto, linenums: false): ${bigMultiLineCode}`); }); }); @@ -117,9 +107,16 @@ describe('CodeComponent', () => { hostComponent.linenums = false; fixture.detectChanges(); - hostComponent.setCode(' abc\n let x = text.split(\'\\n\');\n ghi\n\n jkl\n'); + hostComponent.setCode(` + abc + let x = text.split('\\n'); + ghi + + jkl + `); const codeContent = fixture.nativeElement.querySelector('code').textContent; - expect(codeContent).toEqual('abc\n let x = text.split(\'\\n\');\nghi\n\njkl'); + expect(codeContent).toEqual( + 'Formatted code (language: auto, linenums: false): abc\n let x = text.split(\'\\n\');\nghi\n\njkl'); }); it('should trim whitespace from the code before rendering', () => { diff --git a/aio/src/testing/pretty-printer.service.ts b/aio/src/testing/pretty-printer.service.ts new file mode 100644 index 00000000000..20179f46c4a --- /dev/null +++ b/aio/src/testing/pretty-printer.service.ts @@ -0,0 +1,13 @@ +// The actual `PrettyPrinter` service has to load `prettify.js`, which (a) is slow and (b) pollutes +// the global `window` object (which in turn may affect other tests). +// This is a mock implementation that does not load `prettify.js` and does not pollute the global +// scope. + +import { of } from 'rxjs'; + +export class MockPrettyPrinter { + formatCode(code: string, language?: string, linenums?: number | boolean) { + const linenumsStr = (linenums === undefined) ? '' : `, linenums: ${linenums}`; + return of(`Formatted code (language: ${language || 'auto'}${linenumsStr}): ${code}`); + } +} diff --git a/aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js b/aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js index b68f1527de0..7fe623aaca0 100644 --- a/aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js +++ b/aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js @@ -4,7 +4,7 @@ var Dgeni = require('dgeni'); describe('convertToJson processor', () => { var dgeni, injector, processor, log; - beforeAll(function() { + beforeEach(function() { dgeni = new Dgeni([testPackage('angular-base-package')]); injector = dgeni.configureInjector(); processor = injector.get('convertToJsonProcessor'); @@ -72,4 +72,4 @@ describe('convertToJson processor', () => { processor.$process(docs); expect(log.warn).toHaveBeenCalledWith('Title property expected - doc (test-doc) '); }); -}); \ No newline at end of file +}); diff --git a/aio/tools/transforms/examples-package/processors/render-examples.spec.js b/aio/tools/transforms/examples-package/processors/render-examples.spec.js index baab8e33431..e72b5156002 100644 --- a/aio/tools/transforms/examples-package/processors/render-examples.spec.js +++ b/aio/tools/transforms/examples-package/processors/render-examples.spec.js @@ -2,13 +2,12 @@ var testPackage = require('../../helpers/test-package'); var Dgeni = require('dgeni'); describe('renderExamples processor', () => { - var injector, processor, exampleMap, collectExamples, log; + var injector, processor, collectExamples, exampleMap, log; beforeEach(function() { const dgeni = new Dgeni([testPackage('examples-package', true)]); injector = dgeni.configureInjector(); - exampleMap = injector.get('exampleMap'); processor = injector.get('renderExamples'); collectExamples = injector.get('collectExamples'); exampleMap = injector.get('exampleMap'); diff --git a/aio/tools/transforms/examples-package/services/region-parser.js b/aio/tools/transforms/examples-package/services/region-parser.js index cf6be977a88..e4c1f365ddb 100644 --- a/aio/tools/transforms/examples-package/services/region-parser.js +++ b/aio/tools/transforms/examples-package/services/region-parser.js @@ -7,113 +7,113 @@ const DEFAULT_PLASTER = '. . .'; const {mapObject} = require('../../helpers/utils'); module.exports = function regionParser() { + regionParserImpl.regionMatchers = { + ts: inlineC, + js: inlineC, + es6: inlineC, + dart: inlineC, + html: html, + svg: html, + css: blockC, + yaml: inlineHash, + yml: inlineHash, + jade: inlineCOnly, + pug: inlineCOnly, + json: inlineC, + 'json.annotated': inlineC + }; + return regionParserImpl; -}; -regionParserImpl.regionMatchers = { - ts: inlineC, - js: inlineC, - es6: inlineC, - dart: inlineC, - html: html, - svg: html, - css: blockC, - yaml: inlineHash, - yml: inlineHash, - jade: inlineCOnly, - pug: inlineCOnly, - json: inlineC, - 'json.annotated': inlineC -}; + /** + * @param contents string + * @param fileType string + * @returns {contents: string, regions: {[regionName: string]: string}} + */ + function regionParserImpl(contents, fileType) { + const regionMatcher = regionParserImpl.regionMatchers[fileType]; + const openRegions = []; + const regionMap = {}; -/** - * @param contents string - * @param fileType string - * @returns {contents: string, regions: {[regionName: string]: string}} - */ -function regionParserImpl(contents, fileType) { - const regionMatcher = regionParserImpl.regionMatchers[fileType]; - const openRegions = []; - const regionMap = {}; + if (regionMatcher) { + let plaster = regionMatcher.createPlasterComment(DEFAULT_PLASTER); + const lines = contents.split(/\r?\n/).filter((line, index) => { + const startRegion = line.match(regionMatcher.regionStartMatcher); + const endRegion = line.match(regionMatcher.regionEndMatcher); + const updatePlaster = line.match(regionMatcher.plasterMatcher); - if (regionMatcher) { - let plaster = regionMatcher.createPlasterComment(DEFAULT_PLASTER); - const lines = contents.split(/\r?\n/).filter((line, index) => { - const startRegion = line.match(regionMatcher.regionStartMatcher); - const endRegion = line.match(regionMatcher.regionEndMatcher); - const updatePlaster = line.match(regionMatcher.plasterMatcher); + // start region processing + if (startRegion) { + // open up the specified region + const regionNames = getRegionNames(startRegion[1]); + if (regionNames.length === 0) { + regionNames.push(''); + } + regionNames.forEach(regionName => { + const region = regionMap[regionName]; + if (region) { + if (region.open) { + throw new RegionParserError( + `Tried to open a region, named "${regionName}", that is already open`, index); + } + region.open = true; + if (plaster) { + region.lines.push(plaster); + } + } else { + regionMap[regionName] = {lines: [], open: true}; + } + openRegions.push(regionName); + }); - // start region processing - if (startRegion) { - // open up the specified region - const regionNames = getRegionNames(startRegion[1]); - if (regionNames.length === 0) { - regionNames.push(''); - } - regionNames.forEach(regionName => { - const region = regionMap[regionName]; - if (region) { - if (region.open) { + // end region processing + } else if (endRegion) { + if (openRegions.length === 0) { + throw new RegionParserError('Tried to close a region when none are open', index); + } + // close down the specified region (or most recent if no name is given) + const regionNames = getRegionNames(endRegion[1]); + if (regionNames.length === 0) { + regionNames.push(openRegions[openRegions.length - 1]); + } + + regionNames.forEach(regionName => { + const region = regionMap[regionName]; + if (!region || !region.open) { throw new RegionParserError( - `Tried to open a region, named "${regionName}", that is already open`, index); + `Tried to close a region, named "${regionName}", that is not open`, index); } - region.open = true; - if (plaster) { - region.lines.push(plaster); - } - } else { - regionMap[regionName] = {lines: [], open: true}; - } - openRegions.push(regionName); - }); + region.open = false; + removeLast(openRegions, regionName); + }); - // end region processing - } else if (endRegion) { - if (openRegions.length === 0) { - throw new RegionParserError('Tried to close a region when none are open', index); - } - // close down the specified region (or most recent if no name is given) - const regionNames = getRegionNames(endRegion[1]); - if (regionNames.length === 0) { - regionNames.push(openRegions[openRegions.length - 1]); + // doc plaster processing + } else if (updatePlaster) { + const plasterString = updatePlaster[1].trim(); + plaster = plasterString ? regionMatcher.createPlasterComment(plasterString) : ''; + + // simple line of content processing + } else { + openRegions.forEach(regionName => regionMap[regionName].lines.push(line)); + // do not filter out this line from the content + return true; } - regionNames.forEach(regionName => { - const region = regionMap[regionName]; - if (!region || !region.open) { - throw new RegionParserError( - `Tried to close a region, named "${regionName}", that is not open`, index); - } - region.open = false; - removeLast(openRegions, regionName); - }); - - // doc plaster processing - } else if (updatePlaster) { - const plasterString = updatePlaster[1].trim(); - plaster = plasterString ? regionMatcher.createPlasterComment(plasterString) : ''; - - // simple line of content processing - } else { - openRegions.forEach(regionName => regionMap[regionName].lines.push(line)); - // do not filter out this line from the content - return true; + // this line contained an annotation so let's filter it out + return false; + }); + if (!regionMap['']) { + regionMap[''] = {lines}; } - - // this line contained an annotation so let's filter it out - return false; - }); - if (!regionMap['']) { - regionMap[''] = {lines}; + return { + contents: lines.join('\n'), + regions: mapObject(regionMap, (regionName, region) => leftAlign(region.lines).join('\n')) + }; + } else { + return {contents, regions: {}}; } - return { - contents: lines.join('\n'), - regions: mapObject(regionMap, (regionName, region) => leftAlign(region.lines).join('\n')) - }; - } else { - return {contents, regions: {}}; } -} +}; function getRegionNames(input) { return (input.trim() === '') ? [] : input.split(',').map(name => name.trim()); diff --git a/aio/tools/transforms/test.js b/aio/tools/transforms/test.js index 48967ddd459..b8d36714613 100644 --- a/aio/tools/transforms/test.js +++ b/aio/tools/transforms/test.js @@ -13,5 +13,5 @@ const Jasmine = require('jasmine'); const jasmine = new Jasmine({ projectBaseDir: __dirname }); -jasmine.loadConfig({ spec_files: ['**/*.spec.js'] }); +jasmine.loadConfig({ random: true, spec_files: ['**/*.spec.js'] }); jasmine.execute();