Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

swiping through images in viewer widget #117

Merged
merged 29 commits into from
Feb 21, 2024
Merged
Changes from 1 commit
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
3e90529
swiping through images
JakubSerafin Dec 13, 2023
d94c4bf
first passing test
JakubSerafin Dec 15, 2023
768f034
Merge remote-tracking branch 'origin/master' into feature/image-viewe…
JakubSerafin Jan 23, 2024
670eeba
tree first test working
JakubSerafin Jan 24, 2024
3149f7c
Refactor widget setup and add custom widget mapping
JakubSerafin Jan 24, 2024
e0f5047
tests for empty image
JakubSerafin Jan 24, 2024
d3e4dee
Add image navigation functionality tests with multimage scenario
JakubSerafin Jan 24, 2024
a90ac07
swype tests
JakubSerafin Jan 25, 2024
de1f7c7
Remove redundant CSS styles commited by mistake, a bit of ode cleanup…
JakubSerafin Jan 26, 2024
70d6f53
Update package.json dependencies
JakubSerafin Jan 26, 2024
07e8530
post code review fixes
JakubSerafin Feb 5, 2024
e7783f2
Fix missing newline at end of file in script.js
JakubSerafin Feb 5, 2024
ec38efc
Add styling to button and body
JakubSerafin Feb 5, 2024
93465ba
styuling improvments and hidding buttons when touchscreen (mobile) is…
JakubSerafin Feb 5, 2024
41915f4
Update drop-shadow filter in index.html
JakubSerafin Feb 5, 2024
9907c21
refactor undo method in gristWebDriverUtils.ts
JakubSerafin Feb 5, 2024
45237dc
Add lodash.escaperegexp dependencies
JakubSerafin Feb 5, 2024
0e2b751
Add/update devDependencies in package.json
JakubSerafin Feb 5, 2024
93ea31c
set repository to registry.yarnpkg.com
JakubSerafin Feb 5, 2024
2845dba
linting, formating
JakubSerafin Feb 8, 2024
d7494f4
fixing problem with mocha firefox headless
paulfitz Nov 28, 2023
47aeea5
Update test/init-mocha-webdriver.ts
JakubSerafin Feb 14, 2024
fea7c44
test for switching diffrent state of imageviewer
JakubSerafin Feb 14, 2024
20432bf
refactor
JakubSerafin Feb 14, 2024
a39429c
more refactor
JakubSerafin Feb 14, 2024
06eed2c
even more refactor
JakubSerafin Feb 14, 2024
e8a08bc
navigation button will disapear when navigating from mult image to none
JakubSerafin Feb 14, 2024
2cbc719
Merge remote-tracking branch 'origin/feature/image-viewer-multi-image…
JakubSerafin Feb 14, 2024
9d8a672
cursor change to pointer on image navigation buttons, also test focus…
JakubSerafin Feb 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor
  • Loading branch information
