From b13544900fb998b87c6fff5f6051178ab8221fc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carsten=20G=C3=B6tzinger?= <carsten.goetzinger@concedro.com>
Date: Sat, 8 Apr 2023 08:39:47 +0200
Subject: [PATCH] fix(roman-numeral-converter): changes due to review

---
 .../roman-numeral-converter.service.test.ts        | 12 ++++--------
 .../roman-numeral-converter.service.ts             | 14 +-------------
 .../roman-numeral-converter.vue                    | 10 ++++------
 3 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.service.test.ts b/src/tools/roman-numeral-converter/roman-numeral-converter.service.test.ts
index 6d64d859..5ec9dd47 100644
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.service.test.ts
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.service.test.ts
@@ -13,10 +13,10 @@ describe('roman-numeral-converter', () => {
       expect(arabicToRoman(0.9)).toEqual('');
     });
 
-    it('should convert numbers greater than 3999999 to empty string', () => {
-      expect(arabicToRoman(3999999.1)).toEqual('');
-      expect(arabicToRoman(4000000)).toEqual('');
-      expect(arabicToRoman(10000000)).toEqual('');
+    it('should convert numbers greater than 3999 to empty string', () => {
+      expect(arabicToRoman(3999.1)).toEqual('');
+      expect(arabicToRoman(4000)).toEqual('');
+      expect(arabicToRoman(10000)).toEqual('');
     });
 
     it('should convert floating points number to the lower integer in roman version', () => {
@@ -70,10 +70,6 @@ describe('roman-numeral-converter', () => {
       expect(arabicToRoman(999)).toEqual('CMXCIX');
       expect(arabicToRoman(1000)).toEqual('M');
       expect(arabicToRoman(2000)).toEqual('MM');
-      expect(arabicToRoman(4000)).toEqual('<span style="text-decoration: overline">IV</span>');
-      expect(arabicToRoman(5000)).toEqual('<span style="text-decoration: overline">V</span>');
-      expect(arabicToRoman(9000)).toEqual('<span style="text-decoration: overline">IX</span>');
-      expect(arabicToRoman(10000)).toEqual('<span style="text-decoration: overline">X</span>');
     });
   });
 });
diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.service.ts b/src/tools/roman-numeral-converter/roman-numeral-converter.service.ts
index 64e8a516..98afec67 100644
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.service.ts
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.service.ts
@@ -1,21 +1,9 @@
 export const MIN_ARABIC_TO_ROMAN = 1;
-export const MAX_ARABIC_TO_ROMAN = 3999999;
+export const MAX_ARABIC_TO_ROMAN = 3999;
 export function arabicToRoman(num: number) {
   if (num < MIN_ARABIC_TO_ROMAN || num > MAX_ARABIC_TO_ROMAN) return '';
 
   const lookup: { [key: string]: number } = {
-    '<span style="text-decoration: overline">M</span>': 1000000,
-    '<span style="text-decoration: overline">CM</span>': 900000,
-    '<span style="text-decoration: overline">D</span>': 500000,
-    '<span style="text-decoration: overline">CD</span>': 400000,
-    '<span style="text-decoration: overline">C</span>': 100000,
-    '<span style="text-decoration: overline">XC</span>': 90000,
-    '<span style="text-decoration: overline">L</span>': 50000,
-    '<span style="text-decoration: overline">XL</span>': 40000,
-    '<span style="text-decoration: overline">X</span>': 10000,
-    '<span style="text-decoration: overline">IX</span>': 9000,
-    '<span style="text-decoration: overline">V</span>': 5000,
-    '<span style="text-decoration: overline">IV</span>': 4000,
     M: 1000,
     CM: 900,
     D: 500,
diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
index afe0b6bb..609b46c4 100644
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -6,9 +6,11 @@
           <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
         </n-form-item>
         <div class="result">
-          <span v-html="outputRoman"></span>
+          {{ outputRoman }}
         </div>
-        <n-button secondary autofocus :disabled="isCopyRomanDisabled()" @click="copyRoman"> Copy </n-button>
+        <n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
+          Copy
+        </n-button>
       </n-space>
     </n-card>
     <br />
@@ -68,10 +70,6 @@ const { attrs: validationRoman } = useValidation({
 
 const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
 const { copy: copyArabic } = useCopy({ source: outputNumeral, text: 'Arabic number copied to the clipboard' });
-
-function isCopyRomanDisabled() {
-  return validationNumeral.validationStatus === 'error' || inputNumeral.value > 3999;
-}
 </script>
 
 <style lang="less" scoped>