Начало Каталог Помощ
Регистрация Вход
oleg
/
spruce
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

tests: move all to use Cypress instead of Jest

Ryan Chandler преди 4 години
родител
ad395fe154
ревизия
228f8ca867
променени са 18 файла, в които са добавени 124 реда и са изтрити 482 реда
Разделен изглед Покажи статистика за разликите
  1. 0 30
      .github/workflows/jest-tests.yml
  2. 16 0
      tests/cypress/fixtures/basic/index.html
  3. 17 0
      tests/cypress/fixtures/basic/reactivity.html
  4. 23 0
      tests/cypress/fixtures/hooks/index.html
  5. 17 0
      tests/cypress/fixtures/reset/index.html
  6. 19 0
      tests/cypress/integration/basic.spec.js
  7. 19 0
      tests/cypress/integration/hooks.spec.js
  8. 13 0
      tests/cypress/integration/reset.spec.js
  9. 0 32
      tests/get.spec.js
  10. 0 51
      tests/global-store.spec.js
  11. 0 31
      tests/hooks.spec.js
  12. 0 66
      tests/observable.spec.js
  13. 0 49
      tests/persistence.spec.js
  14. 0 59
      tests/reset.spec.js
  15. 0 64
      tests/set.spec.js
  16. 0 57
      tests/store.spec.js
  17. 0 11
      tests/utils.spec.js
  18. 0 32
      tests/watch.spec.js

+ 0 - 30
.github/workflows/jest-tests.yml
Целия файл 

@@ -1,30 +0,0 @@
 
-name: Run Jest tests
 
-
 
-on: [push, pull_request]
 
-
 
-jobs:
 
-  tests:
 
-
 
-    runs-on: ubuntu-latest
 
-
 
-    strategy:
 
-      matrix:
 
-        node-version: [12.x]
 
-
 
-    steps:
 
-      - name: Checkout repository
 
-        uses: actions/checkout@v1
 
-
 
-      - name: Setup Node (${{ matrix.node-version }})
 
-        uses: actions/setup-node@v1
 
-        with:
 
-          node-version: ${{ matrix.node-version }}
 
-
 
-      - name: Install dependencies
 
-        run: yarn install --frozen-lockfile
 
-
 
-      - name: Build files
 
-        run: yarn build
 
-
 
-      - name: Run test suite
 
-        run: yarn test

+ 16 - 0
tests/cypress/fixtures/basic/index.html
Целия файл 

@@ -0,0 +1,16 @@
 
+<html>
 
+    <head>
 
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
 
+    </head>
 
+    <body>
 
+        <div x-data>
 
+            <span x-text="$store.foo.bar"></span>
 
+        </div>
 
+
 
+        <script src="/dist/spruce.umd.js"></script>
 
+
 
+        <script>
 
+            Spruce.store('foo', { bar: 'car' })
 
+        </script>
 
+    </body>
 
+</html>

+ 17 - 0
tests/cypress/fixtures/basic/reactivity.html
Целия файл 

@@ -0,0 +1,17 @@
 
+<html>
 
+    <head>
 
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
 
+    </head>
 
+    <body>
 
+        <div x-data>
 
+            <span x-text="$store.foo.bar"></span>
 
+            <button @click="$store.foo.bar = 'boo'"></button>
 
+        </div>
 
+
 
+        <script src="/dist/spruce.umd.js"></script>
 
+
 
+        <script>
 
+            Spruce.store('foo', { bar: 'car' })
 
+        </script>
 
+    </body>
 
+</html>

+ 23 - 0
tests/cypress/fixtures/hooks/index.html
Целия файл 

@@ -0,0 +1,23 @@
 
+<html>
 
+    <head>
 
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
 
+    </head>
 
+    <body>
 
+        <div x-data>
 
+            <span x-text="$store.foo.bar"></span>
 
+        </div>
 
+
 
+        <script src="/dist/spruce.umd.js"></script>
 
+
 
+        <script>
 
+            window.starting = 0;
 
+            window.started = 0;
 
+
 
+            Spruce.starting(() => window.starting++)
 
+
 
+            Spruce.store('foo', { bar: 'car' })
 
+
 
+            Spruce.started(() => window.started++)
 
+        </script>
 
+    </body>
 
+</html>

+ 17 - 0
tests/cypress/fixtures/reset/index.html
Целия файл 

