Resolves#803
This is an initial commit to allow migrating to typescript bit by bit.
It introduces vite.
It removes all the webpack configuration (which I have no clue what all
the profiling are needed for, and couldn't find anything in the readme).
It also changes a single file from javascript to typescript:
`urlopen.js` -> `urlopen.ts`
Which was done manually, later on I'll see if I can automate most of the
migration.
For now, everything seems to work as expected.
I also upgrades storybook to use vite and renames the stories to jsx (I
honestly don't know why this complexity is needed here, but I'll keep it
for now).
cc: @damianstasik
This does the following:
1. Moves the WDIO code from javascript to typescript
2. Moves to use files that are `cy.ts` instead of `index.js`
3. Replace e2e to use cypress
4. Introduce back some skipped tests
This is in continue to the conversation here:
https://github.com/HarelM/editor/pull/3
Before:
```
"spec" Reporter:
------------------------------------------------------------------
[chrome 120.0.6099.71 linux #0-0] Running: chrome (v120.0.6099.71) on linux
[chrome 120.0.6099.71 linux #0-0] Session ID: ee9a87bcfce007ac7721929c6e6234d0
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] » /test/functional/index.js
[chrome 120.0.6099.71 linux #0-0] maputnik
[chrome 120.0.6099.71 linux #0-0] history
[chrome 120.0.6099.71 linux #0-0] - undo/redo
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] layers
[chrome 120.0.6099.71 linux #0-0] ops
[chrome 120.0.6099.71 linux #0-0] ✓ delete
[chrome 120.0.6099.71 linux #0-0] ✓ duplicate
[chrome 120.0.6099.71 linux #0-0] ✓ hide
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] background
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] modify
[chrome 120.0.6099.71 linux #0-0] layer
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] ✓ id
[chrome 120.0.6099.71 linux #0-0] ✓ min-zoom
[chrome 120.0.6099.71 linux #0-0] ✓ max-zoom
[chrome 120.0.6099.71 linux #0-0] ✓ comments
[chrome 120.0.6099.71 linux #0-0] - color
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] filter
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] - compound filter
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] paint
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] - color
[chrome 120.0.6099.71 linux #0-0] - pattern
[chrome 120.0.6099.71 linux #0-0] - opacity
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] json-editor
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] - modify
[chrome 120.0.6099.71 linux #0-0] - parse error
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] fill
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0] - change source
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] line
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0] - groups
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] symbol
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] raster
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] circle
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] fill extrusion
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] groups
[chrome 120.0.6099.71 linux #0-0] ✓ simple
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] map
[chrome 120.0.6099.71 linux #0-0] zoom level
[chrome 120.0.6099.71 linux #0-0] - via url
[chrome 120.0.6099.71 linux #0-0] - via map controls
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] modals
[chrome 120.0.6099.71 linux #0-0] open
[chrome 120.0.6099.71 linux #0-0] ✓ close
[chrome 120.0.6099.71 linux #0-0] - upload
[chrome 120.0.6099.71 linux #0-0] ✓ load from url
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] shortcuts
[chrome 120.0.6099.71 linux #0-0] ✓ open/close
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] export
[chrome 120.0.6099.71 linux #0-0] ✓ close
[chrome 120.0.6099.71 linux #0-0] - download
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] sources
[chrome 120.0.6099.71 linux #0-0] - active sources
[chrome 120.0.6099.71 linux #0-0] - public source
[chrome 120.0.6099.71 linux #0-0] - add new source
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] inspect
[chrome 120.0.6099.71 linux #0-0] ✓ toggle
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] style settings
[chrome 120.0.6099.71 linux #0-0] ✓ name
[chrome 120.0.6099.71 linux #0-0] ✓ owner
[chrome 120.0.6099.71 linux #0-0] ✓ sprite url
[chrome 120.0.6099.71 linux #0-0] ✓ glyphs url
[chrome 120.0.6099.71 linux #0-0] ✓ maptiler access token
[chrome 120.0.6099.71 linux #0-0] ✓ thunderforest access token
[chrome 120.0.6099.71 linux #0-0] ✓ style renderer
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] sources
[chrome 120.0.6099.71 linux #0-0] - toggle
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] screenshots
[chrome 120.0.6099.71 linux #0-0] ✓ front_page
[chrome 120.0.6099.71 linux #0-0] ✓ open
[chrome 120.0.6099.71 linux #0-0] ✓ export
[chrome 120.0.6099.71 linux #0-0] ✓ sources
[chrome 120.0.6099.71 linux #0-0] ✓ style settings
[chrome 120.0.6099.71 linux #0-0] ✓ inspect
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] accessibility
[chrome 120.0.6099.71 linux #0-0] skip links
[chrome 120.0.6099.71 linux #0-0] ✓ skip link to layer list
[chrome 120.0.6099.71 linux #0-0] ✓ skip link to layer editor
[chrome 120.0.6099.71 linux #0-0] ✓ skip link to map view
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] keyboard
[chrome 120.0.6099.71 linux #0-0] shortcuts
[chrome 120.0.6099.71 linux #0-0] ✓ ESC should unfocus
[chrome 120.0.6099.71 linux #0-0] ✓ '?' should show shortcuts modal
[chrome 120.0.6099.71 linux #0-0] ✓ 'o' should show open modal
[chrome 120.0.6099.71 linux #0-0] ✓ 'e' should show export modal
[chrome 120.0.6099.71 linux #0-0] ✓ 'd' should show sources modal
[chrome 120.0.6099.71 linux #0-0] ✓ 's' should show settings modal
[chrome 120.0.6099.71 linux #0-0] - 'i' should change map to inspect mode
[chrome 120.0.6099.71 linux #0-0] ✓ 'm' should focus map
[chrome 120.0.6099.71 linux #0-0] ✓ '!' should show debug modal
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] 44 passing (58.8s)
[chrome 120.0.6099.71 linux #0-0] 23 skipped
```
After:
```
accessibility
skip links
- skip link to layer list
- skip link to layer editor
- skip link to map view
history
✓ undo/redo (4894ms)
keyboard
shortcuts
✓ ESC should unfocus (1912ms)
✓ '?' should show shortcuts modal (458ms)
✓ 'o' should show open modal (710ms)
✓ 'e' should show export modal (692ms)
✓ 'd' should show sources modal (588ms)
✓ 's' should show settings modal (894ms)
✓ 'i' should change map to inspect mode (804ms)
✓ 'm' should focus map (837ms)
✓ '!' should show debug modal (607ms)
layers
ops
✓ delete (4313ms)
✓ duplicate (1780ms)
✓ hide (1862ms)
background
✓ add (1675ms)
modify
layer
- expand/collapse
✓ id (3735ms)
✓ min-zoom (2209ms)
✓ max-zoom (2127ms)
✓ comments (2515ms)
✓ color (2022ms)
filter
- expand/collapse
- compound filter
paint
- expand/collapse
- color
- pattern
- opacity
json-editor
- expand/collapse
- modify
- parse error
fill
✓ add (1831ms)
- change source
line
✓ add (1844ms)
✓ groups (687ms)
symbol
✓ add (2035ms)
raster
✓ add (1814ms)
circle
✓ add (1867ms)
fill extrusion
✓ add (1963ms)
groups
✓ simple (2653ms)
map
zoom level
✓ via url (2279ms)
✓ via map controls (733ms)
modals
open
✓ close (2519ms)
- upload
✓ load from url (1557ms)
shortcuts
✓ open/close (1136ms)
export
✓ close (755ms)
- download
sources
- active sources
- public source
- add new source
inspect
✓ toggle (1020ms)
style settings
✓ name (1085ms)
✓ owner (1060ms)
✓ sprite url (1214ms)
✓ glyphs url (1553ms)
✓ maptiler access token (1111ms)
✓ thunderforest access token (1102ms)
✓ style renderer (922ms)
sources
- toggle
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✔ accessibility.cy.ts 52ms 3 - - 3 - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ history.cy.ts 00:06 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ keyboard.cy.ts 00:10 9 9 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ layers.cy.ts 00:39 28 17 - 11 - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ map.cy.ts 00:04 2 2 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ modals.cy.ts 00:16 18 12 - 6 - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! 01:18 61 41 - 20 -
```
---------
Co-authored-by: Yuri Astrakhan <yuriastrakhan@gmail.com>
It required converting mocha tests code into async since [@wdio/sync is
deprecated](https://webdriver.io/docs/sync-vs-async/) starting with
node v16.
It removed the dependency on fibers and on [node-gyp + python](https://
webdriver.io/docs/sync-vs-async/#common-issues-in-sync-mode) indirectly
though which is a great thing.
Also moved away from node-sass to sass since [node-sass is deprecated]
(https://sass-lang.com/blog/libsass-is-deprecated).
- Moved all components into a single directory like nextjs
- Made component names consistent with each other
- Made component names consistent with their export class names
- Added storybook for a few components with the aim to extend this further.
