playwright-fluent
Version:
Fluent API around playwright
108 lines (107 loc) • 4.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const path = tslib_1.__importStar(require("path"));
const fs_1 = require("fs");
const simple_fake_server_1 = require("simple-fake-server");
const SUT = tslib_1.__importStar(require("../../playwright-fluent"));
const utils_1 = require("../../../utils");
describe('Playwright Fluent - delayRequestsTo(url)', () => {
let p;
let fakeServer = undefined;
beforeAll(() => {
fakeServer = new simple_fake_server_1.FakeServer(1241);
fakeServer.start();
//The FakeServer now listens on http://localhost:1241
});
afterAll(() => {
if (fakeServer) {
fakeServer.stop();
}
});
beforeEach(() => {
p = new SUT.PlaywrightFluent();
});
afterEach(async () => {
await p.close();
});
test('should delay request', async () => {
// Given
const htmlContent = (0, fs_1.readFileSync)(`${path.join(__dirname, 'delay-requests-to.test.html')}`);
fakeServer &&
// prettier-ignore
fakeServer.http
.get()
.to('/app')
.willReturn(htmlContent.toString(), 200);
const responseBody = {
prop1: 'foobar',
};
const responseBodyBaz = {
prop1: 'foobaz',
};
const responseHeaders = {
'foo-header': 'bar',
};
fakeServer &&
// prettier-ignore
fakeServer.http
.get()
.to('/foobar')
.willReturn(responseBody, 200, responseHeaders);
fakeServer &&
// prettier-ignore
fakeServer.http
.get()
.to('/yo')
.willReturn(responseBodyBaz, 200, responseHeaders);
const harFilepath = `${path.join(__dirname, 'delay-requests-to.test.har')}`;
const expectedDelayInSeconds = 10;
const checkbox = 'input[type="checkbox"]';
// When
await p
.withBrowser('chromium')
.withOptions({ headless: true })
.withCursor()
.delayRequestsTo('/foobar', expectedDelayInSeconds)
.recordRequestsTo('/foobar')
.recordNetworkActivity({ path: harFilepath })
.navigateTo('http://localhost:1241/app');
// Then button should be disabled while resquest is pending
await p.hover(checkbox).expectThat(checkbox).isDisabled();
// And request should still be in pending state
await p.waitForStabilityOf(async () => p.getRecordedRequestsTo('/foobar').length, {
stabilityInMilliseconds: 5000,
});
const foobarRequests = p.getRecordedRequestsTo('/foobar');
expect(Array.isArray(foobarRequests)).toBe(true);
expect(foobarRequests.length).toBe(0);
// When I wait for the request to be recorded
await p.waitForStabilityOf(async () => p.getRecordedRequestsTo('/foobar').length, {
stabilityInMilliseconds: expectedDelayInSeconds * 1000,
});
// Then request should be recorded
const requests = p.getRecordedRequestsTo('/foobar');
expect(Array.isArray(requests)).toBe(true);
expect(requests.length).toBe(1);
const stringifiedSentRequest = await (0, utils_1.stringifyRequest)(requests[0]);
const sentRequest = JSON.parse(stringifiedSentRequest);
expect(sentRequest.url).toContain('?foo=bar');
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(sentRequest.response.status).toBe(200);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(sentRequest.response.payload).toMatchObject(responseBody);
// And button should be enabled
await p.hover(checkbox).expectThat(checkbox).isEnabled().check(checkbox);
// When I close the browser
await p.close();
// then the HAR data should tell that request has lasted 10s
const harData = p.getRecordedNetworkActivity();
const foobarRequest = harData.log.entries.find((entry) => entry.request.url.includes('/foobar?foo=bar'));
const startTime = new Date((foobarRequest === null || foobarRequest === void 0 ? void 0 : foobarRequest.startedDateTime) || new Date());
const responseHeaderDate = foobarRequest === null || foobarRequest === void 0 ? void 0 : foobarRequest.response.headers.find((header) => header.name.toLowerCase() === 'date');
const endTime = new Date((responseHeaderDate === null || responseHeaderDate === void 0 ? void 0 : responseHeaderDate.value) || new Date());
const elapsedInMilliseconds = endTime.getTime() - startTime.getTime();
expect(Math.abs(elapsedInMilliseconds - expectedDelayInSeconds * 1000)).toBeLessThan(1000);
});
});