Add Svelte Example #2101

gregmalcolm · 2020-02-04T06:08:02Z

Why add this app?

Svelte is making big waves this year. No 2 for "Satisfaction" and No 1 for "Interest" in this years State of JS report for Frameworks:
https://2019.stateofjs.com/front-end-frameworks/

In a nutshell: Svelte is unusual is that it's a Reactive Framework that compiles to efficient JS instead of using a virtual DOM.

The test coverage is good.
All the Cyprus tests pass
All the Mocha tests pass expect for 3 "Mark as Completed" tests which also fail for Vue and React. I suspect a local issue because I'm using Chromedriver v79.
I have included Jest unit tests too. I'll suffix test reports at the end.
I've tried to adhere to coding guidelines. JSHint passes for js/testing folders.

Where does Svelte fit in?

In this PR I've set up the example for "Lab". Ultimately I think it would fit in with the "Compiles to Javascript" section.
I marked it as "has a router" but I'm just using Director.

** Test Reports **

Cyprus:

$ yarn run cy:run
yarn run v1.12.3
$ bin-up cypress run --project ../.. --env framework=svelte

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.8.2                                                                              │
  │ Browser:    Electron 78 (headless)                                                             │
  │ Specs:      1 found (spec.js)                                                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  spec.js                                                                         (1 of 1)


  TodoMVC - svelte
    When page is initially opened
      ✓ should focus on the todo input field (239ms)
    No Todos
      ✓ starts with nothing (124ms)
      ✓ should hide #main and #footer (115ms)
    New Todo
      ✓ should allow me to add todo items (646ms)
      ✓ should clear text input field when an item is added (356ms)
      ✓ should append new items to the bottom of the list (1022ms)
      ✓ should trim text input (467ms)
      ✓ should show #main and #footer when items added (359ms)
    Mark all as completed
      ✓ should allow me to mark all items as completed (1057ms)
      ✓ should allow me to clear the complete state of all items (1120ms)
      ✓ complete all checkbox should update state when items are completed / cleared (1166ms)
    Item
      ✓ should allow me to mark items as complete (738ms)
      ✓ should allow me to un-mark items as complete (736ms)
      ✓ should allow me to edit an item (1453ms)
    Editing
      ✓ should hide other controls when editing (1032ms)
      ✓ should save edits on blur (1457ms)
      ✓ should trim entered text (1484ms)
      ✓ should remove the item if an empty text string was entered (1213ms)
      ✓ should cancel edits on escape (1203ms)
    Counter
      ✓ should display the current number of todo items (561ms)
    Clear completed button
      ✓ should display the correct text (1002ms)
      ✓ should remove completed items when clicked (1077ms)
      ✓ should be hidden when there are no items that are completed (1084ms)
    Persistence
      ✓ should persist its data (715ms)
    Routing
      ✓ should allow me to display active items (1122ms)
      ✓ should respect the back button (1519ms)
      ✓ should allow me to display completed items (1137ms)
      ✓ should allow me to display all items (1273ms)
      ✓ should highlight the currently applied filter (1078ms)


  29 passing (27s)

Mocha:

$ npm run test -- --framework=svelte

> todomvc-browser-tests@ test /Users/gregmalcolm/git/todomvc/tests
> mocha allTests.js --no-timeouts --reporter spec "--framework=svelte"



