chore: enable linting in workflow (#101)

* chore(tools): improve workflow file

* chore: set up linter

* chore: fix linter issues

Author: Naomi Carrigan

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "extends": [
+    "xo",
+    "prettier",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "env": {
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "complexity": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "no-warning-comments": "off",
+    "camelcase": [
+      "warn",
+      {
+        "allow": [
+          "function_parameters",
+          "function_body",
+          "function_indentation"
+        ]
+      }
+    ]
+  },
+  "plugins": ["prettier", "@typescript-eslint"],
+  "parser": "@typescript-eslint/parser"
+}

.github/workflows/ci.yml

@@ -2,19 +2,26 @@ name: CI
 on: pull_request
 jobs:
   tests:
+    name: "Node CI"
     runs-on: ubuntu-latest
     steps:
       # Checkout the Repo
       - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3
 
-      # Install Node 12
+      # Install Node 18
       - name: Setup Node
         uses: actions/setup-node@f1f314fca9dfce2769ece7d933488f076716723e # v1
         with:
-          node-version: 12
+          node-version: 18
 
-      # Install dependencies
-      - run: npm ci
+      - name: Install Dependencies
+        run: npm ci
 
-      # Run tests
-      - run: npm test
+      - name: Lint Files
+        run: npm run lint
+
+      - name: Verify Build
+        run: npm run build
+
+      - name: Run Tests
+        run: npm test

lib/__fixtures__/curriculum-helper-css.ts

@@ -306,7 +306,7 @@ body {
 
 const testValues = {
   cssFullExample,
-  cssCodeWithCommentsRemoved
+  cssCodeWithCommentsRemoved,
 };
 
 export default testValues;

lib/__fixtures__/curriculum-helpers-html.ts

@@ -24,7 +24,7 @@ not a comment
 
 const testValues = {
   htmlFullExample,
-  htmlCodeWithCommentsRemoved
+  htmlCodeWithCommentsRemoved,
 };
 
 export default testValues;

lib/__fixtures__/curriculum-helpers-javascript.ts

@@ -64,7 +64,7 @@ const testValues = {
   jsCodeWithNoCall,
   jsCodeWithNoArgCall,
   jsCodeWithArgCall,
-  jsCodeWithCommentedCall
+  jsCodeWithCommentedCall,
 };
 
 export default testValues;

lib/__fixtures__/curriculum-helpers-remove-white-space.ts

@@ -4,11 +4,11 @@ This string sentence has various white spaces characters:
 \t* This line has several preceding white space characters.`;
 
 const stringWithWhiteSpaceCharsRemoved =
-  'Thisstringsentencehasvariouswhitespacescharacters:*Thislinestartswithatabcharacter.*Thislinehasseveralprecedingwhitespacecharacters.';
+  "Thisstringsentencehasvariouswhitespacescharacters:*Thislinestartswithatabcharacter.*Thislinehasseveralprecedingwhitespacecharacters.";
 
 const testValues = {
   stringWithWhiteSpaceChars,
-  stringWithWhiteSpaceCharsRemoved
+  stringWithWhiteSpaceCharsRemoved,
 };
 
-export default testValues;
+export default testValues;

lib/__tests__/css-helper.test.ts

@@ -4,91 +4,91 @@
 import { cssString } from "../__fixtures__/curriculum-helper-css";
 import { CSSHelp } from "../index";
 
-describe('css-help', () => {
+describe("css-help", () => {
   const doc = document;
   let t: CSSHelp;
   beforeEach(() => {
-    const style = doc.createElement('style');
+    const style = doc.createElement("style");
     style.innerHTML = cssString as string;
     doc.head.appendChild(style);
     t = new CSSHelp(doc);
     // JSDOM does not implement latest CSSOM spec. As such,
     // conditionText property needs to be manually added.
     // REF: https://github.com/freeCodeCamp/freeCodeCamp/pull/42148#issuecomment-847291137
-    const mediaRule = t.getCSSRules('media')?.[0] as CSSMediaRule;
+    const mediaRule = t.getCSSRules("media")?.[0] as CSSMediaRule;
     const conditionText = mediaRule.media[0];
     mediaRule.conditionText = conditionText;
   });
-  describe('getStyle', () => {
-    it('should return an ExtendedCSSStyleDeclartion object of length 1', () => {
-      expect(t.getStyle('*')?.length).toEqual(1);
+  describe("getStyle", () => {
+    it("should return an ExtendedCSSStyleDeclartion object of length 1", () => {
+      expect(t.getStyle("*")?.length).toEqual(1);
     });
-    it('should return a non-empty ExtendedCSSStyleDeclaration object', () => {
-      expect(t.getStyle('.bb1')).toBeTruthy();
+    it("should return a non-empty ExtendedCSSStyleDeclaration object", () => {
+      expect(t.getStyle(".bb1")).toBeTruthy();
     });
-    it('should return a whitespaceless string', () => {
-      expect(t.getStyle('.bb1d')?.getPropVal('background', true)).toEqual(
-        'linear-gradient(var(--building-color1)50%,var(--window-color1))'
+    it("should return a whitespaceless string", () => {
+      expect(t.getStyle(".bb1d")?.getPropVal("background", true)).toEqual(
+        "linear-gradient(var(--building-color1)50%,var(--window-color1))"
       );
     });
   });
-  describe('getStyleAny', () => {
-    it('should return an ExtendedCSSStyleDeclartion object of length 1', () => {
-      expect(t.getStyleAny(['.earth', '.sky'])?.length).toEqual(1);
+  describe("getStyleAny", () => {
+    it("should return an ExtendedCSSStyleDeclartion object of length 1", () => {
+      expect(t.getStyleAny([".earth", ".sky"])?.length).toEqual(1);
     });
-    it('should return null', () => {
-      expect(t.getStyleAny(['.sun', '.earth', '.moon'])).toBeNull();
+    it("should return null", () => {
+      expect(t.getStyleAny([".sun", ".earth", ".moon"])).toBeNull();
     });
   });
-  describe('isPropertyUsed', () => {
-    it('should return true on existing properties', () => {
-      expect(t.isPropertyUsed('height')).toBeTruthy();
+  describe("isPropertyUsed", () => {
+    it("should return true on existing properties", () => {
+      expect(t.isPropertyUsed("height")).toBeTruthy();
     });
-    it('should return true on existing custom properties', () => {
-      expect(t.isPropertyUsed('--building-color1')).toBeTruthy();
+    it("should return true on existing custom properties", () => {
+      expect(t.isPropertyUsed("--building-color1")).toBeTruthy();
     });
   });
-  describe('isDeclaredAfter', () => {
-    it('should return true if existing style is declared after another', () => {
-      expect(t.getStyleRule('.bb1a')?.isDeclaredAfter('.bb1')).toBeTruthy();
+  describe("isDeclaredAfter", () => {
+    it("should return true if existing style is declared after another", () => {
+      expect(t.getStyleRule(".bb1a")?.isDeclaredAfter(".bb1")).toBeTruthy();
     });
   });
-  describe('getPropertyValue', () => {
-    it('should return custom property value needing trim', () => {
+  describe("getPropertyValue", () => {
+    it("should return custom property value needing trim", () => {
       expect(
-        t.getStyle(':root')?.getPropertyValue('--building-color1')?.trim()
-      ).toEqual('#aa80ff');
+        t.getStyle(":root")?.getPropertyValue("--building-color1")?.trim()
+      ).toEqual("#aa80ff");
     });
-    it('should return value to existing property', () => {
+    it("should return value to existing property", () => {
       expect(
-        t.getStyle('.bb4a')?.getPropertyValue('background-color')
+        t.getStyle(".bb4a")?.getPropertyValue("background-color")
       ).toBeTruthy();
     });
-    it('should return property value without evaluating result', () => {
-      expect(t.getStyle('.bb4a')?.getPropertyValue('background-color')).toEqual(
-        'var(--building-color4)'
+    it("should return property value without evaluating result", () => {
+      expect(t.getStyle(".bb4a")?.getPropertyValue("background-color")).toEqual(
+        "var(--building-color4)"
       );
     });
   });
-  describe('getCSSRules', () => {
-    it('should return a CSSRules array of length 1', () => {
-      expect(t.getCSSRules('media')?.length).toEqual(1);
+  describe("getCSSRules", () => {
+    it("should return a CSSRules array of length 1", () => {
+      expect(t.getCSSRules("media")?.length).toEqual(1);
     });
   });
-  describe('getRuleListsWithinMedia', () => {
-    it('should return a CSSMediaRule array with a selectable CSSStyleRule', () => {
+  describe("getRuleListsWithinMedia", () => {
+    it("should return a CSSMediaRule array with a selectable CSSStyleRule", () => {
       expect(
         t
-          .getRuleListsWithinMedia('(max-width: 1000px)')
-          .find(x => x.selectorText === '.sky')
+          .getRuleListsWithinMedia("(max-width: 1000px)")
+          .find((x) => x.selectorText === ".sky")
       ).toBeTruthy();
     });
-    it('should return CSSStyleDeclaration property with complex value', () => {
+    it("should return CSSStyleDeclaration property with complex value", () => {
       // NOTE: JSDOM causes value to have tabbed characters, DOM has single-line values.
       expect(
         t
-          .getRuleListsWithinMedia('(max-width: 1000px)')
-          .find(x => x.selectorText === '.sky')?.style?.background
+          .getRuleListsWithinMedia("(max-width: 1000px)")
+          .find((x) => x.selectorText === ".sky")?.style?.background
       ).toEqual(
         `radial-gradient(
       closest-corner circle at 15% 15%,
@@ -100,28 +100,28 @@ describe('css-help', () => {
       );
     });
   });
