Skip to content

Commit

Permalink
feat(tasks): Add UI for background tasks
Browse files Browse the repository at this point in the history
  • Loading branch information
mrmeku authored and vsavkin committed Oct 15, 2018
1 parent 765e06e commit b4c3293
Show file tree
Hide file tree
Showing 55 changed files with 961 additions and 236 deletions.
25 changes: 13 additions & 12 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,19 @@ version: 2
jobs:
build:
docker:
- image: circleci/node:8.11.3-stretch-browsers
- image: circleci/node:8.11.3-stretch-browsers
working_directory: ~/repo

steps:
- checkout
- run: yarn install
- run: yarn start format.check
- run: yarn start lint
- run: yarn start server.compile
- run: yarn start test
- run: yarn start e2e.fixtures
- run:
command: yarn start e2e.run
environment:
CYPRESS_RECORD_KEY: b8ec9ad7-505f-48bb-9990-e8d5627bac26
- checkout
- run: yarn install
- run: yarn start format.check
- run: yarn start lint
- run: yarn start server.compile
- run: yarn start test
- run: yarn start e2e.fixtures
- run:
command: yarn start e2e.run
no_output_timeout: 20m
environment:
CYPRESS_RECORD_KEY: b8ec9ad7-505f-48bb-9990-e8d5627bac26
30 changes: 28 additions & 2 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,7 @@
"root": "apps/angular-console-e2e/",
"sourceRoot": "apps/angular-console-e2e/src",
"projectType": "application",
"architect": {
}
"architect": {}
},
"feature-install-node-js": {
"root": "libs/feature-install-node-js",
Expand Down Expand Up @@ -317,6 +316,25 @@
}
}
}
},
"feature-action-bar": {
"root": "libs/feature-action-bar",
"sourceRoot": "libs/feature-action-bar/src",
"projectType": "library",
"prefix": "angular-console",
"architect": {
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"libs/feature-action-bar/tsconfig.lib.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"cli": {
Expand All @@ -327,5 +345,13 @@
"packageManager": "yarn",
"defaultCollection": "@nrwl/schematics"
},
"schematics": {
"@nrwl/schematics:component": {
"styleext": "scss"
},
"@nrwl/schematics:library": {
"unitTestRunner": "jest"
}
},
"defaultProject": "angular-console"
}
12 changes: 11 additions & 1 deletion apps/angular-console-e2e/src/integration/extensions.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@ import {
tasks,
texts,
waitForActionToComplete,
waitForAnimation
waitForAnimation,
whitelistGraphql
} from './utils';
import { clearRecentTask } from './tasks.utils';