(node:66636) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
  TodoMVC - svelte
    When page is initially opened
      ✓ should focus on the todo input field
    No Todos
      ✓ should hide #main and #footer (311ms)
    New Todo
      ✓ should allow me to add todo items (314ms)
      ✓ should clear text input field when an item is added (163ms)
      ✓ should append new items to the bottom of the list (340ms)
      ✓ should trim text input (164ms)
      ✓ should show #main and #footer when items added (174ms)
    Mark all as completed
      1) should allow me to mark all items as completed
      ✓ should correctly update the complete all checked state (154ms)
      2) should allow me to clear the completion state of all items
      3) complete all checkbox should update state when items are completed / cleared
    Item
      ✓ should allow me to mark items as complete (342ms)
      ✓ should allow me to un-mark items as complete (308ms)
    Editing
      ✓ should focus the input
      ✓ should hide other controls when editing
      ✓ should save edits on enter (140ms)
      ✓ should save edits on blur (176ms)
      ✓ should trim entered text (149ms)
      ✓ should remove the item if an empty text string was entered (117ms)
      ✓ should cancel edits on escape (119ms)
    Counter
      ✓ should display the current number of todo items (236ms)
    Clear completed button
      ✓ should display the correct text (55ms)
      ✓ should remove completed items when clicked (135ms)
      ✓ should be hidden when there are no items that are completed (203ms)
    Persistence
      ✓ should persist its data (383ms)
    Routing
      ✓ should allow me to display active items (153ms)
      ✓ should respect the back button (283ms)
      ✓ should allow me to display completed items (182ms)
      ✓ should allow me to display all items (271ms)
      ✓ should highlight the currently applied filter (128ms)


  27 passing (47s)
  3 failing

  1) TodoMVC - svelte
       Mark all as completed
         should allow me to mark all items as completed:
     WebDriverError: element click intercepted: Element <input id="toggle-all" class="toggle-all" type="checkbox" data-testid="toggle-all"> is not clickable at point (483, 205). Other element would receive the click: <input class="toggle" aria-labelledby="todo-d37a58d0-922f-45a9-b55c-fb44dbb6784d" type="checkbox" data-testid="toggle">
  (Session info: chrome=79.0.3945.130)
  (Driver info: chromedriver=79.0.3945.36 (3582db32b33893869b8c1339e8f4d9ed1816f143-refs/branch-heads/3945@{#614}),platform=Mac OS X 10.14.6 x86_64)
      at Object.checkLegacyResponse (node_modules/selenium-webdriver/lib/error.js:639:15)
      at parseHttpResponse (node_modules/selenium-webdriver/http/index.js:538:13)
      at client_.send.then.response (node_modules/selenium-webdriver/http/index.js:472:11)
      at ManagedPromise.invokeCallback_ (node_modules/selenium-webdriver/lib/promise.js:1379:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2820:25)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)
  From: Task: WebElement.click()
      at Driver.schedule (node_modules/selenium-webdriver/lib/webdriver.js:377:17)
      at WebElementPromise.schedule_ (node_modules/selenium-webdriver/lib/webdriver.js:1744:25)
      at WebElementPromise.click (node_modules/selenium-webdriver/lib/webdriver.js:1845:17)
      at Page.clickMarkAllCompletedCheckBox (page.js:190:49)
      at Context.<anonymous> (test.js:158:10)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/testing/index.js:134:11
      at new ManagedPromise (node_modules/selenium-webdriver/lib/promise.js:1082:7)
      at controlFlowExecute (node_modules/selenium-webdriver/testing/index.js:129:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2820:25)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)
  From: Task: TodoMVC - svelte Mark all as completed should allow me to mark all items as completed
      at Context.ret (node_modules/selenium-webdriver/testing/index.js:128:10)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/testing/index.js:80:5
      at ManagedPromise.invokeCallback_ (node_modules/selenium-webdriver/lib/promise.js:1379:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2775:27)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)

  2) TodoMVC - svelte
       Mark all as completed
         should allow me to clear the completion state of all items:
     WebDriverError: element click intercepted: Element <input id="toggle-all" class="toggle-all" type="checkbox" data-testid="toggle-all"> is not clickable at point (483, 205). Other element would receive the click: <input class="toggle" aria-labelledby="todo-18433c6f-b9ee-4c81-a20a-1caa37179e49" type="checkbox" data-testid="toggle">
  (Session info: chrome=79.0.3945.130)
  (Driver info: chromedriver=79.0.3945.36 (3582db32b33893869b8c1339e8f4d9ed1816f143-refs/branch-heads/3945@{#614}),platform=Mac OS X 10.14.6 x86_64)
      at Object.checkLegacyResponse (node_modules/selenium-webdriver/lib/error.js:639:15)
      at parseHttpResponse (node_modules/selenium-webdriver/http/index.js:538:13)
      at client_.send.then.response (node_modules/selenium-webdriver/http/index.js:472:11)
      at ManagedPromise.invokeCallback_ (node_modules/selenium-webdriver/lib/promise.js:1379:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2820:25)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)
  From: Task: WebElement.click()
      at Driver.schedule (node_modules/selenium-webdriver/lib/webdriver.js:377:17)
      at WebElementPromise.schedule_ (node_modules/selenium-webdriver/lib/webdriver.js:1744:25)
      at WebElementPromise.click (node_modules/selenium-webdriver/lib/webdriver.js:1845:17)
      at Page.clickMarkAllCompletedCheckBox (page.js:190:49)
      at Context.<anonymous> (test.js:175:10)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/testing/index.js:134:11
      at new ManagedPromise (node_modules/selenium-webdriver/lib/promise.js:1082:7)
      at controlFlowExecute (node_modules/selenium-webdriver/testing/index.js:129:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2820:25)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)
  From: Task: TodoMVC - svelte Mark all as completed should allow me to clear the completion state of all items
      at Context.ret (node_modules/selenium-webdriver/testing/index.js:128:10)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/testing/index.js:80:5
      at ManagedPromise.invokeCallback_ (node_modules/selenium-webdriver/lib/promise.js:1379:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2775:27)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)

  3) TodoMVC - svelte
       Mark all as completed
         complete all checkbox should update state when items are completed / cleared:
     WebDriverError: element click intercepted: Element <input id="toggle-all" class="toggle-all" type="checkbox" data-testid="toggle-all"> is not clickable at point (483, 205). Other element would receive the click: <input class="toggle" aria-labelledby="todo-3e73d35b-985f-4f4b-bd54-4cd45dbbe4b4" type="checkbox" data-testid="toggle">
  (Session info: chrome=79.0.3945.130)
  (Driver info: chromedriver=79.0.3945.36 (3582db32b33893869b8c1339e8f4d9ed1816f143-refs/branch-heads/3945@{#614}),platform=Mac OS X 10.14.6 x86_64)
      at Object.checkLegacyResponse (node_modules/selenium-webdriver/lib/error.js:639:15)
      at parseHttpResponse (node_modules/selenium-webdriver/http/index.js:538:13)
      at client_.send.then.response (node_modules/selenium-webdriver/http/index.js:472:11)
      at ManagedPromise.invokeCallback_ (node_modules/selenium-webdriver/lib/promise.js:1379:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2820:25)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)
  From: Task: WebElement.click()
      at Driver.schedule (node_modules/selenium-webdriver/lib/webdriver.js:377:17)
      at WebElementPromise.schedule_ (node_modules/selenium-webdriver/lib/webdriver.js:1744:25)
      at WebElementPromise.click (node_modules/selenium-webdriver/lib/webdriver.js:1845:17)
      at Page.clickMarkAllCompletedCheckBox (page.js:190:49)
      at Context.<anonymous> (test.js:183:10)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/testing/index.js:134:11
      at new ManagedPromise (node_modules/selenium-webdriver/lib/promise.js:1082:7)
      at controlFlowExecute (node_modules/selenium-webdriver/testing/index.js:129:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2820:25)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)
  From: Task: TodoMVC - svelte Mark all as completed complete all checkbox should update state when items are completed / cleared
      at Context.ret (node_modules/selenium-webdriver/testing/index.js:128:10)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/testing/index.js:80:5
      at ManagedPromise.invokeCallback_ (node_modules/selenium-webdriver/lib/promise.js:1379:14)
      at TaskQueue.execute_ (node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (node_modules/selenium-webdriver/lib/promise.js:2775:27)
      at /Users/gregmalcolm/git/todomvc/tests/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process.internalTickCallback (internal/process/next_tick.js:77:7)



npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! todomvc-browser-tests@ test: `mocha allTests.js --no-timeouts --reporter spec "--framework=svelte"`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the todomvc-browser-tests@ test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/gregmalcolm/.npm/_logs/2020-02-04T06_01_47_579Z-debug.log

Jest:

$ cd examples/svelte
$ jest && jshint js tests
 PASS  tests/helpers/uuid.spec.js
 PASS  tests/models/todo.spec.js
 PASS  tests/helpers/localStorage.spec.js
 PASS  tests/transforms/todos.spec.js
 PASS  tests/stores/todos.spec.js
 PASS  tests/components/NewItem.spec.js
 PASS  tests/components/Todo.spec.js
 PASS  tests/components/TodoList.spec.js
 PASS  tests/components/ListFooter.spec.js

Test Suites: 9 passed, 9 total
Tests:       84 passed, 84 total
Snapshots:   0 total
Time:        3.275s
Ran all test suites.

FadySamirSadek · 2023-12-24T12:56:43Z

please refer to #2194

Building Svelte flavor

4225ae6

gregmalcolm changed the title ~~Add Svelte flavor~~ Add Svelte Example Feb 4, 2020

sebastianrothe mentioned this pull request Feb 21, 2023

Svelte example #1975

Closed

FadySamirSadek closed this Dec 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Svelte Example #2101

Add Svelte Example #2101

gregmalcolm commented Feb 4, 2020

FadySamirSadek commented Dec 24, 2023

Add Svelte Example #2101

Add Svelte Example #2101

Conversation

gregmalcolm commented Feb 4, 2020

FadySamirSadek commented Dec 24, 2023