Merge pull request #1536 from klembot/update-test-packages-and-others

Run npm update, update Jest and other testing packages to latest

package.json

@@ -57,6 +57,7 @@
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 		"@electron/notarize": "^2.1.0",
+		"@faker-js/faker": "^8.4.1",
 		"@playwright/test": "^1.27.1",
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
@@ -66,9 +67,8 @@
 		"@types/codemirror": "0.0.108",
 		"@types/eases": "^1.0.2",
 		"@types/electron-devtools-installer": "^2.2.0",
-		"@types/faker": "^5.1.7",
 		"@types/file-saver": "^2.0.1",
-		"@types/jest": "^26.0.24",
+		"@types/jest": "^29.5.12",
 		"@types/jest-axe": "^3.5.1",
 		"@types/jsonp": "^0.2.1",
 		"@types/lodash": "^4.14.168",
@@ -95,10 +95,9 @@
 		"electron-builder-notarize": "^1.5.0",
 		"eslint": "^8.51.0",
 		"eslint-config-react-app": "^7.0.1",
-		"faker": "^5.4.0",
 		"history": "^5.1.0",
 		"jest": "^29.7.0",
-		"jest-axe": "^4.1.0",
+		"jest-axe": "^9.0.0",
 		"jest-canvas-mock": "^2.5.2",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-useragent-mock": "^0.1.1",

src/__mocks__/focus-trap-react.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+function FocusTrap({children}: {children: React.ReactChildren}) {
+	return <>{children}</>;
+}
+
+export default FocusTrap;

src/components/control/__tests__/prompt-button.test.tsx

@@ -1,5 +1,5 @@
+import {faker} from '@faker-js/faker';
 import {act, fireEvent, render, screen, waitFor} from '@testing-library/react';
