Merge pull request #1 from deinsoftware/dev

add userEvents and Queries snippets

Author: equiman

.github/social/preview.png

@@ -1,25 +1,19 @@
 {
   "cSpell.words": [
-    "cfrv",
+    "beus",
     "deinsoftware",
     "Equiman",
+    "gabr",
+    "gabro",
+    "gbrc",
+    "gbrcc",
+    "gbrh",
+    "gbrhl",
+    "gbro",
     "github",
-    "mrvo",
+    "itrh",
+    "itue",
     "paypal",
-    "tbct",
-    "tbgt",
-    "tbgte",
-    "tbid",
-    "tblt",
-    "tblte",
-    "thbc",
-    "thbct",
-    "thbcw",
-    "thblcw",
-    "tmis",
-    "ttemis",
-    "ttems",
-    "vfrv",
     "volta"
   ],
   "markdownlint.config": {

.vscode/settings.json

@@ -9,6 +9,13 @@ Fixed       for any bug fixes.
 Security    to invite users to upgrade in case of vulnerabilities.
 -->
 
+## 0.0.2 - 2023/04/05
+
+### Added
+
+- user event snippets
+- queries snippets
+
 ## 0.0.1 - 2023/04/04
 
 ### Added

CHANGELOG.md

@@ -21,6 +21,8 @@ The quick and easy way to create and use Testing Library with [VS Code](https://
 - [Supported Languages](#supported-languages)
 - [Snippets](#snippets)
   - [Import](#import)
+  - [User Event](#user-event)
+  - [Queries](#queries)
 - [Keyboard](#keyboard)
 - [Settings](#settings)
 - [About](#about)
@@ -73,10 +75,30 @@ Below is a list of all available snippets and the triggers of each one. The `░
 
 |  Trigger | Result                                                            |
 | -------: | ----------------------------------------------------------------- |
-|   `itl→` | `import { render, screen } from '@testing-library/░<react\|vue>█` |
-|   `itr→` | `import { render, screen } from '@testing-library/react█`         |
-|   `itv→` | `import { render, screen } from '@testing-library/vue█`           |
-|   `itu→` | `import user from '@testing-library/user-event'█`                 |
+|   `itl→` | `import { render, screen } from '@testing-library/░<react\|vue>'█` |
+|   `itr→` | `import { render, screen } from '@testing-library/react'█`         |
+|   `itv→` | `import { render, screen } from '@testing-library/vue'█`           |
+|  `itrh→` | `import { renderHook } from '@testing-library/react'█`            |
+|  `itue→` | `import user from '@testing-library/user-event'█`                 |
+
+### User Event
+
+|  Trigger | Result                                                                 |
+| -------: | ---------------------------------------------------------------------- |
+|  `beus→` | <code>beforeEach(() => {<br/>&nbsp;&nbsp;user.setup()<br/>})█</code>   |
+
+### Queries
+
+|  Trigger | Result                                                           |
+| -------: | ---------------------------------------------------------------- |
+|   `gbr→` | `screen.getByRole('░id')█`                                       |
+|  `gbro→` | `screen.getByRole('░id', {░})█`                                  |
+|  `gbrc→` | `screen.getByRole('checkbox')█`                                  |
+| `gbrcc→` | `screen.getByRole('checkbox', { checked: ░<true\|false>} })█`    |
+|  `gbrh→` | `screen.getByRole('heading')█`                                   |
+| `gbrhl→` | `screen.getByRole('heading', { level: ░<1\|2\|3\|4\|5\|6>} })█`  |
+|  `gabr→` | `screen.getAllByRole('░id')█`                                    |
+| `gabro→` | `screen.getAllByRole('░id', {░})█`                               |
 
 ⇧ [Back to menu](#menu)
 

README.md

@@ -1,7 +1,7 @@
 {
   "name": "testing-library-snippets",
   "description": "VS Code Testing Library snippets for JS and TS",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "displayName": "Testing Library Snippets",
   "publisher": "deinsoftware",
   "icon": "images/light-icon.png",
@@ -46,21 +46,61 @@
         "language": "javascript",
         "path": "./snippets/import.json"
       },
+      {
+        "language": "javascript",
+        "path": "./snippets/user-event.json"
+      },
+      {
+        "language": "javascript",
+        "path": "./snippets/queries.json"
+      },
       {
         "language": "javascriptreact",
         "path": "./snippets/import.json"
       },
+      {
+        "language": "javascriptreact",
+        "path": "./snippets/user-event.json"
+      },
+      {
+        "language": "javascriptreact",
+        "path": "./snippets/queries.json"
+      },
       {
         "language": "vue",
         "path": "./snippets/import.json"
       },
+      {
+        "language": "vue",
+        "path": "./snippets/user-event.json"
+      },
+      {
+        "language": "vue",
+        "path": "./snippets/queries.json"
+      },
       {
         "language": "typescript",
         "path": "./snippets/import.json"
       },
+      {
+        "language": "typescript",
+        "path": "./snippets/user-event.json"
+      },
+      {
+        "language": "typescript",
+        "path": "./snippets/queries.json"
+      },
       {
         "language": "typescriptreact",
         "path": "./snippets/import.json"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./snippets/user-event.json"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./snippets/queries.json"
       }
     ]
   },

package.json

@@ -14,8 +14,13 @@
     "body": "import { render, screen } from '@testing-library/vue'$0",
     "description": "essential imports for testing-library"
   },
+  "import.testing-library.render-hook": {
+    "prefix": "itrh",
+    "body": "import { renderHook } from '@testing-library/react'$0",
+    "description": "imports renderHook for testing-library"
+  },
   "import.testing-library.user-event": {
-    "prefix": "itu",
+    "prefix": "itue",
     "body": "import user from '@testing-library/user-event'$0",
     "description": "imports user-event for testing-library"
   }

snippets/import.json

@@ -0,0 +1,42 @@
+{
+  "getBy.role": {
+    "prefix": "gbr",
+    "body": ["screen.getByRole('${1:id}')$0"],
+    "description": "getByRole query"
+  },
+  "getBy.role.options": {
+    "prefix": "gbro",
+    "body": ["screen.getByRole('${1:id}', {$2})$0"],
+    "description": "getByRole query with options"
+  },
+  "getBy.role.checkbox": {
+    "prefix": "gbrc",
+    "body": ["screen.getByRole('checkbox')$0"],
+    "description": "getByRole checkbox"
+  },
+  "getBy.role.checkbox.checked": {
+    "prefix": "gbrcc",
+    "body": ["screen.getByRole('checkbox', { checked: ${1|true,false|} })$0"],
+    "description": "getByRole checkbox checked"
+  },
+  "getBy.role.heading": {
+    "prefix": "gbrh",
+    "body": ["screen.getByRole('heading')$0"],
+    "description": "getByRole heading"
+  },
+  "getBy.role.heading.level": {
+    "prefix": "gbrhl",
+    "body": ["screen.getByRole('heading', { level: ${1|1,2,3,4,5,6|} })$0"],
+    "description": "getByRole heading level"
+  },
+  "getAllBy.role": {
+    "prefix": "gabr",
+    "body": ["screen.getAllByRole('${1:id}')$0"],
+    "description": "getAllByRole query"
+  },
+  "getAllBy.role.options": {
+    "prefix": "gabro",
+    "body": ["screen.getAllByRole('${1:id}', {$2})$0"],
+    "description": "getAllByRole query with options"
+  }
+}

snippets/queries.json

@@ -0,0 +1,7 @@
+{
+  "beforeEach": {
+    "prefix": "beus",
+    "body": ["beforeEach(() => {", "\tuser.setup()", "})$0"],
+    "description": "beforeEach user setup function is called once before each spec"
+  }
+}

snippets/user-event.json

@@ -1,9 +1,13 @@
 import { it, expect, describe } from 'vitest'
 
 const importSnippets = require("../snippets/import.json")
+const userEventSnippets = require("../snippets/user-event.json")
+const queriesSnippets = require("../snippets/queries.json")
 
 const snippets = {
   ...importSnippets,
+  ...userEventSnippets,
+  ...queriesSnippets,
 }
 
 const unique = (xs) => [...new Set(xs)]