chore(stylelint-plugin): setup vitest [KHCP-10186] #213

portikM · 2024-01-19T21:13:00Z

Summary

Adds unit tests for stylelint plugin rules logic

Jira: https://konghq.atlassian.net/browse/KHCP-10186

portikM · 2024-01-22T20:29:34Z

stylelint-plugin/rules/use-proper-token/index.js

-      /**
-       * PostCSS AST declaration node
-       * Docs: https://postcss.org/api/#declaration
-       */
-
-      const declProp = decl.prop
-      const declValue = decl.value
-      // check if the value contains a token as CSS or SCSS variable
-      const hasToken = [`--${KONG_TOKEN_PREFIX}`, `$${KONG_TOKEN_PREFIX}`].some(pattern => declValue.includes(pattern))
-      if (!hasToken) {
-        // skip validating if the value does not contain a token
-        return
-      }
-
-      const tokenProperty = Object.keys(PROPERTY_TOKEN_MAP).find(key => key.split(',').some(prop => prop === declProp))
-
-      // check if the property is in the property map
-      const isEnforcedProp = !!tokenProperty
-      if (!isEnforcedProp) {
-        return
-      }
-
-      const valueTokens = extractTokensFromValue(declValue)
-      // get the appropriate tokens for the property and create regex for each
-      // regex pattern: /kui-(?:[a-z0-9-]+-)?token(?:-[a-z0-9-]+)?$/
-      // this allows to match both regular and component tokens
-      const appropriateTokens = PROPERTY_TOKEN_MAP[tokenProperty].map(token => new RegExp(KONG_TOKEN_PREFIX + '(?:[a-z0-9-]+-)?' + token + '(?:-[a-z0-9-]+)?$'))
-      // filter out tokens that are not appropriate for the property
-      const inappropriateTokens = valueTokens.filter(vToken => !appropriateTokens.some(aTokenRegex => aTokenRegex.test(vToken)))


This part (the rule logic) was moved to a separate file

adamdehaven · 2024-01-22T21:16:12Z

stylelint-plugin/package.json

