diff --git a/.gitignore b/.gitignore index 2565d95b..4717139e 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ www .nx .python-version *~ +**/version.ts diff --git a/README.md b/README.md index 04c136b2..ff630b6b 100644 --- a/README.md +++ b/README.md @@ -21,17 +21,29 @@ This mono repo, formerly called Web-Component, now called Studio-Web, combines f ## Table of Contents - [ReadAlongs Web App Suite](#readalongs-web-app-suite) + - [Table of Contents](#table-of-contents) - [For maintainers and developers](#for-maintainers-and-developers) - [Cloning](#cloning) - [Installing dependencies](#installing-dependencies) - [Serving/Development](#servingdevelopment) + - [Web-Component](#web-component) + - [Studio-Web](#studio-web) + - [Understanding where the components come from when you run locally](#understanding-where-the-components-come-from-when-you-run-locally) - [Testing](#testing) - - [Build and Publish](#build--publish) + - [Web-Component](#web-component-1) + - [Studio-Web](#studio-web-1) + - [Internationalization (i18n) and localization (l10n)](#internationalization-i18n-and-localization-l10n) + - [Build \& Publish](#build--publish) + - [Preparing to publish the Web Component \& Angular Wrapper](#preparing-to-publish-the-web-component--angular-wrapper) + - [Web Component \& Angular Wrapper - via a tag push](#web-component--angular-wrapper---via-a-tag-push) + - [Web Component \& Angular Wrapper - manually - please don't do this!](#web-component--angular-wrapper---manually---please-dont-do-this) + - [Studio-Web](#studio-web-2) - [Maintainers](#maintainers) - [Contributing](#contributing) - [Acknowledgements](#acknowledgements) + - [Northeastern University collaboration](#northeastern-university-collaboration) - [Citing](#citing) - - [License](#license) +- [License](#license) ## TL;DR Spinning up the Studio Web App locally @@ -100,11 +112,11 @@ If you are only developing the web-component you can run the following to start Then, in another terminal, run the following to serve the web-component: - npx nx serve web-component + npx nx dev-build web-component Alternatively run together as: - npx nx run-many --targets=serve-test-data,serve --projects=web-component + npx nx dev web-component #### Studio-Web diff --git a/packages/studio-web/project.json b/packages/studio-web/project.json index a2146896..f4aba299 100644 --- a/packages/studio-web/project.json +++ b/packages/studio-web/project.json @@ -104,7 +104,8 @@ "port": 4204 } }, - "defaultConfiguration": "development-en" + "defaultConfiguration": "development-en", + "dependsOn": ["update-version-file"] }, "serve-es": { "executor": "@angular-builders/custom-webpack:dev-server", diff --git a/packages/studio-web/src/app/app.component.html b/packages/studio-web/src/app/app.component.html index 0680b43f..9d6757f5 100644 --- a/packages/studio-web/src/app/app.component.html +++ b/packages/studio-web/src/app/app.component.html @@ -1 +1,2 @@ +
@readalongs/studio-web version: {{ version }}
diff --git a/packages/studio-web/src/app/app.component.sass b/packages/studio-web/src/app/app.component.sass index e69de29b..64ec5a06 100644 --- a/packages/studio-web/src/app/app.component.sass +++ b/packages/studio-web/src/app/app.component.sass @@ -0,0 +1,9 @@ +.version + font-size: 0.9em + color: #aaa + display: flex + flex-direction: column + flex-wrap: no-wrap + align-items: center + justify-content: space-between + align-content:space-around diff --git a/packages/studio-web/src/app/app.component.ts b/packages/studio-web/src/app/app.component.ts index b1f193ae..701f2ca2 100644 --- a/packages/studio-web/src/app/app.component.ts +++ b/packages/studio-web/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Subject } from "rxjs"; import { Component, OnDestroy, OnInit } from "@angular/core"; - +import { environment } from "../environments/environment"; @Component({ selector: "app-root", templateUrl: "./app.component.html", @@ -9,6 +9,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core"; }) export class AppComponent implements OnDestroy, OnInit { unsubscribe$ = new Subject(); + version = environment.packageJson.singleFileBundleVersion; constructor() {} ngOnInit(): void {} diff --git a/packages/studio-web/src/app/shared/download/download.service.ts b/packages/studio-web/src/app/shared/download/download.service.ts index bfeeb12a..555c105d 100644 --- a/packages/studio-web/src/app/shared/download/download.service.ts +++ b/packages/studio-web/src/app/shared/download/download.service.ts @@ -175,12 +175,13 @@ Please host all assets on your server, include the font and package imports defi + ${slots.title} - + ${slots.title} ${slots.subtitle} @@ -298,6 +299,8 @@ Please host all assets on your server, include the font and package imports defi ${slots.title} + + diff --git a/packages/web-component/cypress/e2e/basic.cy.js b/packages/web-component/cypress/e2e/basic.cy.js index a9446c4e..6393bb4a 100644 --- a/packages/web-component/cypress/e2e/basic.cy.js +++ b/packages/web-component/cypress/e2e/basic.cy.js @@ -32,7 +32,11 @@ context("The Readalong Component", () => { it("should play a single word when clicked", () => { cy.wait(["@text", "@audio"]); - cy.readalong().contains("technologies").click(); + cy.readalong().within(() => { + //wait for initialization process to be completed + cy.get("[data-cy=play-button]").should("be.enabled"); + cy.get("span").contains("technologies").click(); + }); }); describe("the progress bar", () => { diff --git a/packages/web-component/cypress/e2e/customizations.cy.js b/packages/web-component/cypress/e2e/customizations.cy.js index f59d0c74..6856e0ab 100644 --- a/packages/web-component/cypress/e2e/customizations.cy.js +++ b/packages/web-component/cypress/e2e/customizations.cy.js @@ -36,4 +36,24 @@ context("Testing creator enabled settings", () => { .should("have.class", "reading"); //check the last word is still highlighted }); }); + + it("testing creator enabling one-column-page-layout ", function () { + cy.intercept(/\.png/).as("image"); + cy.visit("/ej-fra/index-one-column.html"); + cy.wait(["@text", "@audio", "@image"]); + cy.readalong().within(() => { + //is image above the text + cy.get(".page") + .first() + .within(() => { + cy.get(".image__container").then((imgContainer) => { + cy.get(".page__col__text").then((textElement) => { + expect( + imgContainer[0].getBoundingClientRect().top, + ).to.be.lessThan(textElement[0].getBoundingClientRect().top); + }); + }); + }); + }); + }); }); diff --git a/packages/web-component/cypress/e2e/settings.cy.js b/packages/web-component/cypress/e2e/settings.cy.js index 6c10245a..47d2e3c5 100644 --- a/packages/web-component/cypress/e2e/settings.cy.js +++ b/packages/web-component/cypress/e2e/settings.cy.js @@ -87,4 +87,17 @@ context("Testing end user enabled settings", () => { cy.getAllLocalStorage(); }); }); + it("has version information", () => { + cy.readalong().within(() => { + cy.get("[data-test-id=settings-button]").click(); + cy.get("[data-test-id=settings]") + .should("be.visible") + .within(() => { + //check version is semantic + cy.get(".version") + .invoke("text") + .should("match", /\d+\.\d+\.\d+$/); + }); + }); + }); }); diff --git a/packages/web-component/package.json b/packages/web-component/package.json index bff5a643..e9fa13aa 100644 --- a/packages/web-component/package.json +++ b/packages/web-component/package.json @@ -15,7 +15,7 @@ "dist/" ], "scripts": { - "bundle": "node b64Fonts.js && webpack --config webpack.config.js; packageVersion=$(npm view ../../node_modules/@readalongs/web-component version); timestamp=$(date \"+%Y-%m-%d+%H-%M-%S\") && cd ../studio-web && npm pkg set singleFileBundleVersion=\"${packageVersion}\" && npm pkg set singleFileBundleTimestamp=\"${timestamp}\"", + "bundle": "npm run update-version-file && node b64Fonts.js && webpack --config webpack.config.js; packageVersion=$(npm view ../../node_modules/@readalongs/web-component version); timestamp=$(date \"+%Y-%m-%d+%H-%M-%S\") && cd ../studio-web && npm pkg set singleFileBundleVersion=\"${packageVersion}\" && npm pkg set singleFileBundleTimestamp=\"${timestamp}\"", "cy:run": "cypress run", "test:full-pipeline": "npm run serve-test-data & nx run serve & npm run wait-for-test-server && npm run test:once", "test:once": "cypress run", diff --git a/packages/web-component/project.json b/packages/web-component/project.json index e5bd37c2..97881821 100644 --- a/packages/web-component/project.json +++ b/packages/web-component/project.json @@ -23,6 +23,7 @@ "build": { "executor": "@nxext/stencil:build", "outputs": ["{options.outputPath}"], + "dependsOn": ["update-version-file"], "options": { "projectType": "library", "tsConfig": "packages/web-component/tsconfig.lib.json", @@ -47,8 +48,9 @@ } }, "e2e": { - "executor": "@nxext/stencil:e2e", + "executor": "@nxext/cypress:cypress", "outputs": ["{options.outputPath}"], + "dependsOn": ["build"], "options": { "projectType": "library", "tsConfig": "packages/web-component/tsconfig.lib.json", @@ -62,6 +64,36 @@ "options": { "lintFilePatterns": "packages/web-component/**/*.{ts,tsx}" } + }, + "update-version-file": { + "command": "node -p \"'export const PACKAGE_VERSION = ' + JSON.stringify(require('./packages/web-component/package.json').version) + ';'\"> packages/web-component/src/version.ts" + }, + "serve-test-data": { + "command": "sirv --dev --cors --port 8941 ./packages/web-component/test-data/" + }, + "dev-build": { + "executor": "@nxext/stencil:build", + "outputs": ["{options.outputPath}"], + "dependsOn": ["update-version-file"], + "options": { + "projectType": "library", + "tsConfig": "packages/web-component/tsconfig.lib.json", + "configPath": "packages/web-component/stencil.config.ts", + "outputPath": "dist/packages/web-component", + "dev": true, + "watch": true, + "serve": true + } + }, + "dev": { + "executor": "nx:run-commands", + "options": { + "commands": [ + "npx nx serve-test-data web-component", + "npx nx dev-build web-component" + ], + "parallel": true + } } } } diff --git a/packages/web-component/src/components/read-along-component/read-along.tsx b/packages/web-component/src/components/read-along-component/read-along.tsx index 392eaffa..d414dec6 100644 --- a/packages/web-component/src/components/read-along-component/read-along.tsx +++ b/packages/web-component/src/components/read-along-component/read-along.tsx @@ -34,7 +34,7 @@ import { import { web_component as eng_strings } from "../../i18n/messages.eng.json"; import { web_component as fra_strings } from "../../i18n/messages.fra.json"; import { web_component as spa_strings } from "../../i18n/messages.spa.json"; - +import { PACKAGE_VERSION } from "../../version"; const LOADING = 0; const LOADED = 1; const ERROR_PARSING = 2; @@ -2027,7 +2027,9 @@ export class ReadAlongComponent { {this.getI18nString("auto-pause")}

- +

+ @readalongs/web-component version: {PACKAGE_VERSION} +