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

test(atomic): POC - cache API requests #4468

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions .cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,7 @@
"unexcluded",
"univer",
"Unregisters",
"unroute",
"unsub",
"Unsubscriber",
"uparrow",
Expand Down
13 changes: 12 additions & 1 deletion packages/atomic/playwright-utils/base-fixture.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import AxeBuilder from '@axe-core/playwright';
import type {test as base} from '@playwright/test';
import {test as base} from '@playwright/test';
import {cacheHandler} from './cache';

export type AxeFixture = {
makeAxeBuilder: () => AxeBuilder;
Expand All @@ -19,3 +20,13 @@ export const makeAxeBuilder: Parameters<

await use(makeAxeBuilder);
};

base.beforeEach(async ({page}) => {
await page.route(/commerce\/v2\/search/, cacheHandler);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also currently have playwright tests that call non-commerce API endpoints, so we'd have to modify this accordingly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. We also need to handle request to the listing endpoint.

});

base.afterEach(async ({page}) => {
await page.unrouteAll({behavior: 'wait'});
});

export {base};
40 changes: 40 additions & 0 deletions packages/atomic/playwright-utils/cache.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import {APIResponse, Request, Route} from '@playwright/test';
import {createHash} from 'crypto';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I remember you talked about browser compat for crypto.
fwiw: globalThis.crypto.subtle.digest would probably do a similar trick as createHash, for both NodeJS & the browser

import {existsSync, mkdirSync, readFileSync, writeFileSync} from 'fs';
import {join} from 'path';

export const cacheFilePath = './playwright/.cache/';

export const hashRequest = (url: string, body: string | null) => {
const str = url + body;
return createHash('sha512').update(str).digest('hex');
};

export const cache = async (key: string, response: APIResponse) => {
mkdirSync(cacheFilePath, {recursive: true});
const body = await response.text();
// TODO: check if the file already exists and throw
writeFileSync(join(cacheFilePath, key), body);
return body;
};

export const cacheHandler = async (route: Route, request: Request) => {
console.log('intercepted ---', request.url());
const {clientId, ...rest} = request.postDataJSON();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to handle search API requests too, I think we could do:

const {clientId, analytics, ...rest} = request.postDataJSON();

although this might be too broad...

another option would be to filter out non-static params case-by-case, based on the request.url

const key = hashRequest(request.url(), JSON.stringify(rest));

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Are you using the same authentication for each requests? Two exact request with the same payload may have different response depending on the authentication used.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! IIRC it's the same authentication for all test suites. I don't foresee the need of changing the authentication for specific tests since we target a public endpoint.

const cachedFile = join(cacheFilePath, key);

if (existsSync(cachedFile)) {
console.log('---reading from cache');
await route.fulfill({
body: readFileSync(cachedFile, 'utf8'),
});
} else {
console.log('---fetching from network');
const response = await route.fetch();
await route.fulfill({
response,
body: await cache(key, response),
});
}
};
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {AtomicCommerceBreadboxPageObject as Breadbox} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {CommerceInterfacePageObject as CommerceInterface} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {SearchBoxPageObject as SearchBox} from '../../atomic-commerce-search-box/e2e/page-object';
import {ProductsPageObject as Products} from '../../atomic-product/e2e/page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {SearchBoxPageObject as SearchBox} from '../../atomic-commerce-search-box/e2e/page-object';
import {NoProductsPageObject as NoProducts} from './page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {AtomicCommercePagerLocators as Pager} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {SearchBoxPageObject} from '../../atomic-commerce-search-box/e2e/page-object';
import {ProductListObject} from './page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {QuerySummaryPageObject} from '../../atomic-commerce-query-summary/e2e/page-object';
import {ProductsPerPageObject} from './page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import {Page, test as base} from '@playwright/test';
import {Page} from '@playwright/test';
import {KnownErrorType} from '../../../../../dist/types/components/common/query-error/known-error-types';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {SearchBoxPageObject as SearchBox} from '../../atomic-commerce-search-box/e2e/page-object';
import {QueryErrorPageObject as QueryError} from './page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {SearchBoxPageObject as SearchBox} from '../../atomic-commerce-search-box/e2e/page-object';
import {QuerySummaryPageObject as QuerySummary} from './page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Page, test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {LoadMoreProductsPageObject} from '../../atomic-commerce-load-more-products/e2e/page-object';
import {FacetsPageObject} from '../../facets/atomic-commerce-facets/e2e/page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {AtomicCommerceText as Text} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {CategoryFacetPageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {FacetPageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {FacetsPageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {NumericFacetPageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {ProductImageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {ProductLinkPageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {ProductTemplateObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe('makeMatchConditions', () => {
{field: ['value']},
{field: ['value']}
);
expect(conditions).toHaveLength(1);
expect(conditions).toHaveLength(10); // TODO: failing test purposefully for testing
expect(conditions[0]).toBeInstanceOf(Function);
expect(conditions[0].toString()).toMatchSnapshot();
expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {UserActionsTimelinePageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {RefineModalPageObject} from '../../atomic-refine-modal/e2e/page-object';
import {AtomicFacetPageObject} from '../../facets/atomic-facet/e2e/page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {SearchBoxPageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../playwright-utils/base-fixture';
import {AtomicSortDropdownPageObject} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicCategoryFacetPageObject as Facet} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicColorFacetPageObject as Facet} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicFacetPageObject as Facet} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicTimeframeFacetPageObject as Facet} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicFoldedResultListPageObject as FoldedResultList} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicResultPageObject as Result} from '../../../atomic-result/e2e/page-object';
import {AtomicResultListPageObject as ResultList} from './page-object';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicQuickviewLocators as Quickview} from './page-object';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
base,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicFacetPageObject as FacetPageObject} from '../../../facets/atomic-facet/e2e/page-object';
import {TabManagerPageObject} from './page-object';
Expand Down
Loading