Skip to content

Commit f71ba91

Browse files
zerodevxzerodevx
committed
Format with prettier 
1 parent 419b321 commit f71ba91

File tree

11 files changed

+316
-241
lines changed

11 files changed

+316
-241
lines changed

‎cypress/integration/test.spec.js

Lines changed: 92 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@ describe('Integration Tests', () => {
77
afterEach(() => cy.wait(500))
88

99
it('Displays a toast', () => {
10-
cy.get('[data-btn=default]')
11-
.click()
12-
.get('._toastBtn')
13-
.click()
10+
cy.get('[data-btn=default]').click().get('._toastBtn').click()
1411
})
1512

1613
it('Displays colored toast', () => {
@@ -23,12 +20,7 @@ describe('Integration Tests', () => {
2320
})
2421

2522
it('Displays rich HTML', () => {
26-
cy.get('[data-btn=richHtml]')
27-
.click()
28-
.get('._toastItem')
29-
.find('a')
30-
.get('._toastBtn')
31-
.click()
23+
cy.get('[data-btn=richHtml]').click().get('._toastItem').find('a').get('._toastBtn').click()
3224
})
3325

3426
it('Can change duration', () => {
@@ -55,7 +47,7 @@ describe('Integration Tests', () => {
5547
cy.get('[data-btn=flipProgressBar]')
5648
.click()
5749
.get('._toastBar')
58-
.then($bar => {
50+
.then(($bar) => {
5951
const old = parseFloat($bar.val())
6052
cy.wait(500).then(() => {
6153
expect(parseFloat($bar.val())).to.be.above(old)
@@ -65,27 +57,35 @@ describe('Integration Tests', () => {
6557
})
6658

6759
it('Dynamically update progress bar', () => {
68-
cy.window().invoke('toast.push', 'Test', { duration: 1, initial: 0, next: 0 })
69-
.then($id => {
70-
cy.get('._toastBar').then($bar => {
60+
cy.window()
61+
.invoke('toast.push', 'Test', { duration: 1, initial: 0, next: 0 })
62+
.then(($id) => {
63+
cy.get('._toastBar').then(($bar) => {
7164
expect($bar.val()).to.equal(0)
72-
cy.window().invoke('toast.set', $id, { next: 0.2 }).wait(50).then(() => {
73-
expect(parseFloat($bar.val())).to.equal(0.2)
74-
cy.get('._toastBtn').click()
75-
})
65+
cy.window()
66+
.invoke('toast.set', $id, { next: 0.2 })
67+
.wait(50)
68+
.then(() => {
69+
expect(parseFloat($bar.val())).to.equal(0.2)
70+
cy.get('._toastBtn').click()
71+
})
7672
})
7773
})
7874
})
7975

8076
it('Allows backward compatibility for `progress` key', () => {
81-
cy.window().invoke('toast.push', 'Test', { duration: 1, initial: 0, progress: 0 })
82-
.then($id => {
83-
cy.get('._toastBar').then($bar => {
77+
cy.window()
78+
.invoke('toast.push', 'Test', { duration: 1, initial: 0, progress: 0 })
79+
.then(($id) => {
80+
cy.get('._toastBar').then(($bar) => {
8481
expect($bar.val()).to.equal(0)
85-
cy.window().invoke('toast.set', $id, { progress: 0.2 }).wait(50).then(() => {
86-
expect(parseFloat($bar.val())).to.equal(0.2)
87-
cy.get('._toastBtn').click()
88-
})
82+
cy.window()
83+
.invoke('toast.set', $id, { progress: 0.2 })
84+
.wait(50)
85+
.then(() => {
86+
expect(parseFloat($bar.val())).to.equal(0.2)
87+
cy.get('._toastBtn').click()
88+
})
8989
})
9090
})
9191
})
@@ -122,26 +122,27 @@ describe('Integration Tests', () => {
122122
Cypress._.times(3, () => {
123123
cy.get('[data-btn=default]').click()
124124
})
125-
cy.get('._toastItem')
126-
.should($e => {
127-
expect($e).to.have.length(3)
128-
})
129-
cy.window().invoke('toast.pop', 0)
130-
.get('._toastItem')
131-
.should('not.exist')
125+
cy.get('._toastItem').should(($e) => {
126+
expect($e).to.have.length(3)
127+
})
128+
cy.window().invoke('toast.pop', 0).get('._toastItem').should('not.exist')
132129
})
133130

134131
it('push() accepts both string and object', () => {
135-
cy.window().invoke('toast.push', 'Test')
132+
cy.window()
133+
.invoke('toast.push', 'Test')
136134
.get('._toastItem')
137135
.contains('Test')
138-
.window().invoke('toast.pop')
136+
.window()
137+
.invoke('toast.pop')
139138
.get('._toastItem')
140139
.should('not.exist')
141-
.window().invoke('toast.push', '{"msg":"Test2"}')
140+
.window()
141+
.invoke('toast.push', '{"msg":"Test2"}')
142142
.get('._toastItem')
143143
.contains('Test2')
144-
.window().invoke('toast.pop')
144+
.window()
145+
.invoke('toast.pop')
145146
})
146147

147148
it('Pushes messages to correct container target', () => {
@@ -163,61 +164,88 @@ describe('Integration Tests', () => {
163164
.get('._toastItem')
164165
.contains('Hello')
165166
.should('not.contain', 'NEW:')
166-
.window().invoke('toast.pop', 0)
167+
.window()
168+
.invoke('toast.pop', 0)
167169
})
168170

169171
it('Uses component', () => {
170-
cy.get('[data-btn=sendComponentAsAMessage]').click()
171-
.get('._toastItem').contains('A Dummy Cookie Component')
172-
.get('[data-btn=default]').click()
173-
.get('[data-btn=dummyAccept').click()
174-
.get('._toastItem h1').should('not.exist')
175-
.window().invoke('toast.pop', 0)
172+
cy.get('[data-btn=sendComponentAsAMessage]')
173+
.click()
174+
.get('._toastItem')
175+
.contains('A Dummy Cookie Component')
176+
.get('[data-btn=default]')
177+
.click()
178+
.get('[data-btn=dummyAccept')
179+
.click()
180+
.get('._toastItem h1')
181+
.should('not.exist')
182+
.window()
183+
.invoke('toast.pop', 0)
176184
})
177185

178186
it('Pauses on hover', () => {
179-
cy.get('[data-btn=pauseOnMouseHover]').click()
180-
.get('._toastItem').trigger('mouseenter')
181-
.get('._toastBar').then($bar => {
187+
cy.get('[data-btn=pauseOnMouseHover]')
188+
.click()
189+
.get('._toastItem')
190+
.trigger('mouseenter')
191+
.get('._toastBar')
192+
.then(($bar) => {
182193
const old = parseFloat($bar.val())
183194
cy.wait(50).then(() => {
184195
expect(parseFloat($bar.val())).to.equal(old)
185196
})
186197
})
187-
.get('._toastItem').trigger('mouseleave')
188-
.get('._toastBar').then($bar => {
198+
.get('._toastItem')
199+
.trigger('mouseleave')
200+
.get('._toastBar')
201+
.then(($bar) => {
189202
const old = parseFloat($bar.val())
190-
cy.wait(50).then(() => {
191-
expect(parseFloat($bar.val())).to.be.below(old)
192-
}).get('._toastBtn').click()
203+
cy.wait(50)
204+
.then(() => {
205+
expect(parseFloat($bar.val())).to.be.below(old)
206+
})
207+
.get('._toastBtn')
208+
.click()
193209
})
194210
})
195211

196212
it('Does not pause on hover if `pausable` is false', () => {
197-
cy.get('[data-btn=default]').click()
198-
.get('._toastItem').trigger('mouseenter', { force: true })
199-
.get('._toastBar').then($bar => {
213+
cy.get('[data-btn=default]')
214+
.click()
215+
.get('._toastItem')
216+
.trigger('mouseenter', { force: true })
217+
.get('._toastBar')
218+
.then(($bar) => {
200219
const old = parseFloat($bar.val())
201220
cy.wait(50).then(() => {
202221
expect(parseFloat($bar.val())).to.be.below(old)
203222
})
204223
})
205-
.get('._toastItem').trigger('mouseleave', { force: true })
206-
.get('._toastBar').then($bar => {
224+
.get('._toastItem')
225+
.trigger('mouseleave', { force: true })
226+
.get('._toastBar')
227+
.then(($bar) => {
207228
const old = parseFloat($bar.val())
208-
cy.wait(50).then(() => {
209-
expect(parseFloat($bar.val())).to.be.below(old)
210-
}).get('._toastBtn').click()
229+
cy.wait(50)
230+
.then(() => {
231+
expect(parseFloat($bar.val())).to.be.below(old)
232+
})
233+
.get('._toastBtn')
234+
.click()
211235
})
212236
})
213237

214238
it('Passes pausable edge case when `next` is changed on hover', () => {
215-
cy.window().invoke('toast.push', 'test', { pausable: true, duration: 50 })
216-
.then($id => {
217-
cy.get('._toastItem').trigger('mouseenter', { force: true })
218-
.window().invoke('toast.set', $id, { next: 0.1 })
239+
cy.window()
240+
.invoke('toast.push', 'test', { pausable: true, duration: 50 })
241+
.then(($id) => {
242+
cy.get('._toastItem')
243+
.trigger('mouseenter', { force: true })
244+
.window()
245+
.invoke('toast.set', $id, { next: 0.1 })
219246
.wait(100)
220-
.get('._toastBar').then($bar => {
247+
.get('._toastBar')
248+
.then(($bar) => {
221249
expect(parseFloat($bar.val())).to.equal(0.1)
222250
cy.get('._toastBtn').click()
223251
})

‎docs/App.svelte

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ let colors = false
1414
let bottom = false
1515
let options = {}
1616
17-
const handleClick = btn => {
17+
const handleClick = (btn) => {
1818
selected = btn.name
1919
code = btn.code
2020
btn.run()
@@ -38,7 +38,9 @@ const buttons = [
3838
}
3939
})`,
4040
run: () => {
41-
toast.push('Success!', { theme: { '--toastBackground': '#48BB78', '--toastProgressBackground': '#2F855A' } })
41+
toast.push('Success!', {
42+
theme: { '--toastBackground': '#48BB78', '--toastProgressBackground': '#2F855A' }
43+
})
4244
}
4345
},
4446
{
@@ -50,15 +52,19 @@ const buttons = [
5052
}
5153
})`,
5254
run: () => {
53-
toast.push('Danger!', { theme: { '--toastBackground': '#F56565', '--toastProgressBackground': '#C53030' } })
55+
toast.push('Danger!', {
56+
theme: { '--toastBackground': '#F56565', '--toastProgressBackground': '#C53030' }
57+
})
5458
}
5559
},
5660
{
5761
name: 'RICH HTML',
5862
code: `toast.push(\`<strong>You won the jackpot!</strong><br>
5963
Click <a href="#" target="_blank">here</a> for details! 😛\`)`,
6064
run: () => {
61-
toast.push('<strong>You won the jackpot!</strong><br>Click <a href="#" target="_blank">here</a> for details! 😛')
65+
toast.push(
66+
'<strong>You won the jackpot!</strong><br>Click <a href="#" target="_blank">here</a> for details! 😛'
67+
)
6268
}
6369
},
6470
{
@@ -124,8 +130,12 @@ toast.set(id, { msg: 'Just a bit more', next: 0.8 })
124130
await sleep(2000)
125131
toast.set(id, { next: 1 })`,
126132
run: async () => {
127-
const sleep = t => new Promise(resolve => setTimeout(resolve, t))
128-
const id = toast.push('Loading, please wait...', { duration: 300, initial: 0, dismissable: false })
133+
const sleep = (t) => new Promise((resolve) => setTimeout(resolve, t))
134+
const id = toast.push('Loading, please wait...', {
135+
duration: 300,
136+
initial: 0,
137+
dismissable: false
138+
})
129139
await sleep(500)
130140
toast.set(id, { next: 0.1 })
131141
await sleep(3000)
@@ -224,7 +234,7 @@ toast.pop(i => i.target !== 'new')
224234
// Or remove ALL active toasts from ALL containers
225235
toast.pop(0)`,
226236
run: () => {
227-
toast.pop(i => i.target !== 'new')
237+
toast.pop((i) => i.target !== 'new')
228238
}
229239
},
230240
{
@@ -245,7 +255,11 @@ toast.pop(0)`,
245255
})`,
246256
run: () => {
247257
toast.push({
248-
component: { src: DummyComponent, props: { title: 'A Dummy Cookie Component' }, sendIdTo: 'toastId' },
258+
component: {
259+
src: DummyComponent,
260+
props: { title: 'A Dummy Cookie Component' },
261+
sendIdTo: 'toastId'
262+
},
249263
dismissable: false,
250264
initial: 0,
251265
theme: { '--toastMsgPadding': '0' }
@@ -264,7 +278,7 @@ toast.pop(0)`,
264278

265279
<style>
266280
.colors {
267-
--toastBackground: rgba(255,255,255,0.95);
281+
--toastBackground: rgba(255, 255, 255, 0.95);
268282
--toastColor: #424242;
269283
--toastProgressBackground: aquamarine;
270284
}
@@ -281,26 +295,31 @@ toast.pop(0)`,
281295
--toastContainerLeft: 2rem;
282296
--toastWidth: 100%;
283297
--toastMinHeight: 1.5rem;
284-
--toastBackground: rgba(59,130,246,0.95);
298+
--toastBackground: rgba(59, 130, 246, 0.95);
285299
--toastMsgPadding: 0.25rem 0.5rem;
286300
font-size: 0.875rem;
287301
}
288302
</style>
289303

290304
<div class="container">
291305
<div class="w-full h-64 px-2 mt-4 mb-8">
292-
<Prism classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4">
306+
<Prism
307+
classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4"
308+
>
293309
{code}
294310
</Prism>
295311
</div>
296312
<div class="flex flex-row flex-wrap items-center justify-center">
297313
{#each buttons as btn}
298-
<button
299-
class:selected={selected === btn.name}
300-
on:click={() => { handleClick(btn) }}
301-
data-btn={camelCase(btn.name)}>
302-
{btn.name}
303-
</button>
314+
<button
315+
class:selected={selected === btn.name}
316+
on:click={() => {
317+
handleClick(btn)
318+
}}
319+
data-btn={camelCase(btn.name)}
320+
>
321+
{btn.name}
322+
</button>
304323
{/each}
305324
</div>
306325
</div>

‎docs/Dummy.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { toast } from '../src'
44
export let toastId
55
export let title
66
7-
const clicked = ok => {
7+
const clicked = (ok) => {
88
toast.pop(toastId)
99
toast.push({
1010
msg: ok ? 'Accepted!' : 'Declined!',
@@ -20,7 +20,10 @@ const declined = () => clicked(false)
2020

2121
<div class="w-full h-48 bg-yellow-500 rounded-sm flex flex-col">
2222
<h1 class="font-bold m-2">{title}</h1>
23-
<p class="text-sm mx-2 mb-1"><span class="font-mono font-bold">toastId={toastId}</span>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
23+
<p class="text-sm mx-2 mb-1">
24+
<span class="font-mono font-bold">toastId={toastId}</span>. Lorem ipsum dolor sit amet,
25+
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
26+
</p>
2427
<div class="flex-1 flex flex-row justify-between">
2528
<button class="w-28" on:click={declined}>DECLINE</button>
2629
<button class="w-28" on:click={accepted} data-btn="dummyAccept">ACCEPT</button>

0 commit comments

Comments
 (0)