@@ -0,0 +1,15 @@
+{


issue: this isn't a standalone package, so it shouldn't have its own dependencies or commands.

Move the commands to the root package.json, and install the devDependencies there, if needed

adamdehaven · 2024-01-22T21:16:41Z

.github/workflows/test.yaml

+          yarn --cwd stylelint-plugin install --frozen-lockfile
+          yarn --cwd stylelint-plugin test:unit


Dependencies are resolved from the root

Suggested change

yarn --cwd stylelint-plugin install --frozen-lockfile

yarn --cwd stylelint-plugin test:unit

yarn test:unit

adamdehaven · 2024-01-22T21:17:44Z

stylelint-plugin/rules/use-proper-token/index.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'


issue: rename test file to match the file it tests with suffix *.spec.ts

adamdehaven · 2024-01-22T21:18:48Z

stylelint-plugin/rules/use-proper-token/getInappropriateTokens.js

@@ -0,0 +1,38 @@
+const PROPERTY_TOKEN_MAP = require('./token-map')


issue/nit: all other files are kebab-case; can you rename this one to match?

adamdehaven · 2024-01-22T21:20:55Z

stylelint-plugin/rules/use-proper-token/index.test.ts

+    expect(getInappropriateTokens(decl)).toEqual([])
+  })
+
+  it('returns empty array when no `kui-` token used in value (CSS variable)', () => {


Since you're going to have two separate sets of tests CSS Custom Properites and SCSS variables can you add two child describe blocks within the root to separate the tests?

describe('CSS Custom Properties, () => {}) describe('SCSS variables, () => {})

adamdehaven · 2024-01-22T21:21:26Z

stylelint-plugin/rules/use-proper-token/index.test.ts

+  it('returns empty array when property is not enforced', () => {
+    const decl = {
+      prop: 'border-collapse',
+      value: 'var(--kui-color-text)',
+    }
+
+    expect(getInappropriateTokens(decl)).toEqual([])
+  })


I'm not sure I understand what "is not enforced" means here?

Rephrased (property that is not guarded)

adamdehaven · 2024-01-22T21:22:17Z

stylelint-plugin/rules/use-proper-token/index.test.ts

+  it('returns empty array when appropriate component token used', () => {
+    const decl = {
+      prop: 'color',
+      value: 'var(--kui-method-get-color-text)',
+    }
+
+    expect(getInappropriateTokens(decl)).toEqual([])
+  })
+
+  it('returns an array with token when inappropriate component token used (CSS variable)', () => {
+    const decl = {
+      prop: 'color',
+      value: 'var(--kui-method-get-color-background)',
+    }
+
+    expect(getInappropriateTokens(decl)).toEqual(['kui-method-get-color-background'])
+  })
+
+  it('returns an array of unique tokens when inappropriate component token used (CSS variable with SCSS fallback)', () => {
+    const decl = {
+      prop: 'color',
+      value: 'var(--kui-method-get-color-background, $kui-method-get-color-background)',
+    }
+
+    expect(getInappropriateTokens(decl)).toEqual(['kui-method-get-color-background'])
+  })


I'd probably move these into a component tokens describe block

kongponents-bot · 2024-04-06T17:32:17Z

Install the preview package from this PR in your consuming application

In your host project, you may install the preview package version generated by this PR:

@kong/design-tokens@pr-213

adamdehaven · 2024-04-08T20:14:37Z

.github/workflows/test.yaml

@@ -45,6 +45,9 @@ jobs:
      - name: Lint
        run: yarn lint

+      - name: Run unit tests
+        run: yarn test:unit:coverage


question: we're not utilizing the coverage reports anywhere; I don't think the coverage command/package is necessary here.

As an example:

Most of these files will never have coverage anyway. Let's just run the test.

adamdehaven · 2024-04-08T21:06:35Z

package.json

+    "test:unit": "vitest",
+    "test:unit:open": "vitest --ui",
+    "test:unit:coverage": "vitest run --coverage"


nit: since we won't have another type test here, let's update the commands to just test

Suggested change

"test:unit": "vitest",

"test:unit:open": "vitest --ui",

"test:unit:coverage": "vitest run --coverage"

"test": "vitest",

"test:open": "vitest --ui",

"test:coverage": "vitest run --coverage"

adamdehaven · 2024-04-08T21:06:49Z

.github/workflows/test.yaml

@@ -45,6 +45,9 @@ jobs:
      - name: Lint
        run: yarn lint

+      - name: Run unit tests


nit

Suggested change

- name: Run unit tests

- name: Run tests

question: should the test step be after the build?

adamdehaven · 2024-04-08T21:08:58Z

package.json

+    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/ui": "^1.4.0",


issue: you added dependencies but I don't see any lockfile changes

adamdehaven · 2024-04-08T21:10:14Z

stylelint-plugin/rules/use-proper-token/get-inappropriate-tokens.js

@@ -0,0 +1,38 @@
+const PROPERTY_TOKEN_MAP = require('./token-map')


question: in the plugin files that changed, it's hard to compare to the original files. Other than moving them, are there any other changes?

adamdehaven · 2024-04-08T21:10:51Z

stylelint-plugin/rules/use-proper-token/get-inappropriate-tokens.js

+/**
+ * @param {Object} decl PostCSS AST declaration node (https://postcss.org/api/#declaration)


nit: add a description of the function

Suggested change

/**

* @param {Object} decl PostCSS AST declaration node (https://postcss.org/api/#declaration)

/**

* DESCRIPTION_GOES_HERE

* @param {Object} decl PostCSS AST declaration node (https://postcss.org/api/#declaration)

adamdehaven · 2024-04-08T21:11:40Z

stylelint-plugin/rules/use-proper-token/get-inappropriate-tokens.js

+  return inappropriateTokens
+}
+
+export default getInappropriateTokens


issue: this is esm syntax; shoudn't this be CommonJS with module.exports ?

adamdehaven · 2024-04-08T21:19:49Z

stylelint-plugin/rules/use-proper-token/get-inappropriate-tokens.spec.ts

+    it('returns empty array when token is used for a property that is not guarded', () => {
+      const decl = {
+        prop: 'border-collapse',
+        value: 'var(--kui-color-text)',


question: For some of your tests, sometimes you pass in a raw value, other times you pass in a CSS Custom Property (like shown here) and other times a Sass variable.

The type of input you pass in doesn't seem to matter in most of the tests, based on their descriptions, so is there a reason we can't standardize and just pass in raw values, e.g. red or #000?

When the value changes formats randomly between tests, it makes it seem like the value is part of what is being tested, even though it is not.

If you do want to run the unit tests for each type of value (e.g. raw, CSS custom property, Sass variable) we can define an array at the top of the test file and loop through each value to test each input type.

chore(stylelint-plugin): setup vitest [KHCP-10186]

57c29d3

portikM self-assigned this Jan 19, 2024

portikM added 3 commits January 19, 2024 16:15

test(stylelint-plugin): dummy test [KHCP-10186]

6211e49

fix(stylelint-plugin): break out rule logic [KHCP-10186]

037ef9c

test(stylelint-plugin): add tests [KHCP-10186]

3437cf1

portikM marked this pull request as ready for review January 22, 2024 20:27

portikM requested review from kongponents-bot, adamdehaven, jillztom and ValeryG as code owners January 22, 2024 20:27

portikM commented Jan 22, 2024

View reviewed changes

adamdehaven requested changes Jan 22, 2024

View reviewed changes

portikM and others added 3 commits April 6, 2024 12:32

Merge branch 'main' into chore/khcp-10186-stylelint-plugin-vitest

4cd9536

fix(stylelint-plugin): address PR feedback [KHCP-10186]

16b005e

docs(stylelint-plugin): add docs [KHCP-10186]

068849b

adamdehaven requested changes Apr 8, 2024

View reviewed changes

adamdehaven marked this pull request as draft September 30, 2024 20:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(stylelint-plugin): setup vitest [KHCP-10186] #213

chore(stylelint-plugin): setup vitest [KHCP-10186] #213

portikM commented Jan 19, 2024 •

edited

Loading

portikM Jan 22, 2024

adamdehaven Jan 22, 2024

adamdehaven Jan 22, 2024

adamdehaven Jan 22, 2024

adamdehaven Jan 22, 2024

adamdehaven Jan 22, 2024

adamdehaven Jan 22, 2024

portikM Apr 8, 2024 •

edited

Loading

adamdehaven Jan 22, 2024

kongponents-bot commented Apr 6, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

adamdehaven Apr 8, 2024

		yarn --cwd stylelint-plugin install --frozen-lockfile
		yarn --cwd stylelint-plugin test:unit

	yarn --cwd stylelint-plugin install --frozen-lockfile
	yarn --cwd stylelint-plugin test:unit
	yarn test:unit

		@@ -0,0 +1,103 @@
		import { describe, it, expect } from 'vitest'

		@@ -0,0 +1,38 @@
		const PROPERTY_TOKEN_MAP = require('./token-map')

		/**
		* @param {Object} decl PostCSS AST declaration node (https://postcss.org/api/#declaration)

chore(stylelint-plugin): setup vitest [KHCP-10186] #213

Are you sure you want to change the base?

chore(stylelint-plugin): setup vitest [KHCP-10186] #213

Conversation

portikM commented Jan 19, 2024 • edited Loading

Summary

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

portikM Apr 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kongponents-bot commented Apr 6, 2024

Install the preview package from this PR in your consuming application

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

portikM commented Jan 19, 2024 •

edited

Loading

portikM Apr 8, 2024 •

edited

Loading