@@ -0,0 +1,17 @@
 
+<html>
 
+    <head>
 
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
 
+    </head>
 
+    <body>
 
+        <div x-data>
 
+            <span x-text="$store.foo.bar"></span>
 
+            <button x-on:click="Spruce.reset('foo', { bar: 'boo' })"></button>
 
+        </div>
 
+
 
+        <script src="/dist/spruce.umd.js"></script>
 
+
 
+        <script>
 
+            Spruce.store('foo', { bar: 'car' })
 
+        </script>
 
+    </body>
 
+</html>

+ 19 - 0
tests/cypress/integration/basic.spec.js
Целия файл 

@@ -0,0 +1,19 @@
 
+/// <reference types="cypress" />
 
+
 
+describe('basic', () => {
 
+    it('should render store correctly', () => {
 
+        cy.visit('/tests/cypress/fixtures/basic')
 
+
 
+        cy.get('span').should('have.text', 'car')
 
+    })
 
+
 
+    it('should react to state changes', () => {
 
+        cy.visit('/tests/cypress/fixtures/basic/reactivity.html')
 
+
 
+        cy.get('span').should('have.text', 'car')
 
+
 
+        cy.get('button').click()
 
+
 
+        cy.get('span').should('have.text', 'boo')
 
+    })
 
+})

+ 19 - 0
tests/cypress/integration/hooks.spec.js
Целия файл 

@@ -0,0 +1,19 @@
 
+/// <reference types="cypress" />
 
+
 
+describe('hooks', () => {
 
+    it('should run starting callbacks', () => {
 
+        cy.visit('/tests/cypress/fixtures/hooks')
 
+
 
+        cy.window().then(win => {
 
+            cy.wrap(win.starting).should('equal', 1)
 
+        })
 
+    })
 
+
 
+    it('should run started callbacks', () => {
 
+        cy.visit('/tests/cypress/fixtures/hooks')
 
+
 
+        cy.window().then(win => {
 
+            cy.wrap(win.started).should('equal', 1)
 
+        })
 
+    })
 
+})

+ 13 - 0
tests/cypress/integration/reset.spec.js
Целия файл 

@@ -0,0 +1,13 @@
 
+/// <reference types="cypress" />
 
+
 
+describe('reset', () => {
 
+    it('should re-render after state reset', () => {
 
+        cy.visit('/tests/cypress/fixtures/reset')
 
+
 
+        cy.get('span').should('have.text', 'car')
 
+
 
+        cy.get('button').click()
 
+
 
+        cy.get('span').should('have.text', 'boo')
 
+    })
 
+})

+ 0 - 32
tests/get.spec.js
Целия файл 

@@ -1,32 +0,0 @@
 
-import Alpine from 'alpinejs'
 
-import Spruce from '../dist/spruce'
 
-import { waitFor } from '@testing-library/dom'
 
-
 
-beforeEach(() => {
 
-    Spruce.subscribers = []
 
-})
 
-
 
-beforeAll(() => {
 
-    window.Spruce = Spruce
 
-    window.Alpine = Alpine
 
-})
 
-
 
-test('$store > data can be retrieved from store inside component', async () => {
 
-    document.body.innerHTML = `
 
-        <div x-data x-subscribe>
 
-            <span x-text="$store.foo.bar"></span>
 
-        </div> 
-    `
 
-
 
-    Spruce.store('foo', {
 
-        bar: 'bob'
 
-    })
 
-
 
-    await Spruce.start()
 
-    
-    Alpine.start()
 
-
 
-    await waitFor(() => {
 
-        expect(document.querySelector('span').innerText).toEqual('bob')
 
-    })
 
-})

+ 0 - 51
tests/global-store.spec.js
Целия файл 

@@ -1,51 +0,0 @@
 
-import Alpine from 'alpinejs'
 
-import Spruce from '../dist/spruce'
 
-import { waitFor } from '@testing-library/dom'
 
-
 
-beforeEach(() => {
 
-    Spruce.subscribers = []
 
-})
 
-
 
-beforeAll(() => {
 
-    window.Spruce = Spruce
 
-    window.Alpine = Alpine
 
-})
 
-
 
