Use new converters and fix unit tests

Author: no-chris

packages/chord-charts-studio/babel.config.js renamed to babel.config.js

@@ -0,0 +1,33 @@
+/* eslint-env node */
+module.exports = {
+	testEnvironment: 'jsdom',
+	rootDir: __dirname,
+
+	collectCoverage: true,
+	collectCoverageFrom: [
+		'<rootDir>/packages/chords-charts-studio/src/**/*.js',
+	],
+	coverageDirectory: '<rootDir>/coverage',
+	coverageReporters: ['json', 'lcov', 'text', 'clover'],
+	coverageThreshold: {
+		global: {
+			branches: 99,
+			functions: 99,
+			lines: 99,
+			statements: 99,
+		},
+	},
+
+	transform: {
+		'\\.js$': 'babel-jest',
+		'\\.hbs$': 'jest-handlebars',
+		'\\.txt': 'jest-raw-loader',
+	},
+	// whitelisting local modules in the node_modules folder
+	transformIgnorePatterns: ['<rootDir>.*(node_modules)(?!.*chord-mark.*).*$'],
+
+	moduleNameMapper: {
+		'\\.(css|scss)$': '<rootDir>/tests/styleMock.js',
+		'\\.(png)$': '<rootDir>/tests/assetMock.js',
+	},
+};

jest.config.base.js

@@ -0,0 +1,7 @@
+/* eslint-env node */
+const baseConfig = require('./jest.config.base');
+
+module.exports = {
+	...baseConfig,
+	projects: ['<rootDir>/packages/*/jest.config.js'],
+};

jest.config.js

@@ -1,34 +1,16 @@
 /* eslint-env node */
+const baseConfig = require('../../jest.config.base');
+const packageJson = require('./package');
+
 module.exports = {
-	testEnvironment: 'jsdom',
+	...baseConfig,
+	name: packageJson.name,
+	displayName: packageJson.name,
 
-	collectCoverage: true,
-	collectCoverageFrom: ['src/**/*.js', '!src/main.js', '!**/node_modules/**'],
-	coverageDirectory: '<rootDir>/coverage',
+	rootDir: '../..',
 	coveragePathIgnorePatterns: [
-		'node_modules',
-		'src/core/createGetVersions.js',
+		'packages/chord-charts-studio/src/core/createGetVersions.js',
 	],
-	coverageReporters: ['json', 'lcov', 'text', 'clover'],
-	coverageThreshold: {
-		global: {
-			branches: 99,
-			functions: 99,
-			lines: 99,
-			statements: 99,
-		},
-	},
-
-	transform: {
-		'\\.js$': 'babel-jest',
-		'\\.hbs$': 'jest-handlebars',
-		'\\.txt': 'jest-raw-loader',
-	},
 
 	setupFiles: ['jest-localstorage-mock'],
-
-	moduleNameMapper: {
-		'\\.(css|scss)$': '<rootDir>/scss/__mocks__/styleMock.js',
-		'\\.(png)$': '<rootDir>/assets/__mocks__/assetMock.js',
-	},
 };

packages/chord-charts-studio/jest.config.js

@@ -5,16 +5,16 @@ import InputFormatEntry from './InputFormatEntry';
 
 const allEntries = [
 	{
-		id: 'basic',
-		label: 'Basic',
+		id: 'auto',
+		label: 'Detect',
 	},
 	{
-		id: 'chordpro',
-		label: 'ChordPro',
+		id: 'chordPro',
+		label: 'Bracketed chords (ChordPro)',
 	},
 	{
-		id: 'ultimateGuitar',
-		label: 'Ultimate Guitar',
+		id: 'chordsOverLyrics',
+		label: 'Chords over lyrics (Ultimate Guitar...)',
 	},
 ];
 

packages/chord-charts-studio/src/songImporter/_components/InputFormatSelector.js

@@ -3,13 +3,14 @@ import './SongImporter.scss';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { convert2ChordMark } from 'chord-mark-converters';
+
 import Modal from '../../ui/_components/Modal';
 import Header from './Header';
 import FilePicker from './FilePicker';
 import Input from './Input';
 import PreviewError from './PreviewError';
 import InputFormatSelector from './InputFormatSelector';
