Skip to content
This repository was archived by the owner on Apr 4, 2023. It is now read-only.

Commit 6534510

Browse files
jasonwilliamsjasonwilliams
committed
- Update target output for TS
 - Add keyframes test for completions - Prettier
1 parent 33db1b7 commit 6534510

File tree

2 files changed

+47
-59
lines changed

2 files changed

+47
-59
lines changed

‎e2e/project-fixture/tsconfig.json

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
{
2-
"compilerOptions": {
3-
"target": "es2015",
4-
"module": "commonjs",
5-
"plugins": [
6-
{ "name": "typescript-styled-plugin", "tags": ["css"] }
7-
]
8-
}
2+
"compilerOptions": {
3+
"target": "es2019",
4+
"module": "commonjs",
5+
"plugins": [{ "name": "typescript-styled-plugin", "tags": ["css", "keyframes"] }]
6+
}
97
}

‎e2e/tests/completions.js

+42-52
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const createServerWithMockFile = (fileContents) => {
99
const server = createServer();
1010
openMockFile(server, mockFileName, fileContents);
1111
return server;
12-
}
12+
};
1313

1414
describe('Completions', () => {
1515
it('should return property value completions for single line string', () => {
@@ -20,8 +20,8 @@ describe('Completions', () => {
2020
const completionsResponse = getFirstResponseOfType('completions', server);
2121
assert.isTrue(completionsResponse.success);
2222
assert.strictEqual(completionsResponse.body.length, 157);
23-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
24-
assert.isTrue(completionsResponse.body.some(item => item.name === 'rgba'));
23+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
24+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'rgba'));
2525
});
2626
});
2727

@@ -32,23 +32,19 @@ describe('Completions', () => {
3232
return server.close().then(() => {
3333
const completionsResponse = getFirstResponseOfType('completions', server);
3434
assert.isTrue(completionsResponse.success);
35-
assert.isFalse(completionsResponse.body.some(item => item.name === 'darken'));
35+
assert.isFalse(completionsResponse.body.some((item) => item.name === 'darken'));
3636
});
3737
});
3838

3939
it('should return property value completions for multiline string', () => {
40-
const server = createServerWithMockFile([
41-
'const q = css`',
42-
'color:',
43-
'`'
44-
].join('\n'));
40+
const server = createServerWithMockFile(['const q = css`', 'color:', '`'].join('\n'));
4541
server.sendCommand('completions', { file: mockFileName, offset: 22, line: 1 });
4642

4743
return server.close().then(() => {
4844
const completionsResponse = getFirstResponseOfType('completions', server);
4945
assert.isTrue(completionsResponse.success);
5046
assert.strictEqual(completionsResponse.body.length, 157);
51-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
47+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
5248
});
5349
});
5450

@@ -60,7 +56,7 @@ describe('Completions', () => {
6056
const completionsResponse = getFirstResponseOfType('completions', server);
6157
assert.isTrue(completionsResponse.success);
6258
assert.strictEqual(completionsResponse.body.length, 157);
63-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
59+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
6460
});
6561
});
6662

@@ -83,7 +79,7 @@ describe('Completions', () => {
8379
const completionsResponse = getFirstResponseOfType('completions', server);
8480
assert.isTrue(completionsResponse.success);
8581
assert.strictEqual(completionsResponse.body.length, 157);
86-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
82+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
8783
});
8884
});
8985

@@ -95,19 +91,19 @@ describe('Completions', () => {
9591
const completionsResponse = getFirstResponseOfType('completions', server);
9692
assert.isTrue(completionsResponse.success);
9793
assert.strictEqual(completionsResponse.body.length, 157);
98-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
94+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
9995
});
10096
});
10197

10298
it('should return completions between were placeholders are used as properties', () => {
103-
const server = createServerWithMockFile('css`boarder: 1px solid ${"red"}; color: ; margin: ${20}; `')
99+
const server = createServerWithMockFile('css`boarder: 1px solid ${"red"}; color: ; margin: ${20}; `');
104100
server.sendCommand('completions', { file: mockFileName, offset: 40, line: 1 });
105101

106102
return server.close().then(() => {
107103
const completionsResponse = getFirstResponseOfType('completions', server);
108104
assert.isTrue(completionsResponse.success);
109105
assert.strictEqual(completionsResponse.body.length, 157);
110-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
106+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
111107
});
112108
});
113109

@@ -119,18 +115,18 @@ describe('Completions', () => {
119115
const completionsResponse = getFirstResponseOfType('completions', server);
120116
assert.isTrue(completionsResponse.success);
121117
assert.strictEqual(completionsResponse.body.length, 157);
122-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
118+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
123119
});
124120
});
125121

126122
it('should return js completions inside placeholder', () => {
127-
const server = createServerWithMockFile('const abc = 123; css`color: ${};`')
123+
const server = createServerWithMockFile('const abc = 123; css`color: ${};`');
128124
server.sendCommand('completions', { file: mockFileName, offset: 31, line: 1 });
129125

130126
return server.close().then(() => {
131127
const completionsResponse = getFirstResponseOfType('completions', server);
132128
assert.isTrue(completionsResponse.success);
133-
assert.isTrue(completionsResponse.body.some(item => item.name === 'abc'));
129+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'abc'));
134130
});
135131
});
136132

@@ -141,7 +137,7 @@ describe('Completions', () => {
141137
return server.close().then(() => {
142138
const completionsResponse = getFirstResponseOfType('completions', server);
143139
assert.isTrue(completionsResponse.success);
144-
assert.isTrue(completionsResponse.body.some(item => item.name === 'substr'));
140+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'substr'));
145141
});
146142
});
147143