-import {lorem} from 'faker';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {PromptButton, PromptButtonProps} from '../prompt-button';
@@ -10,10 +10,10 @@ describe('<PromptButton>', () => {
 			<PromptButton
 				onChange={jest.fn()}
 				onSubmit={jest.fn()}
-				prompt={lorem.words(10)}
-				value={lorem.words(1)}
+				prompt={faker.lorem.words(10)}
+				value={faker.lorem.words(1)}
 				icon={<div data-testid="icon" />}
-				label={lorem.words(1)}
+				label={faker.lorem.words(1)}
 				{...props}
 			/>
 		);
@@ -80,12 +80,12 @@ describe('<PromptButton>', () => {
 		await act(() => Promise.resolve());
 		fireEvent.click(screen.getByRole('button', {name: 'test-cancel'}));
 		await act(() => Promise.resolve());
-		expect(onSubmit).not.toBeCalled();
+		expect(onSubmit).not.toHaveBeenCalled();
 	});
 
 	it('hides the prompt, field, submit and cancel buttons and calls the onSubmit prop when the submit button is clicked', async () => {
 		const onSubmit = jest.fn();
-		const value = lorem.words(3);
+		const value = faker.lorem.words(3);
 
 		renderComponent({
 			onSubmit,
@@ -121,7 +121,7 @@ describe('<PromptButton>', () => {
 		fireEvent.change(screen.getByRole('textbox', {name: 'test-prompt'}), {
 			target: {value: 'green'}
 		});
-		expect(onChange).toBeCalledTimes(1);
+		expect(onChange).toHaveBeenCalledTimes(1);
 	});
 
 	it('prevents submission if the validate prop blocks it', async () => {

src/components/passage/__tests__/passage-card.test.tsx

@@ -1,11 +1,11 @@
+import {faker} from '@faker-js/faker';
 import {cleanup, fireEvent, render, screen} from '@testing-library/react';
 import * as detectIt from 'detect-it';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {fakePassage} from '../../../test-util';
 import {passageIsEmpty} from '../../../util/passage-is-empty';
 import {PassageCard, PassageCardProps} from '../passage-card';
-import {lorem} from 'faker';
 
 jest.mock('../../tag/tag-stripe');
 jest.mock('../../../util/passage-is-empty');
@@ -34,21 +34,21 @@ describe('<PassageCard>', () => {
 	}
 
 	it('should include data-passage-tag attribute with space-separated tags', () => {
-		const tags = [lorem.slug(), lorem.slug()];
+		const tags = [faker.lorem.slug(), faker.lorem.slug()];
 		const passage = fakePassage({tags});
 		renderComponent({passage});
 
 		// eslint-disable-next-line testing-library/no-node-access
-		const passageElement=document.querySelector('.passage-card')
+		const passageElement = document.querySelector('.passage-card');
 		expect(passageElement).toHaveAttribute('data-passage-tags', tags.join(' '));
 	});
 
 	it('should include data-passage-tag with an empty string when passage has no tags', () => {
-		const passage = fakePassage({tags:[]});
+		const passage = fakePassage({tags: []});
 		renderComponent({passage});
 
 		// eslint-disable-next-line testing-library/no-node-access
-		const passageElement=document.querySelector('.passage-card')
+		const passageElement = document.querySelector('.passage-card');
 		expect(passageElement).toHaveAttribute('data-passage-tags', '');
 	});
 

src/components/tag/__tests__/tag-button.test.tsx

@@ -1,5 +1,5 @@
+import {faker} from '@faker-js/faker';
 import {fireEvent, render, screen} from '@testing-library/react';
-import {lorem} from 'faker';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {TagButton, TagButtonProps} from '../tag-button';
@@ -10,7 +10,7 @@ describe('<TagButton>', () => {
 	function renderComponent(props?: Partial<TagButtonProps>) {
 		return render(
 			<TagButton
-				name={lorem.word()}
+				name={faker.lorem.word()}
 				onChangeColor={jest.fn()}
 				onRemove={jest.fn()}
 				{...props}

src/components/tag/__tests__/tag-editor.test.tsx

@@ -1,12 +1,12 @@
+import {faker} from '@faker-js/faker';
 import {act, fireEvent, render, screen} from '@testing-library/react';
-import {lorem} from 'faker';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {TagEditor, TagEditorProps} from '../tag-editor';
 
 describe('<TagEditor>', () => {
 	async function renderComponent(props?: Partial<TagEditorProps>) {
-		const tagName = lorem.word();
+		const tagName = faker.lorem.word();
 		const result = render(
 			<TagEditor
 				allTags={[tagName]}

src/components/tag/__tests__/tag-stripe.test.tsx

@@ -1,13 +1,13 @@
+import {faker} from '@faker-js/faker';
 import {render, screen} from '@testing-library/react';
-import {lorem} from 'faker';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {TagStripe, TagStripeProps} from '../tag-stripe';
 
 describe('<TagStripe>', () => {
 	function renderComponent(props?: Partial<TagStripeProps>) {
 		return render(
-			<TagStripe tagColors={{}} tags={[lorem.word()]} {...props} />
+			<TagStripe tagColors={{}} tags={[faker.lorem.word()]} {...props} />
 		);
 	}
 

src/components/welcome/__tests__/welcome-card.test.tsx

@@ -1,5 +1,5 @@
+import {faker} from '@faker-js/faker';
 import {fireEvent, render, screen} from '@testing-library/react';
-import {lorem} from 'faker';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {WelcomeCard, WelcomeCardProps} from '../welcome-card';
@@ -8,11 +8,11 @@ describe('<WelcomeCard>', () => {
 	function renderComponent(props?: Partial<WelcomeCardProps>) {
 		return render(
 			<WelcomeCard
-				nextLabel={lorem.words(3)}
+				nextLabel={faker.lorem.words(3)}
 				onNext={jest.fn()}
 				onSkip={jest.fn()}
 				showSkip={false}
-				title={lorem.words(5)}
+				title={faker.lorem.words(5)}
 				{...props}
 			>
 				mock-children

src/dialogs/story-details/__tests__/story-stats.test.tsx

@@ -1,8 +1,8 @@
+import {faker} from '@faker-js/faker';
 import {render, screen} from '@testing-library/react';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {fakeStory} from '../../../test-util';
-import {lorem} from 'faker';
 import {
 	StoryDetailsDialogStats,
 	StoryDetailsDialogStatsProps
@@ -15,8 +15,8 @@ describe('<StoryDetailsDialogStats>', () => {
 
 	it('shows a character count for the story', () => {
 		const story = fakeStory(2);
-		const text = lorem.words(50);
-		const text2 = lorem.words(50);
+		const text = faker.lorem.words(50);
+		const text2 = faker.lorem.words(50);
 
 		story.passages[0].text = text;
 		story.passages[1].text = text2;
@@ -34,8 +34,8 @@ describe('<StoryDetailsDialogStats>', () => {
 
 	it('shows a word count for the story', () => {
 		const story = fakeStory(2);
-		const text = lorem.words(10);
-		const text2 = lorem.words(25);
+		const text = faker.lorem.words(10);
+		const text2 = faker.lorem.words(25);
 
 		story.passages[0].text = text;
 		story.passages[1].text = text2;

src/electron/main-process/__tests__/ipc.test.ts

@@ -49,7 +49,7 @@ describe('initIpc()', () => {
 		it('calls deleteStory()', async () => {
 			expect(listener).not.toBeUndefined();
 			listener[1]({sender: {send: jest.fn()}}, story);
-			expect(deleteStoryMock).toBeCalledWith(story);
+			expect(deleteStoryMock).toHaveBeenCalledWith(story);
 		});
 
 		it('sends back a story-deleted event', async () => {
@@ -72,7 +72,7 @@ describe('initIpc()', () => {
 
 			expect(listener).not.toBeUndefined();
 			expect(await listener[1]()).toEqual(prefs);
-			expect(loadPrefsMock).toBeCalledTimes(1);
+			expect(loadPrefsMock).toHaveBeenCalledTimes(1);
 		});
 
 		it('returns an empty object if loadPrefs() throws an error', async () => {
@@ -100,7 +100,7 @@ describe('initIpc()', () => {
 		);
 
 		expect(await listener[1]()).toEqual(stories);
-		expect(loadStoriesMock).toBeCalledTimes(1);
+		expect(loadStoriesMock).toHaveBeenCalledTimes(1);
 	});
 
 	describe('the handler it adds for load-story-formats events', () => {
@@ -115,7 +115,7 @@ describe('initIpc()', () => {
 
 			expect(listener).not.toBeUndefined();
 			expect(await listener[1]()).toEqual(formats);
-			expect(loadStoryFormatsMock).toBeCalledTimes(1);
+			expect(loadStoryFormatsMock).toHaveBeenCalledTimes(1);
 		});
 
 		it('returns an empty array if loadStoryFormats() throws an error', async () => {
@@ -140,7 +140,7 @@ describe('initIpc()', () => {
 
 		expect(listener).not.toBeUndefined();
 		listener[1]({}, 'test-file-contents', 'test-filename');
-		expect(openWithScratchFileMock).toBeCalledWith(
+		expect(openWithScratchFileMock).toHaveBeenCalledWith(
 			'test-file-contents',
 			'test-filename'
 		);
@@ -178,15 +178,15 @@ describe('initIpc()', () => {
 
 		expect(listener).not.toBeUndefined();
 		listener[1]({}, 'test-filename', testData);
-		expect(saveJsonFileMock).toBeCalledWith('test-filename', testData);
+		expect(saveJsonFileMock).toHaveBeenCalledWith('test-filename', testData);
 	});
 
 	describe('the listener it adds for save-story-html events', () => {
 		let listener: any[];
 		let story: Story;
 
 		beforeEach(() => {
-			jest.useFakeTimers('modern');
+			jest.useFakeTimers();
 			jest.spyOn(console, 'log').mockReturnValue();
 			listener = onMock.mock.calls.find(call => call[0] === 'save-story-html');
 			story = fakeStory();
@@ -201,7 +201,7 @@ describe('initIpc()', () => {
 			expect(listener).not.toBeUndefined();
 			await listener[1]({sender: {send: jest.fn()}}, story, 'test-story-html');
 			jest.advanceTimersByTime(1000);
-			expect(saveStoryHtmlMock).toBeCalledWith(story, 'test-story-html');
+			expect(saveStoryHtmlMock).toHaveBeenCalledWith(story, 'test-story-html');
 		});
 
 		it('debounces calls to saveStoryHtml() for the same story ID with both leading and trailing calls', async () => {
@@ -306,7 +306,7 @@ describe('initIpc()', () => {
 		let story2: Story;
 
 		beforeEach(() => {
-			jest.useFakeTimers('modern');
+			jest.useFakeTimers();
 			jest.spyOn(console, 'log').mockReturnValue();
 			quitListeners = appOnMock.mock.calls.find(
 				call => call[0] === 'will-quit'

src/routes/story-edit/__tests__/use-view-center.test.tsx

@@ -1,5 +1,5 @@
+import {faker} from '@faker-js/faker';
 import {renderHook} from '@testing-library/react-hooks';
-import {random} from 'faker';
 import * as React from 'react';
 import {DialogsContext} from '../../../dialogs';
 import {Story} from '../../../store/stories';
@@ -13,17 +13,17 @@ describe('useViewCenter', () => {
 	beforeEach(() => {
 		story = fakeStory();
 		el = {
-			clientHeight: random.number(),
-			clientWidth: random.number(),
+			clientHeight: faker.number.int(),
+			clientWidth: faker.number.int(),
 			getBoundingClientRect: () => ({
 				height: 100,
 				left: 20,
 				top: 10,
 				width: 200
 			}),
-			scrollLeft: random.number(),
+			scrollLeft: faker.number.int(),
 			scrollTo: jest.fn(),
-			scrollTop: random.number()
+			scrollTop: faker.number.int()
 		};
 	});
 
@@ -51,8 +51,8 @@ describe('useViewCenter', () => {
 			const {result} = renderHook(() =>
 				useViewCenter(story, {current: el as any})
 			);
-			const left = random.number();
-			const top = random.number();
+			const left = faker.number.int();
+			const top = faker.number.int();
 
 			result.current.setCenter({left, top});
 			expect(el.scrollTo.mock.calls).toEqual([
@@ -66,7 +66,7 @@ describe('useViewCenter', () => {
 		});
 
 		it('adjusts the center if dialogs are open', () => {
-			const dialogWidth = random.number();
+			const dialogWidth = faker.number.int();
 			const {result} = renderHook(
 				() => useViewCenter(story, {current: el as any}),
 				{
@@ -91,8 +91,8 @@ describe('useViewCenter', () => {
 					)
 				}
 			);
-			const left = random.number();
-			const top = random.number();
+			const left = faker.number.int();
+			const top = faker.number.int();
 
 			result.current.setCenter({left, top});
 			expect(el.scrollTo.mock.calls).toEqual([

src/routes/story-list/toolbar/story/__tests__/create-story-button.test.tsx

@@ -1,5 +1,5 @@
+import {faker} from '@faker-js/faker';
 import {act, fireEvent, render, screen} from '@testing-library/react';
-import {lorem} from 'faker';
 import {createMemoryHistory, MemoryHistory} from 'history';
 import {axe} from 'jest-axe';
 import * as React from 'react';
@@ -37,7 +37,7 @@ describe('<CreateStoryButton>', () => {
 	it('creates a new story when a valid name is entered and the create button is clicked', async () => {
 		const history = createMemoryHistory();
 		const prefs = fakePrefs();
-		const name = lorem.words(3);
+		const name = faker.lorem.words(3);
 
 		await renderComponent({prefs, stories: []}, history);
 		fireEvent.change(

src/setupTests.ts

@@ -7,6 +7,11 @@ import 'jest-canvas-mock';
 
 jest.mock('./util/i18n');
 
+// Mock this component so that we don't get spurious errors around needing
+// focusable elements, because often we're mocking contents.
+
+jest.mock('focus-trap-react');
+
 configure({asyncUtilTimeout: 5000});
 
 expect.extend(toHaveNoViolations);