Skip to content

Commit 8b84412

Browse files
AleksanderBodurriAleksanderBodurri
committed
refactor(devtools): run ng-dev format on angular devtools files
Formats the entire devtools directory with the ng-dev formatting tool. Previously we relied on prettier, so this commit also remove prettier from devtools' dependencies.
1 parent ac387e2 commit 8b84412

File tree

214 files changed

+2937
-3106
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

214 files changed

+2937
-3106
lines changed

‎.ng-dev/format.ts

-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export const format: FormatConfig = {
1212
'clang-format': {
1313
'matchers': [
1414
'**/*.{js,ts}',
15-
'!devtools/**',
1615
// TODO: burn down format failures and remove aio and integration exceptions.
1716
'!aio/**',
1817
'!integration/**',

‎devtools/cypress/integration/comment-nodes.e2e.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ describe('Comment nodes', () => {
1515

1616
it('should find comment nodes when the setting is enabled', () => {
1717
showComments();
18-
cy.get('.tree-wrapper').find('.tree-node:contains("#comment")').its('length').should('not.eq', 0);
18+
cy.get('.tree-wrapper')
19+
.find('.tree-node:contains("#comment")')
20+
.its('length')
21+
.should('not.eq', 0);
1922
});
2023
});

‎devtools/cypress/integration/item-tracking.e2e.js

+15-11
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,28 @@ describe('Tracking items from application to component tree', () => {
1010
getBody().find('app-todo').contains('Buy milk');
1111
});
1212

13-
cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').its('length').should('eq', 2);
13+
cy.get('.tree-wrapper')
14+
.find('.tree-node:contains("app-todo[TooltipDirective]")')
15+
.its('length')
16+
.should('eq', 2);
1417
});
1518

1619
it('should be able to detect a new todo from user and add it to the tree', () => {
1720
cy.enter('#sample-app')
18-
.then((getBody) => {
19-
getBody().find('input.new-todo').type('Buy cookies{enter}');
20-
})
21-
.then(() => {
22-
cy.enter('#sample-app').then((getBody) => {
23-
getBody().find('app-todo').contains('Buy milk');
21+
.then((getBody) => {
22+
getBody().find('input.new-todo').type('Buy cookies{enter}');
23+
})
24+
.then(() => {
25+
cy.enter('#sample-app').then((getBody) => {
26+
getBody().find('app-todo').contains('Buy milk');
2427

25-
getBody().find('app-todo').contains('Build something fun!');
28+
getBody().find('app-todo').contains('Build something fun!');
2629

27-
getBody().find('app-todo').contains('Buy cookies');
30+
getBody().find('app-todo').contains('Buy cookies');
31+
});
2832
});
29-
});
3033

31-
cy.get('.tree-wrapper .tree-node:contains("app-todo[TooltipDirective]")').should('have.length', 3);
34+
cy.get('.tree-wrapper .tree-node:contains("app-todo[TooltipDirective]")')
35+
.should('have.length', 3);
3236
});
3337
});

‎devtools/cypress/integration/node-search.e2e.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ function checkSearchedNodesLength(type, length) {
33
}
44

55
function inputSearchText(text) {
6-
cy.get('.filter-input').type(text, { force: true });
6+
cy.get('.filter-input').type(text, {force: true});
77
}
88

99
function checkComponentName(name) {
@@ -75,9 +75,9 @@ describe('Search items in component tree', () => {
7575
const amountOfBreadcrumbButtons = 4;
7676
const amountOfScrollButtons = 2;
7777
cy.get('ng-breadcrumbs')
78-
.find('button')
79-
.its('length')
80-
.should('eq', amountOfScrollButtons + amountOfBreadcrumbButtons);
78+
.find('button')
79+
.its('length')
80+
.should('eq', amountOfScrollButtons + amountOfBreadcrumbButtons);
8181

8282
// should display correct text in explorer panel
8383
checkComponentName('app-todos');
@@ -90,7 +90,7 @@ describe('Search items in component tree', () => {
9090
});
9191

9292
it('should focus search input when search icon is clicked', () => {
93-
cy.get('.filter label .search-icon').click({ force: true });
93+
cy.get('.filter label .search-icon').click({force: true});
9494
cy.get('.filter label input').should('have.focus');
9595
});
9696
});

‎devtools/cypress/integration/node-selection.e2e.js

+64-65
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ describe('node selection', () => {
99
it('should deselect node if it is no longer on the page', () => {
1010
cy.get('.tree-wrapper').get('.tree-node.selected').should('not.exist');
1111

12-
cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true });
12+
cy.get('.tree-wrapper')
13+
.find('.tree-node:contains("app-todo[TooltipDirective]")')
14+
.first()
15+
.click({force: true});
1316

1417
cy.get('.tree-wrapper').find('.tree-node.selected').its('length').should('eq', 1);
1518

@@ -27,7 +30,10 @@ describe('node selection', () => {
2730
getBody().find('input.new-todo').type('Buy cookies{enter}');
2831
});
2932

30-
cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').last().click({ force: true });
33+
cy.get('.tree-wrapper')
34+
.find('.tree-node:contains("app-todo[TooltipDirective]")')
35+
.last()
36+
.click({force: true});
3137

3238
cy.enter('#sample-app').then((getBody) => {
3339
getBody().find('app-todo:contains("Buy milk")').find('.destroy').click();
@@ -37,94 +43,87 @@ describe('node selection', () => {
3743
});
3844

3945
it('should select nodes with same name', () => {
40-
cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true });
46+
cy.get('.tree-wrapper')
47+
.find('.tree-node:contains("app-todo[TooltipDirective]")')
48+
.first()
49+
.click({force: true});
4150

42-
cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').last().click({ force: true });
51+
cy.get('.tree-wrapper')
52+
.find('.tree-node:contains("app-todo[TooltipDirective]")')
53+
.last()
54+
.click({force: true});
4355

4456
cy.get('ng-property-view').last().find('mat-tree-node:contains("todo")').click();
4557

4658
cy.get('ng-property-view')
47-
.last()
48-
.find('mat-tree-node:contains("Build something fun!")')
49-
.its('length')
50-
.should('eq', 1);
59+
.last()
60+
.find('mat-tree-node:contains("Build something fun!")')
61+
.its('length')
62+
.should('eq', 1);
5163
});
5264
});
5365

5466
describe('breadcrumb logic', () => {
5567
it('should overflow when breadcrumb list is long enough', () => {
5668
cy.get('.tree-wrapper')
57-
.find('.tree-node:contains("div[TooltipDirective]")')
58-
.last()
59-
.click({ force: true })
60-
.then(() => {
61-
cy.get('ng-breadcrumbs')
62-
.find('.breadcrumbs')
63-
.then((breadcrumbsContainer) => {
64-
const hasOverflowX = () => breadcrumbsContainer[0].scrollWidth > breadcrumbsContainer[0].clientWidth;
69+
.find('.tree-node:contains("div[TooltipDirective]")')
70+
.last()
71+
.click({force: true})
72+
.then(() => {
73+
cy.get('ng-breadcrumbs').find('.breadcrumbs').then((breadcrumbsContainer) => {
74+
const hasOverflowX = () =>
75+
breadcrumbsContainer[0].scrollWidth > breadcrumbsContainer[0].clientWidth;
6576
expect(hasOverflowX()).to.be.true;
6677
});
67-
});
78+
});
6879
});
6980

7081
it('should scroll right when right scroll button is clicked', () => {
7182
cy.get('.tree-wrapper')
72-
.find('.tree-node:contains("div[TooltipDirective]")')
73-
.last()
74-
.click({ force: true })
75-
.then(() => {
76-
cy.get('ng-breadcrumbs')
77-
.find('.breadcrumbs')
78-
.then((el) => {
79-
el[0].style.scrollBehavior = 'auto';
80-
})
81-
.then((breadcrumbsContainer) => {
82-
const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
83-
expect(scrollLeft()).to.eql(0);
84-
85-
cy.get('ng-breadcrumbs')
86-
.find('.scroll-button')
87-
.last()
88-
.click()
89-
.then(() => {
90-
expect(scrollLeft()).to.be.greaterThan(0);
83+
.find('.tree-node:contains("div[TooltipDirective]")')
84+
.last()
85+
.click({force: true})
86+
.then(() => {
87+
cy.get('ng-breadcrumbs')
88+
.find('.breadcrumbs')
89+
.then((el) => {
90+
el[0].style.scrollBehavior = 'auto';
91+
})
92+
.then((breadcrumbsContainer) => {
93+
const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
94+
expect(scrollLeft()).to.eql(0);
95+
96+
cy.get('ng-breadcrumbs').find('.scroll-button').last().click().then(() => {
97+
expect(scrollLeft()).to.be.greaterThan(0);
98+
});
9199
});
92-
});
93-
});
100+
});
94101
});
95102

96103
it('should scroll left when left scroll button is clicked', () => {
97104
cy.get('.tree-wrapper')
98-
.find('.tree-node:contains("div[TooltipDirective]")')
99-
.last()
100-
.click({ force: true })
101-
.then(() => {
102-
cy.get('ng-breadcrumbs')
103-
.find('.breadcrumbs')
104-
.then((el) => {
105-
el[0].style.scrollBehavior = 'auto';
106-
})
107-
.then((breadcrumbsContainer) => {
108-
const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
109-
expect(scrollLeft()).to.eql(0);
110-
111-
cy.get('ng-breadcrumbs')
112-
.find('.scroll-button')
113-
.last()
114-
.click()
115-
.then(() => {
116-
expect(scrollLeft()).to.be.greaterThan(0);
117-
118-
cy.get('ng-breadcrumbs')
119-
.find('.scroll-button')
120-
.first()
121-
.click()
122-
.then(() => {
105+
.find('.tree-node:contains("div[TooltipDirective]")')
106+
.last()
107+
.click({force: true})
108+
.then(() => {
109+
cy.get('ng-breadcrumbs')
110+
.find('.breadcrumbs')
111+
.then((el) => {
112+
el[0].style.scrollBehavior = 'auto';
113+
})
114+
.then((breadcrumbsContainer) => {
115+
const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
116+
expect(scrollLeft()).to.eql(0);
117+
118+
cy.get('ng-breadcrumbs').find('.scroll-button').last().click().then(() => {
119+
expect(scrollLeft()).to.be.greaterThan(0);
120+
121+
cy.get('ng-breadcrumbs').find('.scroll-button').first().click().then(() => {
123122
expect(scrollLeft()).to.eql(0);
124123
});
124+
});
125125
});
126-
});
127-
});
126+
});
128127
});
129128
});
130129
});

‎devtools/cypress/integration/property-edit.e2e.js

+28-23
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ describe('edit properties of directive in the property view tab', () => {
88
describe('edit app-todo component', () => {
99
beforeEach(() => {
1010
// select todo node in component tree
11-
cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true });
11+
cy.get('.tree-wrapper')
12+
.find('.tree-node:contains("app-todo[TooltipDirective]")')
13+
.first()
14+
.click({force: true});
1215
});
1316

1417
it('should be able to enable editMode', () => {
@@ -17,13 +20,13 @@ describe('edit properties of directive in the property view tab', () => {
1720
});
1821

1922
cy.get('.explorer-panel:contains("app-todo")')
20-
.find('ng-property-view mat-tree-node:contains("editMode")')
21-
.find('ng-property-editor .editor')
22-
.click({ force: true })
23-
.find('.editor-input')
24-
.clear()
25-
.type('true')
26-
.type('{enter}');
23+
.find('ng-property-view mat-tree-node:contains("editMode")')
24+
.find('ng-property-editor .editor')
25+
.click({force: true})
26+
.find('.editor-input')
27+
.clear()
28+
.type('true')
29+
.type('{enter}');
2730

2831
cy.enter('#sample-app').then((getBody) => {
2932
getBody().find('app-todo input.edit').should('be.visible');
@@ -33,7 +36,9 @@ describe('edit properties of directive in the property view tab', () => {
3336
describe('edit todo property', () => {
3437
beforeEach(() => {
3538
// expand todo state
36-
cy.get('.explorer-panel:contains("app-todo")').find('ng-property-view mat-tree-node:contains("todo")').click();
39+
cy.get('.explorer-panel:contains("app-todo")')
40+
.find('ng-property-view mat-tree-node:contains("todo")')
41+
.click();
3742
});
3843

3944
it('should change todo label in app when edited', () => {
@@ -44,13 +49,13 @@ describe('edit properties of directive in the property view tab', () => {
4449

4550
// find label variable and run through edit logic
4651
cy.get('.explorer-panel:contains("app-todo")')
47-
.find('ng-property-view mat-tree-node:contains("label")')
48-
.find('ng-property-editor .editor')
49-
.click()
50-
.find('.editor-input')
51-
.clear()
52-
.type('Buy cookies')
53-
.type('{enter}');
52+
.find('ng-property-view mat-tree-node:contains("label")')
53+
.find('ng-property-editor .editor')
54+
.click()
55+
.find('.editor-input')
56+
.clear()
57+
.type('Buy cookies')
58+
.type('{enter}');
5459

5560
// assert that the page has been updated
5661
cy.enter('#sample-app').then((getBody) => {
@@ -66,13 +71,13 @@ describe('edit properties of directive in the property view tab', () => {
6671

6772
// find completed variable and run through edit logic
6873
cy.get('.explorer-panel:contains("app-todo")')
69-
.find('ng-property-view mat-tree-node:contains("completed")')
70-
.find('ng-property-editor .editor')
71-
.click()
72-
.find('.editor-input')
73-
.clear()
74-
.type('true')
75-
.type('{enter}');
74+
.find('ng-property-view mat-tree-node:contains("completed")')
75+
.find('ng-property-editor .editor')
76+
.click()
77+
.find('.editor-input')
78+
.clear()
79+
.type('true')
80+
.type('{enter}');
7681

7782
// assert that the page has been updated
7883
cy.enter('#sample-app').then((getBody) => {

‎devtools/cypress/integration/property-update.e2e.js

+11-7
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,21 @@ describe('change of the state should reflect in property update', () => {
1212
});
1313

1414
// Select the todo item
15-
cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true });
15+
cy.get('.tree-wrapper')
16+
.find('.tree-node:contains("app-todo[TooltipDirective]")')
17+
.first()
18+
.click({force: true});
1619

1720
// Expand the todo in the property explorer
18-
cy.get('.explorer-panel:contains("app-todo")').find('ng-property-view mat-tree-node:contains("todo")').click();
21+
cy.get('.explorer-panel:contains("app-todo")')
22+
.find('ng-property-view mat-tree-node:contains("todo")')
23+
.click();
1924

2025
// Verify its value is now completed
2126
cy.contains(
22-
'.explorer-panel:contains("app-todo") ' +
23-
'ng-property-view mat-tree-node:contains("completed") ' +
24-
'ng-property-editor .editor',
25-
'true'
26-
);
27+
'.explorer-panel:contains("app-todo") ' +
28+
'ng-property-view mat-tree-node:contains("completed") ' +
29+
'ng-property-editor .editor',
30+
'true');
2731
});
2832
});

0 commit comments

Comments
 (0)