import { Selector } from 'testcafe';
import testcafeconfig from './testcafeconfig';
import Page from './page-model';

fixture`Test components`
    .page`${testcafeconfig.url}`;

const page = new Page();

test
    .meta('testID', 'components-001')
    ('Test filter options', async t => {
    await t
        .click('button.p-expand-search')
        .expect(Selector('body').withText('object Object').exists).notOk();
});

test
    .meta('testID', 'components-002')
    ('Fullscreen mode', async t => {
    await t
        .click(Selector('div.v-image__image').nth(0))
        .expect(Selector('#p-photo-viewer').visible).ok()
        .expect(Selector('img.pswp__img').visible).ok();
});

test
    .meta('testID', 'components-003')
    ('Mosaic view', async t => {
    await t
        .click('button.p-expand-search');
    await page.setFilter('view', 'Mosaic');
    await t
        .expect(Selector('div.v-image__image').visible).ok()
        .expect(Selector('div.p-photo-mosaic').visible).ok()
        .expect(Selector('div.is-photo div.caption').exists).notOk()
        .expect(Selector('#p-photo-viewer').visible).notOk();
});

test
    .meta('testID', 'components-004')
    ('List view', async t => {
    await t
        .click('button.p-expand-search');
    await page.setFilter('view', 'List');
    await t
        .expect(Selector('table.v-datatable').visible).ok()
        .expect(Selector('div.list-view').visible).ok();
});

test
    .meta('testID', 'components-005')
    ('#Card view', async t => {
    await t
        .click('button.p-expand-search');
    await page.setFilter('view', 'Cards');
    await t
        .expect(Selector('div.v-image__image').visible).ok()
        .expect(Selector('div.is-photo div.caption').visible).ok()
        .expect(Selector('#p-photo-viewer').visible).notOk();
});