mirror of
https://github.com/maputnik/editor.git
synced 2026-07-26 07:47:25 +00:00
Compare commits
1 Commits
main
..
0a47093a6e
| Author | SHA1 | Date | |
|---|---|---|---|
 dependabot[bot]
|
0a47093a6e |
@@ -15,9 +15,6 @@ updates:
|
||||
vitest:
|
||||
patterns:
|
||||
- "*vitest*"
|
||||
react:
|
||||
patterns:
|
||||
- "*react*"
|
||||
cooldown:
|
||||
default-days: 5
|
||||
semver-major-days: 5
|
||||
|
||||
@@ -11,7 +11,7 @@ jobs:
|
||||
steps:
|
||||
- name: Dependabot metadata
|
||||
id: metadata
|
||||
uses: dependabot/fetch-metadata@25dd0e34f4fe68f24cc83900b1fe3fe149efef98 # v3.1.0
|
||||
uses: dependabot/fetch-metadata@08eff52bf64351f401fb50d4972fa95b9f2c2d1b # v2.4.0
|
||||
with:
|
||||
github-token: "${{ secrets.GITHUB_TOKEN }}"
|
||||
- name: Approve Dependabot PRs
|
||||
|
||||
+32
-52
@@ -21,9 +21,9 @@ jobs:
|
||||
os: [ ubuntu-latest, windows-latest, macos-latest ]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with: { persist-credentials: false }
|
||||
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
- run: npm ci
|
||||
@@ -41,22 +41,22 @@ jobs:
|
||||
if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with: { persist-credentials: false }
|
||||
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
- run: npm ci
|
||||
- run: npm run build
|
||||
- name: artifacts/maputnik
|
||||
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
|
||||
uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
|
||||
with:
|
||||
name: maputnik
|
||||
path: dist
|
||||
|
||||
# Build and upload desktop CLI artifacts
|
||||
- name: Set up Go
|
||||
uses: actions/setup-go@b7ad1dad31e06c5925ef5d2fc7ad053ef454303e # v7.0.0
|
||||
uses: actions/setup-go@44694675825211faa026b3c33043df3e48a5fa00 # v6.0.0
|
||||
with:
|
||||
go-version: ^1.23.x
|
||||
cache-dependency-path: desktop/go.sum
|
||||
@@ -66,19 +66,19 @@ jobs:
|
||||
run: npm run build-desktop
|
||||
|
||||
- name: Artifacts/linux
|
||||
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
|
||||
uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
|
||||
with:
|
||||
name: maputnik-linux
|
||||
path: ./desktop/bin/linux/
|
||||
|
||||
- name: Artifacts/darwin
|
||||
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
|
||||
uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
|
||||
with:
|
||||
name: maputnik-darwin
|
||||
path: ./desktop/bin/darwin/
|
||||
|
||||
- name: Artifacts/windows
|
||||
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
|
||||
uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
|
||||
with:
|
||||
name: maputnik-windows
|
||||
path: ./desktop/bin/windows/
|
||||
@@ -90,15 +90,12 @@ jobs:
|
||||
contents: read
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with: { persist-credentials: false }
|
||||
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
- run: npm ci
|
||||
- run: npm run test-unit-ci
|
||||
- name: Upload coverage reports to Codecov
|
||||
uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
|
||||
uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
|
||||
with:
|
||||
files: ${{ github.workspace }}/coverage/coverage-final.json
|
||||
verbose: true
|
||||
@@ -111,27 +108,20 @@ jobs:
|
||||
contents: read
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with: { persist-credentials: false }
|
||||
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
- run: npm ci
|
||||
- run: npx playwright install --with-deps chromium
|
||||
- name: Playwright run
|
||||
run: npm run test-e2e
|
||||
- name: Cypress run
|
||||
uses: cypress-io/github-action@7ef72e250a9e564efb4ed4c2433971ada4cc38b4 # v6.10.4
|
||||
with:
|
||||
build: npm run build
|
||||
start: npm run start
|
||||
browser: chrome
|
||||
- name: Upload coverage reports to Codecov
|
||||
uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
|
||||
uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
|
||||
with:
|
||||
files: ${{ github.workspace }}/coverage/coverage-final.json
|
||||
files: ${{ github.workspace }}/.nyc_output/out.json
|
||||
verbose: true
|
||||
- name: Upload Playwright report
|
||||
if: ${{ !cancelled() }}
|
||||
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
|
||||
with:
|
||||
name: playwright-report
|
||||
path: playwright-report/
|
||||
retention-days: 7
|
||||
|
||||
e2e-tests-docker:
|
||||
name: "E2E tests using chrome and docker"
|
||||
@@ -139,27 +129,17 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with: { persist-credentials: false }
|
||||
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
- run: npm ci
|
||||
- run: npx playwright install --with-deps chromium
|
||||
- name: Build docker image
|
||||
run: docker build -t maputnik .
|
||||
- name: Start maputnik container
|
||||
run: docker run -d --network host --name maputnik maputnik --port=8888
|
||||
- name: Wait for maputnik to be ready
|
||||
run: |
|
||||
for i in $(seq 1 60); do
|
||||
if curl -sSf http://localhost:8888/ > /dev/null; then
|
||||
echo "maputnik is up"; exit 0
|
||||
fi
|
||||
sleep 1
|
||||
done
|
||||
echo "maputnik did not start in time"; docker logs maputnik; exit 1
|
||||
- name: Playwright run
|
||||
run: npm run test-e2e
|
||||
env:
|
||||
E2E_NO_WEBSERVER: "1"
|
||||
- name: Cypress run
|
||||
uses: cypress-io/github-action@7ef72e250a9e564efb4ed4c2433971ada4cc38b4 # v6.10.4
|
||||
with:
|
||||
build: docker build -t maputnik .
|
||||
start: docker run --rm --network host maputnik --port=8888
|
||||
browser: chrome
|
||||
- name: Upload coverage reports to Codecov
|
||||
uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
|
||||
with:
|
||||
files: ${{ github.workspace }}/.nyc_output/out.json
|
||||
verbose: true
|
||||
|
||||
@@ -38,11 +38,11 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
|
||||
uses: github/codeql-action/init@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
|
||||
with:
|
||||
languages: ${{ matrix.language }}
|
||||
# If you wish to specify custom queries, you can do so here or in a config file.
|
||||
@@ -53,7 +53,7 @@ jobs:
|
||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
||||
# If this step fails, then you should remove it and run the build manually (see below)
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4.36.3
|
||||
uses: github/codeql-action/autobuild@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
|
||||
|
||||
# ℹ️ Command-line programs to run using the OS shell.
|
||||
# 📚 https://git.io/JvXDl
|
||||
@@ -67,4 +67,4 @@ jobs:
|
||||
# make release
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@e0647621c2984b5ed2f768cb892365bf2a616ad1 # v4.37.2
|
||||
uses: github/codeql-action/analyze@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
|
||||
|
||||
@@ -16,13 +16,13 @@ jobs:
|
||||
run:
|
||||
shell: bash
|
||||
steps:
|
||||
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with:
|
||||
fetch-depth: 0
|
||||
ref: main
|
||||
|
||||
- name: Use Node.js from nvmrc
|
||||
uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version-file: ".nvmrc"
|
||||
|
||||
@@ -32,7 +32,7 @@ jobs:
|
||||
./build/bump-version-changelog.js ${{ inputs.version }}
|
||||
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
|
||||
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
|
||||
with:
|
||||
commit-message: Bump version to ${{ inputs.version }}
|
||||
branch: bump-version-to-${{ inputs.version }}
|
||||
|
||||
@@ -12,11 +12,11 @@ jobs:
|
||||
contents: write
|
||||
if: ${{ github.event_name == 'push' }}
|
||||
steps:
|
||||
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with: { persist-credentials: false }
|
||||
|
||||
- name: Use Node.js from nvmrc
|
||||
uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
|
||||
@@ -27,7 +27,7 @@ jobs:
|
||||
run: npm run build
|
||||
|
||||
- name: Upload to GitHub Pages
|
||||
uses: peaceiris/actions-gh-pages@84c30a85c19949d7eee79c4ff27748b70285e453 # v4.1.0
|
||||
uses: peaceiris/actions-gh-pages@4f9cc6602d3f66b9c108549d475ec49e8ef4d45e # v4.0.0
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: dist
|
||||
@@ -45,11 +45,11 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Login to GitHub Container Registry
|
||||
uses: docker/login-action@af1e73f918a031802d376d3c8bbc3fe56130a9b0 # v4.4.0
|
||||
uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
- run: docker build -t ghcr.io/maplibre/maputnik:main .
|
||||
- run: docker push ghcr.io/maplibre/maputnik:main
|
||||
|
||||
@@ -15,20 +15,20 @@ jobs:
|
||||
permissions:
|
||||
contents: read
|
||||
steps:
|
||||
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with:
|
||||
fetch-depth: 0
|
||||
ref: main
|
||||
persist-credentials: false
|
||||
|
||||
- name: Use Node.js from nvmrc
|
||||
uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version-file: ".nvmrc"
|
||||
|
||||
- name: Check if version has been updated
|
||||
id: check
|
||||
uses: EndBug/version-check@095362f3cd50f690c8fa0e6afeea81834bd8d320 # latest
|
||||
uses: EndBug/version-check@d17247dd94ca7b39d0b0691399be8d7c510622c9 # latest
|
||||
|
||||
outputs:
|
||||
publish: ${{ steps.check.outputs.changed }}
|
||||
@@ -42,19 +42,19 @@ jobs:
|
||||
run:
|
||||
shell: bash
|
||||
steps:
|
||||
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
|
||||
with:
|
||||
fetch-depth: 0
|
||||
ref: main
|
||||
|
||||
- name: Use Node.js from nvmrc
|
||||
uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
|
||||
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version-file: ".nvmrc"
|
||||
registry-url: "https://registry.npmjs.org"
|
||||
|
||||
- name: Set up Go for desktop build
|
||||
uses: actions/setup-go@b7ad1dad31e06c5925ef5d2fc7ad053ef454303e # v7.0.0
|
||||
uses: actions/setup-go@44694675825211faa026b3c33043df3e48a5fa00 # v6.0.0
|
||||
with:
|
||||
go-version: ^1.23.x
|
||||
cache-dependency-path: desktop/go.sum
|
||||
@@ -91,7 +91,7 @@ jobs:
|
||||
|
||||
- name: Create GitHub Release
|
||||
id: create_regular_release
|
||||
uses: ncipollo/release-action@339a81892b84b4eeb0f6e744e4574d79d0d9b8dd # v1.21.0
|
||||
uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
|
||||
+1
-5
@@ -33,14 +33,10 @@ node_modules
|
||||
public
|
||||
/errorShots
|
||||
/old
|
||||
/cypress/screenshots
|
||||
/dist/
|
||||
/desktop/version.go
|
||||
|
||||
# Playwright
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/playwright/.cache/
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
+4
-5
@@ -4,13 +4,12 @@
|
||||
"check-coverage": false,
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx"],
|
||||
"exclude": [
|
||||
"e2e/**/*.*",
|
||||
"cypress/**/*.*",
|
||||
"**/*.d.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.browser.test.tsx",
|
||||
"**/*.cy.tsx",
|
||||
"**/*.cy.ts",
|
||||
"./coverage/**",
|
||||
"./e2e/**",
|
||||
"./cypress/**",
|
||||
"./dist/**",
|
||||
"node_modules"
|
||||
],
|
||||
|
||||
@@ -24,127 +24,24 @@ The project type checked and built with:
|
||||
npm run build
|
||||
```
|
||||
|
||||
Install the Playwright browser (first time only):
|
||||
To run the tests make sure that xvfb is installed:
|
||||
|
||||
```
|
||||
npx playwright install --with-deps chromium
|
||||
apt install xvfb
|
||||
```
|
||||
|
||||
Then run the end-to-end tests (Playwright starts the dev server automatically):
|
||||
Run the development server in the background with Vite:
|
||||
|
||||
```
|
||||
npm run test
|
||||
nohup npm run start &
|
||||
```
|
||||
|
||||
Run the unit tests with Vitest:
|
||||
Then start the Cypress tests with:
|
||||
|
||||
```
|
||||
npm run test-unit
|
||||
xvfb-run -a npm run test
|
||||
```
|
||||
|
||||
## Pull Requests
|
||||
|
||||
- Pull requests should update `CHANGELOG.md` with a short description of the change.
|
||||
|
||||
## Testing
|
||||
|
||||
### Prefer end-to-end tests
|
||||
|
||||
Most of this codebase is React components, and they are only reachable from an
|
||||
end-to-end test. E2E coverage is the primary signal.
|
||||
|
||||
Reach for a unit test only for pure logic that e2e cannot cheaply reach (parsers,
|
||||
sorting, watchers, stores). Before writing one, check whether e2e already covers
|
||||
the file — a unit test that duplicates existing e2e coverage adds test code and
|
||||
almost no coverage:
|
||||
|
||||
```
|
||||
npx nyc report --reporter=text --include="src/libs/style.ts"
|
||||
```
|
||||
|
||||
Do **not** merge the Vitest (v8) and e2e (istanbul) coverage reports locally. They
|
||||
produce conflicting statement maps for the same files and the combined percentage
|
||||
is meaningless. Codecov merges the two uploads server-side; that is the number to
|
||||
trust. Locally, read them separately:
|
||||
|
||||
- e2e: `npx playwright test` then `npx nyc report --reporter=text-summary` (reads `.nyc_output/`)
|
||||
- unit: `npx vitest run --coverage` (writes `coverage/`)
|
||||
|
||||
### E2E layering
|
||||
|
||||
Three layers, and the boundaries matter:
|
||||
|
||||
- `e2e/playwright-helper.ts` — generic, app-agnostic browser actions. **The only
|
||||
file allowed to import `@playwright/test`** (besides `e2e/utils/fixtures.ts`).
|
||||
- `e2e/maputnik-driver.ts` — domain actions (layers, filters, functions, the
|
||||
style). Knows nothing about `page` or Playwright.
|
||||
- `e2e/modal-driver.ts` — actions scoped to a modal, exposed as `when.modal.*`.
|
||||
|
||||
Specs get a driver at describe scope and assert fluently:
|
||||
|
||||
```ts
|
||||
describe("layer editor", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
...
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [{ id, type: "fill" }] });
|
||||
});
|
||||
```
|
||||
|
||||
New UI interactions belong in a driver, not inline in a spec.
|
||||
|
||||
### Writing assertions
|
||||
|
||||
- `shouldDeepNestedInclude` is a recursive partial match (`toMatchObject`): nested
|
||||
objects are matched as subsets, arrays and primitives must match exactly
|
||||
(including array length).
|
||||
- Assert against the whole style, not an extracted slice. Avoid
|
||||
`get.styleFromLocalStorage().then(style => style.layers.find(...))` — it moves
|
||||
test logic into the test. Compare the real object instead.
|
||||
- `Query.then()` is lazy and returns a new `Query`, **not** a Promise. `await
|
||||
get.styleFromLocalStorage()` hangs forever. Use `.get()` to await it directly,
|
||||
or pass the Query to `then(...)`.
|
||||
|
||||
### One behaviour per test
|
||||
|
||||
If a test needs comments narrating "and now this…", it is several tests. Split it,
|
||||
and hoist the shared setup into a nested `describe` + `beforeEach`.
|
||||
|
||||
### Test ids
|
||||
|
||||
Test ids use the `data-wd-key` attribute and are read via `get.elementByTestId`.
|
||||
|
||||
The `Input*` components already accept `data-wd-key` and render it on the real
|
||||
`<input>`; the `Field*` wrappers forward it through their `{...props}` spread. So
|
||||
passing `data-wd-key` to a `Field*` component is usually enough. Do **not** also
|
||||
add it to `Block`/`Fieldset` — the id then matches two elements and locators fail
|
||||
in strict mode.
|
||||
|
||||
Note `InputNumber` renders `<key>-text` and `<key>-range` when `allowRange` is set,
|
||||
and `<key>` otherwise.
|
||||
|
||||
### Input commit semantics (common source of "the value didn't save")
|
||||
|
||||
- `InputString` only fires its `onChange` on **blur** or **Enter**. Typing alone
|
||||
fires `onInput`. A driver that calls `fill()` must then call `blur()`, or the
|
||||
value never reaches the style.
|
||||
- `InputNumber` commits on every change; no blur needed.
|
||||
- The autocomplete inputs (layer source, add-layer source) are controlled
|
||||
downshift comboboxes. Keystroke typing is dropped/reordered — `{selectall}` then
|
||||
typing `raster` yields `"exampleaster"`. Use `fill()`, which dispatches a single
|
||||
input event, then pick from the filtered menu.
|
||||
- CodeMirror auto-closes brackets and quotes, and types over its own closers, so
|
||||
inserting a well-formed JSON fragment stays well-formed. To break JSON on
|
||||
purpose, insert a bare word.
|
||||
|
||||
### Fixtures
|
||||
|
||||
Style fixtures live in `e2e/fixtures/`. A new one must be registered in two places
|
||||
in `maputnik-driver.ts`: the list in `given.setupMockBackedResponses` and the
|
||||
`styleFileByKey` map in `when.setStyle`.
|
||||
|
||||
### Verify a new test can fail
|
||||
|
||||
A test that passes for the wrong reason is worse than no test. After writing one,
|
||||
mutate the expected value and confirm it fails. This has caught real mistakes
|
||||
(e.g. a driver that never committed its input, so the assertion was matching a
|
||||
value written by the *previous* step).
|
||||
|
||||
+4
-15
@@ -1,14 +1,5 @@
|
||||
## main
|
||||
|
||||
### ✨ Features and improvements
|
||||
- Replace Cypress with Playwright for end-to-end tests and Vitest browser mode (Playwright provider) for component tests; drop the `@shellygo/cypress-test-utils` helper in favour of a `MaputnikDriver` page object
|
||||
- _...Add new stuff here..._
|
||||
|
||||
### 🐞 Bug fixes
|
||||
- _...Add new stuff here..._
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### ✨ Features and improvements
|
||||
- Added translation to "Links" in debug modal
|
||||
- Add support for hillshade's color arrays and relief-color elevation expression
|
||||
@@ -21,22 +12,20 @@
|
||||
- Upgraded codemirror from version 5 to version 6
|
||||
- Add code editor to allow editing the entire style
|
||||
- Add support for sprite object in setting modal
|
||||
- Set the correct map view when opening a new style on an empty map
|
||||
- Allow root-relative urls in the stylefile
|
||||
- _...Add new stuff here..._
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Improved the local style open modal and local file upload.
|
||||
- Fixed the Expression editor (for long expressions) being able to be float under other components further down
|
||||
- Fixed an issue when clicking on a popup and then clicking on the map again
|
||||
- Fix modal close button position
|
||||
- Fixed an issue with the generation of translations
|
||||
- Fix modal close button possition
|
||||
- Fixed an issue with the generation of tranlations
|
||||
- Fix missing spec info when clicking next to a property
|
||||
- Fix Firefox open file that stopped working due to react upgrade
|
||||
- Fix issue with missing bottom error panel
|
||||
- Fixed headers in left panes (Layers list and Layer editor) to remain visible when scrolling
|
||||
- Fix error when using a source from localhost
|
||||
- Fix an issue with scrolling when using the code editor
|
||||
- _...Add new stuff here..._
|
||||
|
||||
## 3.0.0
|
||||
|
||||
|
||||
@@ -79,45 +79,26 @@ npm run sort-styles
|
||||
```
|
||||
|
||||
## Tests
|
||||
For E2E testing we use [Cypress](https://www.cypress.io/)
|
||||
|
||||
### End-to-end tests
|
||||
[Cypress](https://www.cypress.io/) doesn't start a server so you'll need to start one manually by running `npm run start`.
|
||||
|
||||
For E2E testing we use [Playwright](https://playwright.dev/). The tests live in the [`e2e`](/e2e) directory and drive the app through the `MaputnikDriver` page object.
|
||||
|
||||
The first time you run the tests, install the browser:
|
||||
|
||||
```
|
||||
npx playwright install chromium
|
||||
```
|
||||
|
||||
Playwright automatically starts the dev server (`npm run start`) for you, so you can just run:
|
||||
Now open a terminal and run the following using *chrome*:
|
||||
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
|
||||
Some useful options:
|
||||
|
||||
or *firefox*:
|
||||
```
|
||||
# see the tests run in a headed browser
|
||||
npm run test -- --headed
|
||||
|
||||
# run a single spec / filter by title
|
||||
npm run test -- e2e/map.spec.ts
|
||||
npm run test -- -g "zoom level"
|
||||
|
||||
# open the interactive UI mode
|
||||
npx playwright test --ui
|
||||
npm run test -- --browser firefox
|
||||
```
|
||||
|
||||
Running the E2E tests also produces a code-coverage report in `coverage/` (collected via istanbul instrumentation of the dev server).
|
||||
See the following docs for more info: (Launching Browsers)[https://docs.cypress.io/guides/guides/launching-browsers]
|
||||
|
||||
### Unit & component tests
|
||||
|
||||
Unit tests and component tests run with [Vitest](https://vitest.dev/); component tests (`*.browser.test.tsx`) use Vitest's browser mode with the Playwright provider.
|
||||
You can also see the tests as they run or select which suites to run by executing:
|
||||
|
||||
```
|
||||
npm run test-unit
|
||||
npm run cy:open
|
||||
```
|
||||
|
||||
## Release process
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { defineConfig } from "cypress";
|
||||
import { createRequire } from "module";
|
||||
const require = createRequire(import.meta.url);
|
||||
|
||||
export default defineConfig({
|
||||
env: {
|
||||
codeCoverage: {
|
||||
exclude: "cypress/**/*.*",
|
||||
},
|
||||
},
|
||||
|
||||
e2e: {
|
||||
setupNodeEvents(on, config) {
|
||||
// implement node event listeners here
|
||||
require("@cypress/code-coverage/task")(on, config);
|
||||
return config;
|
||||
},
|
||||
baseUrl: "http://localhost:8888",
|
||||
scrollBehavior: "center",
|
||||
retries: {
|
||||
runMode: 2,
|
||||
openMode: 0,
|
||||
},
|
||||
},
|
||||
|
||||
component: {
|
||||
devServer: {
|
||||
framework: "react",
|
||||
bundler: "vite",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("accessibility", () => {
|
||||
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
describe("skip links", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("layer");
|
||||
});
|
||||
|
||||
it("skip link to layer list", () => {
|
||||
const selector = "root:skip:layer-list";
|
||||
then(get.elementByTestId(selector)).shouldExist();
|
||||
when.tab();
|
||||
then(get.elementByTestId(selector)).shouldBeFocused();
|
||||
when.click(selector);
|
||||
then(get.skipTargetLayerList()).shouldBeFocused();
|
||||
});
|
||||
|
||||
it("skip link to layer editor", () => {
|
||||
const selector = "root:skip:layer-editor";
|
||||
then(get.elementByTestId(selector)).shouldExist();
|
||||
then(get.elementByTestId("skip-target-layer-editor")).shouldExist();
|
||||
when.tab().tab();
|
||||
then(get.elementByTestId(selector)).shouldBeFocused();
|
||||
when.click(selector);
|
||||
then(get.skipTargetLayerEditor()).shouldBeFocused();
|
||||
});
|
||||
|
||||
it("skip link to map view", () => {
|
||||
const selector = "root:skip:map-view";
|
||||
then(get.elementByTestId(selector)).shouldExist();
|
||||
when.tab().tab().tab();
|
||||
then(get.elementByTestId(selector)).shouldBeFocused();
|
||||
when.click(selector);
|
||||
then(get.canvas()).shouldBeFocused();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("code editor", () => {
|
||||
const { beforeAndAfter, when, get, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
it("open code editor", () => {
|
||||
when.click("nav:code-editor");
|
||||
then(get.element(".maputnik-code-editor")).shouldExist();
|
||||
});
|
||||
|
||||
it("closes code editor", () => {
|
||||
when.click("nav:code-editor");
|
||||
then(get.element(".maputnik-code-editor")).shouldExist();
|
||||
when.click("nav:code-editor");
|
||||
then(get.element(".maputnik-code-editor")).shouldNotExist();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,124 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("history", () => {
|
||||
const { beforeAndAfter, when, get, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
let undoKeyCombo: string;
|
||||
let redoKeyCombo: string;
|
||||
|
||||
before(() => {
|
||||
const isMac = get.isMac();
|
||||
undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
|
||||
redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
|
||||
});
|
||||
|
||||
it("undo/redo", () => {
|
||||
when.setStyle("geojson");
|
||||
when.modal.open();
|
||||
|
||||
when.modal.fillLayers({
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
});
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
when.typeKeys(undoKeyCombo);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
when.typeKeys(undoKeyCombo);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
|
||||
|
||||
when.typeKeys(redoKeyCombo);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
when.typeKeys(redoKeyCombo);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("should not redo after undo and value change", () => {
|
||||
when.setStyle("geojson");
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
when.typeKeys(undoKeyCombo);
|
||||
when.typeKeys(undoKeyCombo);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
|
||||
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: "step 3",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
when.typeKeys(redoKeyCombo);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "step 3",
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("i18n", () => {
|
||||
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
describe("language detector", () => {
|
||||
it("English", () => {
|
||||
const url = "?lng=en";
|
||||
when.visit(url);
|
||||
then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("en");
|
||||
});
|
||||
|
||||
it("Japanese", () => {
|
||||
const url = "?lng=ja";
|
||||
when.visit(url);
|
||||
then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("ja");
|
||||
});
|
||||
});
|
||||
|
||||
describe("language switcher", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("layer");
|
||||
});
|
||||
|
||||
it("the language switcher switches to Japanese", () => {
|
||||
const selector = "maputnik-lang-select";
|
||||
then(get.elementByTestId(selector)).shouldExist();
|
||||
when.select(selector, "ja");
|
||||
then(get.elementByTestId(selector)).shouldHaveValue("ja");
|
||||
|
||||
then(get.elementByTestId("nav:settings")).shouldHaveText("スタイル設定");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("keyboard", () => {
|
||||
const { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
describe("shortcuts", () => {
|
||||
beforeEach(() => {
|
||||
given.setupMockBackedResponses();
|
||||
when.setStyle("");
|
||||
});
|
||||
|
||||
it("ESC should unfocus", () => {
|
||||
const targetSelector = "maputnik-select";
|
||||
when.focus(targetSelector);
|
||||
then(get.elementByTestId(targetSelector)).shouldBeFocused();
|
||||
when.typeKeys("{esc}");
|
||||
then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
|
||||
});
|
||||
|
||||
it("'?' should show shortcuts modal", () => {
|
||||
when.typeKeys("?");
|
||||
then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
|
||||
});
|
||||
|
||||
it("'o' should show open modal", () => {
|
||||
when.typeKeys("o");
|
||||
then(get.elementByTestId("modal:open")).shouldBeVisible();
|
||||
});
|
||||
|
||||
it("'e' should show export modal", () => {
|
||||
when.typeKeys("e");
|
||||
then(get.elementByTestId("modal:export")).shouldBeVisible();
|
||||
});
|
||||
|
||||
it("'d' should show sources modal", () => {
|
||||
when.typeKeys("d");
|
||||
then(get.elementByTestId("modal:sources")).shouldBeVisible();
|
||||
});
|
||||
|
||||
it("'s' should show settings modal", () => {
|
||||
when.typeKeys("s");
|
||||
then(get.elementByTestId("modal:settings")).shouldBeVisible();
|
||||
});
|
||||
|
||||
it("'i' should change map to inspect mode", () => {
|
||||
when.typeKeys("i");
|
||||
then(get.inputValue("maputnik-select")).shouldEqual("inspect");
|
||||
});
|
||||
|
||||
it("'m' should focus map", () => {
|
||||
when.typeKeys("m");
|
||||
then(get.canvas()).shouldBeFocused();
|
||||
});
|
||||
|
||||
it("'!' should show debug modal", () => {
|
||||
when.typeKeys("!");
|
||||
then(get.elementByTestId("modal:debug")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,294 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
import { v1 as uuid } from "uuid";
|
||||
|
||||
describe("layer editor", () => {
|
||||
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
when.setStyle("both");
|
||||
when.modal.open();
|
||||
});
|
||||
|
||||
function createBackground() {
|
||||
const id = uuid();
|
||||
|
||||
when.selectWithin("add-layer.layer-type", "background");
|
||||
when.setValue("add-layer.layer-id.input", "background:" + id);
|
||||
|
||||
when.click("add-layer");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
return id;
|
||||
}
|
||||
|
||||
it("expand/collapse");
|
||||
it("id", () => {
|
||||
const bgId = createBackground();
|
||||
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
const id = uuid();
|
||||
when.setValue("layer-editor.layer-id.input", "foobar:" + id);
|
||||
when.click("min-zoom");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "foobar:" + id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("source", () => {
|
||||
it("should show error when the source is invalid", () => {
|
||||
when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "invalid",
|
||||
});
|
||||
then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
|
||||
});
|
||||
});
|
||||
|
||||
describe("min-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("min-zoom.input-text", "1");
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update min-zoom in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("when clicking next layer should update style on local storage", () => {
|
||||
when.type("min-zoom.input-text", "{backspace}");
|
||||
when.click("max-zoom.input-text");
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("max-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("max-zoom.input-text", "1");
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
maxzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("comments", () => {
|
||||
let bgId: string;
|
||||
const comment = "42";
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("layer-comment.input", comment);
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
metadata: {
|
||||
"maputnik:comment": comment,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when unsetting", () => {
|
||||
beforeEach(() => {
|
||||
when.clear("layer-comment.input");
|
||||
when.click("min-zoom.input-text");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("color", () => {
|
||||
let bgId: string;
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.click("spec-field:background-color");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("opacity", () => {
|
||||
let bgId: string;
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.type("spec-field-input:background-opacity", "0.");
|
||||
});
|
||||
|
||||
it("should keep '.' in the input field", () => {
|
||||
then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
|
||||
});
|
||||
|
||||
it("should revert to a valid value when focus out", () => {
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe("filter", () => {
|
||||
it("expand/collapse");
|
||||
it("compound filter");
|
||||
});
|
||||
|
||||
describe("layout", () => {
|
||||
it("text-font", () => {
|
||||
when.setStyle("font");
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.collapseGroupInLayerEditor(1);
|
||||
when.collapseGroupInLayerEditor(2);
|
||||
when.doWithin("spec-field:text-font", () => {
|
||||
get.element(".maputnik-autocomplete input").first().click();
|
||||
});
|
||||
then(get.element(".maputnik-autocomplete-menu-item")).shouldBeVisible();
|
||||
then(get.element(".maputnik-autocomplete-menu-item")).shouldHaveLength(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe("paint", () => {
|
||||
it("expand/collapse");
|
||||
it("color");
|
||||
it("pattern");
|
||||
it("opacity");
|
||||
});
|
||||
|
||||
describe("json-editor", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "circle",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const sourceText = get.elementByText('"source"');
|
||||
|
||||
sourceText.click();
|
||||
sourceText.type("\"");
|
||||
|
||||
then(get.element(".cm-lint-marker-error")).shouldExist();
|
||||
});
|
||||
|
||||
|
||||
it("expand/collapse");
|
||||
it("modify");
|
||||
|
||||
it("parse error", () => {
|
||||
const bgId = createBackground();
|
||||
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.collapseGroupInLayerEditor(1);
|
||||
then(get.element(".cm-lint-marker-error")).shouldNotExist();
|
||||
|
||||
when.appendTextInJsonEditor(
|
||||
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
|
||||
);
|
||||
then(get.element(".cm-lint-marker-error")).shouldExist();
|
||||
});
|
||||
});
|
||||
|
||||
describe("sticky header", () => {
|
||||
it("should keep layer header visible when scrolling properties", () => {
|
||||
// Setup: Create a layer with many properties (e.g., symbol layer)
|
||||
when.modal.fillLayers({
|
||||
type: "symbol",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
when.wait(500);
|
||||
const header = get.elementByTestId("layer-editor.header");
|
||||
then(header).shouldBeVisible();
|
||||
|
||||
get.element(".maputnik-scroll-container").scrollTo("bottom", { ensureScrollable: false });
|
||||
when.wait(200);
|
||||
|
||||
then(header).shouldBeVisible();
|
||||
then(get.elementByTestId("skip-target-layer-editor")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,541 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("layers list", () => {
|
||||
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
when.setStyle("both");
|
||||
when.modal.open();
|
||||
});
|
||||
|
||||
describe("ops", () => {
|
||||
let id: string;
|
||||
beforeEach(() => {
|
||||
id = when.modal.fillLayers({
|
||||
type: "background",
|
||||
});
|
||||
});
|
||||
|
||||
it("should update layers in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking delete", () => {
|
||||
beforeEach(() => {
|
||||
when.click("layer-list-item:" + id + ":delete");
|
||||
});
|
||||
it("should empty layers in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking duplicate", () => {
|
||||
beforeEach(() => {
|
||||
when.click("layer-list-item:" + id + ":copy");
|
||||
});
|
||||
it("should add copy layer in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id + "-copy",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking hide", () => {
|
||||
beforeEach(() => {
|
||||
when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
});
|
||||
|
||||
it("should update visibility to none in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
layout: {
|
||||
visibility: "none",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking show", () => {
|
||||
beforeEach(() => {
|
||||
when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
});
|
||||
|
||||
it("should update visibility to visible in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when selecting a layer", () => {
|
||||
let secondId: string;
|
||||
beforeEach(() => {
|
||||
when.modal.open();
|
||||
secondId = when.modal.fillLayers({
|
||||
id: "second-layer",
|
||||
type: "background",
|
||||
});
|
||||
});
|
||||
it("should show the selected layer in the editor", () => {
|
||||
when.realClick("layer-list-item:" + secondId);
|
||||
then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(secondId);
|
||||
when.realClick("layer-list-item:" + id);
|
||||
then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(id);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("background", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "background",
|
||||
});
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("modify", () => {});
|
||||
});
|
||||
|
||||
describe("fill", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "fill",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "fill",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// TODO: Change source
|
||||
it("change source");
|
||||
});
|
||||
|
||||
describe("line", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "line",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "line",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("groups", () => {
|
||||
when.modal.open();
|
||||
const id1 = when.modal.fillLayers({
|
||||
id: "aa",
|
||||
type: "line",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
when.modal.open();
|
||||
const id2 = when.modal.fillLayers({
|
||||
id: "aa-2",
|
||||
type: "line",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
when.modal.open();
|
||||
const id3 = when.modal.fillLayers({
|
||||
id: "b",
|
||||
type: "line",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
|
||||
then(get.elementByTestId("layer-list-item:" + id2)).shouldNotBeVisible();
|
||||
then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
|
||||
when.click("layer-list-group:aa-0");
|
||||
then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
|
||||
then(get.elementByTestId("layer-list-item:" + id2)).shouldBeVisible();
|
||||
then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
|
||||
when.click("layer-list-item:" + id2);
|
||||
when.click("skip-target-layer-editor");
|
||||
when.click("menu-move-layer-down");
|
||||
then(get.elementByTestId("layer-list-group:aa-0")).shouldNotExist();
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "aa",
|
||||
type: "line",
|
||||
source: "example",
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
type: "line",
|
||||
source: "example",
|
||||
},
|
||||
{
|
||||
id: "aa-2",
|
||||
type: "line",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("symbol", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "symbol",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "symbol",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("should show spec info when hovering and clicking single line property", () => {
|
||||
when.modal.fillLayers({
|
||||
type: "symbol",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
when.hover("spec-field-container:text-rotate");
|
||||
then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
|
||||
when.click("field-doc-button-Rotate", 0);
|
||||
then(get.elementByTestId("spec-field-doc")).shouldContainText("Rotates the ");
|
||||
});
|
||||
|
||||
it("should show spec info when hovering and clicking multi line property", () => {
|
||||
when.modal.fillLayers({
|
||||
type: "symbol",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
when.hover("spec-field-container:text-offset");
|
||||
then(get.elementByTestId("field-doc-button-Offset")).shouldBeVisible();
|
||||
when.click("field-doc-button-Offset", 0);
|
||||
then(get.elementByTestId("spec-field-doc")).shouldContainText("Offset distance");
|
||||
});
|
||||
|
||||
it("should hide spec info when clicking a second time", () => {
|
||||
when.modal.fillLayers({
|
||||
type: "symbol",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
when.hover("spec-field-container:text-rotate");
|
||||
then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
|
||||
when.click("field-doc-button-Rotate", 0);
|
||||
when.wait(200);
|
||||
when.click("field-doc-button-Rotate", 0);
|
||||
then(get.elementByTestId("spec-field-doc")).shouldNotBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("raster", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "raster",
|
||||
layer: "raster",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "raster",
|
||||
source: "raster",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("circle", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "circle",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("fill extrusion", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "fill-extrusion",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "fill-extrusion",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("hillshade", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "hillshade",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "hillshade",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("set hillshade illumination direction array", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "hillshade",
|
||||
layer: "example",
|
||||
});
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.collapseGroupInLayerEditor(1);
|
||||
when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", "1");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "2");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "3");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "4");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "hillshade",
|
||||
source: "example",
|
||||
paint: {
|
||||
"hillshade-illumination-direction": [ 1, 2, 3, 4 ]
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("set hillshade highlight color array", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "hillshade",
|
||||
layer: "example",
|
||||
});
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.setValueToPropertyArray("spec-field:hillshade-highlight-color", "blue");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "#00ff00");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "rgba(255, 255, 0, 1)");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "hillshade",
|
||||
source: "example",
|
||||
paint: {
|
||||
"hillshade-highlight-color": [ "blue", "#00ff00", "rgba(255, 255, 0, 1)" ]
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("color-relief", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "color-relief",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "color-relief",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("adds elevation expression when clicking the elevation button", () => {
|
||||
when.modal.fillLayers({
|
||||
type: "color-relief",
|
||||
layer: "example",
|
||||
});
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.click("make-elevation-function");
|
||||
then(get.element("[data-wd-key='spec-field-container:color-relief-color'] .cm-line")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("groups", () => {
|
||||
it("simple", () => {
|
||||
when.setStyle("geojson");
|
||||
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: "foo",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: "foo_bar",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: "foo_bar_baz",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
|
||||
then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
|
||||
then(
|
||||
get.elementByTestId("layer-list-item:foo_bar_baz")
|
||||
).shouldNotBeVisible();
|
||||
when.click("layer-list-group:foo-0");
|
||||
then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
|
||||
then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
|
||||
then(
|
||||
get.elementByTestId("layer-list-item:foo_bar_baz")
|
||||
).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("drag and drop", () => {
|
||||
it("move layer should update local storage", () => {
|
||||
when.modal.open();
|
||||
const firstId = when.modal.fillLayers({
|
||||
id: "a",
|
||||
type: "background",
|
||||
});
|
||||
when.modal.open();
|
||||
const secondId = when.modal.fillLayers({
|
||||
id: "b",
|
||||
type: "background",
|
||||
});
|
||||
when.modal.open();
|
||||
const thirdId = when.modal.fillLayers({
|
||||
id: "c",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
when.dragAndDropWithWait("layer-list-item:" + firstId, "layer-list-item:" + thirdId);
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: secondId,
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: thirdId,
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: firstId,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("sticky header", () => {
|
||||
it("should keep header visible when scrolling layer list", () => {
|
||||
// Setup: Create multiple layers to enable scrolling
|
||||
for (let i = 0; i < 20; i++) {
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
id: `layer-${i}`,
|
||||
type: "background",
|
||||
});
|
||||
}
|
||||
|
||||
when.wait(500);
|
||||
const header = get.elementByTestId("layer-list.header");
|
||||
then(header).shouldBeVisible();
|
||||
|
||||
// Scroll the layer list container (use ensureScrollable: false to avoid flakiness)
|
||||
get.elementByTestId("layer-list").scrollTo("bottom", { ensureScrollable: false });
|
||||
when.wait(200);
|
||||
then(header).shouldBeVisible();
|
||||
then(get.elementByTestId("layer-list:add-layer")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("map", () => {
|
||||
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
describe("zoom level", () => {
|
||||
it("via url", () => {
|
||||
const zoomLevel = 12.37;
|
||||
when.setStyle("geojson", zoomLevel);
|
||||
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
|
||||
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
|
||||
"Zoom: " + zoomLevel
|
||||
);
|
||||
});
|
||||
|
||||
it("via map controls", () => {
|
||||
const zoomLevel = 12.37;
|
||||
when.setStyle("geojson", zoomLevel);
|
||||
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
|
||||
when.clickZoomIn();
|
||||
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
|
||||
"Zoom: " + (zoomLevel + 1)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("search", () => {
|
||||
it("should exist", () => {
|
||||
then(get.searchControl()).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("popup", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("rectangles");
|
||||
});
|
||||
it("should open on feature click", () => {
|
||||
when.clickCenter("maplibre:map");
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
});
|
||||
|
||||
it("should open a second feature after closing popup", () => {
|
||||
when.clickCenter("maplibre:map");
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
when.closePopup();
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldNotExist();
|
||||
when.clickCenter("maplibre:map");
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
/// <reference types="cypress-real-events" />
|
||||
import { CypressHelper } from "@shellygo/cypress-test-utils";
|
||||
import "cypress-real-events/support";
|
||||
|
||||
export default class MaputnikCypressHelper {
|
||||
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
|
||||
|
||||
public given = {
|
||||
...this.helper.given,
|
||||
};
|
||||
|
||||
public get = {
|
||||
...this.helper.get,
|
||||
};
|
||||
|
||||
public when = {
|
||||
dragAndDropWithWait: (element: string, targetElement: string) => {
|
||||
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
|
||||
this.helper.get.elementByTestId(element).realMouseMove(0, 10, { position: "center" });
|
||||
this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" });
|
||||
this.helper.when.wait(1);
|
||||
this.helper.get.elementByTestId(targetElement).realMouseUp();
|
||||
},
|
||||
clickCenter: (element: string) => {
|
||||
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
|
||||
this.helper.when.wait(200);
|
||||
this.helper.get.elementByTestId(element).realMouseUp();
|
||||
},
|
||||
openFileByFixture: (fixture: string, buttonTestId: string, inputTestId: string) => {
|
||||
cy.window().then((win) => {
|
||||
const file = {
|
||||
text: cy.stub().resolves(cy.fixture(fixture).then(JSON.stringify)),
|
||||
};
|
||||
const fileHandle = {
|
||||
getFile: cy.stub().resolves(file),
|
||||
};
|
||||
if (!win.showOpenFilePicker) {
|
||||
this.helper.get.elementByTestId(inputTestId).selectFile("cypress/fixtures/" + fixture, { force: true });
|
||||
} else {
|
||||
cy.stub(win, "showOpenFilePicker").resolves([fileHandle]);
|
||||
this.helper.get.elementByTestId(buttonTestId).click();
|
||||
}
|
||||
});
|
||||
},
|
||||
...this.helper.when,
|
||||
};
|
||||
|
||||
public beforeAndAfter = this.helper.beforeAndAfter;
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
/// <reference types="cypress-plugin-tab" />
|
||||
|
||||
import { CypressHelper } from "@shellygo/cypress-test-utils";
|
||||
import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
|
||||
import MaputnikCypressHelper from "./maputnik-cypress-helper";
|
||||
import ModalDriver from "./modal-driver";
|
||||
const baseUrl = "http://localhost:8888/";
|
||||
|
||||
const styleFromWindow = (win: Window) => {
|
||||
const styleId = win.localStorage.getItem("maputnik:latest_style");
|
||||
const styleItemKey = `maputnik:style:${styleId}`;
|
||||
const styleItem = win.localStorage.getItem(styleItemKey);
|
||||
if (!styleItem) throw new Error("Could not get styleItem from localStorage");
|
||||
const obj = JSON.parse(styleItem);
|
||||
return obj;
|
||||
};
|
||||
|
||||
export class MaputnikAssertable<T> extends Assertable<T> {
|
||||
shouldEqualToStoredStyle = () =>
|
||||
then(
|
||||
new CypressHelper().get.window().then((win: Window) => {
|
||||
const style = styleFromWindow(win);
|
||||
then(this.chainable).shouldDeepNestedInclude(style);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
export class MaputnikDriver {
|
||||
private helper = new MaputnikCypressHelper();
|
||||
private modalDriver = new ModalDriver();
|
||||
|
||||
public beforeAndAfter = () => {
|
||||
beforeEach(() => {
|
||||
this.given.setupMockBackedResponses();
|
||||
this.when.setStyle("both");
|
||||
});
|
||||
};
|
||||
|
||||
public then = (chainable: Cypress.Chainable<any>) =>
|
||||
new MaputnikAssertable(chainable);
|
||||
|
||||
public given = {
|
||||
...this.helper.given,
|
||||
setupMockBackedResponses: () => {
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "example-style.json",
|
||||
response: {
|
||||
fixture: "example-style.json",
|
||||
},
|
||||
alias: "example-style.json",
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "example-layer-style.json",
|
||||
response: {
|
||||
fixture: "example-layer-style.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "geojson-style.json",
|
||||
response: {
|
||||
fixture: "geojson-style.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "raster-style.json",
|
||||
response: {
|
||||
fixture: "raster-style.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "geojson-raster-style.json",
|
||||
response: {
|
||||
fixture: "geojson-raster-style.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "rectangles-style.json",
|
||||
response: {
|
||||
fixture: "rectangles-style.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "example-style-with-fonts.json",
|
||||
response: {
|
||||
fixture: "example-style-with-fonts.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: "*example.local/*",
|
||||
response: [],
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: "*example.com/*",
|
||||
response: [],
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: "https://www.glyph-server.com/*",
|
||||
response: ["Font 1", "Font 2", "Font 3"],
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
public when = {
|
||||
...this.helper.when,
|
||||
modal: this.modalDriver.when,
|
||||
doWithin: (selector: string, fn: () => void) => {
|
||||
this.helper.when.doWithin(fn, selector);
|
||||
},
|
||||
tab: () => this.helper.get.element("body").tab(),
|
||||
waitForExampleFileResponse: () => {
|
||||
this.helper.when.waitForResponse("example-style.json");
|
||||
},
|
||||
chooseExampleFile: () => {
|
||||
this.helper.given.fixture("example-style.json", "example-style.json");
|
||||
this.helper.when.openFileByFixture("example-style.json", "modal:open.file.button", "modal:open.file.input");
|
||||
this.helper.when.wait(200);
|
||||
},
|
||||
setStyle: (
|
||||
styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "font" | "",
|
||||
zoom?: number
|
||||
) => {
|
||||
const url = new URL(baseUrl);
|
||||
switch (styleProperties) {
|
||||
case "geojson":
|
||||
url.searchParams.set("style", baseUrl + "geojson-style.json");
|
||||
break;
|
||||
case "raster":
|
||||
url.searchParams.set("style", baseUrl + "raster-style.json");
|
||||
break;
|
||||
case "both":
|
||||
url.searchParams.set("style", baseUrl + "geojson-raster-style.json");
|
||||
break;
|
||||
case "layer":
|
||||
url.searchParams.set("style", baseUrl + "example-layer-style.json");
|
||||
break;
|
||||
case "rectangles":
|
||||
url.searchParams.set("style", baseUrl + "rectangles-style.json");
|
||||
break;
|
||||
case "font":
|
||||
url.searchParams.set("style", baseUrl + "example-style-with-fonts.json");
|
||||
break;
|
||||
}
|
||||
|
||||
if (zoom) {
|
||||
url.hash = `${zoom}/41.3805/2.1635`;
|
||||
}
|
||||
this.helper.when.visit(url.toString());
|
||||
if (styleProperties) {
|
||||
this.helper.when.acceptConfirm();
|
||||
}
|
||||
// when methods should not include assertions
|
||||
const toolbarLink = this.helper.get.elementByTestId("toolbar:link");
|
||||
toolbarLink.scrollIntoView();
|
||||
toolbarLink.should("be.visible");
|
||||
},
|
||||
|
||||
typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
|
||||
|
||||
clickZoomIn: () => {
|
||||
this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
|
||||
},
|
||||
|
||||
selectWithin: (selector: string, value: string) => {
|
||||
this.when.doWithin(selector, () => {
|
||||
this.helper.get.element("select").select(value);
|
||||
});
|
||||
},
|
||||
|
||||
select: (selector: string, value: string) => {
|
||||
this.helper.get.elementByTestId(selector).select(value);
|
||||
},
|
||||
|
||||
focus: (selector: string) => {
|
||||
this.helper.when.focus(selector);
|
||||
},
|
||||
|
||||
setValue: (selector: string, text: string) => {
|
||||
this.helper.get
|
||||
.elementByTestId(selector)
|
||||
.clear()
|
||||
.type(text, { parseSpecialCharSequences: false });
|
||||
},
|
||||
|
||||
setValueToPropertyArray: (selector: string, value: string) => {
|
||||
this.when.doWithin(selector, () => {
|
||||
this.helper.get.element(".maputnik-array-block-content input").last().type("{selectall}"+value, {force: true });
|
||||
});
|
||||
},
|
||||
|
||||
addValueToPropertyArray: (selector: string, value: string) => {
|
||||
this.when.doWithin(selector, () => {
|
||||
this.helper.get.element(".maputnik-array-add-value").click({ force: true });
|
||||
this.helper.get.element(".maputnik-array-block-content input").last().type("{selectall}"+value, {force: true });
|
||||
});
|
||||
},
|
||||
|
||||
closePopup: () => {
|
||||
this.helper.get.element(".maplibregl-popup-close-button").click();
|
||||
},
|
||||
|
||||
collapseGroupInLayerEditor: (index = 0) => {
|
||||
this.helper.get.element(".maputnik-layer-editor-group__button").eq(index).realClick();
|
||||
},
|
||||
|
||||
appendTextInJsonEditor: (text: string) => {
|
||||
this.helper.get.element(".cm-line").first().click().type(text, { parseSpecialCharSequences: false });
|
||||
},
|
||||
|
||||
setTextInJsonEditor: (text: string) => {
|
||||
this.helper.get.element(".cm-line").first().click().clear().type(text, { parseSpecialCharSequences: false });
|
||||
}
|
||||
};
|
||||
|
||||
public get = {
|
||||
...this.helper.get,
|
||||
isMac: () => {
|
||||
return Cypress.platform === "darwin";
|
||||
},
|
||||
|
||||
styleFromLocalStorage: () =>
|
||||
this.helper.get.window().then((win) => styleFromWindow(win)),
|
||||
|
||||
exampleFileUrl: () => {
|
||||
return baseUrl + "example-style.json";
|
||||
},
|
||||
skipTargetLayerList: () =>
|
||||
this.helper.get.elementByTestId("skip-target-layer-list"),
|
||||
skipTargetLayerEditor: () =>
|
||||
this.helper.get.elementByTestId("skip-target-layer-editor"),
|
||||
canvas: () => this.helper.get.element("canvas"),
|
||||
searchControl: () => this.helper.get.element(".maplibregl-ctrl-geocoder")
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { v1 as uuid } from "uuid";
|
||||
import MaputnikCypressHelper from "./maputnik-cypress-helper";
|
||||
|
||||
export default class ModalDriver {
|
||||
private helper = new MaputnikCypressHelper();
|
||||
|
||||
public when = {
|
||||
fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
|
||||
// Having logic in test code is an anti pattern.
|
||||
// This should be splitted to multiple single responsibility functions
|
||||
const type = opts.type;
|
||||
const layer = opts.layer;
|
||||
let id;
|
||||
if (opts.id) {
|
||||
id = opts.id;
|
||||
} else {
|
||||
id = `${type}:${uuid()}`;
|
||||
}
|
||||
this.helper.when.selectOption("add-layer.layer-type.select", type);
|
||||
this.helper.when.type("add-layer.layer-id.input", id);
|
||||
|
||||
if (layer) {
|
||||
this.helper.when.doWithin(() => {
|
||||
this.helper.get.element("input").clear().type(layer!);
|
||||
}, "add-layer.layer-source-block");
|
||||
}
|
||||
this.helper.when.click("add-layer");
|
||||
|
||||
return id;
|
||||
},
|
||||
|
||||
open: () => {
|
||||
this.helper.when.click("layer-list:add-layer");
|
||||
},
|
||||
|
||||
close: (key: string) => {
|
||||
this.helper.when.click(key + ".close-modal");
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
import tokens from "../../src/config/tokens.json" with {type: "json"};
|
||||
|
||||
describe("modals", () => {
|
||||
const { beforeAndAfter, when, get, given, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
beforeEach(() => {
|
||||
when.setStyle("");
|
||||
});
|
||||
describe("open", () => {
|
||||
beforeEach(() => {
|
||||
when.click("nav:open");
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
when.modal.close("modal:open");
|
||||
then(get.elementByTestId("modal:open")).shouldNotExist();
|
||||
});
|
||||
|
||||
it("upload", () => {
|
||||
when.chooseExampleFile();
|
||||
then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
|
||||
});
|
||||
|
||||
describe("when click open url", () => {
|
||||
beforeEach(() => {
|
||||
const styleFileUrl = get.exampleFileUrl();
|
||||
|
||||
when.setValue("modal:open.url.input", styleFileUrl);
|
||||
when.click("modal:open.url.button");
|
||||
when.wait(200);
|
||||
});
|
||||
it("load from url", () => {
|
||||
then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("shortcuts", () => {
|
||||
it("open/close", () => {
|
||||
when.setStyle("");
|
||||
when.typeKeys("?");
|
||||
when.modal.close("modal:shortcuts");
|
||||
then(get.elementByTestId("modal:shortcuts")).shouldNotExist();
|
||||
});
|
||||
});
|
||||
|
||||
describe("export", () => {
|
||||
beforeEach(() => {
|
||||
when.click("nav:export");
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
when.modal.close("modal:export");
|
||||
then(get.elementByTestId("modal:export")).shouldNotExist();
|
||||
});
|
||||
|
||||
// TODO: Work out how to download a file and check the contents
|
||||
it("download");
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("layer");
|
||||
when.click("nav:sources");
|
||||
});
|
||||
|
||||
it("active sources");
|
||||
it("public source");
|
||||
|
||||
it("add new source", () => {
|
||||
const sourceId = "n1z2v3r";
|
||||
when.setValue("modal:sources.add.source_id", sourceId);
|
||||
when.select("modal:sources.add.source_type", "tile_vector");
|
||||
when.select("modal:sources.add.scheme_type", "tms");
|
||||
when.click("modal:sources.add.add_source");
|
||||
when.wait(200);
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.sources[sourceId])
|
||||
).shouldInclude({
|
||||
scheme: "tms",
|
||||
});
|
||||
});
|
||||
|
||||
it("add new pmtiles source", () => {
|
||||
const sourceId = "pmtilestest";
|
||||
when.setValue("modal:sources.add.source_id", sourceId);
|
||||
when.select("modal:sources.add.source_type", "pmtiles_vector");
|
||||
when.setValue("modal:sources.add.source_url", "https://data.source.coop/protomaps/openstreetmap/v4.pmtiles");
|
||||
when.click("modal:sources.add.add_source");
|
||||
when.click("modal:sources.add.add_source");
|
||||
when.wait(200);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
pmtilestest: {
|
||||
type: "vector",
|
||||
url: "pmtiles://https://data.source.coop/protomaps/openstreetmap/v4.pmtiles",
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("add new raster source", () => {
|
||||
const sourceId = "rastertest";
|
||||
when.setValue("modal:sources.add.source_id", sourceId);
|
||||
when.select("modal:sources.add.source_type", "tile_raster");
|
||||
when.select("modal:sources.add.scheme_type", "xyz");
|
||||
when.setValue("modal:sources.add.tile_size", "128");
|
||||
when.click("modal:sources.add.add_source");
|
||||
when.wait(200);
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.sources[sourceId])
|
||||
).shouldInclude({
|
||||
tileSize: 128,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("inspect", () => {
|
||||
it("toggle", () => {
|
||||
// There is no assertion in this test
|
||||
when.setStyle("geojson");
|
||||
when.select("maputnik-select", "inspect");
|
||||
});
|
||||
});
|
||||
|
||||
describe("style settings", () => {
|
||||
beforeEach(() => {
|
||||
when.click("nav:settings");
|
||||
});
|
||||
|
||||
describe("when click name filed spec information", () => {
|
||||
beforeEach(() => {
|
||||
when.click("field-doc-button-Name");
|
||||
});
|
||||
|
||||
it("should show the spec information", () => {
|
||||
then(get.elementsText("spec-field-doc")).shouldInclude(
|
||||
"name for the style"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("when set name and click owner", () => {
|
||||
beforeEach(() => {
|
||||
when.setValue("modal:settings.name", "foobar");
|
||||
when.click("modal:settings.owner");
|
||||
when.wait(200);
|
||||
});
|
||||
|
||||
it("show name specifications", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
name: "foobar",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when set owner and click name", () => {
|
||||
beforeEach(() => {
|
||||
when.setValue("modal:settings.owner", "foobar");
|
||||
when.click("modal:settings.name");
|
||||
when.wait(200);
|
||||
});
|
||||
it("should update owner in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
owner: "foobar",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("sprite url", () => {
|
||||
when.setTextInJsonEditor("\"http://example.com\"");
|
||||
when.click("modal:settings.name");
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sprite: "http://example.com",
|
||||
});
|
||||
});
|
||||
|
||||
it("sprite object", () => {
|
||||
when.setTextInJsonEditor(JSON.stringify([{id: "1", url: "2"}]));
|
||||
|
||||
when.click("modal:settings.name");
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sprite: [{ id: "1", url: "2"}],
|
||||
});
|
||||
});
|
||||
|
||||
it("glyphs url", () => {
|
||||
const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
|
||||
when.setValue("modal:settings.glyphs", glyphsUrl);
|
||||
when.click("modal:settings.name");
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
glyphs: glyphsUrl,
|
||||
});
|
||||
});
|
||||
|
||||
it("maptiler access token", () => {
|
||||
const apiKey = "testing123";
|
||||
when.setValue(
|
||||
"modal:settings.maputnik:openmaptiles_access_token",
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.metadata)
|
||||
).shouldInclude({
|
||||
"maputnik:openmaptiles_access_token": apiKey,
|
||||
});
|
||||
});
|
||||
|
||||
it("thunderforest access token", () => {
|
||||
const apiKey = "testing123";
|
||||
when.setValue(
|
||||
"modal:settings.maputnik:thunderforest_access_token",
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.metadata)
|
||||
).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
|
||||
});
|
||||
|
||||
it("stadia access token", () => {
|
||||
const apiKey = "testing123";
|
||||
when.setValue(
|
||||
"modal:settings.maputnik:stadia_access_token",
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.metadata)
|
||||
).shouldInclude({ "maputnik:stadia_access_token": apiKey });
|
||||
});
|
||||
|
||||
it("locationiq access token", () => {
|
||||
const apiKey = "testing123";
|
||||
when.setValue(
|
||||
"modal:settings.maputnik:locationiq_access_token",
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.metadata)
|
||||
).shouldInclude({ "maputnik:locationiq_access_token": apiKey });
|
||||
});
|
||||
|
||||
it("style projection mercator", () => {
|
||||
when.select("modal:settings.projection", "mercator");
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.projection)
|
||||
).shouldInclude({ type: "mercator" });
|
||||
});
|
||||
|
||||
it("style projection globe", () => {
|
||||
when.select("modal:settings.projection", "globe");
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.projection)
|
||||
).shouldInclude({ type: "globe" });
|
||||
});
|
||||
|
||||
|
||||
it("style projection vertical-perspective", () => {
|
||||
when.select("modal:settings.projection", "vertical-perspective");
|
||||
then(
|
||||
get.styleFromLocalStorage().then((style) => style.projection)
|
||||
).shouldInclude({ type: "vertical-perspective" });
|
||||
|
||||
});
|
||||
|
||||
it("style renderer", () => {
|
||||
cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
|
||||
when.select("modal:settings.maputnik:renderer", "ol");
|
||||
then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
|
||||
"ol"
|
||||
);
|
||||
|
||||
when.click("modal:settings.name");
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
metadata: { "maputnik:renderer": "ol" },
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
it("inlcude API key when change renderer", () => {
|
||||
|
||||
when.click("modal:settings.close-modal");
|
||||
when.click("nav:open");
|
||||
|
||||
get.elementByAttribute("aria-label", "MapTiler Basic").should("exist").click();
|
||||
when.wait(1000);
|
||||
when.click("nav:settings");
|
||||
|
||||
when.select("modal:settings.maputnik:renderer", "mlgljs");
|
||||
then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
|
||||
"mlgljs"
|
||||
);
|
||||
|
||||
when.select("modal:settings.maputnik:renderer", "ol");
|
||||
then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
|
||||
"ol"
|
||||
);
|
||||
|
||||
given.intercept("https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=*", "tileRequest", "GET");
|
||||
|
||||
when.select("modal:settings.maputnik:renderer", "mlgljs");
|
||||
then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
|
||||
"mlgljs"
|
||||
);
|
||||
|
||||
when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
|
||||
when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
|
||||
when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("add layer", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("layer");
|
||||
when.modal.open();
|
||||
});
|
||||
|
||||
it("shows duplicate id error", () => {
|
||||
when.setValue("add-layer.layer-id.input", "background");
|
||||
when.click("add-layer");
|
||||
then(get.elementByTestId("modal:add-layer")).shouldExist();
|
||||
then(get.element(".maputnik-modal-error")).shouldContainText(
|
||||
"Layer ID already exists"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
it("toggle");
|
||||
});
|
||||
|
||||
describe("global state", () => {
|
||||
beforeEach(() => {
|
||||
when.click("nav:global-state");
|
||||
});
|
||||
|
||||
it("add variable", () => {
|
||||
when.click("global-state-add-variable");
|
||||
when.wait(100);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key1: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
it("add multiple variables", () => {
|
||||
when.click("global-state-add-variable");
|
||||
when.click("global-state-add-variable");
|
||||
when.click("global-state-add-variable");
|
||||
when.wait(100);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key1: { default: "value" }, key2: { default: "value" }, key3: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
it("remove variable", () => {
|
||||
when.click("global-state-add-variable");
|
||||
when.click("global-state-add-variable");
|
||||
when.click("global-state-add-variable");
|
||||
when.click("global-state-remove-variable", 0);
|
||||
when.wait(100);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key2: { default: "value" }, key3: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
it("edit variable key", () => {
|
||||
when.click("global-state-add-variable");
|
||||
when.setValue("global-state-variable-key:0", "mykey");
|
||||
when.typeKeys("{enter}");
|
||||
when.wait(100);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { mykey: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
it("edit variable value", () => {
|
||||
when.click("global-state-add-variable");
|
||||
when.setValue("global-state-variable-value:0", "myvalue");
|
||||
when.typeKeys("{enter}");
|
||||
when.wait(100);
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key1: { default: "myvalue" } },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("error panel", () => {
|
||||
it("not visible when no errors", () => {
|
||||
then(get.element("maputnik-message-panel-error")).shouldNotExist();
|
||||
});
|
||||
|
||||
it("visible on style error", () => {
|
||||
when.modal.open();
|
||||
when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "invalid",
|
||||
});
|
||||
then(get.element(".maputnik-message-panel-error")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Handle localStorage QuotaExceededError", () => {
|
||||
it("handles quota exceeded error when opening style from URL", () => {
|
||||
// Clear localStorage to start fresh
|
||||
cy.clearLocalStorage();
|
||||
|
||||
// fill localStorage until we get a QuotaExceededError
|
||||
cy.window().then(win => {
|
||||
let chunkSize = 1000;
|
||||
const chunk = new Array(chunkSize).join("x");
|
||||
let index = 0;
|
||||
|
||||
// Keep adding until we hit the quota
|
||||
while (true) {
|
||||
try {
|
||||
const key = `maputnik:fill-${index++}`;
|
||||
win.localStorage.setItem(key, chunk);
|
||||
} catch (e: any) {
|
||||
// Verify it's a quota error
|
||||
if (e.name === "QuotaExceededError") {
|
||||
if (chunkSize <= 1) return;
|
||||
else {
|
||||
chunkSize /= 2;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
throw e; // Unexpected error
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Open the style via URL input
|
||||
when.click("nav:open");
|
||||
when.setValue("modal:open.url.input", get.exampleFileUrl());
|
||||
when.click("modal:open.url.button");
|
||||
|
||||
then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
|
||||
then(get.styleFromLocalStorage()).shouldExist();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************
|
||||
// This example commands.ts shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
//
|
||||
// declare global {
|
||||
// namespace Cypress {
|
||||
// interface Chainable {
|
||||
// login(email: string, password: string): Chainable<void>
|
||||
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
// ***********************************************************
|
||||
// This example support/component.ts is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import "./commands";
|
||||
|
||||
import { mount } from "cypress/react";
|
||||
|
||||
// Augment the Cypress namespace to include type definitions for
|
||||
// your custom command.
|
||||
// Alternatively, can be defined in cypress/support/component.d.ts
|
||||
// with a <reference path="./component" /> at the top of your spec.
|
||||
declare global {
|
||||
/* eslint-disable @typescript-eslint/no-namespace */
|
||||
namespace Cypress {
|
||||
interface Chainable {
|
||||
mount: typeof mount
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Cypress.Commands.add("mount", mount);
|
||||
|
||||
// Example use:
|
||||
// cy.mount(<MyComponent />)
|
||||
@@ -0,0 +1,22 @@
|
||||
// ***********************************************************
|
||||
// This example support/e2e.ts is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import "@cypress/code-coverage/support";
|
||||
import "cypress-plugin-tab";
|
||||
import "./commands";
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
@@ -1,60 +0,0 @@
|
||||
import { test, expect, describe, beforeEach } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
import tokens from "../src/config/tokens.json" with { type: "json" };
|
||||
|
||||
describe("access tokens", () => {
|
||||
const { given, when } = new MaputnikDriver();
|
||||
|
||||
const tileJson = {
|
||||
tilejson: "2.2.0",
|
||||
tiles: ["https://example.local/{z}/{x}/{y}.pbf"],
|
||||
minzoom: 0,
|
||||
maxzoom: 14,
|
||||
};
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
});
|
||||
|
||||
test("uses the thunderforest token for a thunderforest source", async () => {
|
||||
await given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: /tile\.thunderforest\.com\/.*/,
|
||||
response: tileJson,
|
||||
alias: "thunderforest",
|
||||
});
|
||||
|
||||
await when.setStyle("access_tokens");
|
||||
|
||||
const request = await when.waitForResponse("thunderforest");
|
||||
expect(request.url()).toContain(`apikey=${tokens.thunderforest}`);
|
||||
});
|
||||
|
||||
test("uses the locationiq token for a locationiq source", async () => {
|
||||
await given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: /tiles\.locationiq\.com\/.*/,
|
||||
response: tileJson,
|
||||
alias: "locationiq",
|
||||
});
|
||||
|
||||
await when.setStyle("access_tokens");
|
||||
|
||||
const request = await when.waitForResponse("locationiq");
|
||||
expect(request.url()).toContain(`key=${tokens.locationiq}`);
|
||||
});
|
||||
|
||||
test("appends the stadia token as a query parameter", async () => {
|
||||
await given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: /tiles\.stadiamaps\.com\/.*/,
|
||||
response: tileJson,
|
||||
alias: "stadia",
|
||||
});
|
||||
|
||||
await when.setStyle("access_tokens");
|
||||
|
||||
const request = await when.waitForResponse("stadia");
|
||||
expect(request.url()).toContain("?api_key=stadia-test-token");
|
||||
});
|
||||
});
|
||||
@@ -1,48 +0,0 @@
|
||||
import { test, describe, beforeEach } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("accessibility", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
});
|
||||
|
||||
describe("skip links", () => {
|
||||
beforeEach(async () => {
|
||||
await when.setStyle("layer");
|
||||
});
|
||||
|
||||
test("skip link to layer list", async () => {
|
||||
const selector = "root:skip:layer-list";
|
||||
await then(get.elementByTestId(selector)).shouldExist();
|
||||
await when.tab();
|
||||
await then(get.elementByTestId(selector)).shouldBeFocused();
|
||||
await when.click(selector);
|
||||
await then(get.skipTargetLayerList()).shouldBeFocused();
|
||||
});
|
||||
|
||||
test("skip link to layer editor", async () => {
|
||||
const selector = "root:skip:layer-editor";
|
||||
await then(get.elementByTestId(selector)).shouldExist();
|
||||
await then(get.elementByTestId("skip-target-layer-editor")).shouldExist();
|
||||
await when.tab();
|
||||
await when.tab();
|
||||
await then(get.elementByTestId(selector)).shouldBeFocused();
|
||||
await when.click(selector);
|
||||
await then(get.skipTargetLayerEditor()).shouldBeFocused();
|
||||
});
|
||||
|
||||
test("skip link to map view", async () => {
|
||||
const selector = "root:skip:map-view";
|
||||
await then(get.elementByTestId(selector)).shouldExist();
|
||||
await when.tab();
|
||||
await when.tab();
|
||||
await when.tab();
|
||||
await then(get.elementByTestId(selector)).shouldBeFocused();
|
||||
await when.click(selector);
|
||||
await then(get.canvas()).shouldBeFocused();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,23 +0,0 @@
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("code editor", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
});
|
||||
|
||||
test("open code editor", async () => {
|
||||
await when.click("nav:code-editor");
|
||||
await then(get.element(".maputnik-code-editor")).shouldExist();
|
||||
});
|
||||
|
||||
test("closes code editor", async () => {
|
||||
await when.click("nav:code-editor");
|
||||
await then(get.element(".maputnik-code-editor")).shouldExist();
|
||||
await when.click("nav:code-editor");
|
||||
await then(get.element(".maputnik-code-editor")).shouldNotExist();
|
||||
});
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
{
|
||||
"version": 8,
|
||||
"name": "Access token style",
|
||||
"metadata": {
|
||||
"maputnik:stadia_access_token": "stadia-test-token"
|
||||
},
|
||||
"sources": {
|
||||
"thunderforest_transport": {
|
||||
"type": "vector",
|
||||
"url": "https://tile.thunderforest.com/thunderforest.transport-v2.json?apikey={key}"
|
||||
},
|
||||
"stadia_outdoors": {
|
||||
"type": "vector",
|
||||
"url": "https://tiles.stadiamaps.com/data/openmaptiles.json"
|
||||
},
|
||||
"locationiq": {
|
||||
"type": "vector",
|
||||
"url": "https://tiles.locationiq.com/v3/pbf/tiles.json?key={key}"
|
||||
}
|
||||
},
|
||||
"layers": []
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"center": [50,50],
|
||||
"zoom": 5,
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"sources": {
|
||||
"rectangles": {
|
||||
"type": "geojson",
|
||||
"data": {
|
||||
"type": "FeatureCollection",
|
||||
"features": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": []
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"center": [0,51],
|
||||
"zoom": 7,
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"sources": {
|
||||
"rectangles": {
|
||||
"type": "geojson",
|
||||
"data": {
|
||||
"type": "FeatureCollection",
|
||||
"features": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"layers": []
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("history", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
const undoKeyCombo = process.platform === "darwin" ? "{meta}z" : "{ctrl}z";
|
||||
const redoKeyCombo = process.platform === "darwin" ? "{meta}{shift}z" : "{ctrl}y";
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
});
|
||||
|
||||
test("undo/redo", async () => {
|
||||
await when.setStyle("geojson");
|
||||
await when.modal.open();
|
||||
|
||||
await when.modal.fillLayers({
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
});
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "step 1", type: "background" }],
|
||||
});
|
||||
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
});
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{ id: "step 1", type: "background" },
|
||||
{ id: "step 2", type: "background" },
|
||||
],
|
||||
});
|
||||
|
||||
await when.typeKeys(undoKeyCombo);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "step 1", type: "background" }],
|
||||
});
|
||||
|
||||
await when.typeKeys(undoKeyCombo);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
|
||||
|
||||
await when.typeKeys(redoKeyCombo);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "step 1", type: "background" }],
|
||||
});
|
||||
|
||||
await when.typeKeys(redoKeyCombo);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{ id: "step 1", type: "background" },
|
||||
{ id: "step 2", type: "background" },
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("should not redo after undo and value change", async () => {
|
||||
await when.setStyle("geojson");
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
await when.typeKeys(undoKeyCombo);
|
||||
await when.typeKeys(undoKeyCombo);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
|
||||
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({
|
||||
id: "step 3",
|
||||
type: "background",
|
||||
});
|
||||
|
||||
await when.typeKeys(redoKeyCombo);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "step 3", type: "background" }],
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("i18n", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
});
|
||||
|
||||
describe("language detector", () => {
|
||||
test("English", async () => {
|
||||
await when.visit("?lng=en");
|
||||
await then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("en");
|
||||
});
|
||||
|
||||
test("Japanese", async () => {
|
||||
await when.visit("?lng=ja");
|
||||
await then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("ja");
|
||||
});
|
||||
});
|
||||
|
||||
describe("language switcher", () => {
|
||||
beforeEach(async () => {
|
||||
await when.setStyle("layer");
|
||||
});
|
||||
|
||||
test("the language switcher switches to Japanese", async () => {
|
||||
const selector = "maputnik-lang-select";
|
||||
await then(get.elementByTestId(selector)).shouldExist();
|
||||
await when.select(selector, "ja");
|
||||
await then(get.elementByTestId(selector)).shouldHaveValue("ja");
|
||||
|
||||
await then(get.elementByTestId("nav:settings")).shouldHaveText("スタイル設定");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,66 +0,0 @@
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("keyboard", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
});
|
||||
|
||||
describe("shortcuts", () => {
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("");
|
||||
});
|
||||
|
||||
test("ESC should unfocus", async () => {
|
||||
const targetSelector = "maputnik-select";
|
||||
await when.focus(targetSelector);
|
||||
await then(get.elementByTestId(targetSelector)).shouldBeFocused();
|
||||
await when.typeKeys("{esc}");
|
||||
await then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
|
||||
});
|
||||
|
||||
test("'?' should show shortcuts modal", async () => {
|
||||
await when.typeKeys("?");
|
||||
await then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("'o' should show open modal", async () => {
|
||||
await when.typeKeys("o");
|
||||
await then(get.elementByTestId("modal:open")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("'e' should show export modal", async () => {
|
||||
await when.typeKeys("e");
|
||||
await then(get.elementByTestId("modal:export")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("'d' should show sources modal", async () => {
|
||||
await when.typeKeys("d");
|
||||
await then(get.elementByTestId("modal:sources")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("'s' should show settings modal", async () => {
|
||||
await when.typeKeys("s");
|
||||
await then(get.elementByTestId("modal:settings")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("'i' should change map to inspect mode", async () => {
|
||||
await when.typeKeys("i");
|
||||
await then(get.inputValue("maputnik-select")).shouldEqual("inspect");
|
||||
});
|
||||
|
||||
test("'m' should focus map", async () => {
|
||||
await when.typeKeys("m");
|
||||
await then(get.canvas()).shouldBeFocused();
|
||||
});
|
||||
|
||||
test("'!' should show debug modal", async () => {
|
||||
await when.typeKeys("!");
|
||||
await then(get.elementByTestId("modal:debug")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,604 +0,0 @@
|
||||
import { v1 as uuid } from "uuid";
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("layer editor", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
await when.modal.open();
|
||||
});
|
||||
|
||||
async function createBackground() {
|
||||
const id = uuid();
|
||||
|
||||
await when.selectWithin("add-layer.layer-type", "background");
|
||||
await when.setValue("add-layer.layer-id.input", "background:" + id);
|
||||
|
||||
await when.click("add-layer");
|
||||
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + id, type: "background" }],
|
||||
});
|
||||
return id;
|
||||
}
|
||||
|
||||
test("expand/collapse", async () => {
|
||||
const bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
await then(get.elementByTestId("layer-editor.layer-id.input")).shouldBeVisible();
|
||||
|
||||
await when.toggleGroupInLayerEditor("Layer");
|
||||
await then(get.elementByTestId("layer-editor.layer-id.input")).shouldNotBeVisible();
|
||||
|
||||
await when.toggleGroupInLayerEditor("Layer");
|
||||
await then(get.elementByTestId("layer-editor.layer-id.input")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("id", async () => {
|
||||
const bgId = await createBackground();
|
||||
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
const id = uuid();
|
||||
await when.setValue("layer-editor.layer-id.input", "foobar:" + id);
|
||||
await when.click("min-zoom");
|
||||
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "foobar:" + id, type: "background" }],
|
||||
});
|
||||
});
|
||||
|
||||
describe("source", () => {
|
||||
test("should show error when the source is invalid", async () => {
|
||||
await when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "invalid",
|
||||
});
|
||||
await then(
|
||||
get.element(".maputnik-input-block--error .maputnik-input-block-label")
|
||||
).shouldHaveCss("color", "rgb(207, 74, 74)");
|
||||
});
|
||||
});
|
||||
|
||||
describe("min-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(async () => {
|
||||
bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
await when.setValue("min-zoom.input-text", "1");
|
||||
await when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
test("should update min-zoom in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background", minzoom: 1 }],
|
||||
});
|
||||
});
|
||||
|
||||
test("when clicking next layer should update style on local storage", async () => {
|
||||
await when.type("min-zoom.input-text", "{backspace}");
|
||||
await when.click("max-zoom.input-text");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background", minzoom: 1 }],
|
||||
});
|
||||
});
|
||||
|
||||
test("the range slider adjusts min-zoom", async () => {
|
||||
await when.focus("min-zoom.input-range");
|
||||
await when.typeKeys("{rightarrow}");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background", minzoom: 2 }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("max-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(async () => {
|
||||
bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
await when.setValue("max-zoom.input-text", "1");
|
||||
await when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
test("should update style in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background", maxzoom: 1 }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("comments", () => {
|
||||
let bgId: string;
|
||||
const comment = "42";
|
||||
|
||||
beforeEach(async () => {
|
||||
bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
await when.setValue("layer-comment.input", comment);
|
||||
await when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
test("should update style in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
metadata: { "maputnik:comment": comment },
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when unsetting", () => {
|
||||
beforeEach(async () => {
|
||||
await when.clear("layer-comment.input");
|
||||
await when.click("min-zoom.input-text");
|
||||
});
|
||||
|
||||
test("should update style in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background" }],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("color", () => {
|
||||
let bgId: string;
|
||||
beforeEach(async () => {
|
||||
bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
await when.click("spec-field:background-color");
|
||||
});
|
||||
|
||||
test("should update style in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("typing a hex value updates the paint color", async () => {
|
||||
await when.setColorValue("background-color", "#ff0000");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background", paint: { "background-color": "#ff0000" } }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("opacity", () => {
|
||||
let bgId: string;
|
||||
beforeEach(async () => {
|
||||
bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
await when.type("spec-field-input:background-opacity", "0.");
|
||||
});
|
||||
|
||||
test("should keep '.' in the input field", async () => {
|
||||
await then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
|
||||
});
|
||||
|
||||
test("should revert to a valid value when focus out", async () => {
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
await then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
|
||||
});
|
||||
});
|
||||
|
||||
describe("filter", () => {
|
||||
let id: string;
|
||||
|
||||
beforeEach(async () => {
|
||||
id = await when.modal.fillLayers({ type: "fill", layer: "example" });
|
||||
await when.addFilter();
|
||||
});
|
||||
|
||||
test("should add a filter item", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "fill", source: "example", filter: ["all", ["==", "name", ""]] }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should change the filter operator", async () => {
|
||||
await when.selectFilterOperator("!=");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, filter: ["all", ["!=", "name", ""]] }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should extend the compound filter with a second item", async () => {
|
||||
await when.addFilter();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, filter: ["all", ["==", "name", ""], ["==", "name", ""]] }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should change the combining operator", async () => {
|
||||
await when.selectFilterCombiningOperator("any");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, filter: ["any", ["==", "name", ""]] }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should delete a filter item", async () => {
|
||||
await when.addFilter();
|
||||
await when.deleteFilterItem();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, filter: ["all", ["==", "name", ""]] }],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when converted to an expression", () => {
|
||||
beforeEach(async () => {
|
||||
await when.convertFilterToExpression();
|
||||
});
|
||||
|
||||
test("should migrate the filter to an expression", async () => {
|
||||
// A single-item "all" collapses to the bare comparison when migrated.
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, filter: ["==", ["get", "name"], ""] }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should restore the default filter when the expression is deleted", async () => {
|
||||
await when.deleteFilterExpression();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, filter: ["all"] }],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("functions", () => {
|
||||
let id: string;
|
||||
|
||||
describe("zoom function", () => {
|
||||
beforeEach(async () => {
|
||||
id = await when.modal.fillLayers({ type: "circle", layer: "example" });
|
||||
await when.makeZoomFunction("circle-radius");
|
||||
});
|
||||
|
||||
test("should convert the property to a zoom function", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{ id, type: "circle", source: "example", paint: { "circle-radius": { stops: [[6, 5], [10, 5]] } } },
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("should add a stop", async () => {
|
||||
await when.addFunctionStop("circle-radius");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-radius": { stops: [[6, 5], [10, 5], [11, 5]] } } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should delete the first stop", async () => {
|
||||
// A function needs more than two stops, otherwise deleting one collapses
|
||||
// it back into a plain value.
|
||||
await when.addFunctionStop("circle-radius");
|
||||
await when.deleteFunctionStop("circle-radius");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-radius": { stops: [[10, 5], [11, 5]] } } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should set the base", async () => {
|
||||
await when.setFunctionBase("circle-radius", "2");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-radius": { base: 2, stops: [[6, 5], [10, 5]] } } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should edit the zoom of a stop", async () => {
|
||||
await when.setFunctionStopValue("circle-radius", "Zoom", 0, "3");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-radius": { stops: [[3, 5], [10, 5]] } } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should edit the output value of a stop", async () => {
|
||||
await when.setFunctionStopValue("circle-radius", "Output value", 0, "9");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-radius": { stops: [[6, 9], [10, 5]] } } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should convert to an expression", async () => {
|
||||
await when.makeExpression("circle-radius");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-radius": ["interpolate", ["linear"], ["zoom"], 6, 5, 10, 5] } }],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when converted to a data function", () => {
|
||||
beforeEach(async () => {
|
||||
// Any non-interpolate scale turns the zoom function into a data one.
|
||||
await when.selectFunctionType("circle-radius", "categorical");
|
||||
});
|
||||
|
||||
test("should carry the stops over as zoom/value pairs", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id,
|
||||
paint: {
|
||||
"circle-radius": {
|
||||
property: "",
|
||||
type: "exponential",
|
||||
stops: [[{ zoom: 6, value: 0 }, 5], [{ zoom: 10, value: 0 }, 5]],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("should convert back to a zoom function", async () => {
|
||||
await when.selectFunctionType("circle-radius", "interpolate");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-radius": { stops: [[6, 5], [10, 5]] } } }],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("data function", () => {
|
||||
beforeEach(async () => {
|
||||
id = await when.modal.fillLayers({ type: "circle", layer: "example" });
|
||||
await when.setValue("spec-field-input:circle-blur", "1");
|
||||
await when.makeDataFunction("circle-blur");
|
||||
});
|
||||
|
||||
test("should convert the property to a data function", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id,
|
||||
type: "circle",
|
||||
source: "example",
|
||||
paint: {
|
||||
"circle-blur": {
|
||||
property: "",
|
||||
type: "exponential",
|
||||
stops: [[{ zoom: 6, value: 0 }, 1], [{ zoom: 10, value: 0 }, 1]],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("should add a stop", async () => {
|
||||
await when.addFunctionStop("circle-blur");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id,
|
||||
paint: {
|
||||
"circle-blur": {
|
||||
stops: [[{ zoom: 6, value: 0 }, 1], [{ zoom: 10, value: 0 }, 1], [{ zoom: 11, value: 0 }, 1]],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("should delete the first stop", async () => {
|
||||
await when.addFunctionStop("circle-blur");
|
||||
await when.deleteFunctionStop("circle-blur");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id,
|
||||
paint: {
|
||||
"circle-blur": {
|
||||
stops: [[{ zoom: 10, value: 0 }, 1], [{ zoom: 11, value: 0 }, 1]],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("should set the property", async () => {
|
||||
await when.setFunctionProperty("circle-blur", "myprop");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-blur": { property: "myprop" } } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should set the default", async () => {
|
||||
await when.setFunctionDefault("circle-blur", "0.5");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-blur": { default: 0.5 } } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should edit the input value of a stop", async () => {
|
||||
await when.setFunctionStopValue("circle-blur", "Input value", 0, "7");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id,
|
||||
paint: {
|
||||
"circle-blur": {
|
||||
stops: [[{ zoom: 6, value: 7 }, 1], [{ zoom: 10, value: 0 }, 1]],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("should change the function type", async () => {
|
||||
await when.selectFunctionType("circle-blur", "categorical");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-blur": { type: "categorical" } } }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("expression", () => {
|
||||
beforeEach(async () => {
|
||||
id = await when.modal.fillLayers({ type: "circle", layer: "example" });
|
||||
await when.setValue("spec-field-input:circle-blur", "1");
|
||||
await when.makeExpression("circle-blur");
|
||||
});
|
||||
|
||||
test("should wrap the property value in a literal expression", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-blur": ["literal", 1] } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should restore the plain value when reverted", async () => {
|
||||
await when.undoExpression("circle-blur");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-blur": 1 } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should fall back to the spec default when deleted", async () => {
|
||||
await when.deleteExpression("circle-blur");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, paint: { "circle-blur": 0 } }],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("layout", () => {
|
||||
test("text-font", async () => {
|
||||
await when.setStyle("font");
|
||||
await when.collapseGroupInLayerEditor();
|
||||
await when.collapseGroupInLayerEditor(1);
|
||||
await when.collapseGroupInLayerEditor(2);
|
||||
await when.clickWithin("spec-field:text-font", ".maputnik-autocomplete input");
|
||||
await then(get.element(".maputnik-autocomplete-menu-item")).shouldBeVisible();
|
||||
await then(get.element(".maputnik-autocomplete-menu-item")).shouldHaveLength(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe("paint", () => {
|
||||
let id: string;
|
||||
|
||||
beforeEach(async () => {
|
||||
id = await when.modal.fillLayers({ type: "fill", layer: "example" });
|
||||
});
|
||||
|
||||
test("expand/collapse", async () => {
|
||||
await then(get.elementByTestId("spec-field:fill-color")).shouldBeVisible();
|
||||
|
||||
await when.toggleGroupInLayerEditor("Paint properties");
|
||||
await then(get.elementByTestId("spec-field:fill-color")).shouldNotBeVisible();
|
||||
|
||||
await when.toggleGroupInLayerEditor("Paint properties");
|
||||
await then(get.elementByTestId("spec-field:fill-color")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("color", async () => {
|
||||
await when.setColorValue("fill-color", "#ff0000");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "fill", source: "example", paint: { "fill-color": "#ff0000" } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("pattern", async () => {
|
||||
await when.setStringValue("fill-pattern", "some-pattern");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "fill", source: "example", paint: { "fill-pattern": "some-pattern" } }],
|
||||
});
|
||||
});
|
||||
|
||||
test("opacity", async () => {
|
||||
await when.setValue("spec-field-input:fill-opacity", "0.4");
|
||||
await when.click("layer-editor.layer-id");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "fill", source: "example", paint: { "fill-opacity": 0.4 } }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("json-editor", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "circle", source: "example" }],
|
||||
});
|
||||
|
||||
await when.clickByText('"source"');
|
||||
await when.typeKeys('"');
|
||||
|
||||
await then(get.element(".cm-lint-marker-error")).shouldExist();
|
||||
});
|
||||
|
||||
test("expand/collapse", async () => {
|
||||
const bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
await then(get.element(".cm-content")).shouldBeVisible();
|
||||
|
||||
await when.toggleGroupInLayerEditor("JSON Editor");
|
||||
await then(get.element(".cm-content")).shouldNotBeVisible();
|
||||
|
||||
await when.toggleGroupInLayerEditor("JSON Editor");
|
||||
await then(get.element(".cm-content")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("modify", async () => {
|
||||
const bgId = await createBackground();
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
await when.appendToJsonEditorLine('"background"', ',\n"minzoom": 5');
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id: "background:" + bgId, type: "background", minzoom: 5 }],
|
||||
});
|
||||
});
|
||||
|
||||
test("parse error", async () => {
|
||||
const bgId = await createBackground();
|
||||
|
||||
await when.click("layer-list-item:background:" + bgId);
|
||||
await when.collapseGroupInLayerEditor();
|
||||
await when.collapseGroupInLayerEditor(1);
|
||||
await then(get.element(".cm-lint-marker-error")).shouldNotExist();
|
||||
|
||||
// Inject an invalid token (CodeMirror auto-closes brackets/quotes, so a
|
||||
// bare word reliably breaks the JSON) and expect a lint error.
|
||||
await when.appendTextInJsonEditor("zzz");
|
||||
await then(get.element(".cm-lint-marker-error")).shouldExist();
|
||||
});
|
||||
});
|
||||
|
||||
describe("sticky header", () => {
|
||||
test("should keep layer header visible when scrolling properties", async () => {
|
||||
// Setup: Create a layer with many properties (e.g. symbol layer)
|
||||
await when.modal.fillLayers({
|
||||
type: "symbol",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
await when.wait(500);
|
||||
const header = get.elementByTestId("layer-editor.header");
|
||||
await then(header).shouldBeVisible();
|
||||
|
||||
await when.scrollToBottom(get.element(".maputnik-scroll-container"));
|
||||
await when.wait(200);
|
||||
|
||||
await then(header).shouldBeVisible();
|
||||
await then(get.elementByTestId("skip-target-layer-editor")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,364 +0,0 @@
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("layers list", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
await when.modal.open();
|
||||
});
|
||||
|
||||
describe("ops", () => {
|
||||
let id: string;
|
||||
beforeEach(async () => {
|
||||
id = await when.modal.fillLayers({ type: "background" });
|
||||
});
|
||||
|
||||
test("should update layers in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "background" }],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking delete", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("layer-list-item:" + id + ":delete");
|
||||
});
|
||||
test("should empty layers in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking duplicate", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("layer-list-item:" + id + ":copy");
|
||||
});
|
||||
test("should add copy layer in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{ id: id + "-copy", type: "background" },
|
||||
{ id, type: "background" },
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking hide", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
});
|
||||
|
||||
test("should update visibility to none in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "background", layout: { visibility: "none" } }],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when clicking show", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
});
|
||||
|
||||
test("should update visibility to visible in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "background", layout: { visibility: "visible" } }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when selecting a layer", () => {
|
||||
let secondId: string;
|
||||
beforeEach(async () => {
|
||||
await when.modal.open();
|
||||
secondId = await when.modal.fillLayers({
|
||||
id: "second-layer",
|
||||
type: "background",
|
||||
});
|
||||
});
|
||||
test("should show the selected layer in the editor", async () => {
|
||||
await when.realClick("layer-list-item:" + secondId);
|
||||
await then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(secondId);
|
||||
await when.realClick("layer-list-item:" + id);
|
||||
await then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(id);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("background", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "background" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "background" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("modify", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "background" });
|
||||
await when.click("layer-list-item:" + id);
|
||||
await when.setValue("spec-field-input:background-opacity", "0.4");
|
||||
await when.click("layer-editor.layer-id");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "background", paint: { "background-opacity": 0.4 } }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("fill", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "fill", layer: "example" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "fill", source: "example" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("change source", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "fill", layer: "example" });
|
||||
await when.changeLayerSource("raster");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "fill", source: "raster" }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("line", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "line", layer: "example" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "line", source: "example" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("groups", async () => {
|
||||
const id1 = await when.modal.fillLayers({ id: "aa", type: "line", layer: "example" });
|
||||
|
||||
await when.modal.open();
|
||||
const id2 = await when.modal.fillLayers({ id: "aa-2", type: "line", layer: "example" });
|
||||
|
||||
await when.modal.open();
|
||||
const id3 = await when.modal.fillLayers({ id: "b", type: "line", layer: "example" });
|
||||
|
||||
await then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:" + id2)).shouldNotBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
|
||||
await when.click("layer-list-group:aa-0");
|
||||
await then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:" + id2)).shouldBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
|
||||
await when.click("layer-list-item:" + id2);
|
||||
await when.click("skip-target-layer-editor");
|
||||
await when.click("menu-move-layer-down");
|
||||
await then(get.elementByTestId("layer-list-group:aa-0")).shouldNotExist();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{ id: "aa", type: "line", source: "example" },
|
||||
{ id: "b", type: "line", source: "example" },
|
||||
{ id: "aa-2", type: "line", source: "example" },
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("symbol", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "symbol", layer: "example" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "symbol", source: "example" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("should show spec info when hovering and clicking single line property", async () => {
|
||||
await when.modal.fillLayers({ type: "symbol", layer: "example" });
|
||||
|
||||
await when.hover("spec-field-container:text-rotate");
|
||||
await then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
|
||||
await when.click("field-doc-button-Rotate", 0);
|
||||
await then(get.elementByTestId("spec-field-doc")).shouldContainText("Rotates the ");
|
||||
});
|
||||
|
||||
test("should show spec info when hovering and clicking multi line property", async () => {
|
||||
await when.modal.fillLayers({ type: "symbol", layer: "example" });
|
||||
|
||||
await when.hover("spec-field-container:text-offset");
|
||||
await then(get.elementByTestId("field-doc-button-Offset")).shouldBeVisible();
|
||||
await when.click("field-doc-button-Offset", 0);
|
||||
await then(get.elementByTestId("spec-field-doc")).shouldContainText("Offset distance");
|
||||
});
|
||||
|
||||
test("should hide spec info when clicking a second time", async () => {
|
||||
await when.modal.fillLayers({ type: "symbol", layer: "example" });
|
||||
|
||||
await when.hover("spec-field-container:text-rotate");
|
||||
await then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
|
||||
await when.click("field-doc-button-Rotate", 0);
|
||||
await when.wait(200);
|
||||
await when.click("field-doc-button-Rotate", 0);
|
||||
await then(get.elementByTestId("spec-field-doc")).shouldNotBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("raster", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "raster", layer: "raster" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "raster", source: "raster" }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("circle", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "circle", layer: "example" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "circle", source: "example" }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("fill extrusion", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "fill-extrusion", layer: "example" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "fill-extrusion", source: "example" }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("hillshade", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "hillshade", source: "example" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("set hillshade illumination direction array", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
|
||||
await when.collapseGroupInLayerEditor();
|
||||
await when.collapseGroupInLayerEditor(1);
|
||||
await when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", "1");
|
||||
await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "2");
|
||||
await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "3");
|
||||
await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "4");
|
||||
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id,
|
||||
type: "hillshade",
|
||||
source: "example",
|
||||
paint: { "hillshade-illumination-direction": [1, 2, 3, 4] },
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("set hillshade highlight color array", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
|
||||
await when.collapseGroupInLayerEditor();
|
||||
await when.setValueToPropertyArray("spec-field:hillshade-highlight-color", "blue");
|
||||
await when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "#00ff00");
|
||||
await when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "rgba(255, 255, 0, 1)");
|
||||
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id,
|
||||
type: "hillshade",
|
||||
source: "example",
|
||||
paint: {
|
||||
"hillshade-highlight-color": ["blue", "#00ff00", "rgba(255, 255, 0, 1)"],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("color-relief", () => {
|
||||
test("add", async () => {
|
||||
const id = await when.modal.fillLayers({ type: "color-relief", layer: "example" });
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [{ id, type: "color-relief", source: "example" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("adds elevation expression when clicking the elevation button", async () => {
|
||||
await when.modal.fillLayers({ type: "color-relief", layer: "example" });
|
||||
await when.collapseGroupInLayerEditor();
|
||||
await when.click("make-elevation-function");
|
||||
await then(
|
||||
get.element("[data-wd-key='spec-field-container:color-relief-color'] .cm-line")
|
||||
).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("groups", () => {
|
||||
test("simple", async () => {
|
||||
await when.setStyle("geojson");
|
||||
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({ id: "foo", type: "background" });
|
||||
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({ id: "foo_bar", type: "background" });
|
||||
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({ id: "foo_bar_baz", type: "background" });
|
||||
|
||||
await then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:foo_bar_baz")).shouldNotBeVisible();
|
||||
await when.click("layer-list-group:foo-0");
|
||||
await then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
|
||||
await then(get.elementByTestId("layer-list-item:foo_bar_baz")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("drag and drop", () => {
|
||||
test("move layer should update local storage", async () => {
|
||||
const firstId = await when.modal.fillLayers({ id: "a", type: "background" });
|
||||
await when.modal.open();
|
||||
const secondId = await when.modal.fillLayers({ id: "b", type: "background" });
|
||||
await when.modal.open();
|
||||
const thirdId = await when.modal.fillLayers({ id: "c", type: "background" });
|
||||
|
||||
await when.dragAndDropWithWait("layer-list-item:" + firstId, "layer-list-item:" + thirdId);
|
||||
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{ id: secondId, type: "background" },
|
||||
{ id: thirdId, type: "background" },
|
||||
{ id: firstId, type: "background" },
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("sticky header", () => {
|
||||
test("should keep header visible when scrolling layer list", async () => {
|
||||
// Setup: Create multiple layers to enable scrolling
|
||||
// The modal is already open (beforeEach) for the first layer.
|
||||
await when.modal.fillLayers({ id: "layer-0", type: "background" });
|
||||
for (let i = 1; i < 20; i++) {
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({ id: `layer-${i}`, type: "background" });
|
||||
}
|
||||
|
||||
await when.wait(500);
|
||||
const header = get.elementByTestId("layer-list.header");
|
||||
await then(header).shouldBeVisible();
|
||||
|
||||
// Scroll the layer list container
|
||||
await when.scrollToBottom(get.elementByTestId("layer-list"));
|
||||
await when.wait(200);
|
||||
await then(header).shouldBeVisible();
|
||||
await then(get.elementByTestId("layer-list:add-layer")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,67 +0,0 @@
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("map", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
});
|
||||
|
||||
describe("zoom level", () => {
|
||||
test("via url", async () => {
|
||||
const zoomLevel = 12.37;
|
||||
await when.setStyle("geojson", zoomLevel);
|
||||
await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
|
||||
await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText("Zoom: " + zoomLevel);
|
||||
});
|
||||
|
||||
test("via map controls", async () => {
|
||||
const zoomLevel = 12.37;
|
||||
await when.setStyle("geojson", zoomLevel);
|
||||
await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
|
||||
await when.clickZoomIn();
|
||||
await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText("Zoom: " + (zoomLevel + 1));
|
||||
});
|
||||
|
||||
test("via style file definition", async () => {
|
||||
await when.setStyle("zoom_7_center_0_51");
|
||||
await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
|
||||
await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText("Zoom: " + 7);
|
||||
await then(get.locationHash()).shouldInclude("#7/51/0");
|
||||
|
||||
// opening another stylefile does not update the map view again
|
||||
// as discussed in https://github.com/maplibre/maputnik/issues/1546
|
||||
await when.openASecondStyleWithDifferentZoomAndCenter();
|
||||
await then(get.locationHash()).shouldInclude("#7/51/0");
|
||||
});
|
||||
});
|
||||
|
||||
describe("search", () => {
|
||||
test("should exist", async () => {
|
||||
await then(get.searchControl()).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("popup", () => {
|
||||
beforeEach(async () => {
|
||||
await when.setStyle("rectangles");
|
||||
await then(get.locationHash()).shouldExist();
|
||||
});
|
||||
|
||||
test("should open on feature click", async () => {
|
||||
await when.clickCenter("maplibre:map");
|
||||
await then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("should open a second feature after closing popup", async () => {
|
||||
await when.clickCenter("maplibre:map");
|
||||
await then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
await when.closePopup();
|
||||
await then(get.elementByTestId("feature-layer-popup")).shouldNotExist();
|
||||
await when.clickCenter("maplibre:map");
|
||||
await then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,358 +0,0 @@
|
||||
import { PlaywrightHelper } from "./playwright-helper";
|
||||
import { ModalDriver } from "./modal-driver";
|
||||
|
||||
const baseUrl = "http://localhost:8888/";
|
||||
const isMac = process.platform === "darwin";
|
||||
|
||||
/**
|
||||
* The maputnik-specific driver. It builds on the generic {@link PlaywrightHelper}
|
||||
* — spreading its `given`/`when`/`get` primitives and adding domain concepts
|
||||
* (loading a style, the add-layer modal, the JSON editor, …). All Playwright
|
||||
* access goes through the helper; the driver never touches `page` directly.
|
||||
*/
|
||||
export class MaputnikDriver {
|
||||
private readonly helper = new PlaywrightHelper();
|
||||
private readonly modalDriver = new ModalDriver();
|
||||
|
||||
then = this.helper.then;
|
||||
|
||||
/** Reads the maputnik style currently persisted in localStorage. */
|
||||
private async readStoredStyle(): Promise<any> {
|
||||
const styleId = await this.helper.get.localStorageItem("maputnik:latest_style");
|
||||
const styleItem = await this.helper.get.localStorageItem(`maputnik:style:${styleId}`);
|
||||
if (!styleItem) throw new Error("Could not get styleItem from localStorage");
|
||||
return JSON.parse(styleItem);
|
||||
}
|
||||
|
||||
public given = {
|
||||
...this.helper.given,
|
||||
|
||||
setupMockBackedResponses: async () => {
|
||||
const styleFixtures = [
|
||||
"example-style.json",
|
||||
"example-layer-style.json",
|
||||
"geojson-style.json",
|
||||
"raster-style.json",
|
||||
"geojson-raster-style.json",
|
||||
"rectangles-style.json",
|
||||
"example-style-with-fonts.json",
|
||||
"example-style-with-zoom-7-and-center-0-51.json",
|
||||
"example-style-with-zoom-5-and-center-50-50.json",
|
||||
"access-token-style.json",
|
||||
];
|
||||
for (const fixture of styleFixtures) {
|
||||
await this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + fixture,
|
||||
response: { fixture },
|
||||
alias: fixture === "example-style.json" ? "example-style.json" : undefined,
|
||||
});
|
||||
}
|
||||
await this.helper.given.interceptAndMockResponse({ method: "GET", url: /example\.local\//, response: [] });
|
||||
await this.helper.given.interceptAndMockResponse({ method: "GET", url: /example\.com\//, response: [] });
|
||||
await this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: "https://www.glyph-server.com/*",
|
||||
response: ["Font 1", "Font 2", "Font 3"],
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
public when = {
|
||||
...this.helper.when,
|
||||
|
||||
modal: this.modalDriver.when,
|
||||
|
||||
setStyle: async (
|
||||
styleProperties:
|
||||
| "geojson"
|
||||
| "raster"
|
||||
| "both"
|
||||
| "layer"
|
||||
| "rectangles"
|
||||
| "font"
|
||||
| "zoom_7_center_0_51"
|
||||
| "access_tokens"
|
||||
| "",
|
||||
zoom?: number
|
||||
) => {
|
||||
const styleFileByKey: Record<string, string> = {
|
||||
geojson: "geojson-style.json",
|
||||
raster: "raster-style.json",
|
||||
both: "geojson-raster-style.json",
|
||||
layer: "example-layer-style.json",
|
||||
rectangles: "rectangles-style.json",
|
||||
font: "example-style-with-fonts.json",
|
||||
zoom_7_center_0_51: "example-style-with-zoom-7-and-center-0-51.json",
|
||||
access_tokens: "access-token-style.json",
|
||||
};
|
||||
|
||||
const url = new URL(baseUrl);
|
||||
if (styleProperties && styleFileByKey[styleProperties]) {
|
||||
url.searchParams.set("style", baseUrl + styleFileByKey[styleProperties]);
|
||||
}
|
||||
if (zoom) {
|
||||
url.hash = `${zoom}/41.3805/2.1635`;
|
||||
}
|
||||
|
||||
await this.helper.when.visit(url.toString());
|
||||
|
||||
const toolbarLink = this.helper.get.elementByTestId("toolbar:link");
|
||||
await toolbarLink.scrollIntoViewIfNeeded();
|
||||
await this.then(toolbarLink).shouldBeVisible();
|
||||
},
|
||||
|
||||
openASecondStyleWithDifferentZoomAndCenter: async () => {
|
||||
await this.helper.when.clickButtonByName("Open");
|
||||
const input = this.helper.get.elementByTestId("modal:open.url.input");
|
||||
await input.fill("http://localhost:8888/example-style-with-zoom-5-and-center-50-50.json");
|
||||
await input.press("Enter");
|
||||
},
|
||||
|
||||
chooseExampleFile: async () => {
|
||||
await this.helper.when.openFileByFixture("example-style.json", "modal:open.dropzone");
|
||||
await this.helper.when.wait(200);
|
||||
},
|
||||
|
||||
/** Picks the example style through the browser's native file chooser. */
|
||||
chooseExampleFileFromPicker: async () => {
|
||||
await this.helper.when.chooseFileFromPicker("example-style.json", "modal:open.dropzone");
|
||||
await this.helper.when.wait(200);
|
||||
},
|
||||
|
||||
dropExampleFile: async () => {
|
||||
await this.helper.when.dropFileByFixture("example-style.json", "modal:open.dropzone");
|
||||
await this.helper.when.wait(200);
|
||||
},
|
||||
|
||||
clickZoomIn: async () => {
|
||||
await this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
|
||||
},
|
||||
|
||||
closePopup: async () => {
|
||||
await this.helper.get.element(".maplibregl-popup-close-button").click();
|
||||
},
|
||||
|
||||
collapseGroupInLayerEditor: async (index = 0) => {
|
||||
await this.helper.get.element(".maputnik-layer-editor-group__button").nth(index).click();
|
||||
},
|
||||
|
||||
/** Expands/collapses a layer-editor group by its title, e.g. "Paint properties". */
|
||||
toggleGroupInLayerEditor: async (title: string) => {
|
||||
await this.helper.when.click("layer-editor-group:" + title);
|
||||
},
|
||||
|
||||
/**
|
||||
* Picks a source for the selected layer from the source autocomplete.
|
||||
* The autocomplete is a controlled (downshift) input, so the value has to be
|
||||
* filled rather than typed key by key, then chosen from the filtered menu.
|
||||
*/
|
||||
changeLayerSource: async (sourceId: string) => {
|
||||
const input = this.helper.get.elementByTestId("layer-editor.layer-source").locator("input");
|
||||
await input.fill(sourceId);
|
||||
await this.helper.get.element(".maputnik-autocomplete-menu-item").first().click();
|
||||
},
|
||||
|
||||
appendTextInJsonEditor: async (text: string) => {
|
||||
await this.helper.get.element(".cm-line").first().click();
|
||||
// Move to the very start of the document so the inserted text breaks the
|
||||
// root JSON structure (CodeMirror auto-closes brackets otherwise).
|
||||
await this.helper.when.typeKeys("{home}");
|
||||
await this.helper.when.typeText(text);
|
||||
},
|
||||
|
||||
setTextInJsonEditor: async (text: string) => {
|
||||
await this.helper.get.element(".cm-line").first().click();
|
||||
await this.helper.when.typeKeys("{selectall}");
|
||||
await this.helper.when.typeText(text);
|
||||
},
|
||||
|
||||
setValueToPropertyArray: async (selector: string, value: string) => {
|
||||
const input = this.helper.get.elementByTestId(selector).locator(".maputnik-array-block-content input").last();
|
||||
await input.focus();
|
||||
await this.helper.when.typeKeys("{selectall}");
|
||||
await this.helper.when.typeText(value);
|
||||
},
|
||||
|
||||
addValueToPropertyArray: async (selector: string, value: string) => {
|
||||
const block = this.helper.get.elementByTestId(selector);
|
||||
await block.locator(".maputnik-array-add-value").click();
|
||||
const input = block.locator(".maputnik-array-block-content input").last();
|
||||
await input.focus();
|
||||
await this.helper.when.typeKeys("{selectall}");
|
||||
await this.helper.when.typeText(value);
|
||||
},
|
||||
|
||||
makeZoomFunction: async (fieldName: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.scrollIntoViewIfNeeded();
|
||||
await container.locator(".maputnik-make-zoom-function").last().click({ force: true });
|
||||
},
|
||||
|
||||
makeDataFunction: async (fieldName: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.scrollIntoViewIfNeeded();
|
||||
await container.locator(".maputnik-make-data-function").click({ force: true });
|
||||
},
|
||||
|
||||
addFunctionStop: async (fieldName: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator(".maputnik-add-stop").first().click({ force: true });
|
||||
},
|
||||
|
||||
deleteFunctionStop: async (fieldName: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator(".maputnik-delete-stop").first().click({ force: true });
|
||||
},
|
||||
|
||||
/** Turns the property into a raw style expression. */
|
||||
makeExpression: async (fieldName: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.scrollIntoViewIfNeeded();
|
||||
// In the plain spec field the expression button shares the zoom-function
|
||||
// class and comes first; inside a function editor it has its own test id.
|
||||
const inFunctionEditor = container.locator("[data-wd-key='convert-to-expression']");
|
||||
const button =
|
||||
(await inFunctionEditor.count()) > 0
|
||||
? inFunctionEditor
|
||||
: container.locator(".maputnik-make-zoom-function").first();
|
||||
await button.click({ force: true });
|
||||
},
|
||||
|
||||
/** Reverts an expression back to a plain value. */
|
||||
undoExpression: async (fieldName: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator("[data-wd-key='undo-expression']").click({ force: true });
|
||||
},
|
||||
|
||||
/** Removes an expression, restoring the property's spec default. */
|
||||
deleteExpression: async (fieldName: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator("[data-wd-key='delete-expression']").click({ force: true });
|
||||
},
|
||||
|
||||
/** Picks the function scale (categorical/interval/exponential/identity/interpolate). */
|
||||
selectFunctionType: async (fieldName: string, type: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator("[data-wd-key='function-type'] select").selectOption(type);
|
||||
},
|
||||
|
||||
/** Sets the "Base" input of a zoom/data function. */
|
||||
setFunctionBase: async (fieldName: string, value: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator("[data-wd-key='function-base'] input").fill(value);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the data property a data function keys off of. This is an InputString,
|
||||
* which only commits its value on blur, so typing alone is not enough.
|
||||
*/
|
||||
setFunctionProperty: async (fieldName: string, value: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
const input = container.locator("[data-wd-key='function-property'] input");
|
||||
await input.fill(value);
|
||||
await input.blur();
|
||||
},
|
||||
|
||||
/** Sets the fallback value used when a feature has no matching stop. */
|
||||
setFunctionDefault: async (fieldName: string, value: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator("[data-wd-key='function-default'] input").fill(value);
|
||||
},
|
||||
|
||||
/** Edits one cell of a function's stop table ("Zoom", "Input value" or "Output value"). */
|
||||
setFunctionStopValue: async (fieldName: string, column: string, index: number, value: string) => {
|
||||
const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
|
||||
await container.locator(`[aria-label="${column}"]`).nth(index).fill(value);
|
||||
},
|
||||
|
||||
addFilter: async () => {
|
||||
const button = this.helper.get.elementByTestId("layer-filter-button");
|
||||
await button.scrollIntoViewIfNeeded();
|
||||
await button.click({ force: true });
|
||||
},
|
||||
|
||||
selectFilterOperator: async (value: string) => {
|
||||
await this.helper.get.element(".maputnik-filter-editor-operator select").first().selectOption(value);
|
||||
},
|
||||
|
||||
/** Chooses how the filter items combine: all / none / any. */
|
||||
selectFilterCombiningOperator: async (value: string) => {
|
||||
await this.helper.when.selectWithin("filter-combining-operator", value);
|
||||
},
|
||||
|
||||
deleteFilterItem: async (index = 0) => {
|
||||
await this.helper.get
|
||||
.element(".maputnik-filter-editor-block-action .maputnik-icon-button")
|
||||
.nth(index)
|
||||
.click();
|
||||
},
|
||||
|
||||
/** Converts the simple filter editor into a raw expression editor. */
|
||||
convertFilterToExpression: async () => {
|
||||
await this.helper.when.click("filter-convert-to-expression");
|
||||
},
|
||||
|
||||
/**
|
||||
* Deletes the filter expression, restoring the simple filter editor.
|
||||
* The filter group precedes the paint group, so its button comes first.
|
||||
*/
|
||||
deleteFilterExpression: async () => {
|
||||
await this.helper.get.element("[data-wd-key='delete-expression']").first().click();
|
||||
},
|
||||
|
||||
setColorValue: async (fieldName: string, value: string) => {
|
||||
const input = this.helper.get.elementByTestId("spec-field:" + fieldName).locator(".maputnik-color");
|
||||
await input.fill(value);
|
||||
},
|
||||
|
||||
/** Sets a plain string spec field (e.g. a pattern), which has no dedicated input test id. */
|
||||
setStringValue: async (fieldName: string, value: string) => {
|
||||
const input = this.helper.get.elementByTestId("spec-field:" + fieldName).locator("input.maputnik-string");
|
||||
await input.fill(value);
|
||||
await input.blur();
|
||||
},
|
||||
|
||||
/**
|
||||
* Appends text to the end of the JSON editor line holding `lineText`.
|
||||
* CodeMirror types over its own auto-inserted closing quotes/brackets, so a
|
||||
* well-formed fragment stays well-formed.
|
||||
*/
|
||||
appendToJsonEditorLine: async (lineText: string, text: string) => {
|
||||
await this.helper.when.clickByText(lineText);
|
||||
await this.helper.when.typeKeys("{end}");
|
||||
await this.helper.when.typeText(text);
|
||||
},
|
||||
|
||||
waitForExampleFileResponse: () => this.helper.when.waitForResponse("example-style.json"),
|
||||
|
||||
/** Fill localStorage until we get a QuotaExceededError. */
|
||||
fillLocalStorage: () => this.helper.when.fillLocalStorageUntilQuota("maputnik:fill-"),
|
||||
};
|
||||
|
||||
public get = {
|
||||
...this.helper.get,
|
||||
|
||||
isMac: () => isMac,
|
||||
|
||||
canvas: () => this.helper.get.element("canvas"),
|
||||
|
||||
searchControl: () => this.helper.get.element(".maplibregl-ctrl-geocoder"),
|
||||
|
||||
skipTargetLayerList: () => this.helper.get.elementByTestId("skip-target-layer-list"),
|
||||
|
||||
skipTargetLayerEditor: () => this.helper.get.elementByTestId("skip-target-layer-editor"),
|
||||
|
||||
styleFromLocalStorage: () => this.helper.query(() => this.readStoredStyle()),
|
||||
|
||||
fixture: (name: string) => this.helper.readFixture(name),
|
||||
|
||||
responseBody: (alias: string) => {
|
||||
// Our mocked style responses always return the matching fixture.
|
||||
const name = alias.endsWith(".json") ? alias : `${alias}.json`;
|
||||
return this.helper.readFixture(name);
|
||||
},
|
||||
|
||||
exampleFileUrl: () => baseUrl + "example-style.json",
|
||||
};
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { v1 as uuid } from "uuid";
|
||||
import { PlaywrightHelper } from "./playwright-helper";
|
||||
|
||||
export class ModalDriver {
|
||||
private readonly helper = new PlaywrightHelper();
|
||||
|
||||
public when = {
|
||||
fillLayers: async (opts: { type: string; layer?: string; id?: string }) => {
|
||||
const { when, get, then } = this.helper;
|
||||
const id = opts.id ?? `${opts.type}:${uuid()}`;
|
||||
|
||||
await when.select("add-layer.layer-type.select", opts.type);
|
||||
await when.type("add-layer.layer-id.input", id);
|
||||
|
||||
if (opts.layer) {
|
||||
const input = get.elementByTestId("add-layer.layer-source-block").locator("input");
|
||||
await input.click();
|
||||
await input.fill(opts.layer);
|
||||
// The source input is a controlled downshift combobox; wait for React to
|
||||
// settle on the typed value before submitting.
|
||||
await then(input).shouldHaveValue(opts.layer);
|
||||
// Close the autocomplete menu so it does not intercept the add button.
|
||||
await get.elementByTestId("add-layer.layer-id.input").click();
|
||||
}
|
||||
await when.click("add-layer");
|
||||
|
||||
return id;
|
||||
},
|
||||
|
||||
open: async () => {
|
||||
await this.helper.when.click("layer-list:add-layer");
|
||||
},
|
||||
|
||||
close: async (key: string) => {
|
||||
await this.helper.when.click(key + ".close-modal");
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds a source of the given type from the sources modal, keeping whatever
|
||||
* defaults that type's editor prefills.
|
||||
*/
|
||||
addSource: async (sourceId: string, sourceType: string) => {
|
||||
const { when } = this.helper;
|
||||
await when.setValue("modal:sources.add.source_id", sourceId);
|
||||
await when.select("modal:sources.add.source_type", sourceType);
|
||||
await when.click("modal:sources.add.add_source");
|
||||
await when.wait(200);
|
||||
},
|
||||
|
||||
/** Adds one of the predefined public sources listed in the sources modal. */
|
||||
addPublicSource: async (index = 0) => {
|
||||
await this.helper.get.element(".maputnik-public-source-select").nth(index).click();
|
||||
},
|
||||
|
||||
deleteFirstActiveSource: async () => {
|
||||
await this.helper.get.element(".maputnik-active-source-type-editor-header-delete").first().click();
|
||||
},
|
||||
|
||||
/** Fills one number box of a coordinate pair in the image/video source editor. */
|
||||
setCoordinateValue: async (index: number, value: string) => {
|
||||
const input = this.helper.get
|
||||
.elementByTestId("modal:sources")
|
||||
.locator(".maputnik-array input")
|
||||
.nth(index);
|
||||
await input.fill(value);
|
||||
await input.blur();
|
||||
},
|
||||
|
||||
exportCreateHtml: async () => {
|
||||
await this.helper.get.element(".maputnik-modal-export-buttons button").last().click();
|
||||
},
|
||||
|
||||
exportSaveStyle: async () => {
|
||||
await this.helper.stubSaveFilePicker();
|
||||
await this.helper.get.element(".maputnik-modal-export-buttons button").first().click();
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1,577 +0,0 @@
|
||||
import { test, expect, describe, beforeEach } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
import tokens from "../src/config/tokens.json" with { type: "json" };
|
||||
|
||||
describe("modals", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("both");
|
||||
await when.setStyle("");
|
||||
});
|
||||
|
||||
describe("open", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("nav:open");
|
||||
});
|
||||
|
||||
test("close", async () => {
|
||||
await when.modal.close("modal:open");
|
||||
await then(get.elementByTestId("modal:open")).shouldNotExist();
|
||||
});
|
||||
|
||||
test("upload", async () => {
|
||||
await when.chooseExampleFile();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.fixture("example-style.json"));
|
||||
});
|
||||
|
||||
test("upload via drag and drop", async () => {
|
||||
await when.dropExampleFile();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.fixture("example-style.json"));
|
||||
});
|
||||
|
||||
describe("when click open url", () => {
|
||||
beforeEach(async () => {
|
||||
const styleFileUrl = get.exampleFileUrl();
|
||||
|
||||
await when.setValue("modal:open.url.input", styleFileUrl);
|
||||
await when.click("modal:open.url.button");
|
||||
await when.wait(200);
|
||||
});
|
||||
test("load from url", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.responseBody("example-style.json"));
|
||||
});
|
||||
});
|
||||
|
||||
describe("without the File System Access API", () => {
|
||||
test("upload via the file chooser", async () => {
|
||||
await given.noFileSystemAccessApi();
|
||||
await when.setStyle("");
|
||||
await when.click("nav:open");
|
||||
await when.chooseExampleFileFromPicker();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.fixture("example-style.json"));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("shortcuts", () => {
|
||||
test("open/close", async () => {
|
||||
await when.setStyle("");
|
||||
await when.typeKeys("?");
|
||||
await when.modal.close("modal:shortcuts");
|
||||
await then(get.elementByTestId("modal:shortcuts")).shouldNotExist();
|
||||
});
|
||||
});
|
||||
|
||||
describe("export", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("nav:export");
|
||||
});
|
||||
|
||||
test("close", async () => {
|
||||
await when.modal.close("modal:export");
|
||||
await then(get.elementByTestId("modal:export")).shouldNotExist();
|
||||
});
|
||||
|
||||
test("download HTML and save the style", async () => {
|
||||
// Generate the standalone HTML export (triggers a file download).
|
||||
await when.modal.exportCreateHtml();
|
||||
await then(get.elementByTestId("modal:export")).shouldExist();
|
||||
|
||||
// Saving the style closes the export modal.
|
||||
await when.modal.exportSaveStyle();
|
||||
await then(get.elementByTestId("modal:export")).shouldNotExist();
|
||||
});
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
beforeEach(async () => {
|
||||
await when.setStyle("layer");
|
||||
await when.click("nav:sources");
|
||||
});
|
||||
|
||||
test("active sources are listed and can be deleted", async () => {
|
||||
await when.setStyle("both");
|
||||
await when.click("nav:sources");
|
||||
const before = Object.keys(get.fixture("geojson-raster-style.json").sources).length;
|
||||
await when.modal.deleteFirstActiveSource();
|
||||
await then(
|
||||
get.styleFromLocalStorage().then((style) => Object.keys(style.sources).length)
|
||||
).shouldEqual(before - 1);
|
||||
});
|
||||
|
||||
test("public source", async () => {
|
||||
await when.modal.addPublicSource();
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
openmaptiles: {
|
||||
type: "vector",
|
||||
url: `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new source", async () => {
|
||||
const sourceId = "n1z2v3r";
|
||||
await when.setValue("modal:sources.add.source_id", sourceId);
|
||||
await when.select("modal:sources.add.source_type", "tile_vector");
|
||||
await when.select("modal:sources.add.scheme_type", "tms");
|
||||
await when.click("modal:sources.add.add_source");
|
||||
await when.wait(200);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: { [sourceId]: { scheme: "tms" } },
|
||||
});
|
||||
});
|
||||
|
||||
test("add new pmtiles source", async () => {
|
||||
const sourceId = "pmtilestest";
|
||||
await when.setValue("modal:sources.add.source_id", sourceId);
|
||||
await when.select("modal:sources.add.source_type", "pmtiles_vector");
|
||||
await when.setValue(
|
||||
"modal:sources.add.source_url",
|
||||
"https://data.source.coop/protomaps/openstreetmap/v4.pmtiles"
|
||||
);
|
||||
await when.click("modal:sources.add.add_source");
|
||||
await when.click("modal:sources.add.add_source");
|
||||
await when.wait(200);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
pmtilestest: {
|
||||
type: "vector",
|
||||
url: "pmtiles://https://data.source.coop/protomaps/openstreetmap/v4.pmtiles",
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new raster source", async () => {
|
||||
const sourceId = "rastertest";
|
||||
await when.setValue("modal:sources.add.source_id", sourceId);
|
||||
await when.select("modal:sources.add.source_type", "tile_raster");
|
||||
await when.select("modal:sources.add.scheme_type", "xyz");
|
||||
await when.setValue("modal:sources.add.tile_size", "128");
|
||||
await when.click("modal:sources.add.add_source");
|
||||
await when.wait(200);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: { [sourceId]: { tileSize: 128 } },
|
||||
});
|
||||
});
|
||||
|
||||
test("add new geojson url source", async () => {
|
||||
await when.modal.addSource("geojsonurl", "geojson_url");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
geojsonurl: { type: "geojson", data: "http://localhost:3000/geojson.json" },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new geojson json source", async () => {
|
||||
await when.modal.addSource("geojsonjson", "geojson_json");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
geojsonjson: { type: "geojson", cluster: false, data: "" },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new tilejson vector source", async () => {
|
||||
await when.modal.addSource("tilejsonvector", "tilejson_vector");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
tilejsonvector: { type: "vector", url: "http://localhost:3000/tilejson.json" },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new tilejson raster source", async () => {
|
||||
await when.modal.addSource("tilejsonraster", "tilejson_raster");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
tilejsonraster: { type: "raster", url: "http://localhost:3000/tilejson.json" },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new tilejson raster-dem source", async () => {
|
||||
await when.modal.addSource("tilejsonrasterdem", "tilejson_raster-dem");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
tilejsonrasterdem: { type: "raster-dem", url: "http://localhost:3000/tilejson.json" },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new tile xyz raster-dem source", async () => {
|
||||
await when.modal.addSource("tilexyzrasterdem", "tilexyz_raster-dem");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
tilexyzrasterdem: {
|
||||
type: "raster-dem",
|
||||
tiles: ["http://localhost:3000/{x}/{y}/{z}.png"],
|
||||
minzoom: 0,
|
||||
maxzoom: 14,
|
||||
tileSize: 512,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new image source", async () => {
|
||||
await when.modal.addSource("imagesource", "image");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
imagesource: {
|
||||
type: "image",
|
||||
url: "http://localhost:3000/image.png",
|
||||
coordinates: [[0, 0], [0, 0], [0, 0], [0, 0]],
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("add new video source", async () => {
|
||||
await when.modal.addSource("videosource", "video");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
videosource: {
|
||||
type: "video",
|
||||
urls: ["http://localhost:3000/movie.mp4"],
|
||||
coordinates: [[0, 0], [0, 0], [0, 0], [0, 0]],
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("edit the corner coordinates of an image source", async () => {
|
||||
const sourceId = "imagecoords";
|
||||
await when.setValue("modal:sources.add.source_id", sourceId);
|
||||
await when.select("modal:sources.add.source_type", "image");
|
||||
// The first corner is the first two number boxes of the coordinate arrays.
|
||||
await when.modal.setCoordinateValue(0, "1");
|
||||
await when.modal.setCoordinateValue(1, "2");
|
||||
await when.click("modal:sources.add.add_source");
|
||||
await when.wait(200);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sources: {
|
||||
[sourceId]: { type: "image", coordinates: [[1, 2], [0, 0], [0, 0], [0, 0]] },
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("inspect", () => {
|
||||
test("toggle", async () => {
|
||||
// There is no assertion in this test
|
||||
await when.setStyle("geojson");
|
||||
await when.select("maputnik-select", "inspect");
|
||||
});
|
||||
});
|
||||
|
||||
describe("style settings", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("nav:settings");
|
||||
});
|
||||
|
||||
describe("when click name filed spec information", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("field-doc-button-Name");
|
||||
});
|
||||
|
||||
test("should show the spec information", async () => {
|
||||
await then(get.elementsText("spec-field-doc")).shouldInclude("name for the style");
|
||||
});
|
||||
});
|
||||
|
||||
describe("when set name and click owner", () => {
|
||||
beforeEach(async () => {
|
||||
await when.setValue("modal:settings.name", "foobar");
|
||||
await when.click("modal:settings.owner");
|
||||
await when.wait(200);
|
||||
});
|
||||
|
||||
test("show name specifications", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
name: "foobar",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when set owner and click name", () => {
|
||||
beforeEach(async () => {
|
||||
await when.setValue("modal:settings.owner", "foobar");
|
||||
await when.click("modal:settings.name");
|
||||
await when.wait(200);
|
||||
});
|
||||
test("should update owner in local storage", async () => {
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
owner: "foobar",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test("sprite url", async () => {
|
||||
await when.setTextInJsonEditor('"http://example.com"');
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sprite: "http://example.com",
|
||||
});
|
||||
});
|
||||
|
||||
test("sprite object", async () => {
|
||||
await when.setTextInJsonEditor(JSON.stringify([{ id: "1", url: "2" }]));
|
||||
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
sprite: [{ id: "1", url: "2" }],
|
||||
});
|
||||
});
|
||||
|
||||
test("glyphs url", async () => {
|
||||
const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
|
||||
await when.setValue("modal:settings.glyphs", glyphsUrl);
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
glyphs: glyphsUrl,
|
||||
});
|
||||
});
|
||||
|
||||
test("maptiler access token", async () => {
|
||||
const apiKey = "testing123";
|
||||
await when.setValue("modal:settings.maputnik:openmaptiles_access_token", apiKey);
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
metadata: { "maputnik:openmaptiles_access_token": apiKey },
|
||||
});
|
||||
});
|
||||
|
||||
test("thunderforest access token", async () => {
|
||||
const apiKey = "testing123";
|
||||
await when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
metadata: { "maputnik:thunderforest_access_token": apiKey },
|
||||
});
|
||||
});
|
||||
|
||||
test("stadia access token", async () => {
|
||||
const apiKey = "testing123";
|
||||
await when.setValue("modal:settings.maputnik:stadia_access_token", apiKey);
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
metadata: { "maputnik:stadia_access_token": apiKey },
|
||||
});
|
||||
});
|
||||
|
||||
test("locationiq access token", async () => {
|
||||
const apiKey = "testing123";
|
||||
await when.setValue("modal:settings.maputnik:locationiq_access_token", apiKey);
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
metadata: { "maputnik:locationiq_access_token": apiKey },
|
||||
});
|
||||
});
|
||||
|
||||
test("map view defaults", async () => {
|
||||
await when.setValue("modal:settings.zoom", "4");
|
||||
await when.setValue("modal:settings.bearing", "12");
|
||||
await when.setValue("modal:settings.pitch", "30");
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
zoom: 4,
|
||||
bearing: 12,
|
||||
pitch: 30,
|
||||
});
|
||||
});
|
||||
|
||||
test("light intensity", async () => {
|
||||
await when.setValue("modal:settings.light-intensity", "0.7");
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
light: { intensity: 0.7 },
|
||||
});
|
||||
});
|
||||
|
||||
test("terrain source and exaggeration", async () => {
|
||||
await when.setValue("modal:settings.maputnik:terrain_source", "terrain");
|
||||
await when.setValue("modal:settings.terrain-exaggeration", "1.5");
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
terrain: { source: "terrain", exaggeration: 1.5 },
|
||||
});
|
||||
});
|
||||
|
||||
test("transition delay and duration", async () => {
|
||||
await when.setValue("modal:settings.transition-delay", "100");
|
||||
await when.setValue("modal:settings.transition-duration", "500");
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
transition: { delay: 100, duration: 500 },
|
||||
});
|
||||
});
|
||||
|
||||
test("style projection mercator", async () => {
|
||||
await when.select("modal:settings.projection", "mercator");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
projection: { type: "mercator" },
|
||||
});
|
||||
});
|
||||
|
||||
test("style projection globe", async () => {
|
||||
await when.select("modal:settings.projection", "globe");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
projection: { type: "globe" },
|
||||
});
|
||||
});
|
||||
|
||||
test("style projection vertical-perspective", async () => {
|
||||
await when.select("modal:settings.projection", "vertical-perspective");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
projection: { type: "vertical-perspective" },
|
||||
});
|
||||
});
|
||||
|
||||
test("style renderer", async () => {
|
||||
await when.select("modal:settings.maputnik:renderer", "ol");
|
||||
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("ol");
|
||||
|
||||
await when.click("modal:settings.name");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
metadata: { "maputnik:renderer": "ol" },
|
||||
});
|
||||
});
|
||||
|
||||
test("include API key when change renderer", async () => {
|
||||
await when.click("modal:settings.close-modal");
|
||||
await when.click("nav:open");
|
||||
|
||||
await when.clickByAttribute("aria-label", "MapTiler Basic");
|
||||
await when.wait(1000);
|
||||
await when.click("nav:settings");
|
||||
|
||||
await when.select("modal:settings.maputnik:renderer", "mlgljs");
|
||||
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
|
||||
|
||||
await when.select("modal:settings.maputnik:renderer", "ol");
|
||||
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("ol");
|
||||
|
||||
await given.intercept(
|
||||
/https:\/\/api\.maptiler\.com\/tiles\/v3-openmaptiles\/tiles\.json\?key=.*/,
|
||||
"tileRequest",
|
||||
"GET"
|
||||
);
|
||||
|
||||
await when.select("modal:settings.maputnik:renderer", "mlgljs");
|
||||
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
|
||||
|
||||
const request = await when.waitForResponse("tileRequest");
|
||||
expect(request.url()).toContain(
|
||||
`https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("add layer", () => {
|
||||
beforeEach(async () => {
|
||||
await when.setStyle("layer");
|
||||
await when.modal.open();
|
||||
});
|
||||
|
||||
test("shows duplicate id error", async () => {
|
||||
await when.setValue("add-layer.layer-id.input", "background");
|
||||
await when.click("add-layer");
|
||||
await then(get.elementByTestId("modal:add-layer")).shouldExist();
|
||||
await then(get.element(".maputnik-modal-error")).shouldContainText("Layer ID already exists");
|
||||
});
|
||||
});
|
||||
|
||||
describe("global state", () => {
|
||||
beforeEach(async () => {
|
||||
await when.click("nav:global-state");
|
||||
});
|
||||
|
||||
test("add variable", async () => {
|
||||
await when.wait(100);
|
||||
await when.click("global-state-add-variable");
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key1: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
test("add multiple variables", async () => {
|
||||
await when.click("global-state-add-variable");
|
||||
await when.click("global-state-add-variable");
|
||||
await when.click("global-state-add-variable");
|
||||
await when.wait(100);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key1: { default: "value" }, key2: { default: "value" }, key3: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
test("remove variable", async () => {
|
||||
await when.click("global-state-add-variable");
|
||||
await when.click("global-state-add-variable");
|
||||
await when.click("global-state-add-variable");
|
||||
await when.click("global-state-remove-variable", 0);
|
||||
await when.wait(100);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key2: { default: "value" }, key3: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
test("edit variable key", async () => {
|
||||
await when.click("global-state-add-variable");
|
||||
await when.wait(100);
|
||||
await when.setValue("global-state-variable-key:0", "mykey");
|
||||
await when.typeKeys("{enter}");
|
||||
await when.wait(100);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { mykey: { default: "value" } },
|
||||
});
|
||||
});
|
||||
|
||||
test("edit variable value", async () => {
|
||||
await when.click("global-state-add-variable");
|
||||
await when.wait(100);
|
||||
await when.setValue("global-state-variable-value:0", "myvalue");
|
||||
await when.typeKeys("{enter}");
|
||||
await when.wait(100);
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
state: { key1: { default: "myvalue" } },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("error panel", () => {
|
||||
test("not visible when no errors", async () => {
|
||||
await then(get.element("maputnik-message-panel-error")).shouldNotExist();
|
||||
});
|
||||
|
||||
test("visible on style error", async () => {
|
||||
await when.modal.open();
|
||||
await when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "invalid",
|
||||
});
|
||||
await then(get.element(".maputnik-message-panel-error")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Handle localStorage QuotaExceededError", () => {
|
||||
test("handles quota exceeded error when opening style from URL", async () => {
|
||||
// Clear localStorage to start fresh
|
||||
await when.clearLocalStorage();
|
||||
await when.fillLocalStorage();
|
||||
|
||||
// Open the style via URL input
|
||||
await when.click("nav:open");
|
||||
await when.setValue("modal:open.url.input", get.exampleFileUrl());
|
||||
await when.click("modal:open.url.button");
|
||||
|
||||
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.responseBody("example-style.json"));
|
||||
await then(get.styleFromLocalStorage()).shouldExist();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,453 +0,0 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { expect, type Locator, type Page, type Request } from "@playwright/test";
|
||||
import { currentPage, recordCoverageChunk } from "./utils/fixtures";
|
||||
|
||||
const DATA_ATTRIBUTE = "data-wd-key";
|
||||
const FIXTURES_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "fixtures");
|
||||
const isMac = process.platform === "darwin";
|
||||
|
||||
function testIdSelector(testId: string): string {
|
||||
return `[${DATA_ATTRIBUTE}="${testId}"]`;
|
||||
}
|
||||
|
||||
/** Retries `assertion` until it stops throwing */
|
||||
async function retry(
|
||||
assertion: () => Promise<void> | void,
|
||||
timeout = 10000,
|
||||
interval = 100
|
||||
): Promise<void> {
|
||||
const start = Date.now();
|
||||
let lastError: unknown;
|
||||
while (true) {
|
||||
try {
|
||||
await assertion();
|
||||
return;
|
||||
} catch (error) {
|
||||
lastError = error;
|
||||
if (Date.now() - start > timeout) throw lastError;
|
||||
await new Promise((resolve) => setTimeout(resolve, interval));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A lazily-evaluated value (e.g. the style in localStorage). Assertions on a
|
||||
* Query re-read the value until they pass.
|
||||
*/
|
||||
class Query<T> {
|
||||
readonly __query = true as const;
|
||||
constructor(private readonly getter: () => Promise<T>) {}
|
||||
|
||||
get(): Promise<T> {
|
||||
return this.getter();
|
||||
}
|
||||
|
||||
then<U>(mapper: (value: T) => U | Promise<U>): Query<U> {
|
||||
return new Query<U>(async () => mapper(await this.getter()));
|
||||
}
|
||||
}
|
||||
|
||||
function isQuery(target: unknown): target is Query<unknown> {
|
||||
return typeof target === "object" && target !== null && (target as Query<unknown>).__query === true;
|
||||
}
|
||||
|
||||
function isLocator(target: unknown): target is Locator {
|
||||
return (
|
||||
typeof target === "object" &&
|
||||
target !== null &&
|
||||
typeof (target as Locator).count === "function" &&
|
||||
typeof (target as Locator).boundingBox === "function"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Asserts that `actual` recursively contains everything in `expected`: nested
|
||||
* objects are matched as subsets, while arrays and primitives must match exactly.
|
||||
*/
|
||||
function assertDeepNestedInclude(actual: any, expected: Record<string, unknown> | unknown[]): void {
|
||||
expect(actual).toMatchObject(expected);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fluent, auto-retrying assertions over a Playwright Locator or a lazily
|
||||
* evaluated value/Query. This is the generic base that the maputnik-specific
|
||||
* assertable extends.
|
||||
*/
|
||||
export class Assertable<T> {
|
||||
constructor(private readonly target: T) {}
|
||||
|
||||
private locator(): Locator {
|
||||
if (!isLocator(this.target)) throw new Error("Expected a Locator target for this assertion");
|
||||
return this.target;
|
||||
}
|
||||
|
||||
protected async assertValue(assertion: (value: any) => void): Promise<void> {
|
||||
const target = this.target;
|
||||
if (isQuery(target)) {
|
||||
await retry(async () => assertion(await target.get()));
|
||||
} else {
|
||||
assertion(await (target as any));
|
||||
}
|
||||
}
|
||||
|
||||
// Element assertions (auto-retrying via Playwright web-first assertions).
|
||||
shouldBeVisible = () => expect(this.locator().first()).toBeVisible();
|
||||
// Some testids resolve to many elements that are always rendered but hidden
|
||||
// (e.g. per-field documentation panels); "not visible" means none is visible.
|
||||
shouldNotBeVisible = () => expect(this.locator().filter({ visible: true })).toHaveCount(0);
|
||||
shouldExist = async () => {
|
||||
if (isLocator(this.target)) {
|
||||
await expect(this.locator().first()).toBeAttached();
|
||||
} else {
|
||||
await this.assertValue((value) => expect(value).toBeTruthy());
|
||||
}
|
||||
};
|
||||
shouldNotExist = () => expect(this.locator()).toHaveCount(0);
|
||||
shouldBeFocused = () => expect(this.locator().first()).toBeFocused();
|
||||
shouldNotBeFocused = () => expect(this.locator().first()).not.toBeFocused();
|
||||
shouldHaveValue = (value: string) => expect(this.locator().first()).toHaveValue(value);
|
||||
shouldContainText = async (text: string) => {
|
||||
const locator = this.locator();
|
||||
// Prefer the visible element when a testid resolves to several (only the
|
||||
// open documentation panel is visible; the rest are hidden in the DOM).
|
||||
const target = (await locator.count()) > 1 ? locator.filter({ visible: true }).first() : locator.first();
|
||||
await expect(target).toContainText(text);
|
||||
};
|
||||
shouldHaveText = (text: string) => expect(this.locator().first()).toHaveText(text);
|
||||
shouldHaveLength = (length: number) => expect(this.locator()).toHaveCount(length);
|
||||
shouldHaveCss = (property: string, value: string) => expect(this.locator().first()).toHaveCSS(property, value);
|
||||
|
||||
// Value assertions (auto-retrying for Query targets).
|
||||
shouldEqual = (value: any) => this.assertValue((actual) => expect(actual).toBe(value));
|
||||
|
||||
shouldInclude = (value: any) =>
|
||||
this.assertValue((actual) => {
|
||||
if (typeof value === "object" && value !== null) {
|
||||
expect(actual).toMatchObject(value);
|
||||
} else {
|
||||
expect(String(actual)).toContain(String(value));
|
||||
}
|
||||
});
|
||||
|
||||
shouldDeepNestedInclude = (value: Record<string, unknown> | unknown[]) =>
|
||||
this.assertValue((actual) => assertDeepNestedInclude(actual, value));
|
||||
}
|
||||
|
||||
async function typeSequence(page: Page, text: string): Promise<void> {
|
||||
const tokens = text.match(/\{[^}]+\}|[^{]+/g) ?? [];
|
||||
const modifierMap: Record<string, string> = { meta: "Meta", ctrl: "Control", shift: "Shift", alt: "Alt" };
|
||||
const namedKeys: Record<string, string> = {
|
||||
esc: "Escape",
|
||||
enter: "Enter",
|
||||
backspace: "Backspace",
|
||||
del: "Delete",
|
||||
tab: "Tab",
|
||||
home: "Home",
|
||||
end: "End",
|
||||
rightarrow: "ArrowRight",
|
||||
};
|
||||
|
||||
for (let i = 0; i < tokens.length; i++) {
|
||||
const token = tokens[i];
|
||||
if (!token.startsWith("{") || !token.endsWith("}")) {
|
||||
await page.keyboard.type(token);
|
||||
continue;
|
||||
}
|
||||
const name = token.slice(1, -1).toLowerCase();
|
||||
if (name === "selectall") {
|
||||
await page.keyboard.press(isMac ? "Meta+a" : "Control+a");
|
||||
} else if (namedKeys[name]) {
|
||||
await page.keyboard.press(namedKeys[name]);
|
||||
} else if (modifierMap[name]) {
|
||||
const modifiers = [modifierMap[name]];
|
||||
let j = i + 1;
|
||||
while (j < tokens.length && /^\{(meta|ctrl|shift|alt)\}$/i.test(tokens[j])) {
|
||||
modifiers.push(modifierMap[tokens[j].slice(1, -1).toLowerCase()]);
|
||||
j++;
|
||||
}
|
||||
const key = tokens[j] ?? "";
|
||||
await page.keyboard.press([...modifiers, key].join("+"));
|
||||
i = j;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function centerOf(locator: Locator): Promise<{ x: number; y: number }> {
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) throw new Error("Element has no bounding box");
|
||||
return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
|
||||
}
|
||||
|
||||
/**
|
||||
* This is where all plywright-specific test helpers live.
|
||||
* It is used by the MaputnikDriver to implement the Maputnik-specific test helpers.
|
||||
*/
|
||||
export class PlaywrightHelper {
|
||||
private readonly recordedRequests = new Map<string, Request[]>();
|
||||
|
||||
private get page(): Page {
|
||||
return currentPage();
|
||||
}
|
||||
|
||||
private testId(testId: string): Locator {
|
||||
return this.page.locator(testIdSelector(testId));
|
||||
}
|
||||
|
||||
/** Reads and parses a JSON fixture from the fixtures directory. */
|
||||
public readFixture(name: string): any {
|
||||
return JSON.parse(fs.readFileSync(path.join(FIXTURES_DIR, name), "utf-8"));
|
||||
}
|
||||
|
||||
/** Wraps a lazily-evaluated value so assertions on it auto-retry. */
|
||||
public query<T>(getter: () => Promise<T>): Query<T> {
|
||||
return new Query<T>(getter);
|
||||
}
|
||||
|
||||
/** Stubs the File System Access "save" picker so file saves complete headlessly. */
|
||||
public stubSaveFilePicker(): Promise<void> {
|
||||
return this.page.evaluate(() => {
|
||||
(window as any).showSaveFilePicker = async () => ({
|
||||
createWritable: async () => ({ write: async () => {}, close: async () => {} }),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** Entry point for fluent assertions over a Locator or a value/Query. */
|
||||
public then = <T>(target: T): Assertable<T> => new Assertable(target);
|
||||
|
||||
public given = {
|
||||
/**
|
||||
* Removes the File System Access API so the app falls back to a plain
|
||||
* <input type="file">, the way Firefox and Safari behave. Must be called
|
||||
* before the page under test is loaded.
|
||||
*/
|
||||
noFileSystemAccessApi: async () => {
|
||||
await this.page.addInitScript(() => {
|
||||
delete (window as any).showOpenFilePicker;
|
||||
delete (window as any).showSaveFilePicker;
|
||||
});
|
||||
},
|
||||
|
||||
intercept: async (pattern: RegExp, alias: string, _method = "GET") => {
|
||||
this.recordedRequests.set(alias, []);
|
||||
await this.page.route(pattern, (route) => {
|
||||
this.recordedRequests.get(alias)!.push(route.request());
|
||||
route.continue();
|
||||
});
|
||||
},
|
||||
|
||||
interceptAndMockResponse: async (options: {
|
||||
method?: string;
|
||||
url: string | RegExp;
|
||||
response: unknown | { fixture: string };
|
||||
alias?: string;
|
||||
}) => {
|
||||
const { url, response, alias } = options;
|
||||
if (alias) this.recordedRequests.set(alias, []);
|
||||
await this.page.route(url, (route) => {
|
||||
if (alias) this.recordedRequests.get(alias)!.push(route.request());
|
||||
const body =
|
||||
response && typeof response === "object" && "fixture" in (response as any)
|
||||
? this.readFixture((response as { fixture: string }).fixture)
|
||||
: response;
|
||||
route.fulfill({ json: body });
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
public when = {
|
||||
visit: async (url: string) => {
|
||||
// Snapshot coverage before navigating, since a full page load resets it.
|
||||
await recordCoverageChunk(this.page);
|
||||
await this.page.goto(url);
|
||||
},
|
||||
|
||||
wait: (ms: number) => this.page.waitForTimeout(ms),
|
||||
|
||||
tab: () => this.page.keyboard.press("Tab"),
|
||||
|
||||
typeKeys: (keys: string) => typeSequence(this.page, keys),
|
||||
|
||||
/** Types raw text into the focused element (no "{key}" sequence parsing). */
|
||||
typeText: (text: string) => this.page.keyboard.type(text),
|
||||
|
||||
clickButtonByName: async (name: string) => {
|
||||
await this.page.getByRole("button", { name }).click();
|
||||
},
|
||||
|
||||
click: async (testId: string, index = 0) => {
|
||||
// Documentation buttons are wrapped in a <label>/.maputnik-doc-target that
|
||||
// Playwright treats as intercepting the click; bypass the check for them.
|
||||
const force = testId.startsWith("field-doc-button-");
|
||||
await this.testId(testId).nth(index).click({ force });
|
||||
},
|
||||
|
||||
realClick: async (testId: string) => {
|
||||
await this.testId(testId).click();
|
||||
},
|
||||
|
||||
hover: async (testId: string) => {
|
||||
await this.testId(testId).hover();
|
||||
},
|
||||
|
||||
focus: async (testId: string) => {
|
||||
await this.testId(testId).focus();
|
||||
},
|
||||
|
||||
clear: async (testId: string) => {
|
||||
await this.testId(testId).clear();
|
||||
},
|
||||
|
||||
select: async (testId: string, value: string) => {
|
||||
await this.testId(testId).selectOption(value);
|
||||
},
|
||||
|
||||
selectWithin: async (parentTestId: string, value: string) => {
|
||||
await this.testId(parentTestId).locator("select").selectOption(value);
|
||||
},
|
||||
|
||||
clickWithin: async (parentTestId: string, selector: string) => {
|
||||
await this.testId(parentTestId).locator(selector).first().click();
|
||||
},
|
||||
|
||||
clickByText: async (text: string) => {
|
||||
await this.page.getByText(text).click();
|
||||
},
|
||||
|
||||
clickByAttribute: async (attribute: string, value: string) => {
|
||||
await this.page.locator(`[${attribute}="${value}"]`).click();
|
||||
},
|
||||
|
||||
scrollToBottom: async (element: Locator) => {
|
||||
await element.evaluate((el) => el.scrollTo(0, el.scrollHeight));
|
||||
},
|
||||
|
||||
setValue: async (testId: string, text: string) => {
|
||||
const input = this.testId(testId);
|
||||
await input.fill("");
|
||||
await input.fill(text);
|
||||
},
|
||||
|
||||
type: async (testId: string, text: string) => {
|
||||
await this.testId(testId).focus();
|
||||
// Place the caret at the start of the field, so a leading "{backspace}"
|
||||
// is a no-op rather than clearing an already-committed value.
|
||||
await this.page.keyboard.press("Home");
|
||||
await typeSequence(this.page, text);
|
||||
},
|
||||
|
||||
dragAndDropWithWait: async (source: string, target: string) => {
|
||||
const from = await centerOf(this.testId(source));
|
||||
const to = await centerOf(this.testId(target));
|
||||
await this.page.mouse.move(from.x, from.y);
|
||||
await this.page.mouse.down();
|
||||
await this.page.mouse.move(from.x, from.y + 10);
|
||||
await this.page.mouse.move(to.x, to.y, { steps: 10 });
|
||||
await this.page.waitForTimeout(100);
|
||||
await this.page.mouse.up();
|
||||
},
|
||||
|
||||
clickCenter: async (testId: string) => {
|
||||
const { x, y } = await centerOf(this.testId(testId));
|
||||
await this.page.mouse.move(x, y);
|
||||
await this.page.mouse.down();
|
||||
await this.page.waitForTimeout(200);
|
||||
await this.page.mouse.up();
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens a fixture through the File System Access API, which raises no
|
||||
* "filechooser" event and so has to be stubbed. For the <input type="file">
|
||||
* fallback that browsers without the API use, see chooseFileFromPicker.
|
||||
*/
|
||||
openFileByFixture: async (fixture: string, buttonTestId: string) => {
|
||||
const content = JSON.stringify(this.readFixture(fixture));
|
||||
await this.page.evaluate((fileContent) => {
|
||||
(window as any).showOpenFilePicker = async () => [
|
||||
{ getFile: async () => ({ text: async () => fileContent }) },
|
||||
];
|
||||
}, content);
|
||||
await this.testId(buttonTestId).click();
|
||||
},
|
||||
|
||||
/**
|
||||
* Clicks a control that opens the browser's native file chooser and answers
|
||||
* it with a fixture. Only works on the <input type="file"> path — the File
|
||||
* System Access API does not raise a "filechooser" event, so pair this with
|
||||
* given.noFileSystemAccessApi().
|
||||
*/
|
||||
chooseFileFromPicker: async (fixture: string, triggerTestId: string) => {
|
||||
const content = JSON.stringify(this.readFixture(fixture));
|
||||
const [fileChooser] = await Promise.all([
|
||||
this.page.waitForEvent("filechooser"),
|
||||
this.testId(triggerTestId).click(),
|
||||
]);
|
||||
await fileChooser.setFiles({
|
||||
name: fixture,
|
||||
mimeType: "application/json",
|
||||
buffer: Buffer.from(content),
|
||||
});
|
||||
},
|
||||
|
||||
dropFileByFixture: async (fixture: string, dropzoneTestId: string) => {
|
||||
const content = JSON.stringify(this.readFixture(fixture));
|
||||
const dataTransfer = await this.page.evaluateHandle((fileContent) => {
|
||||
const dt = new DataTransfer();
|
||||
dt.items.add(new File([fileContent], "example-style.json", { type: "application/json" }));
|
||||
return dt;
|
||||
}, content);
|
||||
const dropzone = this.testId(dropzoneTestId);
|
||||
await dropzone.dispatchEvent("dragenter", { dataTransfer });
|
||||
await dropzone.dispatchEvent("dragover", { dataTransfer });
|
||||
await dropzone.dispatchEvent("drop", { dataTransfer });
|
||||
},
|
||||
|
||||
waitForResponse: async (alias: string) => {
|
||||
const requests = this.recordedRequests.get(alias);
|
||||
if (!requests) throw new Error(`No intercept registered for alias "${alias}"`);
|
||||
await retry(async () => {
|
||||
if (requests.length === 0) throw new Error(`No request recorded for alias "${alias}"`);
|
||||
});
|
||||
return requests[requests.length - 1];
|
||||
},
|
||||
|
||||
clearLocalStorage: () => this.page.evaluate(() => window.localStorage.clear()),
|
||||
|
||||
/** Writes to localStorage under `keyPrefix` until a QuotaExceededError is hit. */
|
||||
fillLocalStorageUntilQuota: (keyPrefix: string) =>
|
||||
this.page.evaluate((prefix) => {
|
||||
let chunkSize = 1000;
|
||||
const chunk = new Array(chunkSize).join("x");
|
||||
let index = 0;
|
||||
while (true) {
|
||||
try {
|
||||
window.localStorage.setItem(`${prefix}${index++}`, chunk);
|
||||
} catch (e: any) {
|
||||
if (e.name === "QuotaExceededError") {
|
||||
if (chunkSize <= 1) return;
|
||||
chunkSize /= 2;
|
||||
continue;
|
||||
}
|
||||
throw e; // Unexpected error
|
||||
}
|
||||
}
|
||||
}, keyPrefix),
|
||||
};
|
||||
|
||||
public get = {
|
||||
element: (selector: string) => this.page.locator(selector),
|
||||
|
||||
localStorageItem: (key: string) =>
|
||||
this.page.evaluate((k) => window.localStorage.getItem(k), key),
|
||||
|
||||
elementByTestId: (testId: string) => this.testId(testId),
|
||||
|
||||
inputValue: (testId: string) => new Query<string>(() => this.testId(testId).first().inputValue()),
|
||||
|
||||
elementsText: (testId: string) => new Query<string>(() => this.testId(testId).first().innerText()),
|
||||
|
||||
locationHash: () => new Query<string>(async () => new URL(this.page.url()).hash),
|
||||
};
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
/**
|
||||
* Clears the istanbul coverage output directory before the e2e run so stale
|
||||
* coverage from previous runs is not merged into the report.
|
||||
*/
|
||||
export default function globalSetup(): void {
|
||||
const dir = path.resolve(process.cwd(), ".nyc_output");
|
||||
fs.rmSync(dir, { recursive: true, force: true });
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { execFileSync } from "node:child_process";
|
||||
|
||||
/**
|
||||
* Merges the per-test istanbul coverage chunks collected in `.nyc_output` into a
|
||||
* report (configured by `.nycrc.json`) once the whole e2e run has finished.
|
||||
*/
|
||||
export default function globalTeardown(): void {
|
||||
const dir = path.resolve(process.cwd(), ".nyc_output");
|
||||
const hasCoverage = fs.existsSync(dir) && fs.readdirSync(dir).some((f) => f.endsWith(".json"));
|
||||
if (!hasCoverage) {
|
||||
console.warn("No coverage data collected; skipping coverage report.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
execFileSync("npx", ["nyc", "report"], { stdio: "inherit" });
|
||||
} catch (error) {
|
||||
// Don't fail the whole run if the report can't be generated (e.g. when
|
||||
// running against a container whose source paths differ from the host).
|
||||
console.warn("Failed to generate coverage report:", error);
|
||||
}
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
import { test, expect, type Page } from "@playwright/test";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
let activePage: Page | undefined;
|
||||
const coverageChunks: unknown[] = [];
|
||||
|
||||
/** The page for the currently running test. Throws if used outside a test. */
|
||||
export function currentPage(): Page {
|
||||
if (!activePage) {
|
||||
throw new Error("No active page: a MaputnikDriver method was called outside of a running test.");
|
||||
}
|
||||
return activePage;
|
||||
}
|
||||
|
||||
const OUTPUT_DIR = path.resolve(process.cwd(), ".nyc_output");
|
||||
|
||||
/**
|
||||
* Reads the istanbul coverage object (injected by vite-plugin-istanbul) from the
|
||||
* given page. Returns `null` when the page has not been instrumented.
|
||||
*/
|
||||
async function readCoverage(page: Page): Promise<unknown | null> {
|
||||
try {
|
||||
return await page.evaluate(() => (window as unknown as { __coverage__?: unknown }).__coverage__ ?? null);
|
||||
} catch {
|
||||
// Page might be navigating/closed.
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Persists a coverage chunk to `.nyc_output` so that `nyc report` can merge it.
|
||||
* istanbul-lib-coverage (used by nyc) sums the hit counts across every file it
|
||||
* finds, so writing one file per chunk is enough to accumulate coverage across
|
||||
* navigations and tests.
|
||||
*/
|
||||
export function writeCoverage(coverage: unknown, id: string): void {
|
||||
if (!coverage) return;
|
||||
fs.mkdirSync(OUTPUT_DIR, { recursive: true });
|
||||
fs.writeFileSync(path.join(OUTPUT_DIR, `playwright-${id}.json`), JSON.stringify(coverage));
|
||||
}
|
||||
|
||||
/** Records a coverage snapshot (called before navigations, which reset __coverage__). */
|
||||
export async function recordCoverageChunk(page: Page): Promise<void> {
|
||||
const chunk = await readCoverage(page);
|
||||
if (chunk) coverageChunks.push(chunk);
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto fixture that binds the current test's page for the (page-lazy)
|
||||
* MaputnikDriver, auto-accepts confirm dialogs, and writes the istanbul
|
||||
* coverage collected during the test to `.nyc_output`.
|
||||
*/
|
||||
const extendedTest = test.extend<{ maputnikPage: void }>({
|
||||
maputnikPage: [
|
||||
async ({ page }, use, testInfo) => {
|
||||
activePage = page;
|
||||
coverageChunks.length = 0;
|
||||
// Accept confirm dialogs (e.g. the "replace current style" prompt). These
|
||||
// are dismissed by default, which would cancel loading a style via URL.
|
||||
page.on("dialog", (dialog) => dialog.accept().catch(() => undefined));
|
||||
|
||||
await use();
|
||||
|
||||
const finalCoverage = await readCoverage(page);
|
||||
if (finalCoverage) coverageChunks.push(finalCoverage);
|
||||
coverageChunks.forEach((chunk, index) => writeCoverage(chunk, `${testInfo.testId}-${index}`));
|
||||
coverageChunks.length = 0;
|
||||
activePage = undefined;
|
||||
},
|
||||
{ auto: true },
|
||||
],
|
||||
});
|
||||
|
||||
const describe = extendedTest.describe;
|
||||
const beforeEach = extendedTest.beforeEach;
|
||||
export {
|
||||
expect,
|
||||
describe,
|
||||
extendedTest as test,
|
||||
beforeEach,
|
||||
};
|
||||
+1
-3
@@ -34,9 +34,7 @@ export default defineConfig({
|
||||
rules: {
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
// Many components are exported as withTranslation()(Component); without
|
||||
// this the rule cannot tell the HOC's result is still a component.
|
||||
{ allowConstantExport: true, extraHOCs: ["withTranslation"] }
|
||||
{ allowConstantExport: true }
|
||||
],
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
export default {
|
||||
output: "src/locales/$LOCALE/$NAMESPACE.json",
|
||||
locales: [ "de", "fr", "he", "it","ja", "zh" ],
|
||||
|
||||
// Because some keys are dynamically generated, i18next-parser can't detect them.
|
||||
// We add these keys manually, so we don't want to remove them.
|
||||
keepRemoved: true,
|
||||
|
||||
// We use plain English keys, so we disable key and namespace separators.
|
||||
keySeparator: false,
|
||||
namespaceSeparator: false,
|
||||
|
||||
defaultValue: (_locale, _ns, _key) => {
|
||||
// The default value is a string that indicates that the string is not translated.
|
||||
return "__STRING_NOT_TRANSLATED__";
|
||||
}
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
import { defineConfig } from "i18next-cli";
|
||||
|
||||
export default defineConfig({
|
||||
locales: ["de", "fr", "he", "it", "ja", "ko", "tr", "zh"],
|
||||
extract: {
|
||||
input: ["src/**/*.{js,jsx,ts,tsx}"],
|
||||
output: "src/locales/{{language}}/{{namespace}}.json",
|
||||
defaultValue: "__STRING_NOT_TRANSLATED__"
|
||||
}
|
||||
});
|
||||
Generated
+5150
-3190
File diff suppressed because it is too large
Load Diff
+52
-49
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "maputnik",
|
||||
"version": "3.1.0",
|
||||
"version": "3.0.0",
|
||||
"description": "A MapLibre GL visual style editor",
|
||||
"type": "module",
|
||||
"main": "''",
|
||||
@@ -9,12 +9,12 @@
|
||||
"build": "tsc && vite build --mode=production",
|
||||
"build-desktop": "tsc && vite build --mode=desktop && cd desktop && make",
|
||||
"build-linux": "tsc && vite build --mode=desktop && cd desktop && make bin/linux/maputnik",
|
||||
"i18n:extract": "npx i18next-cli extract",
|
||||
"i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
|
||||
"lint": "eslint",
|
||||
"test": "playwright test",
|
||||
"test-e2e": "playwright test",
|
||||
"test": "cypress run",
|
||||
"test-unit": "vitest",
|
||||
"test-unit-ci": "vitest run --coverage --reporter=json",
|
||||
"cy:open": "cypress open",
|
||||
"lint-css": "stylelint \"src/styles/*.scss\"",
|
||||
"sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
|
||||
},
|
||||
@@ -27,56 +27,56 @@
|
||||
"homepage": "https://github.com/maplibre/maputnik#readme",
|
||||
"dependencies": {
|
||||
"@codemirror/lang-json": "^6.0.2",
|
||||
"@codemirror/lint": "^6.9.7",
|
||||
"@codemirror/state": "^6.7.1",
|
||||
"@codemirror/lint": "^6.9.2",
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.43.6",
|
||||
"@codemirror/view": "^6.38.7",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.4.0",
|
||||
"@maplibre/maplibre-gl-geocoder": "^1.9.4",
|
||||
"@maplibre/maplibre-gl-inspect": "^1.8.2",
|
||||
"@maplibre/maplibre-gl-style-spec": "^26.2.1",
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.3.0",
|
||||
"@maplibre/maplibre-gl-geocoder": "^1.9.1",
|
||||
"@maplibre/maplibre-gl-inspect": "^1.8.0",
|
||||
"@maplibre/maplibre-gl-style-spec": "^24.3.1",
|
||||
"array-move": "^4.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"classnames": "^2.5.1",
|
||||
"codemirror": "^6.0.2",
|
||||
"color": "^5.0.3",
|
||||
"detect-browser": "^5.3.0",
|
||||
"downshift": "^9.4.0",
|
||||
"downshift": "^9.0.10",
|
||||
"events": "^3.3.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"i18next": "^26.3.6",
|
||||
"i18next-browser-languagedetector": "^8.2.1",
|
||||
"i18next": "^25.6.3",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"i18next-resources-to-backend": "^1.2.1",
|
||||
"json-stringify-pretty-compact": "^4.0.0",
|
||||
"json-to-ast": "^2.1.0",
|
||||
"lodash": "^4.18.1",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash.capitalize": "^4.2.1",
|
||||
"lodash.clamp": "^4.0.3",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"maplibre-gl": "^5.24.0",
|
||||
"maplibre-gl": "^5.13.0",
|
||||
"maputnik-design": "github:maputnik/design#172b06c",
|
||||
"ol": "^10.9.0",
|
||||
"ol-mapbox-style": "^13.4.1",
|
||||
"pmtiles": "^4.4.1",
|
||||
"ol": "^10.7.0",
|
||||
"ol-mapbox-style": "^13.1.1",
|
||||
"pmtiles": "^4.3.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^19.2.7",
|
||||
"react": "^19.2.0",
|
||||
"react-accessible-accordion": "^5.0.1",
|
||||
"react-aria-menubutton": "^8.0.0",
|
||||
"react-aria-menubutton": "^7.0.3",
|
||||
"react-aria-modal": "^5.0.2",
|
||||
"react-collapse": "^5.1.1",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-i18next": "^17.0.8",
|
||||
"react-icons": "^5.7.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-i18next": "^16.3.3",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"reconnecting-websocket": "^4.4.0",
|
||||
"slugify": "^1.6.9",
|
||||
"slugify": "^1.6.6",
|
||||
"string-hash": "^1.1.3",
|
||||
"url": "^0.11.4"
|
||||
},
|
||||
@@ -98,12 +98,14 @@
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@cypress/code-coverage": "^3.14.7",
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
||||
"@playwright/test": "^1.61.1",
|
||||
"@stylistic/eslint-plugin": "^5.10.0",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"@shellygo/cypress-test-utils": "^6.0.4",
|
||||
"@stylistic/eslint-plugin": "^5.6.1",
|
||||
"@types/codemirror": "^5.60.17",
|
||||
"@types/color": "^4.2.1",
|
||||
"@types/color": "^4.2.0",
|
||||
"@types/cors": "^2.8.19",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/geojson": "^7946.0.16",
|
||||
@@ -115,7 +117,7 @@
|
||||
"@types/lodash.isequal": "^4.5.8",
|
||||
"@types/lodash.throttle": "^4.1.9",
|
||||
"@types/randomcolor": "^0.5.9",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-aria-menubutton": "^6.2.14",
|
||||
"@types/react-aria-modal": "^5.0.0",
|
||||
"@types/react-collapse": "^5.0.4",
|
||||
@@ -123,28 +125,29 @@
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/string-hash": "^1.1.3",
|
||||
"@types/wicg-file-system-access": "^2023.10.7",
|
||||
"@vitejs/plugin-react": "5.2",
|
||||
"@vitest/coverage-v8": "^4.1.10",
|
||||
"cors": "^2.8.6",
|
||||
"eslint": "^10.7.0",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"@vitest/coverage-v8": "^4.0.14",
|
||||
"cors": "^2.8.5",
|
||||
"cypress": "^15.6.0",
|
||||
"cypress-plugin-tab": "^1.0.5",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.3",
|
||||
"i18next-cli": "^1.66.2",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.23",
|
||||
"i18next-parser": "^9.3.0",
|
||||
"istanbul": "^0.4.5",
|
||||
"istanbul-lib-coverage": "^3.2.2",
|
||||
"nyc": "^18.0.0",
|
||||
"postcss": "^8.5.21",
|
||||
"postcss": "^8.5.6",
|
||||
"react-hot-loader": "^4.13.1",
|
||||
"sass": "^1.101.3",
|
||||
"stylelint": "^17.14.1",
|
||||
"stylelint-config-recommended-scss": "^17.0.1",
|
||||
"stylelint-scss": "^7.2.0",
|
||||
"typescript": "^6.0.3",
|
||||
"typescript-eslint": "^8.65.0",
|
||||
"uuid": "^14.0.1",
|
||||
"vite": "^7.3.2",
|
||||
"vite-plugin-istanbul": "^9.0.1",
|
||||
"vitest": "^4.1.10"
|
||||
"sass": "^1.94.2",
|
||||
"stylelint": "^16.26.0",
|
||||
"stylelint-config-recommended-scss": "^16.0.2",
|
||||
"stylelint-scss": "^6.12.1",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.48.0",
|
||||
"uuid": "^13.0.0",
|
||||
"vite": "^7.2.4",
|
||||
"vite-plugin-istanbul": "^7.2.1",
|
||||
"vitest": "^4.0.14"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import { defineConfig, devices } from "@playwright/test";
|
||||
|
||||
const isCI = !!process.env.CI;
|
||||
// When the app is already served elsewhere (e.g. the docker e2e job) set
|
||||
// E2E_NO_WEBSERVER=1 so Playwright does not start its own dev server.
|
||||
const useExternalServer = !!process.env.E2E_NO_WEBSERVER;
|
||||
const baseURL = process.env.E2E_BASE_URL ?? "http://localhost:8888/";
|
||||
|
||||
export default defineConfig({
|
||||
testDir: "./e2e",
|
||||
testMatch: "**/*.spec.ts",
|
||||
globalSetup: "./e2e/utils/e2e-setup.ts",
|
||||
globalTeardown: "./e2e/utils/e2e-teardown.ts",
|
||||
fullyParallel: true,
|
||||
forbidOnly: isCI,
|
||||
retries: isCI ? 2 : 0,
|
||||
reporter: isCI ? [["list"], ["html", { open: "never" }]] : "list",
|
||||
use: {
|
||||
baseURL,
|
||||
trace: "on-first-retry",
|
||||
},
|
||||
projects: [
|
||||
{
|
||||
name: "chromium",
|
||||
use: {
|
||||
...devices["Desktop Chrome"],
|
||||
launchOptions: {
|
||||
// Allow WebGL (maplibre) to fall back to software rendering in headless.
|
||||
args: [
|
||||
"--disable-gpu",
|
||||
"--enable-features=AllowSwiftShaderFallback,AllowSoftwareGLFallbackDueToCrashes",
|
||||
"--enable-unsafe-swiftshader",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
webServer: useExternalServer
|
||||
? undefined
|
||||
: {
|
||||
command: "npm run start",
|
||||
url: "http://localhost:8888/maputnik/",
|
||||
reuseExistingServer: !isCI,
|
||||
timeout: 120000,
|
||||
},
|
||||
});
|
||||
+25
-46
@@ -11,29 +11,29 @@ import {type Map, type LayerSpecification, type StyleSpecification, type Validat
|
||||
import {validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
|
||||
import { MapMaplibreGl } from "./MapMaplibreGl";
|
||||
import { MapOpenLayers } from "./MapOpenLayers";
|
||||
import { CodeEditor } from "./CodeEditor";
|
||||
import { LayerList } from "./LayerList";
|
||||
import { LayerEditor } from "./LayerEditor";
|
||||
import { AppToolbar, type MapState } from "./AppToolbar";
|
||||
import { AppLayout } from "./AppLayout";
|
||||
import { AppMessagePanel as MessagePanel } from "./AppMessagePanel";
|
||||
import MapMaplibreGl from "./MapMaplibreGl";
|
||||
import MapOpenLayers from "./MapOpenLayers";
|
||||
import CodeEditor from "./CodeEditor";
|
||||
import LayerList from "./LayerList";
|
||||
import LayerEditor from "./LayerEditor";
|
||||
import AppToolbar, { type MapState } from "./AppToolbar";
|
||||
import AppLayout from "./AppLayout";
|
||||
import MessagePanel from "./AppMessagePanel";
|
||||
|
||||
import { ModalSettings } from "./modals/ModalSettings";
|
||||
import { ModalExport } from "./modals/ModalExport";
|
||||
import { ModalSources } from "./modals/ModalSources";
|
||||
import { ModalOpen } from "./modals/ModalOpen";
|
||||
import { ModalShortcuts } from "./modals/ModalShortcuts";
|
||||
import { ModalDebug } from "./modals/ModalDebug";
|
||||
import { ModalGlobalState } from "./modals/ModalGlobalState";
|
||||
import ModalSettings from "./modals/ModalSettings";
|
||||
import ModalExport from "./modals/ModalExport";
|
||||
import ModalSources from "./modals/ModalSources";
|
||||
import ModalOpen from "./modals/ModalOpen";
|
||||
import ModalShortcuts from "./modals/ModalShortcuts";
|
||||
import ModalDebug from "./modals/ModalDebug";
|
||||
import ModalGlobalState from "./modals/ModalGlobalState";
|
||||
|
||||
import {downloadGlyphsMetadata, downloadSpriteMetadata} from "../libs/metadata";
|
||||
import { emptyStyle, getAccessToken, replaceAccessTokens } from "../libs/style";
|
||||
import style from "../libs/style";
|
||||
import { undoMessages, redoMessages } from "../libs/diffmessage";
|
||||
import { createStyleStore, type IStyleStore } from "../libs/store/style-store-factory";
|
||||
import { RevisionStore } from "../libs/revisions";
|
||||
import { LayerWatcher } from "../libs/layerwatcher";
|
||||
import LayerWatcher from "../libs/layerwatcher";
|
||||
import tokens from "../config/tokens.json";
|
||||
import isEqual from "lodash.isequal";
|
||||
import { type MapOptions } from "maplibre-gl";
|
||||
@@ -48,19 +48,19 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
|
||||
const matchesThunderforest = url.match(/\.thunderforest\.com/);
|
||||
const matchesLocationIQ = url.match(/\.locationiq\.com/);
|
||||
if (matchesTilehosting || matchesMaptiler) {
|
||||
const accessToken = getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
|
||||
const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
|
||||
if (accessToken) {
|
||||
return url.replace("{key}", accessToken);
|
||||
}
|
||||
}
|
||||
else if (matchesThunderforest) {
|
||||
const accessToken = getAccessToken("thunderforest", mapStyle, {allowFallback: true});
|
||||
const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true});
|
||||
if (accessToken) {
|
||||
return url.replace("{key}", accessToken);
|
||||
}
|
||||
}
|
||||
else if (matchesLocationIQ) {
|
||||
const accessToken = getAccessToken("locationiq", mapStyle, {allowFallback: true});
|
||||
const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true});
|
||||
if (accessToken) {
|
||||
return url.replace("{key}", accessToken);
|
||||
}
|
||||
@@ -99,7 +99,6 @@ type AppState = {
|
||||
lng: number,
|
||||
lat: number,
|
||||
},
|
||||
_from: "map" | "app"
|
||||
},
|
||||
maplibreGlDebugOptions: Partial<MapOptions> & {
|
||||
showTileBoundaries: boolean,
|
||||
@@ -123,7 +122,7 @@ type AppState = {
|
||||
fileHandle: FileSystemFileHandle | null
|
||||
};
|
||||
|
||||
export class App extends React.Component<any, AppState> {
|
||||
export default class App extends React.Component<any, AppState> {
|
||||
revisionStore: RevisionStore;
|
||||
styleStore: IStyleStore | null = null;
|
||||
layerWatcher: LayerWatcher;
|
||||
@@ -137,7 +136,7 @@ export class App extends React.Component<any, AppState> {
|
||||
this.state = {
|
||||
errors: [],
|
||||
infos: [],
|
||||
mapStyle: emptyStyle,
|
||||
mapStyle: style.emptyStyle,
|
||||
selectedLayerIndex: 0,
|
||||
sources: {},
|
||||
vectorLayers: {},
|
||||
@@ -149,7 +148,6 @@ export class App extends React.Component<any, AppState> {
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
},
|
||||
_from: "app"
|
||||
},
|
||||
isOpen: {
|
||||
settings: false,
|
||||
@@ -337,13 +335,6 @@ export class App extends React.Component<any, AppState> {
|
||||
...opts,
|
||||
};
|
||||
|
||||
|
||||
// Detect empty style
|
||||
const oldStyle = this.state.mapStyle;
|
||||
const isEmptySources = !oldStyle.sources || Object.keys(oldStyle.sources).length === 0;
|
||||
const isEmptyLayers = !oldStyle.layers || oldStyle.layers.length === 0;
|
||||
const isEmptyStyle = isEmptySources && isEmptyLayers;
|
||||
|
||||
// For the style object, find the urls that has "{key}" and insert the correct API keys
|
||||
// Without this, going from e.g. MapTiler to OpenLayers and back will lose the maptlier key.
|
||||
|
||||
@@ -450,7 +441,7 @@ export class App extends React.Component<any, AppState> {
|
||||
if (message) {
|
||||
try {
|
||||
const objPath = message.split(":")[0];
|
||||
// Errors can be deeply nested for example 'layers[0].filter[1][1][0]' we only care upto the property 'layers[0].filter'
|
||||
// Errors can be deply nested for example 'layers[0].filter[1][1][0]' we only care upto the property 'layers[0].filter'
|
||||
const unsetPath = objPath.match(/^\S+?\[\d+\]\.[^[]+/)![0];
|
||||
unset(dirtyMapStyle, unsetPath);
|
||||
}
|
||||
@@ -475,25 +466,15 @@ export class App extends React.Component<any, AppState> {
|
||||
this.saveStyle(newStyle);
|
||||
}
|
||||
|
||||
const zoom = newStyle?.zoom;
|
||||
const center = newStyle?.center;
|
||||
|
||||
this.setState({
|
||||
mapStyle: newStyle,
|
||||
dirtyMapStyle: dirtyMapStyle,
|
||||
mapView: isEmptyStyle && zoom && center ? {
|
||||
zoom: zoom,
|
||||
center: {
|
||||
lng: center[0],
|
||||
lat: center[1],
|
||||
},
|
||||
_from: "app"
|
||||
} : this.state.mapView,
|
||||
errors: mappedErrors,
|
||||
}, () => {
|
||||
this.fetchSources();
|
||||
this.setStateInUrl();
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
onUndo = () => {
|
||||
@@ -684,7 +665,6 @@ export class App extends React.Component<any, AppState> {
|
||||
lng: number,
|
||||
lat: number,
|
||||
},
|
||||
_from: "map" | "app"
|
||||
}) => {
|
||||
this.setState({
|
||||
mapView,
|
||||
@@ -696,9 +676,8 @@ export class App extends React.Component<any, AppState> {
|
||||
|
||||
const mapProps = {
|
||||
mapStyle: (dirtyMapStyle || mapStyle),
|
||||
mapView: this.state.mapView,
|
||||
replaceAccessTokens: (mapStyle: StyleSpecification) => {
|
||||
return replaceAccessTokens(mapStyle, {
|
||||
return style.replaceAccessTokens(mapStyle, {
|
||||
allowFallback: true
|
||||
});
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { ScrollContainer } from "./ScrollContainer";
|
||||
import ScrollContainer from "./ScrollContainer";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { IconContext } from "react-icons";
|
||||
|
||||
@@ -50,4 +50,5 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
|
||||
}
|
||||
}
|
||||
|
||||
export const AppLayout = withTranslation()(AppLayoutInternal);
|
||||
const AppLayout = withTranslation()(AppLayoutInternal);
|
||||
export default AppLayout;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { formatLayerId } from "../libs/format";
|
||||
import { type LayerSpecification, type StyleSpecification } from "maplibre-gl";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import {formatLayerId} from "../libs/format";
|
||||
import {type LayerSpecification, type StyleSpecification} from "maplibre-gl";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { type MappedError } from "../libs/definitions";
|
||||
|
||||
type AppMessagePanelInternalProps = {
|
||||
@@ -15,19 +15,21 @@ type AppMessagePanelInternalProps = {
|
||||
|
||||
class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalProps> {
|
||||
static defaultProps = {
|
||||
onLayerSelect: () => { },
|
||||
onLayerSelect: () => {},
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t, selectedLayerIndex } = this.props;
|
||||
const {t, selectedLayerIndex} = this.props;
|
||||
const errors = this.props.errors?.map((error, idx) => {
|
||||
let content;
|
||||
if (error.parsed && error.parsed.type === "layer") {
|
||||
const { parsed } = error;
|
||||
const {parsed} = error;
|
||||
const layerId = this.props.mapStyle?.layers[parsed.data.index].id;
|
||||
content = (
|
||||
<>
|
||||
{t("Layer")} <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
|
||||
<Trans t={t}>
|
||||
Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
|
||||
</Trans>
|
||||
{selectedLayerIndex !== parsed.data.index &&
|
||||
<>
|
||||
—
|
||||
@@ -45,13 +47,13 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
|
||||
else {
|
||||
content = error.message;
|
||||
}
|
||||
return <p key={"error-" + idx} className="maputnik-message-panel-error">
|
||||
return <p key={"error-"+idx} className="maputnik-message-panel-error">
|
||||
{content}
|
||||
</p>;
|
||||
});
|
||||
|
||||
const infos = this.props.infos?.map((m, i) => {
|
||||
return <p key={"info-" + i}>{m}</p>;
|
||||
return <p key={"info-"+i}>{m}</p>;
|
||||
});
|
||||
|
||||
return <div className="maputnik-message-panel">
|
||||
@@ -61,4 +63,5 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
|
||||
}
|
||||
}
|
||||
|
||||
export const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
|
||||
const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
|
||||
export default AppMessagePanel;
|
||||
|
||||
@@ -306,4 +306,5 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
|
||||
}
|
||||
}
|
||||
|
||||
export const AppToolbar = withTranslation()(AppToolbarInternal);
|
||||
const AppToolbar = withTranslation()(AppToolbarInternal);
|
||||
export default AppToolbar;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, {type CSSProperties, type PropsWithChildren, type SyntheticEvent} from "react";
|
||||
import classnames from "classnames";
|
||||
import { FieldDocLabel } from "./FieldDocLabel";
|
||||
import { Doc } from "./Doc";
|
||||
import FieldDocLabel from "./FieldDocLabel";
|
||||
import Doc from "./Doc";
|
||||
|
||||
export type BlockProps = PropsWithChildren & {
|
||||
"data-wd-key"?: string
|
||||
@@ -19,7 +19,7 @@ type BlockState = {
|
||||
};
|
||||
|
||||
/** Wrap a component with a label */
|
||||
export class Block extends React.Component<BlockProps, BlockState> {
|
||||
export default class Block extends React.Component<BlockProps, BlockState> {
|
||||
_blockEl: HTMLDivElement | null = null;
|
||||
|
||||
constructor (props: BlockProps) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { InputJson } from "./InputJson";
|
||||
import InputJson from "./InputJson";
|
||||
import React from "react";
|
||||
import { withTranslation, type WithTranslation } from "react-i18next";
|
||||
import { type StyleSpecification } from "maplibre-gl";
|
||||
@@ -19,9 +19,10 @@ const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
className={"maputnik-code-editor"}
|
||||
withScroll={true}
|
||||
/>;
|
||||
</>;
|
||||
};
|
||||
|
||||
export const CodeEditor = withTranslation()(CodeEditorInternal);
|
||||
const CodeEditor = withTranslation()(CodeEditorInternal);
|
||||
|
||||
export default CodeEditor;
|
||||
|
||||
@@ -9,7 +9,7 @@ type CollapseProps = {
|
||||
};
|
||||
|
||||
|
||||
export class Collapse extends React.Component<CollapseProps> {
|
||||
export default class Collapse extends React.Component<CollapseProps> {
|
||||
static defaultProps = {
|
||||
isActive: true
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ type CollapserProps = {
|
||||
style?: object
|
||||
};
|
||||
|
||||
export class Collapser extends React.Component<CollapserProps> {
|
||||
export default class Collapser extends React.Component<CollapserProps> {
|
||||
render() {
|
||||
const iconStyle = {
|
||||
width: 20,
|
||||
|
||||
@@ -23,7 +23,7 @@ type DocProps = {
|
||||
}
|
||||
};
|
||||
|
||||
export class Doc extends React.Component<DocProps> {
|
||||
export default class Doc extends React.Component<DocProps> {
|
||||
render () {
|
||||
const {fieldSpec} = this.props;
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { InputArray, type InputArrayProps } from "./InputArray";
|
||||
import { Fieldset } from "./Fieldset";
|
||||
import InputArray, { type InputArrayProps } from "./InputArray";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
type FieldArrayProps = InputArrayProps & {
|
||||
name?: string
|
||||
@@ -8,10 +8,12 @@ type FieldArrayProps = InputArrayProps & {
|
||||
}
|
||||
};
|
||||
|
||||
export const FieldArray: React.FC<FieldArrayProps> = (props) => {
|
||||
const FieldArray: React.FC<FieldArrayProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputArray {...props} />
|
||||
</Fieldset>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldArray;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Block } from "./Block";
|
||||
import { InputAutocomplete, type InputAutocompleteProps } from "./InputAutocomplete";
|
||||
import Block from "./Block";
|
||||
import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
|
||||
|
||||
|
||||
type FieldAutocompleteProps = InputAutocompleteProps & {
|
||||
@@ -7,10 +7,12 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
|
||||
const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label}>
|
||||
<InputAutocomplete {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldAutocomplete;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Block } from "./Block";
|
||||
import { InputCheckbox, type InputCheckboxProps } from "./InputCheckbox";
|
||||
import Block from "./Block";
|
||||
import InputCheckbox, {type InputCheckboxProps} from "./InputCheckbox";
|
||||
|
||||
|
||||
type FieldCheckboxProps = InputCheckboxProps & {
|
||||
@@ -7,10 +7,12 @@ type FieldCheckboxProps = InputCheckboxProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
|
||||
const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label}>
|
||||
<InputCheckbox {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldCheckbox;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Block } from "./Block";
|
||||
import { InputColor, type InputColorProps } from "./InputColor";
|
||||
import Block from "./Block";
|
||||
import InputColor, {type InputColorProps} from "./InputColor";
|
||||
|
||||
|
||||
type FieldColorProps = InputColorProps & {
|
||||
@@ -10,10 +10,12 @@ type FieldColorProps = InputColorProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldColor: React.FC<FieldColorProps> = (props) => {
|
||||
const FieldColor: React.FC<FieldColorProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputColor {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldColor;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
import { Block } from "./Block";
|
||||
import { InputString } from "./InputString";
|
||||
import Block from "./Block";
|
||||
import InputString from "./InputString";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldCommentInternalProps = {
|
||||
@@ -36,4 +36,5 @@ const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const FieldComment = withTranslation()(FieldCommentInternal);
|
||||
const FieldComment = withTranslation()(FieldCommentInternal);
|
||||
export default FieldComment;
|
||||
|
||||
@@ -10,7 +10,7 @@ type FieldDocLabelProps = {
|
||||
};
|
||||
|
||||
|
||||
export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
|
||||
const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const onToggleDoc = (state: boolean) => {
|
||||
@@ -49,3 +49,5 @@ export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
|
||||
}
|
||||
return <div />;
|
||||
};
|
||||
|
||||
export default FieldDocLabel;
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray";
|
||||
import { Fieldset } from "./Fieldset";
|
||||
import InputDynamicArray, {type InputDynamicArrayProps} from "./InputDynamicArray";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
type FieldDynamicArrayProps = InputDynamicArrayProps & {
|
||||
name?: string;
|
||||
fieldSpec?: {
|
||||
value?: string;
|
||||
}
|
||||
name?: string
|
||||
};
|
||||
|
||||
export const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
|
||||
const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label}>
|
||||
<InputDynamicArray {...props} />
|
||||
</Fieldset>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldDynamicArray;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { InputEnum, type InputEnumProps } from "./InputEnum";
|
||||
import { Fieldset } from "./Fieldset";
|
||||
import InputEnum, {type InputEnumProps} from "./InputEnum";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
|
||||
type FieldEnumProps = InputEnumProps & {
|
||||
@@ -10,10 +10,12 @@ type FieldEnumProps = InputEnumProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldEnum: React.FC<FieldEnumProps> = (props) => {
|
||||
const FieldEnum: React.FC<FieldEnumProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputEnum {...props} />
|
||||
</Fieldset>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldEnum;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
import { SpecProperty } from "./SpecProperty";
|
||||
import { DataProperty, type Stop } from "./DataProperty";
|
||||
import { ZoomProperty } from "./ZoomProperty";
|
||||
import { ExpressionProperty } from "./ExpressionProperty";
|
||||
import SpecProperty from "./_SpecProperty";
|
||||
import DataProperty, { type Stop } from "./_DataProperty";
|
||||
import ZoomProperty from "./_ZoomProperty";
|
||||
import ExpressionProperty from "./_ExpressionProperty";
|
||||
import {function as styleFunction} from "@maplibre/maplibre-gl-style-spec";
|
||||
import {findDefaultFromSpec} from "../libs/spec-helper";
|
||||
import { type MappedLayerErrors } from "../libs/definitions";
|
||||
@@ -128,7 +128,7 @@ type FieldFunctionProps = {
|
||||
/** Supports displaying spec field for zoom function objects
|
||||
* https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
|
||||
*/
|
||||
export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
const [dataType, setDataType] = React.useState(
|
||||
getDataType(props.value, props.fieldSpec)
|
||||
);
|
||||
@@ -402,3 +402,5 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldFunction;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import { Block } from "./Block";
|
||||
import { InputString } from "./InputString";
|
||||
import Block from "./Block";
|
||||
import InputString from "./InputString";
|
||||
|
||||
type FieldIdProps = {
|
||||
value: string
|
||||
@@ -10,7 +10,7 @@ type FieldIdProps = {
|
||||
error?: {message: string}
|
||||
};
|
||||
|
||||
export const FieldId: React.FC<FieldIdProps> = (props) => {
|
||||
const FieldId: React.FC<FieldIdProps> = (props) => {
|
||||
return (
|
||||
<Block label="ID" fieldSpec={latest.layer.id}
|
||||
data-wd-key={props.wdKey}
|
||||
@@ -24,3 +24,5 @@ export const FieldId: React.FC<FieldIdProps> = (props) => {
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldId;
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { InputJson, type InputJsonProps } from "./InputJson";
|
||||
import InputJson, {type InputJsonProps} from "./InputJson";
|
||||
|
||||
|
||||
type FieldJsonProps = InputJsonProps & {};
|
||||
|
||||
|
||||
export const FieldJson: React.FC<FieldJsonProps> = (props) => {
|
||||
const FieldJson: React.FC<FieldJsonProps> = (props) => {
|
||||
return <InputJson {...props} />;
|
||||
};
|
||||
|
||||
export default FieldJson;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import { Block } from "./Block";
|
||||
import { InputNumber } from "./InputNumber";
|
||||
import Block from "./Block";
|
||||
import InputNumber from "./InputNumber";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldMaxZoomInternalProps = {
|
||||
@@ -31,4 +31,5 @@ const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
|
||||
const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
|
||||
export default FieldMaxZoom;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import { Block } from "./Block";
|
||||
import { InputNumber } from "./InputNumber";
|
||||
import Block from "./Block";
|
||||
import InputNumber from "./InputNumber";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldMinZoomInternalProps = {
|
||||
@@ -31,4 +31,5 @@ const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
|
||||
const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
|
||||
export default FieldMinZoom;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { InputMultiInput, type InputMultiInputProps } from "./InputMultiInput";
|
||||
import { Fieldset } from "./Fieldset";
|
||||
import InputMultiInput, {type InputMultiInputProps} from "./InputMultiInput";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
|
||||
type FieldMultiInputProps = InputMultiInputProps & {
|
||||
@@ -7,10 +7,12 @@ type FieldMultiInputProps = InputMultiInputProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
|
||||
const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label}>
|
||||
<InputMultiInput {...props} />
|
||||
</Fieldset>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldMultiInput;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { InputNumber, type InputNumberProps } from "./InputNumber";
|
||||
import { Block } from "./Block";
|
||||
import InputNumber, {type InputNumberProps} from "./InputNumber";
|
||||
import Block from "./Block";
|
||||
|
||||
|
||||
type FieldNumberProps = InputNumberProps & {
|
||||
@@ -10,10 +10,12 @@ type FieldNumberProps = InputNumberProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldNumber: React.FC<FieldNumberProps> = (props) => {
|
||||
const FieldNumber: React.FC<FieldNumberProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputNumber {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldNumber;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Block } from "./Block";
|
||||
import { InputSelect, type InputSelectProps } from "./InputSelect";
|
||||
import Block from "./Block";
|
||||
import InputSelect, {type InputSelectProps} from "./InputSelect";
|
||||
|
||||
|
||||
type FieldSelectProps = InputSelectProps & {
|
||||
@@ -10,10 +10,12 @@ type FieldSelectProps = InputSelectProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldSelect: React.FC<FieldSelectProps> = (props) => {
|
||||
const FieldSelect: React.FC<FieldSelectProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputSelect {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldSelect;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import { Block } from "./Block";
|
||||
import { InputAutocomplete } from "./InputAutocomplete";
|
||||
import Block from "./Block";
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldSourceInternalProps = {
|
||||
@@ -38,4 +38,5 @@ const FieldSourceInternal: React.FC<FieldSourceInternalProps> = ({
|
||||
};
|
||||
|
||||
|
||||
export const FieldSource = withTranslation()(FieldSourceInternal);
|
||||
const FieldSource = withTranslation()(FieldSourceInternal);
|
||||
export default FieldSource;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
|
||||
import {latest} from "@maplibre/maplibre-gl-style-spec";
|
||||
import { Block } from "./Block";
|
||||
import { InputAutocomplete } from "./InputAutocomplete";
|
||||
import Block from "./Block";
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldSourceLayerInternalProps = {
|
||||
@@ -35,4 +35,5 @@ const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
|
||||
const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
|
||||
export default FieldSourceLayer;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Block, type BlockProps } from "./Block";
|
||||
import { InputSpec, type FieldSpecType, type InputSpecProps } from "./InputSpec";
|
||||
import { Fieldset, type FieldsetProps } from "./Fieldset";
|
||||
import Block, { type BlockProps } from "./Block";
|
||||
import InputSpec, { type FieldSpecType, type InputSpecProps } from "./InputSpec";
|
||||
import Fieldset, { type FieldsetProps } from "./Fieldset";
|
||||
|
||||
function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[] }): typeof Fieldset | typeof Block {
|
||||
switch(fieldSpec.type) {
|
||||
@@ -36,7 +36,7 @@ function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[
|
||||
|
||||
export type FieldSpecProps = InputSpecProps & BlockProps & FieldsetProps;
|
||||
|
||||
export const FieldSpec: React.FC<FieldSpecProps> = (props) => {
|
||||
const FieldSpec: React.FC<FieldSpecProps> = (props) => {
|
||||
const TypeBlock = getElementFromType(props.fieldSpec!);
|
||||
|
||||
return (
|
||||
@@ -45,3 +45,5 @@ export const FieldSpec: React.FC<FieldSpecProps> = (props) => {
|
||||
</TypeBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldSpec;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Block } from "./Block";
|
||||
import { InputString, type InputStringProps } from "./InputString";
|
||||
import Block from "./Block";
|
||||
import InputString, {type InputStringProps} from "./InputString";
|
||||
|
||||
type FieldStringProps = InputStringProps & {
|
||||
name?: string
|
||||
@@ -9,10 +9,12 @@ type FieldStringProps = InputStringProps & {
|
||||
}
|
||||
};
|
||||
|
||||
export const FieldString: React.FC<FieldStringProps> = (props) => {
|
||||
const FieldString: React.FC<FieldStringProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputString {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldString;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
import {v8} from "@maplibre/maplibre-gl-style-spec";
|
||||
import { Block } from "./Block";
|
||||
import { InputSelect } from "./InputSelect";
|
||||
import { InputString } from "./InputString";
|
||||
import Block from "./Block";
|
||||
import InputSelect from "./InputSelect";
|
||||
import InputString from "./InputString";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { startCase } from "lodash";
|
||||
|
||||
@@ -43,4 +43,5 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const FieldType = withTranslation()(FieldTypeInternal);
|
||||
const FieldType = withTranslation()(FieldTypeInternal);
|
||||
export default FieldType;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { InputUrl, type FieldUrlProps as InputUrlProps } from "./InputUrl";
|
||||
import { Block } from "./Block";
|
||||
import InputUrl, {type FieldUrlProps as InputUrlProps} from "./InputUrl";
|
||||
import Block from "./Block";
|
||||
|
||||
|
||||
type FieldUrlProps = InputUrlProps & {
|
||||
@@ -10,10 +10,12 @@ type FieldUrlProps = InputUrlProps & {
|
||||
};
|
||||
|
||||
|
||||
export const FieldUrl: React.FC<FieldUrlProps> = (props) => {
|
||||
const FieldUrl: React.FC<FieldUrlProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputUrl {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldUrl;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { type PropsWithChildren, type ReactElement } from "react";
|
||||
import classnames from "classnames";
|
||||
import { FieldDocLabel } from "./FieldDocLabel";
|
||||
import { Doc } from "./Doc";
|
||||
import { generateUniqueId } from "../libs/document-uid";
|
||||
import FieldDocLabel from "./FieldDocLabel";
|
||||
import Doc from "./Doc";
|
||||
import generateUniqueId from "../libs/document-uid";
|
||||
|
||||
export type FieldsetProps = PropsWithChildren & {
|
||||
label?: string,
|
||||
@@ -12,7 +12,7 @@ export type FieldsetProps = PropsWithChildren & {
|
||||
};
|
||||
|
||||
|
||||
export const Fieldset: React.FC<FieldsetProps> = (props) => {
|
||||
const Fieldset: React.FC<FieldsetProps> = (props) => {
|
||||
const [showDoc, setShowDoc] = React.useState(false);
|
||||
const labelId = React.useRef(generateUniqueId("fieldset_label_"));
|
||||
|
||||
@@ -49,3 +49,5 @@ export const Fieldset: React.FC<FieldsetProps> = (props) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Fieldset;
|
||||
|
||||
@@ -7,13 +7,13 @@ import {migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
|
||||
import {combiningFilterOps} from "../libs/filterops";
|
||||
import { InputSelect } from "./InputSelect";
|
||||
import { Block } from "./Block";
|
||||
import { SingleFilterEditor } from "./SingleFilterEditor";
|
||||
import { FilterEditorBlock } from "./FilterEditorBlock";
|
||||
import { InputButton } from "./InputButton";
|
||||
import { Doc } from "./Doc";
|
||||
import { ExpressionProperty } from "./ExpressionProperty";
|
||||
import InputSelect from "./InputSelect";
|
||||
import Block from "./Block";
|
||||
import SingleFilterEditor from "./SingleFilterEditor";
|
||||
import FilterEditorBlock from "./FilterEditorBlock";
|
||||
import InputButton from "./InputButton";
|
||||
import Doc from "./Doc";
|
||||
import ExpressionProperty from "./_ExpressionProperty";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import type { MappedLayerErrors, StyleSpecificationWithId } from "../libs/definitions";
|
||||
|
||||
@@ -215,7 +215,6 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
onClick={this.makeExpression}
|
||||
title={t("Convert to expression")}
|
||||
className="maputnik-make-zoom-function"
|
||||
data-wd-key="filter-convert-to-expression"
|
||||
>
|
||||
<TbMathFunction />
|
||||
</InputButton>
|
||||
@@ -249,7 +248,6 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
fieldSpec={fieldSpec}
|
||||
label={t("Filter")}
|
||||
action={actions}
|
||||
data-wd-key="filter-combining-operator"
|
||||
>
|
||||
<InputSelect
|
||||
value={combiningOp}
|
||||
@@ -318,4 +316,5 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
}
|
||||
}
|
||||
|
||||
export const FilterEditor = withTranslation()(FilterEditorInternal);
|
||||
const FilterEditor = withTranslation()(FilterEditorInternal);
|
||||
export default FilterEditor;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { type PropsWithChildren } from "react";
|
||||
import { InputButton } from "./InputButton";
|
||||
import InputButton from "./InputButton";
|
||||
import {MdDelete} from "react-icons/md";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
@@ -27,4 +27,5 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
|
||||
}
|
||||
}
|
||||
|
||||
export const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
|
||||
const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
|
||||
export default FilterEditorBlock;
|
||||
|
||||
@@ -13,7 +13,7 @@ type IconLayerProps = {
|
||||
className?: string
|
||||
};
|
||||
|
||||
export const IconLayer: React.FC<IconLayerProps> = (props) => {
|
||||
const IconLayer: React.FC<IconLayerProps> = (props) => {
|
||||
const iconProps = { style: props.style };
|
||||
switch(props.type) {
|
||||
case "fill-extrusion": return <IoMdCube {...iconProps} />;
|
||||
@@ -29,3 +29,5 @@ export const IconLayer: React.FC<IconLayerProps> = (props) => {
|
||||
default: return <MdPriorityHigh {...iconProps} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default IconLayer;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import { InputString } from "./InputString";
|
||||
import { InputNumber } from "./InputNumber";
|
||||
import InputString from "./InputString";
|
||||
import InputNumber from "./InputNumber";
|
||||
|
||||
export type InputArrayProps = {
|
||||
value: (string | number | undefined)[]
|
||||
@@ -17,7 +17,7 @@ type InputArrayState = {
|
||||
initialPropsValue: unknown[]
|
||||
};
|
||||
|
||||
export class InputArray extends React.Component<InputArrayProps, InputArrayState> {
|
||||
export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
|
||||
static defaultProps = {
|
||||
value: [],
|
||||
default: [],
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
import { mount } from "cypress/react";
|
||||
|
||||
const fruits = ["apple", "banana", "cherry"];
|
||||
|
||||
describe("<InputAutocomplete />", () => {
|
||||
it("filters options when typing", () => {
|
||||
mount(
|
||||
<InputAutocomplete aria-label="Fruit" options={fruits.map(f => [f, f])} />
|
||||
);
|
||||
cy.get("input").focus();
|
||||
cy.get(".maputnik-autocomplete-menu-item").should("have.length", 3);
|
||||
cy.get("input").type("ch");
|
||||
cy.get(".maputnik-autocomplete-menu-item").should("have.length", 1).and("contain", "cherry");
|
||||
cy.get(".maputnik-autocomplete-menu-item").click();
|
||||
cy.get("input").should("have.value", "cherry");
|
||||
});
|
||||
});
|
||||
@@ -11,7 +11,7 @@ export type InputAutocompleteProps = {
|
||||
"aria-label"?: string
|
||||
};
|
||||
|
||||
export function InputAutocomplete({
|
||||
export default function InputAutocomplete({
|
||||
value,
|
||||
options = [],
|
||||
onChange = () => {},
|
||||
|
||||
@@ -14,7 +14,7 @@ type InputButtonProps = {
|
||||
title?: string
|
||||
};
|
||||
|
||||
export class InputButton extends React.Component<InputButtonProps> {
|
||||
export default class InputButton extends React.Component<InputButtonProps> {
|
||||
render() {
|
||||
return <button
|
||||
id={this.props.id}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user