-test('$store > can be used inside of component without subscribing', async () => {
 
-    document.body.innerHTML = `
 
-        <div x-data>
 
-            <span x-text="$store.foo.bar"></span>
 
-        </div>
 
-    `
 
-
 
-    Spruce.store('foo', { bar: 'car' })
 
-
 
-    await Spruce.start()
 
-    Alpine.start()
 
-
 
-    await waitFor(() => {
 
-        expect(document.querySelector('span').innerText).toEqual('car')
 
-    })
 
-})
 
-
 
-test('$store > modifying store value will trigger component re-render', async () => {
 
-    document.body.innerHTML = `
 
-        <div x-data>
 
-            <span x-text="$store.foo.bar"></span>
 
-            <button @click="$store.foo.bar = 'boo'"></button>
 
-        </div>
 
-    `
 
-
 
-    Spruce.store('foo', { bar: 'car' })
 
-
 
-    await Spruce.start()
 
-    Alpine.start()
 
-
 
-    expect(document.querySelector('span').innerText).toEqual('car')
 
-
 
-    document.querySelector('button').click()
 
-
 
-    await waitFor(() => {
 
-        expect(document.querySelector('span').innerText).toEqual('boo')
 
-    })
 
-})

+ 0 - 31
tests/hooks.spec.js
Целия файл 

@@ -1,31 +0,0 @@
 
-import Alpine from 'alpinejs'
 
-import Spruce from '../dist/spruce'
 
-
 
-beforeEach(() => {
 
-    Spruce.subscribers = []
 
-})
 
-
 
-beforeAll(() => {
 
-    window.Spruce = Spruce
 
-    window.Alpine = Alpine
 
-})
 
-
 
-test('.starting() > callbacks are executed', () => {
 
-    let fixture = 0;
 
-
 
-    Spruce.starting(() => fixture++)
 
-
 
-    Spruce.start()
 
-
 
-    expect(fixture).toEqual(1)
 
-})
 
-
 
-test('.started() > callbacks are executed', () => {
 
-    let fixture = 0;
 
-
 
-    Spruce.started(() => fixture++)
 
-
 
-    Spruce.start()
 
-
 
-    expect(fixture).toEqual(1)
 
-})

+ 0 - 66
tests/observable.spec.js
Целия файл 

@@ -1,66 +0,0 @@
 
-import { createObservable } from '../src/observable'
 
-
 
-test('createObservable > successfully wraps object', () => {
 
-    let target = {
 
-        foo: 'bar'
 
-    }
 
-
 
-    let observable = createObservable(target, { get: () => {} })
 
-
 
-    expect(observable.foo).toEqual('bar')
 
-})
 
-
 
-test('createObservable > can access deeply nested props', () => {
 
-    let target = {
 
-        foo: {
 
-            bar: {
 
-                baz: 'bob'
 
-            }
 
-        }
 
-    }
 
-
 
-    let observable = createObservable(target, { get: () => {} })
 
-
 
-    expect(observable.foo.bar.baz).toEqual('bob')
 
-})
 
-
 
-test('createObservable > will run callback on set trap', () => {
 
-    let target = {
 
-        foo: 'bar'
 
-    }
 
-
 
-    let fixture = 0
 
-
 
-    let observable = createObservable(target, {
 
-        set: () => {
 
-            fixture = 100
 
-        }
 
-    })
 
-
 
-    observable.foo = 'bob'
 
-
 
-    expect(fixture).toEqual(100)
 
-})
 
-
 
-test('createObservable > will run set trap for Array.* methods', () => {
 
-    let target = {
 
-        items: [
 
-            'foo',
 
-            'bar'
 
-        ],
 
-    }
 
-
 
-
 
-    let fixture
 
-
 
-    let observable = createObservable(target, {
 
-        set() {
 
-            fixture = 'baz'
 
-        }
 
-    })
 
-
 
-    observable.items.push('baz')
 
-
 
-    expect(target.items).toContain('baz')
 
-    expect(fixture).toEqual('baz')
 
-})

+ 0 - 49
tests/persistence.spec.js
Целия файл 

@@ -1,49 +0,0 @@
 
-import Alpine from 'alpinejs'
 
-import Spruce from '../dist/spruce'
 
-import { waitFor } from '@testing-library/dom'
 
-
 
-beforeEach(() => {
 
-    Spruce.subscribers = []
 
-})
 
-
 
