Linting and initial tests

Author: georgewrmarshall

src/figma/tokens.json

@@ -1179,4 +1179,4 @@
     }
   },
   "$themes": []
-}
+}

src/js/typography/typography.test.ts

@@ -3,22 +3,81 @@ import { typography } from './typography';
 
 const designTokens = require('../../figma/tokens.json');
 
+/**
+ * Trim string between 2 characters
+ *
+ * @param {string} str - The string to be trimmed
+ * @param {string} firstChar - The first character to start from '$'
+ * @param {string} lastChar - The last character to stop at '.'
+ * @returns {string}
+ */
+function trimStringBetweenCharacters(
+  str: string,
+  firstChar = '$',
+  lastChar = '.',
+) {
+  return str.substring(str.indexOf(firstChar) + 1, str.lastIndexOf(lastChar));
+}
+
+/**
+ * Trim string after character. Default character is '.'
+ *
+ * @param {string} str - The string to be trimmed
+ * @param {string} char - The first character to start from '.'
+ * @returns {string}
+ */
+function trimStringAfterCharacter(str: string, char = '.') {
+  return str.split(char).pop();
+}
+
+/**
+ * Creates a new figma token object by creating object keys from a string
+ *
+ * @param {string} str - The object path as a string to be trimmed into object keys
+ * @param {Object} obj - Global figma token object
+ * @returns {Object} - New object formed from object keys created from provided string
+ */
+function createNewFigmaTokenObject(str: string, obj: any) {
+  const firstString = trimStringBetweenCharacters(str);
+  const secondString = trimStringAfterCharacter(str);
+  return obj[`${firstString}`][`${secondString}`];
+}
+
 describe('Typography Small Screen', () => {
   it('js tokens for sDisplayMD matches figma tokens sDisplayMD', () => {
     expect(typography.sDisplayMD.fontFamily).toStrictEqual(
-      designTokens.global.fontFamilies['euclid-circular-b'].value,
+      createNewFigmaTokenObject(
+        designTokens.global['S-Display-MD'].value.fontFamily,
+        designTokens.global,
+      ).value,
     );
     expect(typography.sDisplayMD.fontWeight).toStrictEqual('700');
-    expect(typography.sDisplayMD.fontSize.toString()).toStrictEqual(
-      designTokens.global.fontSize[6].value,
-    );
 
-    expect(typography.sDisplayMD.lineHeight.toString()).toStrictEqual(
-      designTokens.global.lineHeights[1].value,
-    );
-
-    expect(typography.sDisplayMD.letterSpacing.toString()).toStrictEqual(
-      designTokens.global.letterSpacing[0].value,
+    expect(typography.sDisplayMD.fontSize).toStrictEqual(
+      Number(
+        createNewFigmaTokenObject(
+          designTokens.global['S-Display-MD'].value.fontSize,
+          designTokens.global,
+        ).value,
+      ),
+    );
+
+    expect(typography.sDisplayMD.lineHeight).toStrictEqual(
+      Number(
+        createNewFigmaTokenObject(
+          designTokens.global['S-Display-MD'].value.lineHeight,
+          designTokens.global,
+        ).value,
+      ),
+    );
+
+    expect(typography.sDisplayMD.letterSpacing).toStrictEqual(
+      Number(
+        createNewFigmaTokenObject(
+          designTokens.global['S-Display-MD'].value.letterSpacing,
+          designTokens.global,
+        ).value,
+      ),
     );
   });