Add tests for v1

Author: zerodevx

playwright.config.js

@@ -1,8 +1,9 @@
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
   webServer: {
-    command: 'npm run build && npm run preview',
-    port: 4173
+    command: 'npm run dev',
+    port: 5173,
+    reuseExistingServer: true
   },
   testDir: 'tests'
 }

src/routes/+page.svelte

@@ -1,9 +1,10 @@
 <script>
-import JsonView from '$lib'
+import { JsonView } from '$lib'
 
 /* eslint-disable */
-const test1 = [
+const fixture = [
   {
+    desc: 'Test basic',
     _id: '60702426463e99454c8b9ce4',
     index: 0,
     guid: 'c47f144e-9390-4e96-8b9f-7f3d0fb4250a',
@@ -30,154 +31,41 @@ const test1 = [
       { id: 2, name: 'Mcclure Tate', address: null }
     ],
     greeting: 'Hello, Hampton Hardin! You have 2 unread messages.',
-    favoriteFruit: 'banana',
-    contacts: [],
-    report: {},
-    email2: null,
-    email3: '',
-    email4: undefined
+    favoriteFruit: 'banana'
   },
   {
-    _id: '60702426f2aec6774924fd63',
-    index: 1,
-    guid: '027c7f09-4161-47b2-91c5-01f675094e40',
-    isActive: true,
-    balance: '$2,875.12',
-    picture: 'http://placehold.it/32x32',
-    age: 28,
-    eyeColor: 'brown',
-    name: 'Atkinson Giles',
-    gender: 'male',
-    company: 'BESTO',
-    email: '[email protected]',
-    phone: '+1 (986) 474-3672',
-    address: '906 Classon Avenue, Riverton, Guam, 4080',
-    about:
-      'Consectetur esse et exercitation irure qui adipisicing magna laboris cupidatat incididunt fugiat est. Occaecat irure magna do non cillum magna veniam occaecat. Ullamco officia irure id voluptate consequat amet aliquip in eiusmod deserunt aliquip exercitation culpa excepteur. Enim occaecat consectetur ex non ipsum fugiat amet et proident esse. Commodo cillum ad eiusmod enim sunt sint officia commodo et laborum.\r\n',
-    registered: '2019-05-23T01:23:32 -08:00',
-    latitude: -37.633187,
-    longitude: -126.992778,
-    tags: ['esse', 'nostrud', 'et', 'ex', 'deserunt', 'veniam', 'veniam'],
-    friends: [
-      { id: 0, name: 'Millicent Mcconnell' },
-      { id: 1, name: 'Jeanne Wise' },
-      { id: 2, name: 'Nichols Roberts' }
-    ],
-    greeting: 'Hello, Atkinson Giles! You have 1 unread messages.',
-    favoriteFruit: 'apple'
-  },
-  {
-    _id: '607024260a4713fae5019419',
-    index: 2,
-    guid: 'b32f9f9b-0def-46a1-a286-a8196ec4638c',
-    isActive: false,
-    balance: '$3,489.63',
-    picture: 'http://placehold.it/32x32',
-    age: 36,
-    eyeColor: 'blue',
-    name: 'Desiree William',
-    gender: 'female',
-    company: 'LYRICHORD',
-    email: '[email protected]',
-    phone: '+1 (975) 485-3348',
-    address: '993 Thatford Avenue, Wells, Missouri, 2351',
-    about:
-      'Eu nostrud sunt occaecat adipisicing consectetur ipsum aute non voluptate pariatur aliquip excepteur. Minim ea aliqua do dolore tempor aliquip irure. Amet amet quis incididunt irure aute. Lorem amet reprehenderit adipisicing do laborum incididunt labore incididunt laboris velit consequat ut aute. Ea exercitation ut non dolore culpa dolore officia et elit do. Ullamco deserunt cillum aliqua tempor ipsum officia. Lorem cupidatat cillum velit est minim aliquip qui ipsum.\r\n',
-    registered: '2015-08-04T04:33:40 -08:00',
-    latitude: -15.687988,
-    longitude: -144.842709,
-    tags: ['do', 'laborum', 'fugiat', 'qui', 'duis', 'eu', 'eiusmod'],
-    friends: [
-      { id: 0, name: 'Baxter Fulton' },
-      { id: 1, name: 'Buckley Dean' },
-      { id: 2, name: 'Carmen Fitzpatrick' }
-    ],
-    greeting: 'Hello, Desiree William! You have 8 unread messages.',
-    favoriteFruit: 'apple'
+    desc: 'Test nested',
+    nest0: {
+      nest1: {
+        nest2: {
+          nest3: {
+            nest4: {
+              nest5: {
+                nest6: {
+                  nest7: {
+                    foo: 'bar'
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    arr: [[[[[[['baz']]]]]]]
   },
   {
-    _id: '60702426dce125ecccee577f',
-    index: 3,
-    guid: '0e1d5f0d-84cd-49fe-9b69-1540ab57d509',
-    isActive: true,
-    balance: '$3,254.06',
-    picture: 'http://placehold.it/32x32',
-    age: 20,
-    eyeColor: 'blue',
-    name: 'John Aguirre',
-    gender: 'female',
-    company: 'GINK',
-    email: '[email protected]',
-    phone: '+1 (828) 407-2949',
-    address: '958 Caton Avenue, Waterford, Puerto Rico, 6386',
-    about:
-      'Consequat labore minim excepteur ullamco ex consequat. Occaecat dolore magna enim eiusmod qui dolore sint qui officia. Laborum consectetur fugiat officia et sit incididunt veniam dolor culpa. Sunt anim non id sit ut ipsum laborum est sint commodo nulla incididunt incididunt. Adipisicing eiusmod voluptate deserunt minim esse reprehenderit. Irure elit culpa quis non fugiat aute proident dolore elit consectetur nostrud eu consequat nisi. Ex adipisicing in nisi proident officia.\r\n',
-    registered: '2014-09-06T10:10:11 -08:00',
-    latitude: 41.628236,
-    longitude: 161.223523,
-    tags: ['laboris', 'exercitation', 'eiusmod', 'quis', 'ad', 'amet', 'adipisicing'],
-    friends: [
-      { id: 0, name: 'Madden Ballard' },
-      { id: 1, name: 'Ferguson Gibbs' },
-      { id: 2, name: 'Allyson Pickett' }
-    ],
-    greeting: 'Hello, John Aguirre! You have 7 unread messages.',
-    favoriteFruit: 'apple'
-  },
-  {
-    _id: '6070242649fb4bc3dfca54c2',
-    index: 4,
-    guid: '0f4b2fef-f38f-4c93-925c-01f4d015a04a',
-    isActive: false,
-    balance: '$2,684.08',
-    picture: 'http://placehold.it/32x32',
-    age: 25,
-    eyeColor: 'brown',
-    name: 'Clark Rollins',
-    gender: 'male',
-    company: 'KIDGREASE',
-    email: '[email protected]',
-    phone: '+1 (945) 464-2097',
-    address: '515 Hancock Street, Columbus, Florida, 6747',
-    about:
-      'Lorem nostrud quis amet qui. Nisi cupidatat ullamco cillum enim culpa labore fugiat ea laboris in ipsum. Proident enim dolore duis ut deserunt eiusmod consectetur minim ipsum aliquip est commodo.\r\n',
-    registered: '2017-09-05T12:57:25 -08:00',
-    latitude: -4.239975,
-    longitude: 179.856364,
-    tags: ['mollit', 'fugiat', 'dolor', 'occaecat', 'dolor', 'aliquip', 'ullamco'],
-    friends: [
-      { id: 0, name: 'Humphrey Simmons' },
-      { id: 1, name: 'Lela Berg' },
-      { id: 2, name: 'Branch Holder' }
-    ],
-    greeting: 'Hello, Clark Rollins! You have 3 unread messages.',
-    favoriteFruit: 'apple'
+    desc: 'Test special types',
+    fn: function () {},
+    sym: Symbol('bar'),
+    null: null,
+    undefined: undefined,
+    empty_string: '',
+    empty_obj: {},
+    empty_arr: []
   }
 ]
-const test2 = {
-  random: 85,
-  'random float': 75.744,
-  bool: true,
-  date: '1996-12-26',
-  regEx: 'helloooooooooooooooo to you',
-  enum: 'generator',
-  firstname: 'Evaleen',
-  lastname: 'Dorothy',
-  city: 'Labasa',
-  country: 'Virgin Islands, U.S.',
-  countryCode: 'TL',
-  'email uses current data': '[email protected]',
-  'email from expression': '[email protected]',
-  array: ['Glynnis', 'Antonietta', 'Penelopa', 'Briney', 'Viki'],
-  'array of objects': [
-    { index: 0, 'index start at 5': 5 },
-    { index: 1, 'index start at 5': 6 },
-    { index: 2, 'index start at 5': 7 }
-  ],
-  Bobbi: { age: 31 }
-}
-const test3 = 'test invalid json'
-const test4 = { desc: 'Test special types', foo: function () {}, bar: Symbol('bar'), null: null }
+const fixture2 = 'test invalid object'
 /* eslint-enable */
 
 let depth = 0
@@ -187,37 +75,47 @@ let depth = 0
   <title>svelte-json-view</title>
 </svelte:head>
 
-<button
-  on:click={() => {
-    depth = Infinity
-  }}>EXPAND ALL</button
->
-<button
-  on:click={() => {
-    depth = 0
-  }}>COLLAPSE ALL</button
->
-<br /><br />
-<div class="wrap">
-  <JsonView json={test1} {depth} />
-</div>
-<hr />
-<div class="wrap">
-  <JsonView json={test2} depth="0" />
-</div>
-<hr />
-<div class="wrap">
-  <JsonView json={test3} />
-</div>
-<hr />
-<div class="wrap">
-  <JsonView json={test4} />
-</div>
+<section>
+  <h1>Basic</h1>
+  <button on:click={() => (depth = 0)} id="btn_0">DEPTH 0</button>
+  <button on:click={() => (depth = 1)} id="btn_1">DEPTH 1</button>
+  <button on:click={() => (depth = Infinity)} id="btn_i">DEPTH INFINITY</button>
+  <br /><br />
+  <div class="wrap" id="basic">
+    <JsonView json={fixture} {depth} />
+  </div>
+</section>
+
+<section>
+  <h1>Test default depth=1</h1>
+  <div class="wrap" id="depth_1">
+    <JsonView json={fixture[0]} depth={1} />
+  </div>
+</section>
+
+<section>
+  <h1>Test special types</h1>
+  <div class="wrap" id="special_types">
+    <JsonView json={fixture[2]} />
+  </div>
+</section>
+
+<section>
+  <h1>Test invalid object</h1>
+  <div class="wrap" id="invalid_obj">
+    <JsonView json={fixture2} />
+  </div>
+</section>
 
 <style>
+section {
+  margin: 0 0 4rem 0;
+  border-bottom: 1px solid black;
+}
 .wrap {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
     'Courier New', monospace;
   font-size: 0.875rem;
+  color: #374151;
 }
 </style>

tests/test.js

@@ -1,6 +1,28 @@
 import { expect, test } from '@playwright/test'
 
-test('index page has expected h1', async ({ page }) => {
+test('depth=0', async ({ page }) => {
   await page.goto('/')
-  expect(await page.textContent('h1')).toBe('Welcome to SvelteKit')
+  const list = await page.locator('#basic ._jsonList ._jsonBkt').allTextContents()
+  for (const i of list) expect(i).toBe('{...}')
+})
+
+test('depth=infinity', async ({ page }) => {
+  await page.goto('/')
+  await page.locator('#btn_i').click()
+  await expect(page.locator('#basic').getByText('{...}', { exact: true })).toHaveCount(0)
+})
+
+test('default depth=1', async ({ page }) => {
+  await page.goto('/')
+  const list = await page.locator('#depth_1').getByText('{...}').allTextContents()
+  expect(list.length).toBe(3)
+})
+
+test('special types', async ({ page }) => {
+  await page.goto('/')
+  const list = await page.locator('#special_types li ._jsonVal').allTextContents()
+  const asserts = ['"Test special types"', 'f () {...}', 'Symbol(bar)', 'null', 'undefined', '""']
+  for (let a = 0; a < list.length; a++) {
+    expect(list[a]).toStrictEqual(asserts[a])
+  }
 })