describe('Extensions', () => {
beforeEach(() => {
whitelistGraphql();
cy.visit('/workspaces');
openProject(projectPath('proj-extensions'));
goToExtensions();
Expand Down Expand Up @@ -57,8 +60,15 @@ describe('Extensions', () => {

// check that the schematics added by angular material are available
goToGenerate();
cy.wait(300); // Needed to de-flake this test
taskListHeaders($p => {
expect(texts($p)[0]).to.equal('@angular/material');
});
});

after(() => {
cy.visit('/workspaces');
openProject(projectPath('proj'));
clearRecentTask();
});
});
4 changes: 3 additions & 1 deletion apps/angular-console-e2e/src/integration/forms.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ import {
texts,
toggleBoolean,
uniqName,
waitForAutocomplete
waitForAutocomplete,
whitelistGraphql
} from './utils';

describe('Forms', () => {
beforeEach(() => {
whitelistGraphql();
cy.visit('/workspaces');
openProject(projectPath('proj'));
goToGenerate();
Expand Down
11 changes: 10 additions & 1 deletion apps/angular-console-e2e/src/integration/generate.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@ import {
taskListHeaders,
tasks,
texts,
uniqName
uniqName,
whitelistGraphql
} from './utils';
import { clearRecentTask } from './tasks.utils';

describe('Generate', () => {
beforeEach(() => {
whitelistGraphql();
cy.visit('/workspaces');
openProject(projectPath('proj'));
goToGenerate();
Expand Down Expand Up @@ -79,4 +82,10 @@ describe('Generate', () => {
expect(texts($p)[0]).to.equal('@schematics/angular');
});
});

after(() => {
cy.visit('/workspaces');
openProject(projectPath('proj'));
clearRecentTask();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ import {
projectNames,
projectPath,
taskListHeaders,
texts
texts,
whitelistGraphql
} from './utils';
import { toggleRecentTasksExpansion, clearAllRecentTasks } from './tasks.utils';

describe('Project without node modules', () => {
beforeEach(() => {
whitelistGraphql();
cy.visit('/workspaces');
openProject(projectPath('proj-no-node-modules'));
});
Expand Down
4 changes: 3 additions & 1 deletion apps/angular-console-e2e/src/integration/projects.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import {
projectNames,
projectPath,
texts,
waitForAnimation
waitForAnimation,
whitelistGraphql
} from './utils';

describe('Projects', () => {
beforeEach(() => {
whitelistGraphql();
cy.visit('/workspaces');
openProject(projectPath('proj'));
cy.get('div.title').contains('Projects');
Expand Down
43 changes: 40 additions & 3 deletions apps/angular-console-e2e/src/integration/tasks.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,21 @@ import {
taskListHeaders,
tasks,
texts,
waitForActionToComplete
waitForActionToComplete,
whitelistGraphql
} from './utils';
import {
checkMultipleRecentTasks,
checkSingleRecentTask,
CommandStatus,
toggleRecentTasksExpansion,
checkActionBarHidden,
clearAllRecentTasks
} from './tasks.utils';

describe('Tasks', () => {
beforeEach(() => {
whitelistGraphql();
cy.visit('/workspaces');
openProject(projectPath('proj'));
goToTasks();
Expand Down Expand Up @@ -76,6 +86,7 @@ describe('Tasks', () => {

waitForActionToComplete();
checkFileExists(`dist/proj/main.js`);
checkActionBarHidden();

goBack();

Expand All @@ -85,7 +96,12 @@ describe('Tasks', () => {
});
});

it('cancels a task when navigating away', () => {
it('show the recent tasks bar after navigating away', () => {
checkSingleRecentTask({
command: 'ng build proj',
status: CommandStatus.SUCCESSFUL
});

clickOnTask('proj', 'test');
cy.get('div.context-title').contains('ng test proj');

Expand All @@ -95,12 +111,33 @@ describe('Tasks', () => {
.contains('Run')
.click();

checkActionBarHidden();

cy.wait(100);

goBack();

cy.get('div.title').contains('Run Tasks');
checkMessage('Command has been canceled');

checkMultipleRecentTasks({
numTasks: 2,
isExpanded: false
});

toggleRecentTasksExpansion();

checkMultipleRecentTasks({
numTasks: 2,
isExpanded: true,
tasks: [
{ command: 'ng test proj', status: CommandStatus.IN_PROGRESS },
{ command: 'ng build proj', status: CommandStatus.SUCCESSFUL }
]
});

clearAllRecentTasks();

checkActionBarHidden();
});

it('runs an npm script', () => {
Expand Down
94 changes: 94 additions & 0 deletions apps/angular-console-e2e/src/integration/tasks.utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
interface Task {
command: string;
status: CommandStatus;
}

export enum CommandStatus {
SUCCESSFUL = 'successful',
FAILED = 'failed',
IN_PROGRESS = 'in-progress',
TERMINATED = 'terminated'
}

export function checkActionBarHidden() {
cy.get('angular-console-action-bar .action-bar').should($el => {
expect($el).to.have.css('height', '0px');
});

cy.get('angular-console-action-bar mat-list').should($el => {
expect($el).to.have.css('height', '0px');
});
}

export function checkSingleRecentTask(task: Task) {
cy.get('angular-console-action-bar mat-list-item').should(tasks => {
expect(tasks.length).to.equal(1);
expect(tasks).visible;

expect(
tasks
.find('.command')
.get(0)
.textContent.trim()
).to.equal(task.command);

expect(tasks.find(`.task-avatar.${task.status}`)).visible;
});
}

export function checkMultipleRecentTasks(options: {
tasks?: Task[];
isExpanded: boolean;
numTasks: number;
}) {
cy.get('angular-console-action-bar').should(actionBar => {
expect(
actionBar
.find('.num-tasks')
.text()
.trim()
).to.equal(`${options.numTasks} Tasks`);

if (!options.isExpanded) {
expect(actionBar.find('.remove-all-tasks-button').length).to.equal(0);
} else {
expect(actionBar.find('.remove-all-tasks-button').length).to.equal(1);
}

const taskElements = actionBar.get(0).querySelectorAll('mat-list-item');

expect(taskElements.length).to.equal(options.numTasks);
expect(taskElements).visible;

if (options.tasks) {
options.tasks.forEach((task, index) => {
const taskElement = taskElements[index];
expect(
taskElement.querySelector('.command').textContent.trim()
).to.equal(task.command);

expect(taskElement.querySelector(`.task-avatar.${task.status}`)).not.to
.be.null;
});
}
});
}

export function toggleRecentTasksExpansion() {
cy.get('angular-console-action-bar .action-bar').click({ force: true });
cy.wait(500);
}

export function clearAllRecentTasks() {
cy.get(
'angular-console-action-bar .action-bar .remove-all-tasks-button'
).click({ force: true });
cy.wait(500);
}

export function clearRecentTask() {
cy.get('angular-console-action-bar .remove-task-button').click({
force: true
});
cy.wait(500);
}
Loading

0 comments on commit b4c3293

Please sign in to comment.