Merge pull request #618 from no-chris/fix-roman-numerals-alignment

Fix alignment of chord grids with roman numerals
no-chris · Feb 11, 2023 · 87252c6 · 87252c6
2 parents b4e6cae + e3a50bf
commit 87252c6
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 7 deletions.
diff --git a/packages/chord-mark/src/renderer/spacers/chord/getBeatString.js b/packages/chord-mark/src/renderer/spacers/chord/getBeatString.js
@@ -23,12 +23,10 @@ export function getBeatString(
 		case 0:
 			return '';
 		case 1: {
-			return getChordString(
-				bar,
-				beatChords[0],
+			return getChordString(bar, beatChords[0], {
 				shouldPrintSubBeatDelimiters,
-				symbolType
-			);
+				symbolType,
+			});
 		}
 		default: {
 			return beatChords.reduce((allChords, chord, i) => {

diff --git a/packages/chord-mark/tests/unit/renderer/components/renderSong.spec.js b/packages/chord-mark/tests/unit/renderer/components/renderSong.spec.js
@@ -993,8 +993,8 @@ describe('Roman numerals symbols', () => {
 		[
 			'Multiple keys',
 			'key C\nC Dm F G B°\n' + 'key G\nC Dm F G B°',
-			'key: C\n|I     |ii     |IV     |V     |vii°     |\n' +
-				'key: G\n|IV     |v     |♭VII     |I     |?°     |',
+			'key: C\n|I      |ii     |IV       |V     |vii°     |\n' +
+				'key: G\n|IV     |v      |♭VII     |I     |?°       |',
 		],
 	])(`%s`, (title, song, expected) => {
 		test('renders with correct roman numerals', () => {

diff --git a/packages/chord-mark/tests/unit/renderer/spacers/chord/getBeatString.spec.js b/packages/chord-mark/tests/unit/renderer/spacers/chord/getBeatString.spec.js
@@ -228,3 +228,27 @@ describe('getBeatString()', () => {
 		});
 	});
 });
+
+describe('getChordString()', () => {
+	describe.each([
+		['A', 0, 'A'],
+		['A', 0, 'I', { symbolType: 'roman' }],
+		['Am', 0, 'i', { symbolType: 'roman' }],
+	])('%s', (input, chordIndex, output, options = {}) => {
+		test('returns the correct chord string', () => {
+			const parsedSong = parseSong(input);
+			let { allLines } = parsedSong;
+
+			allLines = forEachChordInSong(
+				allLines,
+				(chord) => (chord.symbol = getChordSymbol(chord.model))
+			);
+
+			const bar = allLines[0].model.allBars[0];
+			const chord = bar.allChords[chordIndex];
+
+			const beatString = getChordString(bar, chord, options);
+			expect(beatString).toEqual(output);
+		});
+	});
+});
diff --git a/packages/chord-mark/tests/unit/renderer/spacers/chord/getMaxBeatsWidth.spec.js b/packages/chord-mark/tests/unit/renderer/spacers/chord/getMaxBeatsWidth.spec.js
@@ -376,3 +376,37 @@ describe('Sub-beat delimiters', () => {
 		}
 	);
 });
+
+describe('Roman numerals', () => {
+	describe.each([
+		[
+			'Single chord per beat',
+			'key C\nC\nF',
+			[{ 1: 'IV'.length, 2: 0, 3: 0, 4: 0 }],
+		],
+		[
+			'With sub-beat groups',
+			'key C\n[F Em F Em] C...',
+			[{ 1: '[IV iii IV iii]'.length, 2: 'C'.length, 3: 0, 4: 0 }],
+		],
+	])(
+		'take roman numerals width into account instead of chord symbols',
+		(title, input, output) => {
+			test(title, () => {
+				const parsedSong = parseSong(input);
+				let { allLines } = parsedSong;
+
+				allLines = forEachChordInSong(
+					allLines,
+					(chord) => (chord.symbol = getChordSymbol(chord.model))
+				);
+
+				const maxBeatsWidth = getMaxBeatsWidth(allLines, {
+					shouldAlignChordsWithLyrics: () => false,
+					symbolType: 'roman',
+				});
+				expect(maxBeatsWidth).toEqual(output);
+			});
+		}
+	);
+});