test: add basic test for stylelint

fi3ework · Oct 13, 2022 · 5275ce2 · 5275ce2
1 parent 443567c
commit 5275ce2
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 0 deletions.
diff --git a/playground/stylelint-default/.eslintrc.json b/playground/stylelint-default/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}
diff --git a/playground/stylelint-default/.stylelintrc.json b/playground/stylelint-default/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}
diff --git a/playground/stylelint-default/__tests__/__snapshots__/test.spec.ts.snap b/playground/stylelint-default/__tests__/__snapshots__/test.spec.ts.snap
@@ -0,0 +1,30 @@
+// Vitest Snapshot v1
+
+exports[`stylelint > serve > get initial error and subsequent error 1`] = `"[{\\"checkerId\\":\\"Stylelint\\",\\"frame\\":\\"  > 1 | #root {/n      |       ^/n  > 2 | }/n      | ^^/n    3 |/n    4 | body {/n    5 |   color: rgb(0, 0, 0);\\",\\"id\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"level\\":1,\\"loc\\":{\\"column\\":7,\\"file\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"line\\":1},\\"message\\":\\"Unexpected empty block (block-no-empty) (block-no-empty)\\",\\"stack\\":\\"\\"},{\\"checkerId\\":\\"Stylelint\\",\\"frame\\":\\"    3 |/n    4 | body {/n  > 5 |   color: rgb(0, 0, 0);/n      |          ^^^^^^^^^^^^/n    6 | }/n    7 |\\",\\"id\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"level\\":1,\\"loc\\":{\\"column\\":10,\\"file\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"line\\":5},\\"message\\":\\"Expected modern color-function notation (color-function-notation) (color-function-notation)\\",\\"stack\\":\\"\\"}]"`;
+
+exports[`stylelint > serve > get initial error and subsequent error 2`] = `
+" ERROR(Stylelint)  Unexpected empty block (block-no-empty) (block-no-empty)
+ FILE  <PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css:1:7
+
+  > 1 | #root {
+      |       ^
+  > 2 | }
+      | ^^
+    3 |
+    4 | body {
+    5 |   color: rgb(0, 0, 0);
+ ERROR(Stylelint)  Expected modern color-function notation (color-function-notation) (color-function-notation)
+ FILE  <PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css:5:10
+
+    3 |
+    4 | body {
+  > 5 |   color: rgb(0, 0, 0);
+      |          ^^^^^^^^^^^^
+    6 | }
+    7 |
+[Stylelint] Found 2 errors and 0 warning"
+`;
+
+exports[`stylelint > serve > get initial error and subsequent error 3`] = `"[{\\"checkerId\\":\\"Stylelint\\",\\"frame\\":\\"  > 1 | #root {/n      |       ^/n  > 2 | }/n      | ^^/n    3 |/n    4 | body {/n    5 |   color: rgb(0, 0, 0);\\",\\"id\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"level\\":1,\\"loc\\":{\\"column\\":7,\\"file\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"line\\":1},\\"message\\":\\"Unexpected empty block (block-no-empty) (block-no-empty)\\",\\"stack\\":\\"\\"},{\\"checkerId\\":\\"Stylelint\\",\\"frame\\":\\"    3 |/n    4 | body {/n  > 5 |   color: rgb(0, 0, 0);/n      |          ^^^^^^^^^^^^/n    6 | }/n    7 |\\",\\"id\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"level\\":1,\\"loc\\":{\\"column\\":10,\\"file\\":\\"<PROJECT_ROOT>/playground-temp/stylelint-default/src/style.css\\",\\"line\\":5},\\"message\\":\\"Expected modern color-function notation (color-function-notation) (color-function-notation)\\",\\"stack\\":\\"\\"}]"`;
+
+exports[`stylelint > serve > get initial error and subsequent error 4`] = `""`;
diff --git a/playground/stylelint-default/__tests__/test.spec.ts b/playground/stylelint-default/__tests__/test.spec.ts
@@ -0,0 +1,39 @@
+import stringify from 'fast-json-stable-stringify'
+import { describe, expect, it } from 'vitest'
+import {
+  diagnostics,
+  editFile,
+  expectStderrContains,
+  isBuild,
+  isServe,
+  log,
+  resetReceivedLog,
+  sleepForEdit,
+  sleepForServerReady,
+  stripedLog,
+} from '../../testUtils'
+
+describe('stylelint', () => {
+  describe.runIf(isServe)('serve', () => {
+    it('get initial error and subsequent error', async () => {
+      await sleepForServerReady()
+      expect(stringify(diagnostics)).toMatchSnapshot()
+      expect(stripedLog).toMatchSnapshot()
+
+      console.log('-- edit error file --')
+      resetReceivedLog()
+      editFile('src/style.css', (code) => code.replace(`color: rgb(0, 0, 0);`, `color: #fff;`))
+      await sleepForEdit()
+      expect(stringify(diagnostics)).toMatchSnapshot()
+      expect(stripedLog).toMatchSnapshot()
+    })
+  })
+
+  describe.runIf(isBuild)('build', () => {
+    const expectedMsg = ['Unexpected empty block', 'Expected modern color-function notation']
+
+    it('should fail', async () => {
+      expectStderrContains(log, expectedMsg)
+    })
+  })
+})
diff --git a/playground/stylelint-default/index.html b/playground/stylelint-default/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/stylelint-default/package.json b/playground/stylelint-default/package.json
@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "name": "@playground/stylelint-default",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "stylelint \"./**/*.css\""
+  },
+  "dependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "meow": "^9.0.0",
+    "stylelint": "^14.0.0",
+    "stylelint-config-standard": "^28.0.0",
+    "typescript": "~4.5.5",
+    "vite": "^3.0.4",
+    "vite-plugin-checker": "workspace:*"
+  }
+}
diff --git a/playground/stylelint-default/src/main.ts b/playground/stylelint-default/src/main.ts
@@ -0,0 +1,6 @@
+import './style.css'
+
+const rootDom = document.querySelector('#root')!
+rootDom.innerHTML = 'Hello world.'
+
+export {}
diff --git a/playground/stylelint-default/src/style.css b/playground/stylelint-default/src/style.css
@@ -0,0 +1,6 @@
+#root {
+}
+
+body {
+  color: rgb(0, 0, 0);
+}
diff --git a/playground/stylelint-default/tsconfig.json b/playground/stylelint-default/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["./src"]
+}
diff --git a/playground/stylelint-default/vite.config.js b/playground/stylelint-default/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import checker from 'vite-plugin-checker'
+
+export default defineConfig({
+  plugins: [
+    checker({
+      stylelint: {
+        lintCommand: 'stylelint ./**/*.css',
+      },
+    }),
+  ],
+})