Skip to content

Commit

Permalink
test: Add tests for basic query types
Browse files Browse the repository at this point in the history
  • Loading branch information
@franky47
franky47 committed Feb 4, 2022
1 parent a9ca855 commit cf1772e
Show file tree
Hide file tree
Showing 2 changed files with 205 additions and 19 deletions.
147 changes: 136 additions & 11 deletions cypress/integration/useQueryState.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,145 @@
/// <reference types="cypress" />

function runTest() {
cy.get('#value').should('be.empty')
cy.contains('Set A').click()
cy.location('search').should('eq', '?key=a')
cy.get('#value').should('have.text', 'a')
cy.contains('Set B').click()
cy.location('search').should('eq', '?key=b')
cy.get('#value').should('have.text', 'b')
cy.contains('Clear').click()
cy.location('search').should('be.empty')
cy.get('#value').should('be.empty')
// String
{
cy.get('#string_value').should('be.empty')
cy.get('#string_set_a')
.click()
.location('search')
.should('eq', '?string=a')
.get('#string_value')
.should('have.text', 'a')
cy.get('#string_set_b')
.click()
.location('search')
.should('eq', '?string=b')
.get('#string_value')
.should('have.text', 'b')
cy.get('#string_clear')
.click()
.location('search')
.should('be.empty')
.get('#string_value')
.should('be.empty')
}

// Integer
{
cy.get('#int_value').should('be.empty')
cy.get('#int_increment')
.click()
.location('search')
.should('eq', '?int=1')
.get('#int_value')
.should('have.text', '1')
cy.get('#int_increment')
.click()
.location('search')
.should('eq', '?int=2')
.get('#int_value')
.should('have.text', '2')
cy.get('#int_decrement')
.click()
.location('search')
.should('eq', '?int=1')
.get('#int_value')
.should('have.text', '1')
cy.get('#int_decrement')
.click()
.location('search')
.should('eq', '?int=0')
.get('#int_value')
.should('have.text', '0')
cy.get('#int_decrement')
.click()
.location('search')
.should('eq', '?int=-1')
.get('#int_value')
.should('have.text', '-1')
cy.get('#int_clear')
.click()
.location('search')
.should('be.empty')
.get('#int_value')
.should('be.empty')
}

// Float
{
cy.get('#float_value').should('be.empty')
cy.get('#float_increment')
.click()
.location('search')
.should('eq', '?float=0.1')
.get('#float_value')
.should('have.text', '0.1')
cy.get('#float_increment')
.click()
.location('search')
.should('eq', '?float=0.2')
.get('#float_value')
.should('have.text', '0.2')
cy.get('#float_decrement')
.click()
.location('search')
.should('eq', '?float=0.1')
.get('#float_value')
.should('have.text', '0.1')
cy.get('#float_decrement')
.click()
.location('search')
.should('eq', '?float=0')
.get('#float_value')
.should('have.text', '0')
cy.get('#float_decrement')
.click()
.location('search')
.should('eq', '?float=-0.1')
.get('#float_value')
.should('have.text', '-0.1')
cy.get('#float_clear')
.click()
.location('search')
.should('be.empty')
.get('#float_value')
.should('be.empty')
}

// Float
{
cy.get('#bool_value').should('be.empty')
cy.get('#bool_toggle')
.click()
.location('search')
.should('eq', '?bool=true')
.get('#bool_value')
.should('have.text', 'true')
cy.get('#bool_toggle')
.click()
.location('search')
.should('eq', '?bool=false')
.get('#bool_value')
.should('have.text', 'false')
cy.get('#bool_clear')
.click()
.location('search')
.should('be.empty')
.get('#bool_value')
.should('be.empty')
}

// todo: Add tests for:
// Timestamp
// ISO DateTime
// String enum
// JSON object
// Array of strings
// Array of integers
}

describe('useQueryState', () => {
it('uses string by default', () => {
it('works in standard routes', () => {
cy.visit('/useQueryState')
runTest()
})
Expand Down
77 changes: 69 additions & 8 deletions src/pages/useQueryState/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,77 @@
import { NextPage } from 'next'
import React from 'react'
import { useQueryState } from '../../../'
import { queryTypes, useQueryState } from '../../../'

const IntegrationPage: NextPage = () => {
const [state, setState] = useQueryState('key')
const [string, setString] = useQueryState('string')
const [int, setInt] = useQueryState('int', queryTypes.integer)
const [float, setFloat] = useQueryState('float', queryTypes.float)
const [bool, setBool] = useQueryState('bool', queryTypes.boolean)
return (
<>
<button onClick={() => setState('a')}>Set A</button>
<button onClick={() => setState('b')}>Set B</button>
<button onClick={() => setState(null)}>Clear</button>
<p id="value">{state}</p>
</>
<main>
<h1>useQueryState</h1>
<section>
<h2>String</h2>
<button id="string_set_a" onClick={() => setString('a')}>
Set A
</button>
<button id="string_set_b" onClick={() => setString('b')}>
Set B
</button>
<button id="string_clear" onClick={() => setString(null)}>
Clear
</button>
<p id="string_value">{string}</p>
</section>
<section>
<h2>Integer</h2>
<button
id="int_increment"
onClick={() => setInt(old => (old ?? 0) + 1)}
>
Increment
</button>
<button
id="int_decrement"
onClick={() => setInt(old => (old ?? 0) - 1)}
>
Decrement
</button>
<button id="int_clear" onClick={() => setInt(null)}>
Clear
</button>
<p id="int_value">{int}</p>
</section>
<section>
<h2>Float</h2>
<button
id="float_increment"
onClick={() => setFloat(old => (old ?? 0) + 0.1)}
>
Increment by 0.1
</button>
<button
id="float_decrement"
onClick={() => setFloat(old => (old ?? 0) - 0.1)}
>
Decrement by 0.1
</button>
<button id="float_clear" onClick={() => setFloat(null)}>
Clear
</button>
<p id="float_value">{float}</p>
</section>
<section>
<h2>Boolean</h2>
<button id="bool_toggle" onClick={() => setBool(old => !old)}>
Toggle
</button>
<button id="bool_clear" onClick={() => setBool(null)}>
Clear
</button>
<p id="bool_value">{bool === null ? null : bool ? 'true' : 'false'}</p>
</section>
</main>
)
}

Expand Down

0 comments on commit cf1772e

Please sign in to comment.