-beforeAll(() => {
 
-    window.Spruce = Spruce
 
-    window.Alpine = Alpine
 
-
 
-    window.localStorage = {
 
-        storage: {},
 
-        getItem(key) {
 
-            return this.storage[key]
 
-        },
 
-        setItem(key, value) {
 
-            this.storage[key] = value
 
-        }
 
-    }
 
-})
 
-
 
-test('persisted stores are correctly persisted', async () => {
 
-    document.body.innerHTML = `
 
-        <div x-data>
 
-            <input type="text" x-model="$store.persisted.foo">
 
-        </div>
 
-    `
 
-    
-    Spruce.store('persisted', {
 
-        foo: 'bar',
 
-    }, true)
 
-
 
-    await Spruce.start()
 
-
 
-    Alpine.start()
 
-
 
-    expect(document.querySelector('input').value).toEqual('bar')
 
-
 
-    document.querySelector('input').value = 'car'
 
-
 
-    document.querySelector('input').dispatchEvent(new Event('input'))
 
-
 
-    await waitFor(() => {
 
-        expect(document.querySelector('input').value).toEqual('car')
 
-        expect(Spruce.retrieveFromLocalStorage('persisted').foo).toEqual('car')
 
-    })
 
-})

+ 0 - 59
tests/reset.spec.js
Целия файл 

@@ -1,59 +0,0 @@
 
-import Spruce from '../dist/spruce'
 
-import Alpine from 'alpinejs'
 
-import { waitFor } from '@testing-library/dom'
 
-
 
-beforeEach(() => {
 
-    Spruce.stores = {}
 
-})
 
-
 
-beforeAll(() => {
 
-    window.Spruce = Spruce
 
-    window.Alpine = Alpine
 
-})
 
-
 
-test('.reset() > will overwrite existing properties', () => {
 
-    Spruce.store('example', {
 
-        foo: 'bar'
 
-    })
 
-
 
-    expect(Spruce.stores.example.foo).toEqual('bar')
 
-
 
-    Spruce.reset('example', {
 
-        foo: 'bob'
 
-    })
 
-
 
-    expect(Spruce.stores.example.foo).toEqual('bob')
 
-})
 
-
 
-test('.reset() > will make nested objects reactive', async () => {
 
-    document.body.innerHTML = `
 
-        <div x-data x-subscribe>
 
-            <span x-text="$store.example.foo.bob"></span>
 
-        </div>
 
-    `
 
-    
-    Spruce.store('example', {
 
-        foo: {
 
-            bob: 'bar'
 
-        }
 
-    })
 
-
 
-    expect(Spruce.stores.example.foo.bob).toEqual('bar')
 
-
 
-    await Spruce.start()
 
-
 
-    Alpine.start()
 
-
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
 
-
 
-    Spruce.reset('example', {
 
-        foo: {
 
-            bob: 'car'
 
-        }
 
-    })
 
-
 
-    await waitFor(() => {
 
-        expect(Spruce.stores.example.foo.bob).toEqual('car')
 
-        expect(document.querySelector('span').innerText).toEqual('car')
 
-    })
 
-})

+ 0 - 64
tests/set.spec.js
Целия файл 

@@ -1,64 +0,0 @@
 
-import Alpine from 'alpinejs'
 
-import Spruce from '../dist/spruce'
 
-import { waitFor } from '@testing-library/dom'
 
-
 
-beforeEach(() => {
 
-    Spruce.subscribers = []
 
-})
 
-
 
-beforeAll(() => {
 
-    window.Spruce = Spruce
 
-    window.Alpine = Alpine
 
-})
 
-
 
-test('$store > data can be set inside component', async () => {
 
-    document.body.innerHTML = `
 
-        <div x-data x-subscribe>
 
-            <span x-text="$store.foo.bar"></span>
 
-            <button @click="$store.foo.bar = 'car'"></button>
 
-        </div>
 
-    `
 
-
 
-    Spruce.store('foo', {
 
-        bar: 'bob'
 
-    })
 
-
 
-    await Spruce.start()
 
-    
-    Alpine.start()
 
-
 
-    document.querySelector('button').click()
 
-
 
-    await waitFor(() => {
 
-        expect(Spruce.stores.foo.bar).toEqual('car')
 
-        expect(document.querySelector('span').innerText).toEqual('car')
 
-    })
 
-})
 
