@chromatic-com/cypress 0.12.6 → 0.12.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -3394,7 +3394,7 @@ var logger = process.env.LOG ? console : {
|
|
|
3394
3394
|
|
|
3395
3395
|
// ../shared/src/resource-archiver/index.ts
|
|
3396
3396
|
var _ResourceArchiver = class _ResourceArchiver {
|
|
3397
|
-
constructor(cdpClient, allowedDomains, httpCredentials) {
|
|
3397
|
+
constructor(cdpClient, allowedDomains, httpCredentials, firstUrl) {
|
|
3398
3398
|
__publicField(this, "archive", {});
|
|
3399
3399
|
__publicField(this, "client");
|
|
3400
3400
|
/**
|
|
@@ -3468,6 +3468,7 @@ var _ResourceArchiver = class _ResourceArchiver {
|
|
|
3468
3468
|
}, "requestPaused"));
|
|
3469
3469
|
this.client = cdpClient;
|
|
3470
3470
|
this.httpCredentials = httpCredentials;
|
|
3471
|
+
this.firstUrl = firstUrl;
|
|
3471
3472
|
this.assetDomains = (allowedDomains || []).map((domain) => {
|
|
3472
3473
|
if (domain.startsWith("http")) {
|
|
3473
3474
|
return domain;
|
|
@@ -3527,12 +3528,25 @@ var _ResourceArchiver = class _ResourceArchiver {
|
|
|
3527
3528
|
const contentTypeHeader = responseHeaders.find(({ name }) => name.toLowerCase() === "content-type");
|
|
3528
3529
|
const isFirstRequest = requestUrl.toString() === this.firstUrl.toString();
|
|
3529
3530
|
if (isRequestFromAllowedDomain && !isFirstRequest) {
|
|
3531
|
+
logger.log("Archiving request", {
|
|
3532
|
+
url: request.url,
|
|
3533
|
+
statusCode: responseStatusCode,
|
|
3534
|
+
statusText: responseStatusText,
|
|
3535
|
+
contentType: contentTypeHeader?.value
|
|
3536
|
+
});
|
|
3530
3537
|
this.archive[request.url] = {
|
|
3531
3538
|
statusCode: responseStatusCode,
|
|
3532
3539
|
statusText: responseStatusText,
|
|
3533
3540
|
body: Buffer.from(body, base64Encoded ? "base64" : "utf8"),
|
|
3534
3541
|
contentType: contentTypeHeader?.value
|
|
3535
3542
|
};
|
|
3543
|
+
} else {
|
|
3544
|
+
logger.log("Skipping archiving of request", {
|
|
3545
|
+
url: request.url,
|
|
3546
|
+
firstUrl: this.firstUrl.toString(),
|
|
3547
|
+
isFirstRequest,
|
|
3548
|
+
isRequestFromAllowedDomain
|
|
3549
|
+
});
|
|
3536
3550
|
}
|
|
3537
3551
|
await this.clientSend(request, "Fetch.continueRequest", {
|
|
3538
3552
|
requestId
|
|
@@ -3795,8 +3809,7 @@ var _DOMSnapshot = class _DOMSnapshot {
|
|
|
3795
3809
|
const currentSrc = this.mapSrcsetUrls(srcsetValue, sourceMap);
|
|
3796
3810
|
if (currentSrc) {
|
|
3797
3811
|
node.attributes.src = currentSrc;
|
|
3798
|
-
|
|
3799
|
-
delete node.attributes.sizes;
|
|
3812
|
+
this.removeResponsiveImageAttributes(node.attributes);
|
|
3800
3813
|
}
|
|
3801
3814
|
}
|
|
3802
3815
|
if (node.tagName === "picture") {
|
|
@@ -3821,6 +3834,7 @@ var _DOMSnapshot = class _DOMSnapshot {
|
|
|
3821
3834
|
const imageElement = node.childNodes.find((childNode) => childNode.type === NodeType.Element && childNode.tagName === "img");
|
|
3822
3835
|
if (imageElement && imageElement.attributes) {
|
|
3823
3836
|
imageElement.attributes.src = sourceMap.get(matchingUrl);
|
|
3837
|
+
this.removeResponsiveImageAttributes(imageElement.attributes);
|
|
3824
3838
|
}
|
|
3825
3839
|
}
|
|
3826
3840
|
}
|
|
@@ -3855,6 +3869,10 @@ var _DOMSnapshot = class _DOMSnapshot {
|
|
|
3855
3869
|
});
|
|
3856
3870
|
return currentSrc;
|
|
3857
3871
|
}
|
|
3872
|
+
removeResponsiveImageAttributes(attributes) {
|
|
3873
|
+
delete attributes.srcset;
|
|
3874
|
+
delete attributes.sizes;
|
|
3875
|
+
}
|
|
3858
3876
|
};
|
|
3859
3877
|
__name(_DOMSnapshot, "DOMSnapshot");
|
|
3860
3878
|
var DOMSnapshot = _DOMSnapshot;
|
|
@@ -3905,8 +3923,9 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
|
|
|
3905
3923
|
const title = collapseNewlines(storyTitle);
|
|
3906
3924
|
return {
|
|
3907
3925
|
title,
|
|
3908
|
-
stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
|
|
3926
|
+
stories: Object.entries(domSnapshots).map(([snapshotName, { viewport, parameters }]) => {
|
|
3909
3927
|
const name = collapseNewlines(snapshotName);
|
|
3928
|
+
const { chromatic: chromaticParams, ...restParameters } = parameters || {};
|
|
3910
3929
|
return {
|
|
3911
3930
|
name,
|
|
3912
3931
|
// Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
|
|
@@ -3924,6 +3943,7 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
|
|
|
3924
3943
|
},
|
|
3925
3944
|
chromatic: {
|
|
3926
3945
|
...chromaticStorybookParams,
|
|
3946
|
+
...chromaticParams,
|
|
3927
3947
|
modes: buildStoryModesConfig([
|
|
3928
3948
|
viewport
|
|
3929
3949
|
])
|
|
@@ -3935,7 +3955,8 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
|
|
|
3935
3955
|
defaultViewport: viewportToString(findDefaultViewport([
|
|
3936
3956
|
viewport
|
|
3937
3957
|
]))
|
|
3938
|
-
}
|
|
3958
|
+
},
|
|
3959
|
+
...restParameters
|
|
3939
3960
|
}
|
|
3940
3961
|
};
|
|
3941
3962
|
})
|
|
@@ -4013,10 +4034,13 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
|
|
|
4013
4034
|
const archiveFile = new ArchiveFile(url, response, pageUrl);
|
|
4014
4035
|
const origSrcPath = archiveFile.originalSrc();
|
|
4015
4036
|
const fileSystemPath = archiveFile.toFileSystemPath();
|
|
4037
|
+
const responsePath = path2.join(archiveDir, fileSystemPath);
|
|
4016
4038
|
if (origSrcPath !== fileSystemPath) {
|
|
4017
4039
|
sourceMap.set(origSrcPath, fileSystemPath);
|
|
4018
4040
|
}
|
|
4019
|
-
|
|
4041
|
+
if (!fs.existsSync(responsePath)) {
|
|
4042
|
+
await outputFile(responsePath, response.body);
|
|
4043
|
+
}
|
|
4020
4044
|
}));
|
|
4021
4045
|
await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
|
|
4022
4046
|
const snapshot = new DOMSnapshot(domSnapshot);
|
package/dist/index.mjs
CHANGED
|
@@ -3387,7 +3387,7 @@ var logger = process.env.LOG ? console : {
|
|
|
3387
3387
|
|
|
3388
3388
|
// ../shared/src/resource-archiver/index.ts
|
|
3389
3389
|
var _ResourceArchiver = class _ResourceArchiver {
|
|
3390
|
-
constructor(cdpClient, allowedDomains, httpCredentials) {
|
|
3390
|
+
constructor(cdpClient, allowedDomains, httpCredentials, firstUrl) {
|
|
3391
3391
|
__publicField(this, "archive", {});
|
|
3392
3392
|
__publicField(this, "client");
|
|
3393
3393
|
/**
|
|
@@ -3461,6 +3461,7 @@ var _ResourceArchiver = class _ResourceArchiver {
|
|
|
3461
3461
|
}, "requestPaused"));
|
|
3462
3462
|
this.client = cdpClient;
|
|
3463
3463
|
this.httpCredentials = httpCredentials;
|
|
3464
|
+
this.firstUrl = firstUrl;
|
|
3464
3465
|
this.assetDomains = (allowedDomains || []).map((domain) => {
|
|
3465
3466
|
if (domain.startsWith("http")) {
|
|
3466
3467
|
return domain;
|
|
@@ -3520,12 +3521,25 @@ var _ResourceArchiver = class _ResourceArchiver {
|
|
|
3520
3521
|
const contentTypeHeader = responseHeaders.find(({ name }) => name.toLowerCase() === "content-type");
|
|
3521
3522
|
const isFirstRequest = requestUrl.toString() === this.firstUrl.toString();
|
|
3522
3523
|
if (isRequestFromAllowedDomain && !isFirstRequest) {
|
|
3524
|
+
logger.log("Archiving request", {
|
|
3525
|
+
url: request.url,
|
|
3526
|
+
statusCode: responseStatusCode,
|
|
3527
|
+
statusText: responseStatusText,
|
|
3528
|
+
contentType: contentTypeHeader?.value
|
|
3529
|
+
});
|
|
3523
3530
|
this.archive[request.url] = {
|
|
3524
3531
|
statusCode: responseStatusCode,
|
|
3525
3532
|
statusText: responseStatusText,
|
|
3526
3533
|
body: Buffer.from(body, base64Encoded ? "base64" : "utf8"),
|
|
3527
3534
|
contentType: contentTypeHeader?.value
|
|
3528
3535
|
};
|
|
3536
|
+
} else {
|
|
3537
|
+
logger.log("Skipping archiving of request", {
|
|
3538
|
+
url: request.url,
|
|
3539
|
+
firstUrl: this.firstUrl.toString(),
|
|
3540
|
+
isFirstRequest,
|
|
3541
|
+
isRequestFromAllowedDomain
|
|
3542
|
+
});
|
|
3529
3543
|
}
|
|
3530
3544
|
await this.clientSend(request, "Fetch.continueRequest", {
|
|
3531
3545
|
requestId
|
|
@@ -3788,8 +3802,7 @@ var _DOMSnapshot = class _DOMSnapshot {
|
|
|
3788
3802
|
const currentSrc = this.mapSrcsetUrls(srcsetValue, sourceMap);
|
|
3789
3803
|
if (currentSrc) {
|
|
3790
3804
|
node.attributes.src = currentSrc;
|
|
3791
|
-
|
|
3792
|
-
delete node.attributes.sizes;
|
|
3805
|
+
this.removeResponsiveImageAttributes(node.attributes);
|
|
3793
3806
|
}
|
|
3794
3807
|
}
|
|
3795
3808
|
if (node.tagName === "picture") {
|
|
@@ -3814,6 +3827,7 @@ var _DOMSnapshot = class _DOMSnapshot {
|
|
|
3814
3827
|
const imageElement = node.childNodes.find((childNode) => childNode.type === NodeType.Element && childNode.tagName === "img");
|
|
3815
3828
|
if (imageElement && imageElement.attributes) {
|
|
3816
3829
|
imageElement.attributes.src = sourceMap.get(matchingUrl);
|
|
3830
|
+
this.removeResponsiveImageAttributes(imageElement.attributes);
|
|
3817
3831
|
}
|
|
3818
3832
|
}
|
|
3819
3833
|
}
|
|
@@ -3848,6 +3862,10 @@ var _DOMSnapshot = class _DOMSnapshot {
|
|
|
3848
3862
|
});
|
|
3849
3863
|
return currentSrc;
|
|
3850
3864
|
}
|
|
3865
|
+
removeResponsiveImageAttributes(attributes) {
|
|
3866
|
+
delete attributes.srcset;
|
|
3867
|
+
delete attributes.sizes;
|
|
3868
|
+
}
|
|
3851
3869
|
};
|
|
3852
3870
|
__name(_DOMSnapshot, "DOMSnapshot");
|
|
3853
3871
|
var DOMSnapshot = _DOMSnapshot;
|
|
@@ -3898,8 +3916,9 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
|
|
|
3898
3916
|
const title = collapseNewlines(storyTitle);
|
|
3899
3917
|
return {
|
|
3900
3918
|
title,
|
|
3901
|
-
stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
|
|
3919
|
+
stories: Object.entries(domSnapshots).map(([snapshotName, { viewport, parameters }]) => {
|
|
3902
3920
|
const name = collapseNewlines(snapshotName);
|
|
3921
|
+
const { chromatic: chromaticParams, ...restParameters } = parameters || {};
|
|
3903
3922
|
return {
|
|
3904
3923
|
name,
|
|
3905
3924
|
// Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
|
|
@@ -3917,6 +3936,7 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
|
|
|
3917
3936
|
},
|
|
3918
3937
|
chromatic: {
|
|
3919
3938
|
...chromaticStorybookParams,
|
|
3939
|
+
...chromaticParams,
|
|
3920
3940
|
modes: buildStoryModesConfig([
|
|
3921
3941
|
viewport
|
|
3922
3942
|
])
|
|
@@ -3928,7 +3948,8 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
|
|
|
3928
3948
|
defaultViewport: viewportToString(findDefaultViewport([
|
|
3929
3949
|
viewport
|
|
3930
3950
|
]))
|
|
3931
|
-
}
|
|
3951
|
+
},
|
|
3952
|
+
...restParameters
|
|
3932
3953
|
}
|
|
3933
3954
|
};
|
|
3934
3955
|
})
|
|
@@ -4006,10 +4027,13 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
|
|
|
4006
4027
|
const archiveFile = new ArchiveFile(url, response, pageUrl);
|
|
4007
4028
|
const origSrcPath = archiveFile.originalSrc();
|
|
4008
4029
|
const fileSystemPath = archiveFile.toFileSystemPath();
|
|
4030
|
+
const responsePath = join(archiveDir, fileSystemPath);
|
|
4009
4031
|
if (origSrcPath !== fileSystemPath) {
|
|
4010
4032
|
sourceMap.set(origSrcPath, fileSystemPath);
|
|
4011
4033
|
}
|
|
4012
|
-
|
|
4034
|
+
if (!existsSync(responsePath)) {
|
|
4035
|
+
await outputFile(responsePath, response.body);
|
|
4036
|
+
}
|
|
4013
4037
|
}));
|
|
4014
4038
|
await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
|
|
4015
4039
|
const snapshot = new DOMSnapshot(domSnapshot);
|
|
@@ -3,7 +3,13 @@ import { addons } from 'storybook/manager-api';
|
|
|
3
3
|
// ../shared/storybook-config/manager.ts
|
|
4
4
|
addons.setConfig({
|
|
5
5
|
sidebar: {
|
|
6
|
-
//
|
|
6
|
+
// Ensures we use folders at the root-level instead of categories
|
|
7
7
|
showRoots: false
|
|
8
|
+
},
|
|
9
|
+
layoutCustomisations: {
|
|
10
|
+
// Hide toolbar options that don't make sense in e2e setup
|
|
11
|
+
showToolbar: () => false,
|
|
12
|
+
// Hide bottom panel that's empty in e2e setup
|
|
13
|
+
showPanel: () => false
|
|
8
14
|
}
|
|
9
15
|
});
|