Add test for coloured square brackets

Author: zerodevx

src/routes/+page.svelte

@@ -107,6 +107,13 @@ let depth = 0
   </div>
 </section>
 
+<section>
+  <h1>Test red square brackets</h1>
+  <div class="wrap" id="red_square">
+    <JsonView json={fixture[0]} --jsonBracketColor="blue" />
+  </div>
+</section>
+
 <style>
 section {
   margin: 0 0 4rem 0;
@@ -118,4 +125,7 @@ section {
   font-size: 0.875rem;
   color: #374151;
 }
+#red_square :global(.isArray) {
+  color: red;
+}
 </style>

tests/basic.test.js tests/test.jstests/basic.test.js renamed to tests/test.js

@@ -26,3 +26,12 @@ test('special types', async ({ page }) => {
     expect(list[a]).toStrictEqual(asserts[a])
   }
 })
+
+test('red square brackets', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.locator('#red_square ._jsonBkt').first()).toHaveCSS('color', 'rgb(0, 0, 255)')
+  await expect(page.locator('#red_square ._jsonBkt.isArray').first()).toHaveCSS(
+    'color',
+    'rgb(255, 0, 0)'
+  )
+})