From 5bb0a595b29d7381d129101036bf7c547101a58e Mon Sep 17 00:00:00 2001 From: "Alessandro (Ale) Segala" <43508+ItalyPaleAle@users.noreply.github.com> Date: Fri, 8 Dec 2023 21:15:09 -0800 Subject: [PATCH] Update dependencies (#312) --- .devcontainer/devcontainer.json | 2 +- .eslintrc.js => .eslintrc.cjs | 0 .github/workflows/ci.yaml | 6 +- Advanced Usage.md | 4 +- CHANGELOG.md | 2 +- README.md | 12 +-- UPGRADING.md | 8 ++ examples/dynamic-imports/src/routes.js | 2 +- nightwatch.conf.js => nightwatch.conf.cjs | 2 +- package.json | 30 +++--- ...01-routing.test.js => 01-routing.test.cjs} | 94 +++++++------------ ...tion.test.js => 02-active-action.test.cjs} | 11 +-- ...p.test.js => 03-routing-with-map.test.cjs} | 24 ++--- 13 files changed, 79 insertions(+), 118 deletions(-) rename .eslintrc.js => .eslintrc.cjs (100%) rename nightwatch.conf.js => nightwatch.conf.cjs (99%) rename test/cases/{01-routing.test.js => 01-routing.test.cjs} (89%) rename test/cases/{02-active-action.test.js => 02-active-action.test.cjs} (93%) rename test/cases/{03-routing-with-map.test.js => 03-routing-with-map.test.cjs} (85%) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 87f67dc..88a5bef 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -23,7 +23,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. "forwardPorts": [ - 5000 + 5050 ], // Use 'postCreateCommand' to run commands after the container is created. diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index ae363a2..f3b50f4 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -12,14 +12,14 @@ on: jobs: test: - runs-on: ubuntu-20.04 + runs-on: ubuntu-22.04 steps: - uses: actions/checkout@v1 - name: 'Install Node.js' uses: actions/setup-node@v1 with: - node-version: '18.x' + node-version: '20.x' - name: 'Install dependencies from npm' run: | npm install @@ -42,7 +42,7 @@ jobs: -p 4444:4444 \ --link nginx \ --shm-size=2g \ - selenium/standalone-chrome:103.0 + selenium/standalone-chrome:119.0 # Wait 5 seconds sleep 5 - name: 'Run tests' diff --git a/Advanced Usage.md b/Advanced Usage.md index cd6fcbe..a507888 100644 --- a/Advanced Usage.md +++ b/Advanced Usage.md @@ -2,7 +2,7 @@ svelte-spa-router is simple by design. A minimal router is easy to learn and implement, adds minimum overhead, and leaves more control in the hands of the developers. -Thanks to the many features of Svelte 3 or other components in the ecosystem, svelte-spa-router can be used to get many more "advanced" features. This document explains how to achieve certain results with svelte-spa-router beyond what's offered by the component itself. +Thanks to the many features of Svelte or other components in the ecosystem, svelte-spa-router can be used to get many more "advanced" features. This document explains how to achieve certain results with svelte-spa-router beyond what's offered by the component itself. - [Route wrapping](#route-wrapping), including: - [Dynamically-imported routes and placeholders](#async-routes-and-loading-placeholders) @@ -471,7 +471,7 @@ With the same URL as before, the result would be: ## Route transitions -It's easy to add a nice transition between routes, leveraging the built-in [transitions](https://svelte.dev/docs#Transitions) of Svelte 3. +It's easy to add a nice transition between routes, leveraging the built-in [transitions](https://svelte.dev/docs#Transitions) of Svelte. For example, to make your components fade in gracefully, you can wrap the markup in a container (e.g. `
`, or `
`, etc) and attach a Svelte transition to that. For example: diff --git a/CHANGELOG.md b/CHANGELOG.md index 37fe528..97accd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,4 +2,4 @@ A detailed changelog for each release is published in the [GitHub Releases page](https://github.com/ItalyPaleAle/svelte-spa-router/releases). -Additionally, breaking changes (e.g. from 1.x to 2.x) are explained in the [UPGRADING.md](/UPGRADING.md) file, with instructions to upgrade your code. +Additionally, breaking changes (e.g. from 3.x to 4.x) are explained in the [UPGRADING.md](/UPGRADING.md) file, with instructions to upgrade your code. diff --git a/README.md b/README.md index 69492ef..c124844 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ [![npm](https://img.shields.io/npm/v/svelte-spa-router.svg)](https://www.npmjs.com/package/svelte-spa-router) [![GitHub](https://img.shields.io/github/license/ItalyPaleAle/svelte-spa-router.svg)](https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/LICENSE.md) -This module is a router for [Svelte 3](https://github.com/sveltejs/svelte) applications, specifically optimized for Single Page Applications (SPA). +This module is a router for [Svelte 3 and 4](https://github.com/sveltejs/svelte) applications, specifically optimized for Single Page Applications (SPA). Main features: @@ -38,7 +38,7 @@ With hash-based routing, navigation is possible thanks to storing the current vi For example, if your SPA is in a static file called `index.html`, your URLs for navigating within the app look something like `index.html#/profile`, `index.html#/book/42`, etc. (The `index.html` part can usually be omitted for the index file, so you can just create URLs that look like `http://example.com/#/profile`). -When I created this component, other routers for Svelte 3 implemented navigation using the HTML5 history API. While those URLs look nicer (e.g. you can actually navigate to `http://example.com/profile`), they are not ideal for static Single Page Applications. In order for users to be able to share links or even just refresh the page, you are required to have a server on the backend processing the request, and building fully-static apps is much harder as a consequence. +When I created this component, other routers for Svelte 3+ implemented navigation using the HTML5 history API. While those URLs look nicer (e.g. you can actually navigate to `http://example.com/profile`), they are not ideal for static Single Page Applications. In order for users to be able to share links or even just refresh the page, you are required to have a server on the backend processing the request, and building fully-static apps is much harder as a consequence. Hash-based routing is simpler, works well even without a server, and it's generally better suited for static SPAs, especially when SEO isn't a concern, as is the case when the app requires authentication. Many popular apps use hash-based routing, including GMail! @@ -60,14 +60,14 @@ cd examples/basic-routing # Build and run (in the folder of a sample) npx rollup -c -npx serve -n -l 5000 dist +npx serve -n -l 5050 dist ```` -The sample will be running at http://localhost:5000 +The sample will be running at http://localhost:5050 ## Starter template -You can find a starter template with Svelte 3 and svelte-spa-router at [italypaleale/svelte-spa-router-template](https://github.com/italypaleale/svelte-spa-router-template). +You can find a starter template with Svelte 4 and svelte-spa-router at [italypaleale/svelte-spa-router-template](https://github.com/italypaleale/svelte-spa-router-template). To use the template: @@ -80,7 +80,7 @@ More information can be found on the [template's repo](https://github.com/italyp ## Using svelte-spa-router -You can include the router in any project using Svelte 3. +You can include the router in any project using Svelte 4. ### Install from NPM diff --git a/UPGRADING.md b/UPGRADING.md index a1e9edf..0939f7e 100644 --- a/UPGRADING.md +++ b/UPGRADING.md @@ -11,6 +11,14 @@ # Upgrading instructions +## Upgrading to 4.x + +When upgrading from svelte-spa-router 3.x to 4.x, please note the following breaking changes: + +### Works with Svelte 4 + +svelte-spa-router 4.x is designed to work with Svelte 4. + ## Upgrading to 3.x When upgrading from svelte-spa-router 2.x to 3.x, please note the following breaking changes: diff --git a/examples/dynamic-imports/src/routes.js b/examples/dynamic-imports/src/routes.js index 74b596b..751d8c1 100644 --- a/examples/dynamic-imports/src/routes.js +++ b/examples/dynamic-imports/src/routes.js @@ -39,7 +39,7 @@ export default { .then((component) => { return new Promise((resolve) => { // Wait 5 seconds before returning - setTimeout(() => resolve(component), 5000) + setTimeout(() => resolve(component), 5050) }) }), // Show the loading component while the component is being downloaded diff --git a/nightwatch.conf.js b/nightwatch.conf.cjs similarity index 99% rename from nightwatch.conf.js rename to nightwatch.conf.cjs index 1eea9d1..1ea09cb 100644 --- a/nightwatch.conf.js +++ b/nightwatch.conf.cjs @@ -3,7 +3,7 @@ const seleniumHost = process.env.SELENIUM_HOST || '127.0.0.1' const seleniumPort = parseInt(process.env.SELENIUM_PORT || '4444', 10) // Launch URL - where the server is -const launchUrl = process.env.LAUNCH_URL || 'http://localhost:5000' +const launchUrl = process.env.LAUNCH_URL || 'http://localhost:5050' // Increase max listeners to avoid a warning require('events').EventEmitter.defaultMaxListeners = 100 diff --git a/package.json b/package.json index 58cfe3d..ac85de0 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,13 @@ "main": "Router.svelte", "svelte": "Router.svelte", "types": "Router.d.ts", + "type": "module", "scripts": { "build-test-app": "(cd test/app && npx rollup -c)", - "start-test-app": "npx serve -n -l 5000 test/app/dist", - "eslint": "npx eslint -c .eslintrc.js --ext .js,.svelte,.html .", + "start-test-app": "npx serve -n -l 5050 test/app/dist", + "eslint": "npx eslint -c .eslintrc.cjs --ext .js,.svelte,.html .", "lint": "npm run eslint", - "nightwatch": "npx nightwatch -e selenium.chrome", + "nightwatch": "npx nightwatch -e selenium.chrome -c nightwatch.conf.cjs", "test": "npm run nightwatch" }, "repository": { @@ -20,6 +21,7 @@ "keywords": [ "router", "svelte", + "svelte3", "svelte4", "spa" ], @@ -31,20 +33,20 @@ }, "homepage": "https://github.com/ItalyPaleAle/svelte-spa-router#readme", "dependencies": { - "regexparam": "2.0.1" + "regexparam": "2.0.2" }, "devDependencies": { - "@rollup/plugin-commonjs": "^22.0.2", - "@rollup/plugin-node-resolve": "^13.3.0", - "chromedriver": "^103.0.0", - "eslint": "^8.44.0", + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-node-resolve": "^15.2.3", + "chromedriver": "^119.0.1", + "eslint": "^8.55.0", "eslint-plugin-html": "^7.1.0", - "eslint-plugin-svelte": "^2.32.2", - "nightwatch": "^1.7.13", - "rollup": "^2.79.1", - "rollup-plugin-css-only": "^3.1.0", + "eslint-plugin-svelte": "^2.35.1", + "nightwatch": "^2.6.23", + "rollup": "^4.7.0", + "rollup-plugin-css-only": "^4.5.2", "rollup-plugin-svelte": "^7.1.6", - "serve": "^14.2.0", - "svelte": "^4.0.5" + "serve": "^14.2.1", + "svelte": "^4.2.8" } } diff --git a/test/cases/01-routing.test.js b/test/cases/01-routing.test.cjs similarity index 89% rename from test/cases/01-routing.test.js rename to test/cases/01-routing.test.cjs index 7490cfa..d8681b1 100644 --- a/test/cases/01-routing.test.js +++ b/test/cases/01-routing.test.cjs @@ -14,9 +14,7 @@ describe(' component', function() { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Home!') - - browser.end() + .assert.textContains('h2.routetitle', 'Home!') }) it('current path appears', (browser) => { @@ -24,8 +22,6 @@ describe(' component', function() { .url(browser.launchUrl) .waitForElementVisible('#currentpath') .expect.element('#currentpath').text.to.equal('/') - - browser.end() }) it('selecting route from hash', (browser) => { @@ -34,7 +30,7 @@ describe(' component', function() { .url(browser.launchUrl + '/#/') .waitForElementVisible('#currentpath') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Home!') + .assert.textContains('h2.routetitle', 'Home!') .expect.element('#currentpath').text.to.equal('/') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('null') @@ -43,7 +39,7 @@ describe(' component', function() { browser .url(browser.launchUrl + '/#/wild') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Wild') + .assert.textContains('h2.routetitle', 'Wild') .expect.element('#currentpath').text.to.equal('/wild') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('null') @@ -52,12 +48,10 @@ describe(' component', function() { browser .url(browser.launchUrl + '/#/hello/svelte') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}') - - browser.end() }) it('loading page with hash', (browser) => { @@ -65,12 +59,10 @@ describe(' component', function() { .url(browser.launchUrl + '/#/hello/svelte') .waitForElementVisible('#currentpath') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}') - - browser.end() }) it('refreshing page', (browser) => { @@ -78,7 +70,7 @@ describe(' component', function() { browser .url(browser.launchUrl + '/#/hello/svelte') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}') @@ -86,12 +78,10 @@ describe(' component', function() { browser .refresh(() => { browser.waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}') - - browser.end() }) }) @@ -99,12 +89,10 @@ describe(' component', function() { browser .url(browser.launchUrl + '/#/does/not/exist') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'NotFound') + .assert.textContains('h2.routetitle', 'NotFound') .expect.element('#currentpath').text.to.equal('/does/not/exist') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('{"wild":"does/not/exist"}') - - browser.end() }) it('clicking on link', (browser) => { @@ -114,13 +102,11 @@ describe(' component', function() { .click('.navigation-links a[href="#/hello/svelte"]', () => { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser .expect.element('#nameparams').text.to.equal('Your name is: svelte') - - browser.end() }) }) @@ -131,12 +117,10 @@ describe(' component', function() { .click('.navigation-links li a b', () => { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Home!') + .assert.textContains('h2.routetitle', 'Home!') .expect.element('#currentpath').text.to.equal('/brand') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#currentparams').text.to.equal('null') - - browser.end() }) }) @@ -166,8 +150,6 @@ describe(' component', function() { browser .waitForElementVisible('#nameparams') .expect.element('#nameparams').text.to.equal('Your name is: svelte') - - browser.end() }) }) }) @@ -180,14 +162,12 @@ describe(' component', function() { .click('.navigation-buttons button:nth-of-type(1)', () => { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Wild') + .assert.textContains('h2.routetitle', 'Wild') .expect.element('#currentpath').text.to.equal('/wild/something') browser.expect.element('#currentparams').text.to.equal('{"wild":"something"}') browser.url((url) => { assert.strictEqual(url.value, browser.launchUrl + '/#/wild/something') - - browser.end() }) }) }) @@ -204,13 +184,11 @@ describe(' component', function() { .click('.navigation-buttons button:nth-of-type(2)', () => { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Wild') + .assert.textContains('h2.routetitle', 'Wild') .expect.element('#currentpath').text.to.equal('/wild/something') browser.url((url) => { assert.strictEqual(url.value, browser.launchUrl + '/#/wild/something') - - browser.end() }) }) }) @@ -228,7 +206,7 @@ describe(' component', function() { .click('.navigation-buttons button:nth-of-type(3)', () => { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Wild') + .assert.textContains('h2.routetitle', 'Wild') .expect.element('#currentpath').text.to.equal('/wild/replaced') browser.url((url) => { @@ -240,14 +218,13 @@ describe(' component', function() { .click('.navigation-buttons button:nth-of-type(2)', () => { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Wild') + .assert.textContains('h2.routetitle', 'Wild') .expect.element('#currentpath').text.to.equal('/wild/something') browser.url((url) => { assert.strictEqual(url.value, browser.launchUrl + '/#/wild/something') - // Ugh the callback hell... - browser.end() + // Ugh the callback hell... }) }) }) @@ -260,7 +237,7 @@ describe(' component', function() { browser .url(browser.launchUrl + '/#/hello/svelte?search=query&sort=0') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser.expect.element('#currentqs').text.to.equal('search=query&sort=0') @@ -268,11 +245,9 @@ describe(' component', function() { browser .refresh(() => { browser.waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser.expect.element('#currentqs').text.to.equal('search=query&sort=0') - - browser.end() }) }) @@ -285,11 +260,11 @@ describe(' component', function() { browser.url(browser.launchUrl + '/#/hello/svelte') .waitForElementPresent('#logbox') .expect.element('#logbox').text.to.equal('routeLoading - {"route":"/","location":"/","querystring":"","params":null}\nrouteLoaded - {"route":"/","location":"/","querystring":"","params":null,"name":"Home"}\nrouteLoading - {"route":"/hello/:first/:last?","location":"/hello/svelte","querystring":"","params":{"first":"svelte","last":null}}\nrouteLoaded - {"route":"/hello/:first/:last?","location":"/hello/svelte","querystring":"","params":{"first":"svelte","last":null},"name":"Name"}') - - browser.end() }) - it('routeEvent event', (browser) => { + it('routeEvent event', async (browser) => { + await browser.url('about:blank') + // Click on the p that triggers a "routeEvent" event browser.url(browser.launchUrl + '/#/hello/svelte') .waitForElementPresent('p#nameparams') @@ -298,10 +273,7 @@ describe(' component', function() { browser .waitForElementPresent('#logbox') .expect.element('#logbox').text.to.equal('routeLoading - {"route":"/hello/:first/:last?","location":"/hello/svelte","querystring":"","params":{"first":"svelte","last":null}}\nrouteLoaded - {"route":"/hello/:first/:last?","location":"/hello/svelte","querystring":"","params":{"first":"svelte","last":null},"name":"Name"}\nrouteEvent - {"action":"hi","params":{"first":"svelte","last":null}}') - - browser.end() }) - }) it('route conditions', (browser) => { @@ -318,14 +290,14 @@ describe(' component', function() { // Condition always fails browser.url(browser.launchUrl + '/#/lucky?pass=0') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Wild') + .assert.textContains('h2.routetitle', 'Wild') .expect.element('#currentpath').text.to.equal('/wild/conditions-failed') browser.expect.element('#currentqs').text.to.equal('') - - browser.end() }) - it('conditionsFailed event', (browser) => { + it('conditionsFailed event', async (browser) => { + await browser.url('about:blank') + // Condition always passes browser .url(browser.launchUrl + '/#/lucky?pass=1') @@ -338,11 +310,11 @@ describe(' component', function() { browser.url(browser.launchUrl + '/#/lucky?pass=0') .waitForElementPresent('#logbox') .expect.element('#logbox').text.to.equal('routeLoading - {"route":"/lucky","location":"/lucky","querystring":"pass=1","userData":{"foo":"bar"},"params":null}\nrouteLoaded - {"route":"/lucky","location":"/lucky","querystring":"pass=1","userData":{"foo":"bar"},"params":{"message":"secret"},"name":"Loading"}\nrouteLoaded - {"route":"/lucky","location":"/lucky","querystring":"pass=1","userData":{"foo":"bar"},"params":null,"name":"Lucky"}\nconditionsFailed - {"route":"/lucky","location":"/lucky","querystring":"pass=0","userData":{"foo":"bar"},"params":null}\nrouteLoading - {"route":"/wild/*","location":"/wild/conditions-failed","querystring":"","params":{"wild":"conditions-failed"}}\nrouteLoaded - {"route":"/wild/*","location":"/wild/conditions-failed","querystring":"","params":{"wild":"conditions-failed"},"name":"Wild"}') - - browser.end() }) - it('parameter URL-decoding', (browser) => { + it('parameter URL-decoding', async (browser) => { + await browser.url('about:blank') + browser .url(browser.launchUrl + '/#/hello/Mr%20Smith') .waitForElementVisible('#currentpath') @@ -356,11 +328,12 @@ describe(' component', function() { .waitForElementVisible('#currentpath') .waitForElementVisible('h2.routetitle') browser.expect.element('#currentpath').text.to.equal('/hello/Mr%2%0Smith') - browser.expect.element('#nameparams').text.to.equal('Your name is: null') - browser.end() + browser.expect.element('#nameparams').text.to.equal('Your name is: null') }) - it('use:link vars', (browser) => { + it('use:link vars', async (browser) => { + await browser.url('about:blank') + // Condition always passes browser .url(browser.launchUrl + '/#/catalog/3') @@ -373,8 +346,7 @@ describe(' component', function() { .expect.element('#logbox').text.to.equal('routeLoading - {"route":"/catalog/:id?","location":"/catalog/3","querystring":"","params":{"id":"3"}}\nrouteLoaded - {"route":"/catalog/:id?","location":"/catalog/3","querystring":"","params":{"id":"3"},"name":"Catalog"}\nrouteLoading - {"route":"/catalog/:id?","location":"/catalog/4","querystring":"","params":{"id":"4"}}\nrouteLoaded - {"route":"/catalog/:id?","location":"/catalog/4","querystring":"","params":{"id":"4"},"name":"Catalog"}') browser.expect.element('#previous').attribute('href').to.endsWith('#/catalog/3') browser.expect.element('#next').attribute('href').to.endsWith('#/catalog/5') - }) - browser.end() + }) }) it('static props', (browser) => { @@ -382,7 +354,5 @@ describe(' component', function() { .url(browser.launchUrl + '/#/foo') .waitForElementVisible('#staticprop') .expect.element('#staticprop').text.to.equal('this is static') - - browser.end() }) }) diff --git a/test/cases/02-active-action.test.js b/test/cases/02-active-action.test.cjs similarity index 93% rename from test/cases/02-active-action.test.js rename to test/cases/02-active-action.test.cjs index 29de49d..98acf28 100644 --- a/test/cases/02-active-action.test.js +++ b/test/cases/02-active-action.test.cjs @@ -20,8 +20,6 @@ describe('use:active action', function() { .elements('css selector', 'ul.navigation-links li a.active[href="#/"]', (elements) => { assert(elements) assert.strictEqual(elements.value.length, 1) - - browser.end() }) }) }) @@ -40,8 +38,6 @@ describe('use:active action', function() { .elements('css selector', 'ul.navigation-links li a.active[href="#/hello/svelte"]', (elements) => { assert(elements) assert.strictEqual(elements.value.length, 1) - - browser.end() }) }) }) @@ -58,8 +54,7 @@ describe('use:active action', function() { .click('a[id=dynamic-link-1]') .pause(1000) //check for active class on link-1 - .expect.element('a[id=dynamic-link-1]').to.have.attribute('class').which.contains('active') - browser.end() + .expect.element('a[id=dynamic-link-1]').to.have.attribute('class').which.contains('active') }) it('inactive class', (browser) => { @@ -79,8 +74,6 @@ describe('use:active action', function() { .elements('css selector', 'ul.navigation-links li a.inactive', (elements) => { assert(elements) assert.strictEqual(elements.value.length, 1) - - browser.end() }) }) }) @@ -101,8 +94,6 @@ describe('use:active action', function() { .elements('css selector', 'ul.navigation-links li a.active', (elements) => { assert(elements) assert.strictEqual(elements.value.length, 0) - - browser.end() }) }) }) diff --git a/test/cases/03-routing-with-map.test.js b/test/cases/03-routing-with-map.test.cjs similarity index 85% rename from test/cases/03-routing-with-map.test.js rename to test/cases/03-routing-with-map.test.cjs index 1c34654..cb74cce 100644 --- a/test/cases/03-routing-with-map.test.js +++ b/test/cases/03-routing-with-map.test.cjs @@ -12,9 +12,7 @@ describe(' component with routes in a Map', function() { browser .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Home!') - - browser.end() + .assert.textContains('h2.routetitle', 'Home!') }) it('current path appears', (browser) => { @@ -22,8 +20,6 @@ describe(' component with routes in a Map', function() { .url(browser.launchUrl + '/?routemap=1') .waitForElementVisible('#currentpath') .expect.element('#currentpath').text.to.equal('/') - - browser.end() }) it('route defined as string', (browser) => { @@ -32,7 +28,7 @@ describe(' component with routes in a Map', function() { .url(browser.launchUrl + '/?routemap=1#/') .waitForElementVisible('#currentpath') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Home!') + .assert.textContains('h2.routetitle', 'Home!') .expect.element('#currentpath').text.to.equal('/') browser.expect.element('#currentqs').text.to.equal('') @@ -40,11 +36,9 @@ describe(' component with routes in a Map', function() { browser .url(browser.launchUrl + '/?routemap=1#/hello/svelte') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Hi there!') + .assert.textContains('h2.routetitle', 'Hi there!') .expect.element('#currentpath').text.to.equal('/hello/svelte') browser.expect.element('#currentqs').text.to.equal('') - - browser.end() }) it('route defined as RegExp', (browser) => { @@ -53,7 +47,7 @@ describe(' component with routes in a Map', function() { .url(browser.launchUrl + '/?routemap=1#/REGEX/1') .waitForElementVisible('#currentpath') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Regex route') + .assert.textContains('h2.routetitle', 'Regex route') .expect.element('#currentpath').text.to.equal('/REGEX/1') browser.expect.element('#currentqs').text.to.equal('') browser.expect.element('#regexmatch').text.to.equal('["/REGEX/1","1"]') @@ -62,7 +56,7 @@ describe(' component with routes in a Map', function() { browser .url(browser.launchUrl + '/?routemap=1#/Match/hello/world') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Regex route') + .assert.textContains('h2.routetitle', 'Regex route') .expect.element('#currentpath').text.to.equal('/Match/hello/world') browser.expect.element('#currentqs').text.to.equal('') // This will end at /hello because /world starts with a slash. Since the regexp doesn't have a $ character, it still matches @@ -72,11 +66,9 @@ describe(' component with routes in a Map', function() { browser .url(browser.launchUrl + '/?routemap=1#/REGEX') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'NotFound') + .assert.textContains('h2.routetitle', 'NotFound') .expect.element('#currentpath').text.to.equal('/REGEX') browser.expect.element('#currentqs').text.to.equal('') - - browser.end() }) it('querystring from hash', (browser) => { @@ -85,12 +77,10 @@ describe(' component with routes in a Map', function() { browser .url(browser.launchUrl + '/?routemap=1#/Match/hola?hello=world') .waitForElementVisible('h2.routetitle') - .assert.containsText('h2.routetitle', 'Regex route') + .assert.textContains('h2.routetitle', 'Regex route') .expect.element('#currentpath').text.to.equal('/Match/hola') browser.expect.element('#currentqs').text.to.equal('hello=world') browser.expect.element('#regexmatch').text.to.equal('["/Match/hola","Match","/hola"]') - - browser.end() }) })