-
 
-test('$store > array data causes DOM updates', async () => {
 
-    document.body.innerHTML = `
 
-        <div x-data>
 
-            <template x-for="item in $store.todo.todos">
 
-                <p x-text="item"></p>
 
-            </template>
 
-            <button @click="$store.todo.todos.push('foo')"></button>
 
-        </div>
 
-    `
 
-
 
-    Spruce.store('todo', {
 
-        todos: []
 
-    })
 
-
 
-    await Spruce.start()
 
-    
-    Alpine.start()
 
-
 
-    expect(document.querySelector('p')).toBeFalsy()
 
-
 
-    document.querySelector('button').click()
 
-
 
-    await waitFor(() => {
 
-        expect(document.querySelector('p')).toBeTruthy()
 
-        expect(document.querySelector('p').innerText).toEqual('foo')
 
-    })
 
-})

+ 0 - 57
tests/store.spec.js
Целия файл 

@@ -1,57 +0,0 @@
 
-import Spruce from '../dist/spruce'
 
-
 
-beforeEach(() => {
 
-    Spruce.stores = {}
 
-})
 
-
 
-test('Spruce.store() > namespace and data set correctly', () => {
 
-    Spruce.store('testing', {
 
-        foo: 'bar'
 
-    })
 
-
 
-    expect(Spruce.store('testing')).toEqual({
 
-        foo: 'bar'
 
-    })
 
-
 
-    expect(Spruce.store('testing').foo).toEqual('bar')
 
-})
 
-
 
-test('Spruce.store() > existing namespace will not be overwritten', () => {
 
-    Spruce.store('testing', {
 
-        foo: 'bar'
 
-    })
 
-
 
-    expect(Spruce.store('testing')).toEqual({
 
-        foo: 'bar'
 
-    })
 
-
 
-    Spruce.store('testing', {
 
-        bob: 'car'
 
-    })
 
-
 
-    expect(Spruce.store('testing')).toEqual({
 
-        foo: 'bar'
 
-    })
 
-})
 
-
 
-test('Spruce.store() > can be used with functions that generate stores', () => {
 
-    Spruce.store('testing', function () {
 
-        return {
 
-            foo: 'bar'
 
-        }
 
-    })
 
-
 
-    expect(Spruce.store('testing')).toEqual({
 
-        foo: 'bar'
 
-    })
 
-
 
-    Spruce.store('testing', function () {
 
-        return {
 
-            bar: 'car'
 
-        }
 
-    })
 
-
 
-    expect(Spruce.store('testing')).toEqual({
 
-        foo: 'bar'
 
-    })
 
-})

+ 0 - 11
tests/utils.spec.js
Целия файл 

@@ -1,11 +0,0 @@
 
-import * as utils from '../src/utils'
 
-
 
-test('isNullOrUndefined > returns true for null and undefined', () => {
 
-    expect(utils.isNullOrUndefined(null)).toBeTruthy()
 
-    expect(utils.isNullOrUndefined(undefined)).toBeTruthy()
 
-})
 
-
 
-test('isNullOrUndefined > returns false for non null or undefined', () => {
 
-    expect(utils.isNullOrUndefined('')).toBeFalsy()
 
-    expect(utils.isNullOrUndefined(10)).toBeFalsy()
 
-})

+ 0 - 32
tests/watch.spec.js
Целия файл 

@@ -1,32 +0,0 @@
 
-import Spruce from '../dist/spruce'
 
-import Alpine from 'alpinejs'
 
-import { waitFor } from '@testing-library/dom'
 
-
 
-beforeEach(() => {
 
-    Spruce.subscribers = []
 
-})
 
-
 
-beforeAll(() => {
 
-    window.Spruce = Spruce
 
-    window.Alpine = Alpine
 
-})
 
-
 
-test('.watch() > can listen for changes to property', async () => {
 
-    let fixture = undefined
 
-    
-    Spruce.store('example', {
 
-        cool: 'stuff'
 
-    })
 
-
 
-    Spruce.watch('example.cool', (value) => {
 
-        fixture = value
 
-    })
 
-
 
-    await Spruce.start()
 
-
 
-    expect(fixture).toBeUndefined()
 
-
 
-    Spruce.stores.example.cool = 'amazing'
 
-
 
-    expect(fixture).toEqual('amazing')
 
-})