Skip to content

Commit 000afcb

Browse files
AnemyAnemy
authored
chore(compass-components): add typecheck to check, fix errors (#7367)
* chore(compass-components): add typecheck to check, fix errors * fixup: add more test coverage for interactive popover
1 parent fa67195 commit 000afcb

File tree

11 files changed

+214
-63
lines changed

11 files changed

+214
-63
lines changed

‎packages/compass-components/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@
1818
"clean": "node -e \"fs.rmSync('lib', { recursive: true, force: true })\" || true",
1919
"precompile": "npm run clean",
2020
"compile": "tsc -p tsconfig.json",
21+
"typecheck": "tsc -p tsconfig-lint.json --noEmit",
2122
"eslint": "eslint-compass",
2223
"prettier": "prettier-compass",
2324
"lint": "npm run eslint . && npm run prettier -- --check .",
2425
"depcheck": "compass-scripts check-peer-deps && depcheck",
25-
"check": "npm run lint && npm run depcheck",
26+
"check": "npm run typecheck && npm run lint && npm run depcheck",
2627
"check-ci": "npm run check",
2728
"test": "mocha",
2829
"test-cov": "nyc --compact=false --produce-source-map=false -x \"**/*.spec.*\" --reporter=lcov --reporter=text --reporter=html npm run test",

‎packages/compass-components/src/components/content-with-fallback.spec.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ describe('ContentWithFallback', function () {
5959
);
6060

6161
expect(container.children.length).to.equal(2);
62-
const [contentContainer, contextMenuContainer] = container.children;
62+
const [contentContainer, contextMenuContainer] = Array.from(
63+
container.children
64+
);
6365
expect(contentContainer.children.length).to.equal(0);
6466
expect(contextMenuContainer.getAttribute('data-testid')).to.equal(
6567
'context-menu-container'

‎packages/compass-components/src/components/document-list/document.spec.tsx‎

Lines changed: 49 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import HadronDocument from 'hadron-document';
1212
import Document from './document';
1313

14-
const EditableDoc = ({ doc }) => {
14+
const EditableDoc = ({ doc }: { doc: HadronDocument }) => {
1515
const [editing, setEditing] = useState(false);
1616

1717
return (
@@ -61,8 +61,11 @@ describe('Document', function () {
6161
render(<Document value={doc} editable editing></Document>);
6262

6363
const el = document.querySelector<HTMLElement>(
64-
`[data-id="${doc.get('str').uuid}"]`
64+
`[data-id="${doc.get('str')?.uuid}"]`
6565
);
66+
if (!el) {
67+
throw new Error('Could not find element');
68+
}
6669
const keyEditor = within(el).getByTestId('hadron-document-key-editor');
6770

6871
userEvent.clear(keyEditor);
@@ -71,16 +74,19 @@ describe('Document', function () {
7174

7275
expect(screen.getByDisplayValue('new_name')).to.exist;
7376

74-
expect(doc.get('new_name').key).to.eq('str');
75-
expect(doc.get('new_name').currentKey).to.eq('new_name');
77+
expect(doc.get('new_name')?.key).to.eq('str');
78+
expect(doc.get('new_name')?.currentKey).to.eq('new_name');
7679
});
7780

7881
it('should change element string value on edit', function () {
7982
render(<Document value={doc} editable editing></Document>);
8083

8184
const el = document.querySelector<HTMLElement>(
82-
`[data-id="${doc.get('str').uuid}"]`
85+
`[data-id="${doc.get('str')?.uuid}"]`
8386
);
87+
if (!el) {
88+
throw new Error('Could not find element');
89+
}
8490

8591
const valueEditor = within(el).getByTestId(
8692
'hadron-document-value-editor'
@@ -90,16 +96,19 @@ describe('Document', function () {
9096
userEvent.keyboard('bla');
9197
userEvent.tab();
9298

93-
expect(doc.get('str').currentValue).to.eq('bla');
94-
expect(doc.get('str').currentType).to.eq('String');
99+
expect(doc.get('str')?.currentValue).to.eq('bla');
100+
expect(doc.get('str')?.currentType).to.eq('String');
95101
});
96102

97103
it('should change element number value on edit', function () {
98104
render(<Document value={doc} editable editing></Document>);
99105

100106
const el = document.querySelector<HTMLElement>(
101-
`[data-id="${doc.get('num').uuid}"]`
107+
`[data-id="${doc.get('num')?.uuid}"]`
102108
);
109+
if (!el) {
110+
throw new Error('Could not find element');
111+
}
103112

104113
const valueEditor = within(el).getByTestId(
105114
'hadron-document-value-editor'
@@ -109,16 +118,19 @@ describe('Document', function () {
109118
userEvent.keyboard('321');
110119
userEvent.tab();
111120

112-
expect(doc.get('num').currentValue.valueOf()).to.eq(321);
113-
expect(doc.get('num').currentType).to.eq('Int32');
121+
expect(doc.get('num')?.currentValue?.valueOf()).to.eq(321);
122+
expect(doc.get('num')?.currentType).to.eq('Int32');
114123
});
115124

116125
it('should change element date value on edit', function () {
117126
render(<Document value={doc} editable editing></Document>);
118127

119128
const el = document.querySelector<HTMLElement>(
120-
`[data-id="${doc.get('date').uuid}"]`
129+
`[data-id="${doc.get('date')?.uuid}"]`
121130
);
131+
if (!el) {
132+
throw new Error('Could not find element');
133+
}
122134

123135
const valueEditor = within(el).getByTestId(
124136
'hadron-document-value-editor'
@@ -128,26 +140,29 @@ describe('Document', function () {
128140
userEvent.keyboard('2000-01-01');
129141
userEvent.tab();
130142

131-
expect((doc.get('date').currentValue as Date).toISOString()).to.eq(
143+
expect((doc.get('date')?.currentValue as Date).toISOString()).to.eq(
132144
'2000-01-01T00:00:00.000Z'
133145
);
134-
expect(doc.get('date').currentType).to.eq('Date');
146+
expect(doc.get('date')?.currentType).to.eq('Date');
135147
});
136148

137149
it('should change element type on edit', function () {
138150
render(<Document value={doc} editable editing></Document>);
139151

140152
const el = document.querySelector<HTMLElement>(
141-
`[data-id="${doc.get('num').uuid}"]`
153+
`[data-id="${doc.get('num')?.uuid}"]`
142154
);
155+
if (!el) {
156+
throw new Error('Could not find element');
157+
}
143158

144159
const typeEditor = within(el).getByTestId('hadron-document-type-editor');
145160

146161
userEvent.selectOptions(typeEditor, 'String');
147162
userEvent.tab();
148163

149-
expect(doc.get('num').currentValue.valueOf()).to.eq('123');
150-
expect(doc.get('num').currentType).to.eq('String');
164+
expect(doc.get('num')?.currentValue?.valueOf()).to.eq('123');
165+
expect(doc.get('num')?.currentType).to.eq('String');
151166
});
152167
});
153168

@@ -168,8 +183,11 @@ describe('Document', function () {
168183
render(<Document value={doc} editable editing></Document>);
169184

170185
const el = document.querySelector<HTMLElement>(
171-
`[data-id="${doc.get('null_value').uuid}"]`
186+
`[data-id="${doc.get('null_value')?.uuid}"]`
172187
);
188+
if (!el) {
189+
throw new Error('Could not find element');
190+
}
173191

174192
const typeEditor = within(el).getByTestId('hadron-document-type-editor');
175193

@@ -182,16 +200,19 @@ describe('Document', function () {
182200
userEvent.keyboard('foo bar');
183201
userEvent.tab();
184202

185-
expect(doc.get('null_value').currentValue.valueOf()).to.eq('foo bar');
186-
expect(doc.get('null_value').currentType).to.eq('String');
203+
expect(doc.get('null_value')?.currentValue?.valueOf()).to.eq('foo bar');
204+
expect(doc.get('null_value')?.currentType).to.eq('String');
187205
});
188206

189207
it('should autofocus key editor when double-clicking key', function () {
190208
render(<EditableDoc doc={doc}></EditableDoc>);
191209

192210
const el = document.querySelector<HTMLElement>(
193-
`[data-id="${doc.get('str').uuid}"]`
211+
`[data-id="${doc.get('str')?.uuid}"]`
194212
);
213+
if (!el) {
214+
throw new Error('Could not find element');
215+
}
195216

196217
userEvent.dblClick(within(el).getByTestId('hadron-document-clickable-key'));
197218

@@ -204,8 +225,11 @@ describe('Document', function () {
204225
render(<EditableDoc doc={doc}></EditableDoc>);
205226

206227
const el = document.querySelector<HTMLElement>(
207-
`[data-id="${doc.get('str').uuid}"]`
228+
`[data-id="${doc.get('str')?.uuid}"]`
208229
);
230+
if (!el) {
231+
throw new Error('Could not find element');
232+
}
209233

210234
userEvent.dblClick(
211235
within(el).getByTestId('hadron-document-clickable-value')
@@ -220,8 +244,11 @@ describe('Document', function () {
220244
render(<EditableDoc doc={doc}></EditableDoc>);
221245

222246
const el = document.querySelector<HTMLElement>(
223-
`[data-id="${doc.get('null_value').uuid}"]`
247+
`[data-id="${doc.get('null_value')?.uuid}"]`
224248
);
249+
if (!el) {
250+
throw new Error('Could not find element');
251+
}
225252

226253
userEvent.dblClick(
227254
within(el).getByTestId('hadron-document-clickable-value')

‎packages/compass-components/src/components/file-picker-dialog.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import FileInput, {
1717
} from './file-picker-dialog';
1818

1919
describe('FileInput', function () {
20-
let spy;
20+
let spy: sinon.SinonSpy;
2121

2222
beforeEach(function () {
2323
spy = sinon.spy();

‎packages/compass-components/src/components/guide-cue/guide-cue-service.spec.ts‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -397,26 +397,31 @@ describe('GuideCueService', function () {
397397

398398
context('marks group as visited', function () {
399399
context('when all the cues of group are added', function () {
400-
const cue1 = {
401-
cueId: 'one',
402-
step: 1,
403-
groupId: 'group-two',
404-
isIntersecting: true,
405-
} as unknown as Cue;
406-
const cue2 = {
407-
cueId: 'two',
408-
step: 2,
409-
groupId: 'group-two',
410-
isIntersecting: true,
411-
};
400+
let cue1: Cue;
401+
let cue2: Cue;
412402

413403
let markCueAsVisited: Sinon.SinonSpy;
414404

415405
beforeEach(function () {
406+
cue1 = {
407+
cueId: 'one',
408+
step: 1,
409+
groupId: 'group-two',
410+
isVisited: false,
411+
isIntersecting: true,
412+
};
413+
cue2 = {
414+
cueId: 'two',
415+
step: 2,
416+
groupId: 'group-two',
417+
isVisited: false,
418+
isIntersecting: true,
419+
};
420+
416421
markCueAsVisited = Sinon.spy(guideCueStorage, 'markCueAsVisited');
417-
guideCueService.addCue(cue1 as any);
418-
guideCueService.addCue(cue2 as any);
419-
guideCueService.markGroupAsVisited(cue1.groupId);
422+
guideCueService.addCue(cue1);
423+
guideCueService.addCue(cue2);
424+
guideCueService.markGroupAsVisited(cue1.groupId!);
420425
});
421426

422427
it('updates isVisited property for all group cues', function () {
@@ -444,19 +449,21 @@ describe('GuideCueService', function () {
444449
});
445450

446451
context('when all the cues of group are not added', function () {
447-
const cue1 = {
448-
cueId: 'one',
449-
step: 1,
450-
groupId: 'group-two',
451-
isIntersecting: true,
452-
} as unknown as Cue;
452+
let cue1: Cue;
453453

454454
let markCueAsVisited: Sinon.SinonSpy;
455455

456456
beforeEach(function () {
457+
cue1 = {
458+
cueId: 'one',
459+
step: 1,
460+
groupId: 'group-two',
461+
isIntersecting: true,
462+
isVisited: false,
463+
};
457464
markCueAsVisited = Sinon.spy(guideCueStorage, 'markCueAsVisited');
458-
guideCueService.addCue(cue1 as any);
459-
guideCueService.markGroupAsVisited(cue1.groupId);
465+
guideCueService.addCue(cue1);
466+
guideCueService.markGroupAsVisited(cue1.groupId!);
460467
});
461468

462469
it('does not update isVisited property for group cues', function () {

‎packages/compass-components/src/components/guide-cue/guide-cue.spec.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ const renderGuideCue = (props: Partial<ComponentProps<typeof GuideCue>>) => {
2525
</Button>
2626
<GuideCue
2727
cueId=""
28+
groupId=""
29+
step={0}
2830
title=""
2931
description=""
3032
trigger={({ ref }) => (

0 commit comments

Comments
 (0)