-import input2ChordMark from '../input2ChordMark';
 import Icon from '../../ui/_components/Icon';
 
 function SongImporter(props) {
@@ -31,7 +32,7 @@ function SongImporter(props) {
 	let error = '';
 
 	try {
-		chordMarkContent = input2ChordMark(content, inputFormat);
+		chordMarkContent = convert2ChordMark(content, { inputFormat });
 	} catch (e) {
 		error = e.message;
 	}

packages/chord-charts-studio/src/songImporter/_components/SongImporter.js

@@ -7,7 +7,7 @@ const initialState = {
 	content: '',
 	isFromWeb: false,
 	isImporting: false,
-	inputFormat: 'basic',
+	inputFormat: 'auto',
 	title: '',
 };
 

packages/chord-charts-studio/src/songImporter/_state/reducers.js

@@ -307,7 +307,6 @@ describe('"Rendering" option panel', () => {
 			});
 
 			const chordmarkSrc = getByText('ChordMark (Source)');
-			const chordpro = getByText('ChordPro');
 
 			const chartType = getByText(
 				preferencesWidgets.chartType.label + ':'
@@ -333,15 +332,6 @@ describe('"Rendering" option panel', () => {
 			expect(isDisabled(alignChordsWithLyrics)).toBe(true);
 			expect(isDisabled(alignBars)).toBe(true);
 			expect(isDisabled(autoRepeatChords)).toBe(true);
-
-			act(() => {
-				fireEvent.click(chordpro);
-			});
-
-			expect(isDisabled(chartType, true)).toBe(true);
-			expect(isDisabled(alignChordsWithLyrics)).toBe(true);
-			expect(isDisabled(alignBars)).toBe(true);
-			expect(isDisabled(autoRepeatChords)).toBe(true);
 		});
 	});
 });

packages/chord-charts-studio/tests/integration/optionsPanels/rendering/_containers/Rendering.spec.js