-  describe('selectorsFromSelector', () => {
-    it('should return an empty array', () => {
+  describe("selectorsFromSelector", () => {
+    it("should return an empty array", () => {
       setupDocument();
-      expect(t.selectorsFromSelector('.void')).toEqual([]);
+      expect(t.selectorsFromSelector(".void")).toEqual([]);
     });
-    it('should return an array with 9 members', () => {
+    it("should return an array with 9 members", () => {
       setupDocument();
-      expect(t.selectorsFromSelector('a')).toEqual([
-        'a',
-        'label > a',
-        'label a',
-        'form > label > a',
-        'form label a',
-        'body > form > label > a',
-        'body form label a',
-        'html > body > form > label > a',
-        'html body form label a',
+      expect(t.selectorsFromSelector("a")).toEqual([
+        "a",
+        "label > a",
+        "label a",
+        "form > label > a",
+        "form label a",
+        "body > form > label > a",
+        "body form label a",
+        "html > body > form > label > a",
+        "html body form label a",
       ]);
     });
 
     function setupDocument() {
-      const form = doc.createElement('form');
+      const form = doc.createElement("form");
       form.innerHTML = `
         <label>
           <input type="checkbox" /> I accept the <a href="#">terms and conditions</a>
@@ -132,7 +132,7 @@ describe('css-help', () => {
     }
   });
   afterEach(() => {
-    document.body.innerHTML = '';
-    document.head.innerHTML = '';
+    document.body.innerHTML = "";
+    document.head.innerHTML = "";
   });
 });

lib/__tests__/curriculum-helper.test.ts

@@ -1,13 +1,11 @@
 import cssTestValues from "../__fixtures__/curriculum-helper-css";
 import htmlTestValues from "../__fixtures__/curriculum-helpers-html";
 import jsTestValues from "../__fixtures__/curriculum-helpers-javascript";
-import whiteSpaceTestValues from '../__fixtures__/curriculum-helpers-remove-white-space';
+import whiteSpaceTestValues from "../__fixtures__/curriculum-helpers-remove-white-space";
 import * as helper from "../index";
 
-const {
-  stringWithWhiteSpaceChars,
-  stringWithWhiteSpaceCharsRemoved
-} = whiteSpaceTestValues;
+const { stringWithWhiteSpaceChars, stringWithWhiteSpaceCharsRemoved } =
+  whiteSpaceTestValues;
 
 const { cssFullExample, cssCodeWithCommentsRemoved } = cssTestValues;
 
@@ -21,7 +19,7 @@ const {
   jsCodeWithNoCall,
   jsCodeWithNoArgCall,
   jsCodeWithArgCall,
-  jsCodeWithCommentedCall
+  jsCodeWithCommentedCall,
 } = jsTestValues;
 
 describe("removeWhiteSpace", () => {
@@ -32,33 +30,33 @@ describe("removeWhiteSpace", () => {
     );
   });
 
-  it('returns a string with no white space characters', () => {
+  it("returns a string with no white space characters", () => {
     expect(removeWhiteSpace(stringWithWhiteSpaceChars)).toBe(
       stringWithWhiteSpaceCharsRemoved
     );
   });
 });
 
-describe('removeJSComments', () => {
+describe("removeJSComments", () => {
   const { removeJSComments } = helper;
-   it('returns a string', () => {
+  it("returns a string", () => {
     expect(typeof removeJSComments('const should = "return a string"')).toBe(
-      'string'
+      "string"
     );
   });
 
-  it('returns a string with no single or multi-line comments', () => {
+  it("returns a string with no single or multi-line comments", () => {
     expect(removeJSComments(jsCodeWithSingleAndMultLineComments)).toBe(
       jsCodeWithSingleAndMultLineCommentsRemoved
     );
   });
 
-  it('leaves malformed JS unchanged', () => {
-    const actual = '/ unclosed regex';
+  it("leaves malformed JS unchanged", () => {
+    const actual = "/ unclosed regex";
     expect(removeJSComments(actual)).toBe(actual);
   });
 
-  it('does not remove a url found in JS code', () => {
+  it("does not remove a url found in JS code", () => {
     expect(removeJSComments(jsCodeWithUrl)).toBe(jsCodeWithUrlUnchanged);
   });
 });
@@ -108,4 +106,4 @@ describe("isCalledWithNoArgs", () => {
   it("returns false for a commented out call", () => {
     expect(isCalledWithNoArgs("myFunc", jsCodeWithCommentedCall)).toBe(false);
   });
-});
+});