vuetify
Version:
Vue Material Component Framework
301 lines (283 loc) • 5.91 kB
text/typescript
import { resizeWindow } from '../../../../test'
import { Breakpoint } from '../'
import { preset } from '../../../presets/default'
describe('Breakpoint.ts', () => {
let breakpoint: Breakpoint
const scenarios = [
{
description: 'Huawei Smartwatch',
width: 400,
height: 400,
name: 'xs',
mustBeTrue: [
'xs',
'xsOnly',
'smAndDown',
'mdAndDown',
'lgAndDown',
],
},
{
description: 'Galaxy S5 (portrait)',
width: 360,
height: 640,
name: 'xs',
mustBeTrue: [
'xs',
'xsOnly',
'smAndDown',
'mdAndDown',
'lgAndDown',
],
},
{
description: 'Galaxy S5 (landscape)',
width: 640,
height: 360,
name: 'sm',
mustBeTrue: [
'sm',
'smOnly',
'smAndDown',
'smAndUp',
'mdAndDown',
'lgAndDown',
],
},
{
description: 'iPhone 6 (portrait)',
width: 375,
height: 667,
name: 'xs',
mustBeTrue: [
'xs',
'xsOnly',
'smAndDown',
'mdAndDown',
'lgAndDown',
],
},
{
description: 'iPhone 6 (landscape)',
width: 667,
height: 375,
name: 'sm',
mustBeTrue: [
'sm',
'smOnly',
'smAndDown',
'smAndUp',
'mdAndDown',
'lgAndDown',
],
},
{
description: 'iPad (portrait)',
width: 768,
height: 1024,
name: 'sm',
mustBeTrue: [
'sm',
'smOnly',
'smAndDown',
'smAndUp',
'mdAndDown',
'lgAndDown',
],
},
{
description: 'iPad (landscape)',
width: 1024,
height: 768,
name: 'md',
mustBeTrue: [
'md',
'mdOnly',
'smAndUp',
'mdAndDown',
'mdAndUp',
'lgAndDown',
],
},
{
description: 'iPad Pro (portrait)',
width: 1024,
height: 1366,
name: 'md',
mustBeTrue: [
'md',
'mdOnly',
'smAndUp',
'mdAndDown',
'mdAndUp',
'lgAndDown',
],
},
{
description: 'iPad Pro (landscape)',
width: 1366,
height: 1024,
name: 'lg',
mustBeTrue: [
'lg',
'lgOnly',
'smAndUp',
'mdAndUp',
'lgAndDown',
'lgAndUp',
],
},
{
description: 'WSXGA+ (portrait)',
width: 1050,
height: 1680,
name: 'md',
mustBeTrue: [
'md',
'mdOnly',
'smAndUp',
'mdAndDown',
'mdAndUp',
'lgAndDown',
],
},
{
description: 'WSXGA+ (landscape)',
width: 1680,
height: 1050,
name: 'lg',
mustBeTrue: [
'lg',
'lgOnly',
'smAndUp',
'mdAndUp',
'lgAndDown',
'lgAndUp',
],
},
{
description: 'FHD (portrait)',
width: 1080,
height: 1920,
name: 'md',
mustBeTrue: [
'md',
'mdOnly',
'smAndUp',
'mdAndDown',
'mdAndUp',
'lgAndDown',
],
},
{
description: 'FHD (landscape)',
width: 1920,
height: 1080,
name: 'xl',
mustBeTrue: [
'xl',
'xlOnly',
'smAndUp',
'mdAndUp',
'lgAndUp',
],
},
{
description: 'WQHD (portrait)',
width: 1440,
height: 2560,
name: 'lg',
mustBeTrue: [
'lg',
'lgOnly',
'smAndUp',
'mdAndUp',
'lgAndDown',
'lgAndUp',
],
},
{
description: 'WQHD (landscape)',
width: 2560,
height: 1440,
name: 'xl',
mustBeTrue: [
'xl',
'xlOnly',
'smAndUp',
'mdAndUp',
'lgAndUp',
],
},
]
const allFlags = [
'xs',
'sm',
'md',
'lg',
'xl',
'xsOnly',
'smOnly',
'smAndDown',
'smAndUp',
'mdOnly',
'mdAndDown',
'mdAndUp',
'lgOnly',
'lgAndDown',
'lgAndUp',
'xlOnly',
]
beforeEach(() => {
breakpoint = new Breakpoint(preset)
breakpoint.init()
})
scenarios.slice(0, 1).forEach(scenario => {
it('should calculate breakpoint for ' + scenario.description, async () => {
await resizeWindow(scenario.width, scenario.height)
expect(breakpoint.width).toBe(scenario.width)
expect(breakpoint.height).toBe(scenario.height)
expect(breakpoint.name).toBe(scenario.name)
allFlags.forEach(flag => {
const expectedValue = scenario.mustBeTrue.indexOf(flag) !== -1
expect(breakpoint[flag]).toBe(expectedValue)
})
})
})
it('should update breakpoint on window resize', async () => {
await resizeWindow(715)
expect(breakpoint.width).toBe(715)
})
it('should allow to change thresholds during runtime', async () => {
await resizeWindow(401)
expect(breakpoint.xs).toBe(true)
await resizeWindow(698)
expect(breakpoint.xs).toBe(false)
await resizeWindow(1099)
expect(breakpoint.md).toBe(true)
await resizeWindow(1281)
expect(breakpoint.lg).toBe(true)
await resizeWindow(1921)
expect(breakpoint.xl).toBe(true)
})
it('should allow to override defaults via factory args', async () => {
breakpoint = new Breakpoint({
...preset,
breakpoint: {
thresholds: { xs: 400 },
} as any,
})
breakpoint.init()
await resizeWindow(401)
expect(breakpoint.xs).toBe(false)
await resizeWindow(399)
expect(breakpoint.xs).toBe(true)
})
it('should allow breakpoint strings for mobileBreakpoint', async () => {
breakpoint.mobileBreakpoint = 'lg'
await resizeWindow(1920)
expect(breakpoint.mobile).toBe(false)
await resizeWindow(600)
expect(breakpoint.mobile).toBe(true)
})
})