JakubSerafin committed Feb 14, 2024
commit 20432bfe1a57c3e429b718c88939b05f98c10819
48 changes: 25 additions & 23 deletions test/viewer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe('viewer', function () {
describe('loading images', function () {
it('single column, should load image from that column without mapping', async function () {
await grist.fillCell('Image', 1,TEST_IMAGE);
await testIfImageIsDisplayed(TEST_IMAGE);
await assertIfImageIsDisplayed(TEST_IMAGE);
});

//in the moment of writing this test, widget has default access only to unmapped columns that was in table at the moment of widget creation
Expand All @@ -140,7 +140,7 @@ describe('viewer', function () {
//add new column
await grist.addColumn('DATA','Text','description');
//because widget was displayed, no error should be shown, and data from first column should be displayed
await testIfImageIsDisplayed(TEST_IMAGE)
await assertIfImageIsDisplayed(TEST_IMAGE)

await grist.undo(2);

Expand All @@ -166,7 +166,7 @@ describe('viewer', function () {
//add mappiing
await grist.setCustomWidgetMapping('ImageUrl',/Image/);
// check if image is showed
await testIfImageIsDisplayed(TEST_IMAGE);
await assertIfImageIsDisplayed(TEST_IMAGE);
});

after(async function () {
Expand All @@ -183,11 +183,10 @@ describe('viewer', function () {
});
describe('no image', function (){
it('should have navigation buttons hidden', async function () {
assert.isFalse(await areNavigationButtonsVisible(), 'navigation buttons should not be visible when there is no image');
await assertNavigationButtonsVisible(false);
});
it('should have no image', async function () {
assert.isFalse(await isImageElementVisible(), 'image element should not be visible when there is no image to be shown');

await assertImageElementVisible(false);
});
})
describe('single image', function (){
Expand All @@ -197,10 +196,10 @@ describe('viewer', function () {
await grist.fillCell('Image', 1,TEST_IMAGE);
});
it('should have navigation buttons hidden', async function () {
assert.isFalse(await areNavigationButtonsVisible(), 'navigation buttons should not be visible when there is only one image');
await assertNavigationButtonsVisible(false);
});
it('should have image', async function () {
assert.isTrue(await isImageElementVisible(), 'image element should be visible when there is image to be shown');
await assertImageElementVisible(true);
});
after(async function () {
//remove setted cell
Expand All @@ -217,55 +216,58 @@ describe('viewer', function () {
`${TEST_IMAGE2} and event more garbage `+
`${TEST_IMAGE3}`);
});

it('should have navigation buttons visible', async function () {
assert.isTrue(await areNavigationButtonsVisible(), 'navigation buttons should be visible when there is more than one image');
await assertNavigationButtonsVisible(true);
});

it('should have image', async function () {
assert.isTrue(await isImageElementVisible(), 'image element should be visible when there is image to be shown');
await assertImageElementVisible(true);
});

it('should navigate to next image by button', async function () {
await grist.inCustomWidget(async ()=>await driver.find(nextButtonId).click());
await testIfImageIsDisplayed(TEST_IMAGE2);
await assertIfImageIsDisplayed(TEST_IMAGE2);
await grist.inCustomWidget(async ()=>await driver.find(nextButtonId).click());
await testIfImageIsDisplayed(TEST_IMAGE3);
await assertIfImageIsDisplayed(TEST_IMAGE3);
});
it('should navigate to previous image by button', async function () {
await grist.inCustomWidget(async ()=>await driver.find(previousButtonId).click());
await testIfImageIsDisplayed(TEST_IMAGE2);
await assertIfImageIsDisplayed(TEST_IMAGE2);
await grist.inCustomWidget(async ()=>await driver.find(previousButtonId).click());
await testIfImageIsDisplayed(TEST_IMAGE);
await assertIfImageIsDisplayed(TEST_IMAGE);
});

it('should navigate to last image by click next button right on last image', async function () {
// verify if first image is displayed
await testIfImageIsDisplayed(TEST_IMAGE);
await assertIfImageIsDisplayed(TEST_IMAGE);
// click previous button one time
await grist.inCustomWidget(async ()=>await driver.find(previousButtonId).click());
// verify if first image is displayed
await testIfImageIsDisplayed(TEST_IMAGE3);
await assertIfImageIsDisplayed(TEST_IMAGE3);
});

it('should navigate to first image by click previous button right on first image', async function () {
// verify if last image is displayed
await testIfImageIsDisplayed(TEST_IMAGE3);
await assertIfImageIsDisplayed(TEST_IMAGE3);
// click next button one more time
await grist.inCustomWidget(async ()=>await driver.find(nextButtonId).click());
// verify if first image is displayed
await testIfImageIsDisplayed(TEST_IMAGE);
await assertIfImageIsDisplayed(TEST_IMAGE);
});

it('should navigate to next image by swipe left', async function () {
await swipeLeft('#viewer')
await testIfImageIsDisplayed(TEST_IMAGE2);
await assertIfImageIsDisplayed(TEST_IMAGE2);
await swipeLeft('#viewer')
await testIfImageIsDisplayed(TEST_IMAGE3);
await assertIfImageIsDisplayed(TEST_IMAGE3);
});

it('should navigate to previous image by swipe right', async function () {
await swipeRight('#viewer')
await testIfImageIsDisplayed(TEST_IMAGE2);
await assertIfImageIsDisplayed(TEST_IMAGE2);
await swipeRight('#viewer')
await testIfImageIsDisplayed(TEST_IMAGE);
await assertIfImageIsDisplayed(TEST_IMAGE);
});

after(async function () {
Expand Down Expand Up @@ -329,7 +331,7 @@ describe('viewer', function () {
assert.equal(isVisible, expected, `Navigation buttons were expected to be ${expected ? 'visible' : 'not visible'} but they were not.`);
}

async function testIfImageIsDisplayed(url: string) {
async function assertIfImageIsDisplayed(url: string) {
await grist.waitToPass(async () => {
const img = await grist.getCustomWidgetElementParameter('img','src');
assert.equal(img, url);
Expand Down