@@ -91,7 +91,7 @@ describe('SongImporter', () => {
 	test('should import a song from a website', () => {
 		dispatch(
 			startImportFromWeb(
-				'chordpro',
+				'chordPro',
 				'[A]Amazing [D7]grace',
 				'Amazing Grace'
 			)

packages/chord-charts-studio/tests/integration/songImporter/_containers/SongImporter.spec.js

@@ -58,7 +58,7 @@ describe('SongRenderer', () => {
 			);
 
 			expect(container.firstChild.firstChild.innerHTML).toBe(
-				'<p>&nbsp;</p><p>[A]mySong</p>'
+				'<p>[|] [A]mySong [|]</p>'
 			);
 		});
 	});

packages/chord-charts-studio/tests/unit/SongRenderers/_components/SongRenderer.spec.js

@@ -53,7 +53,7 @@ describe('renderAsHtml()', () => {
 		const input = 'A\n_mySong\n';
 		const rendered = renderAsHtml(input, { chartFormat: 'chordpro' }, true);
 
-		expect(rendered).toEqual('<p>[A]mySong</p><p>&nbsp;</p>');
+		expect(rendered).toEqual('<p>[|] [A]mySong [|]</p>');
 	});
 
 	test('Should return ChordMark source html with useChartFormat === true & chartFormat === chordmarkSrc', () => {
@@ -98,7 +98,7 @@ describe('renderAsText()', () => {
 		const input = 'A\n_mySong\n';
 		const rendered = renderAsText(input, { chartFormat: 'chordpro' }, true);
 
-		expect(rendered).toEqual('[A]mySong\n');
+		expect(rendered).toEqual('[|] [A]mySong [|]');
 	});
 
 	test('Should return ChordMark source text with useChartFormat === true & chartFormat === chordmarkSrc', () => {

packages/chord-charts-studio/tests/unit/core/renderSong.spec.js

@@ -80,7 +80,7 @@ describe('exportSelectedFileAsText', () => {
 		expect(filename).toBe('aSong - anArtist.cho');
 
 		const fileContent = await blobToTxt(blob);
-		expect(fileContent).toBe('[A]mySong\n');
+		expect(fileContent).toBe('[|] [A]mySong [|]');
 	});
 });
 

packages/chord-charts-studio/tests/unit/fileManager/exportSelectedFileAsText.spec.js

@@ -1,12 +1,12 @@
-jest.mock('../../../../src/songImporter/input2ChordMark');
+jest.mock('chord-mark-converters');
 import React from 'react';
 
 import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import userEvent from '@testing-library/user-event';
 
 import SongImporter from '../../../../src/songImporter/_components/SongImporter';
-import input2ChordMark from '../../../../src/songImporter/input2ChordMark';
+import { convert2ChordMark } from 'chord-mark-converters';
 
 afterEach(cleanup);
 
@@ -36,7 +36,7 @@ describe('SongImporter', () => {
 		importFile.mockReset();
 		setContent.mockReset();
 		setInputFormat.mockReset();
-		input2ChordMark.mockImplementation((input) => input);
+		convert2ChordMark.mockImplementation((input) => input);
 	});
 
 	test('should not render import modal if isImporting = false', () => {
@@ -95,7 +95,7 @@ describe('SongImporter', () => {
 		});
 
 		test('should be disabled in case of parsing error', () => {
-			input2ChordMark.mockImplementation(() => {
+			convert2ChordMark.mockImplementation(() => {
 				throw new Error('Parsing Error');
 			});
 			const { getByText } = render(<SongImporter {...props} />);
@@ -156,15 +156,15 @@ describe('SongImporter', () => {
 
 	describe('Preview box', () => {
 		test('Should display converted input', () => {
-			input2ChordMark.mockImplementation(
+			convert2ChordMark.mockImplementation(
 				(input) => 'converted input ' + input
 			);
 			const { getByText } = render(<SongImporter {...props} />);
 			expect(getByText('converted input myContent')).toBeInTheDocument();
 		});
 
 		test('Should display error if input2chordmark fails', () => {
-			input2ChordMark.mockImplementation(() => {
+			convert2ChordMark.mockImplementation(() => {
 				throw new Error('This is a parsing Error!');
 			});
 			const { getByText } = render(<SongImporter {...props} />);
@@ -177,50 +177,57 @@ describe('SongImporter', () => {
 	describe('Input format selector', () => {
 		test('Should set proper value on click', () => {
 			const { getByLabelText, rerender } = render(
-				<SongImporter {...props} inputFormat={'basic'} />
+				<SongImporter {...props} inputFormat={'auto'} />
+			);
+			const auto = getByLabelText('Detect');
+			const chordpro = getByLabelText('Bracketed chords (ChordPro)');
+			const chordsOverLyrics = getByLabelText(
+				'Chords over lyrics (Ultimate Guitar...)'
 			);
-			const basic = getByLabelText('Basic');
-			const chordpro = getByLabelText('ChordPro');
-			const ultimateGuitar = getByLabelText('Ultimate Guitar');
 
-			expect(basic).toBeChecked();
-			basic.click();
+			expect(auto).toBeChecked();
+			auto.click();
 			expect(setInputFormat).not.toHaveBeenCalled();
 
 			chordpro.click();
-			ultimateGuitar.click();
+			chordsOverLyrics.click();
 
 			rerender(<SongImporter {...props} inputFormat={'chordpro'} />);
 
-			basic.click();
+			auto.click();
 
 			expect(setInputFormat).toHaveBeenCalledTimes(3);
-			expect(setInputFormat).toHaveBeenNthCalledWith(1, 'chordpro');
-			expect(setInputFormat).toHaveBeenNthCalledWith(2, 'ultimateGuitar');
-			expect(setInputFormat).toHaveBeenNthCalledWith(3, 'basic');
+			expect(setInputFormat).toHaveBeenNthCalledWith(1, 'chordPro');
+			expect(setInputFormat).toHaveBeenNthCalledWith(
+				2,
+				'chordsOverLyrics'
+			);
+			expect(setInputFormat).toHaveBeenNthCalledWith(3, 'auto');
 		});
 
 		test('should be disabled when importing from the web', () => {
 			const { getByLabelText } = render(
 				<SongImporter {...props} isFromWeb={true} />
 			);
-			const basic = getByLabelText('Basic');
-			const chordpro = getByLabelText('ChordPro');
-			const ultimateGuitar = getByLabelText('Ultimate Guitar');
+			const auto = getByLabelText('Detect');
+			const chordpro = getByLabelText('Bracketed chords (ChordPro)');
+			const chordsOverLyrics = getByLabelText(
+				'Chords over lyrics (Ultimate Guitar...)'
+			);
 
-			expect(basic).not.toBeDisabled();
+			expect(auto).not.toBeDisabled();
 			expect(chordpro).not.toBeDisabled();
-			expect(ultimateGuitar).not.toBeDisabled();
+			expect(chordsOverLyrics).not.toBeDisabled();
 
-			expect(basic).toHaveClass('sim-InputFormat_Entry-Disabled');
+			expect(auto).toHaveClass('sim-InputFormat_Entry-Disabled');
 			expect(chordpro).toHaveClass('sim-InputFormat_Entry-Disabled');
-			expect(ultimateGuitar).toHaveClass(
+			expect(chordsOverLyrics).toHaveClass(
 				'sim-InputFormat_Entry-Disabled'
 			);
 
-			basic.click();
+			auto.click();
 			chordpro.click();
-			ultimateGuitar.click();
+			chordsOverLyrics.click();
 
 			expect(setInputFormat).not.toHaveBeenCalled();
 		});

packages/chord-charts-studio/tests/unit/songImporter/_components/SongImporter.spec.js

@@ -162,7 +162,7 @@ describe('songImporter: reducers', () => {
 				...initialState,
 				content: '',
 				title: '',
-				inputFormat: 'basic',
+				inputFormat: 'auto',
 				isImporting: true,
 				isFromWeb: false,
 			};