Skip to content
This repository was archived by the owner on Jun 5, 2026. It is now read-only.

feat: Ability to snapshot a directory of webpages. Usage: percy snapshot directory/ - #137

Merged
maprules1000 merged 33 commits into
masterfrom
map/static-site-service
Apr 26, 2019
Merged

feat: Ability to snapshot a directory of webpages. Usage: percy snapshot directory/#137
maprules1000 merged 33 commits into
masterfrom
map/static-site-service

Conversation

@maprules1000

@maprules1000 maprules1000 commented Apr 11, 2019 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This adds a service to support taking snapshots of static sites. Now, instead of having to install a higher level SDK and then add the Percy snapshot command to tests, if you have a pre-compiled, server-ready directory of files percy-agent can snapshot them with ease.

A large chunk of this PR is a simple test site that was built independent of any static site generators. It contains non-final-season Game of Thrones spoilers. You've had 2 years to catch up.

@maprules1000 maprules1000 mentioned this pull request Apr 12, 2019
Merged
@maprules1000
maprules1000 force-pushed the map/static-site-service branch 2 times, most recently from e5d7a97 to 13d5c1c Compare April 16, 2019 21:43
Robdel12
Robdel12 reviewed Apr 17, 2019
View reviewed changes
Comment thread src/services/static-snapshot-service.ts Outdated
@maprules1000
maprules1000 force-pushed the map/static-site-service branch from 3abe787 to b6f99e7 Compare April 23, 2019 15:33
@maprules1000
maprules1000 force-pushed the map/static-site-service branch from b6f99e7 to 146f198 Compare April 23, 2019 15:52
maprules1000
maprules1000 commented Apr 23, 2019
View reviewed changes
Comment thread package.json Outdated
"test": "npm run build-client && PERCY_TOKEN=abc mocha --forbid-only \"test/**/*.test.ts\" --exclude \"test/percy-agent-client/**/*.test.ts\" --exclude \"test/integration/**/*\"",
"test-client": "mkdir -p dist-test/ && npm run build-client-test && testem ci --file ./test/percy-agent-client/testem.js",
"test-integration": "npm run build-client && node ./bin/run exec -- mocha test/integration/**/*.test.ts",
"test-snapshot-command": "./bin/run snapshot test/integration/testStaticSite -b /dummy-base-url -i '(red-keep)' -c '\\.(html)$'",

@maprules1000 maprules1000 Apr 23, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The test site has been built with this exact command and arguments in mind. Changing this command could require changing the test site.

But json files don't have comments so there's no great place to document that.

maprules1000
maprules1000 commented Apr 23, 2019
View reviewed changes
Comment thread src/services/static-snapshot-options.ts Outdated
maprules1000
maprules1000 commented Apr 23, 2019
View reviewed changes
Comment thread src/services/static-snapshot-service.ts
return this.options
}

async _buildPageUrls() {

@maprules1000 maprules1000 Apr 23, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is where most of the magic happens. This command walks the local directory and looks at each file in the directory.

@maprules1000 maprules1000 Apr 25, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Using globby instead of walk makes this function even simpler

@djones djones Apr 26, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

so much win!

maprules1000
maprules1000 commented Apr 23, 2019
View reviewed changes
Comment thread test/fixtures/_dummyTestingApp/about-us.html
@maprules1000
maprules1000 marked this pull request as ready for review April 23, 2019 16:06
cadeParade
cadeParade reviewed Apr 23, 2019
View reviewed changes

@cadeParade cadeParade left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Come for the GoT spoilers, stay for the typos

Comment thread test/integration/testStaticSite/families/greyjoy/dead.htm Outdated
Comment thread test/integration/testStaticSite/families/greyjoy/members.html Outdated
Comment thread test/integration/testStaticSite/families/greyjoy/members.html
Comment thread test/integration/testStaticSite/families/stark/dead-members/list.htm Outdated
Comment thread test/integration/testStaticSite/families/targaryen/dead.htm Outdated
djones
djones reviewed Apr 24, 2019
View reviewed changes
Comment thread src/services/static-snapshot-service.ts Outdated
maprules1000
maprules1000 commented Apr 25, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts
const ignoreFilesRegex = flags['ignore-files'] as string
const snapshotFilesRegex = flags['snapshot-files'] as string
const rawIgnoreGlob = flags['ignore-files'] as string
const rawSnapshotGlob = flags['snapshot-files'] as string

@maprules1000 maprules1000 Apr 25, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

these globs will come in as strings and need to be converted to an array of strings to work with the globby package

djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/services/static-snapshot-options.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/services/static-snapshot-options.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/services/static-snapshot-service.ts
if (this.server) { await this.server.close() }
}

_buildLocalUrl() {

@djones djones Apr 26, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

👍

djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/services/static-snapshot-service.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/services/static-snapshot-service.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread test/services/static-snapshot-service.test.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread test/services/static-snapshot-service.test.ts Outdated
djones
djones reviewed Apr 26, 2019
View reviewed changes
Comment thread src/services/static-snapshot-service.ts Outdated
maprules1000
maprules1000 commented Apr 26, 2019
View reviewed changes
Comment thread test/services/static-snapshot-service.test.ts

})

describe('#_buildPageUrls without the ignore flag set', () => {

@maprules1000 maprules1000 Apr 26, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

this test covers the case when the ignore flag is an empty array

maprules1000
maprules1000 commented Apr 26, 2019
View reviewed changes
Comment thread src/commands/snapshot.ts

const snapshotGlobs = rawSnapshotGlob.split(',')

const ignoreGlobs = rawIgnoreGlob ? rawIgnoreGlob.split(',') : []

@maprules1000 maprules1000 Apr 26, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Split on an empty string results in an array of an empty string. Globby thinks an empty string means all files, and we def do not want to ignore all files by default. If the raw string is empty then the empty string is falsey and we pass an empty array to the static snapshot service, otherwise we pass an array of the ignore globs.

@djones djones changed the title feat: static snapshot service feat: Added the ability to snapshot a directory of webpages. Usage: percy snapshot directory/ Apr 26, 2019
@djones djones changed the title feat: Added the ability to snapshot a directory of webpages. Usage: percy snapshot directory/ feat: Ability to snapshot a directory of webpages. Usage: percy snapshot directory/ Apr 26, 2019
djones
djones approved these changes Apr 26, 2019
View reviewed changes

@djones djones left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🍍 LGTM

@maprules1000
maprules1000 merged commit 20daabb into master Apr 26, 2019
@maprules1000
maprules1000 deleted the map/static-site-service branch April 26, 2019 23:37
djones pushed a commit that referenced this pull request Apr 26, 2019
@semantic-release-bot
chore(release): 0.4.0 [skip ci]
f5a68f1 
# [0.4.0](v0.3.1...v0.4.0) (2019-04-26)

### Features

* Ability to snapshot a directory of webpages. Usage: `percy snapshot directory/` ([#137](#137)) ([20daabb](20daabb))
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

3 more reviewers
@Robdel12 Robdel12 Robdel12 left review comments
@cadeParade cadeParade cadeParade left review comments
@djones djones djones approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@maprules1000 @djones @Robdel12 @cadeParade