@@ -152,72 +148,55 @@ describe('Completions', () => {
152148
return server.close().then(() => {
153149
const completionsResponse = getFirstResponseOfType('completions', server);
154150
assert.isTrue(completionsResponse.success);
155-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
151+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
156152
});
157153
});
158154

159155
it('should handle multiline value placeholder correctly ', () => {
160-
const server = createServerWithMockFile([
161-
'css`margin: ${',
162-
'0',
163-
"}; color: `"].join('\n'));
156+
const server = createServerWithMockFile(['css`margin: ${', '0', '}; color: `'].join('\n'));
164157
server.sendCommand('completions', { file: mockFileName, offset: 10, line: 3 });
165158

166159
return server.close().then(() => {
167160
const completionsResponse = getFirstResponseOfType('completions', server);
168161
assert.isTrue(completionsResponse.success);
169-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
162+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
170163
});
171164
});
172165

173166
it('should handle multiline rule placeholder correctly ', () => {
174-
const server = createServerWithMockFile([
175-
'css`',
176-
'${',
177-
'css`margin: 0;`',
178-
'}',
179-
'color: `'].join('\n'));
167+
const server = createServerWithMockFile(['css`', '${', 'css`margin: 0;`', '}', 'color: `'].join('\n'));
180168
server.sendCommand('completions', { file: mockFileName, offset: 8, line: 5 });
181169

182170
return server.close().then(() => {
183171
const completionsResponse = getFirstResponseOfType('completions', server);
184172
assert.isTrue(completionsResponse.success);
185-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
173+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
186174
});
187175
});
188176

189177
it('should return completions when placeholder is used as a selector', () => {
190-
const server = createServerWithMockFile([
191-
'css`${"button"} {',
192-
' color: ;',
193-
'}',
194-
'color: ;',
195-
'`'].join('\n'));
178+
const server = createServerWithMockFile(['css`${"button"} {', ' color: ;', '}', 'color: ;', '`'].join('\n'));
196179
server.sendCommand('completions', { file: mockFileName, line: 2, offset: 11 });
197180

198181
return server.close().then(() => {
199182
const completionsResponse = getFirstResponseOfType('completions', server);
200183
assert.isTrue(completionsResponse.success);
201184
assert.strictEqual(completionsResponse.body.length, 157);
202-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
185+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
203186
});
204187
});
205188

206189
it('should return completions inside of nested selector xx', () => {
207-
const server = createServerWithMockFile([
208-
'css`',
209-
' color: red;',
210-
' &:hover {',
211-
' color: ',
212-
' }',
213-
'`'].join('\n'));
190+
const server = createServerWithMockFile(
191+
['css`', ' color: red;', ' &:hover {', ' color: ', ' }', '`'].join('\n')
192+
);
214193
server.sendCommand('completions', { file: mockFileName, line: 4, offset: 15 });
215194

216195
return server.close().then(() => {
217196
const completionsResponse = getFirstResponseOfType('completions', server);
218197
assert.isTrue(completionsResponse.success);
219198
assert.strictEqual(completionsResponse.body.length, 157);
220-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
199+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
221200
});
222201
});
223202

@@ -229,8 +208,8 @@ describe('Completions', () => {
229208
const completionsResponse = getFirstResponseOfType('completions', server);
230209
assert.isTrue(completionsResponse.success);
231210
assert.strictEqual(completionsResponse.body.length, 157);
232-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
233-
assert.isTrue(completionsResponse.body.some(item => item.name === 'rgba'));
211+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
212+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'rgba'));
234213
});
235214
});
236215

@@ -242,8 +221,8 @@ describe('Completions', () => {
242221
const completionsResponse = getFirstResponseOfType('completions', server);
243222
assert.isTrue(completionsResponse.success);
244223
assert.strictEqual(completionsResponse.body.length, 157);
245-
assert.isTrue(completionsResponse.body.some(item => item.name === 'aliceblue'));
246-
assert.isTrue(completionsResponse.body.some(item => item.name === 'rgba'));
224+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'aliceblue'));
225+
assert.isTrue(completionsResponse.body.some((item) => item.name === 'rgba'));
247226
});
248227

249228
it('should mark color completions with "color" kindModifier', async () => {
@@ -253,7 +232,18 @@ describe('Completions', () => {
253232
await server.close();
254233
const completionsResponse = getFirstResponseOfType('completions', server);
255234
assert.isTrue(completionsResponse.success);
256-
const aliceBlue = completionsResponse.body.find(item => item.name === 'aliceblue');
235+
const aliceBlue = completionsResponse.body.find((item) => item.name === 'aliceblue');
236+
assert.isTrue(aliceBlue.kindModifiers === 'color');
237+
});
238+
239+
it('should get completions inside keyframes blocks', async () => {
240+
const server = createServerWithMockFile('const q = keyframes`0% {color:`');
241+
server.sendCommand('completions', { file: mockFileName, offset: 31, line: 1 });
242+
243+
await server.close();
244+
const completionsResponse = getFirstResponseOfType('completions', server);
245+
assert.isTrue(completionsResponse.success);
246+
const aliceBlue = completionsResponse.body.find((item) => item.name === 'aliceblue');
257247
assert.isTrue(aliceBlue.kindModifiers === 'color');
258248
});
259249
});

0 commit comments

Comments
 (0)