diff --git a/packages/web-components/package.json b/packages/web-components/package.json index db24f46ac5..d49296e09f 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -61,8 +61,8 @@ "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js,svelte src\"", "lint:fix": "eslint --cache --ext=ts,tsx,js,svelte src --fix", "fetch-config": "yarn config-manager fetchConfig web-components", - "build:serverless": "serverless webpack --out dist --stage dev", - "release:server:dev": "serverless deploy --stage dev", + "build:serverless": "node ./scripts/build-serverless.js", + "release:server:dev": "node ./scripts/release-serverless.js", "release:server:prod": "node ../../scripts/release/release-serverless.js web-components", "release:npm:prod": "node ../../scripts/release/release-npm.js web-components --skip-edit-release-note", "release:client:dev": "node ../../scripts/release/release-dev.js web-components reapit-web-components", diff --git a/packages/web-components/scripts/build-serverless.js b/packages/web-components/scripts/build-serverless.js new file mode 100644 index 0000000000..c5b2b5a5f6 --- /dev/null +++ b/packages/web-components/scripts/build-serverless.js @@ -0,0 +1,31 @@ +const yargs = require('yargs') +const { spawn } = require('child_process') + +const stage = yargs.argv.stage + +// relative to the root of web-components package +const listServerlessYmlFiles = ['src/search-widget/server/serverless.yml'] + +const buildServerlessList = () => { + listServerlessYmlFiles.forEach(file => { + const build = spawn('serverless', ['webpack', '--config', file, '--out', 'dist', '--stage', stage]) + build.stdout.on('data', function(data) { + console.info('stdout: ' + data.toString()) + }) + + build.stderr.on('data', function(data) { + console.error('stderr: ' + data.toString()) + }) + + build.on('exit', function(code) { + console.info(`Building ${file} exited with code ${code.toString()}`) + }) + + build.on('error', function(err) { + console.error(`An error happened \n${err}`) + process.exit(1) + }) + }) +} + +buildServerlessList() diff --git a/packages/web-components/scripts/release-serverless.js b/packages/web-components/scripts/release-serverless.js index 6babaf2d5d..1d096d5631 100644 --- a/packages/web-components/scripts/release-serverless.js +++ b/packages/web-components/scripts/release-serverless.js @@ -1,8 +1,31 @@ -const path = require('path') const yargs = require('yargs') +const { spawn } = require('child_process') const stage = yargs.argv.stage -const listServerlessYmlFiles = [path.resolve(__dirname, '../src/search-widget/server/serverless.yml')] +// relative to the root of web-components package +const listServerlessYmlFiles = ['src/search-widget/server/serverless.yml'] -const deployServerless = async () => {} +const deployServerlessList = () => { + listServerlessYmlFiles.forEach(file => { + const deploy = spawn('serverless', ['deploy', '--config', file, '--stage', stage]) + deploy.stdout.on('data', function(data) { + console.info('stdout: ' + data.toString()) + }) + + deploy.stderr.on('data', function(data) { + console.error('stderr: ' + data.toString()) + }) + + deploy.on('exit', function(code) { + console.info(`Deploying ${file} exited with code ${code.toString()}`) + }) + + deploy.on('error', function(err) { + console.error(`An error happened \n${err}`) + process.exit(1) + }) + }) +} + +deployServerlessList() diff --git a/packages/web-components/scripts/start-dev.js b/packages/web-components/scripts/start-dev.js index 52d95f154b..7856b5fcbf 100644 --- a/packages/web-components/scripts/start-dev.js +++ b/packages/web-components/scripts/start-dev.js @@ -38,7 +38,8 @@ return (() => { } // eslint-disable-next-line max-len const clientScript = `rollup -w -c './scripts/rollup.config.${packageName}.js' --environment APP_ENV:local` - const serverScript = 'serverless offline --out public/dist --stage local' + // eslint-disable-next-line max-len + const serverScript = `serverless offline --config src/${packageName}/server/serverless.yml --out public/dist --stage local` const startClientServer = getStartClientServer(packageName) const startDev = ` diff --git a/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap b/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap index e52a13165c..91a5bed62f 100644 --- a/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap @@ -1,3 +1,102 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ReapitAppointmentBookingComponent should match a snapshot 1`] = `undefined`; +exports[`ReapitAppointmentBookingComponent should match a snapshot 1`] = ` +Appointment_bookings { + "$$": Object { + "after_update": Array [], + "before_update": Array [], + "bound": Object {}, + "callbacks": Object {}, + "context": Map {}, + "ctx": Array [ + false, + 1, + [Function], + [Function], + [Function], + [Function], + Object { + "bodyText": "css-kj8hgc", + "button": "css-1dv0ljc", + "dateCellHeader": "css-emo7go", + "formBlock": "css-ebxsuw", + "formButtonPrimary": "css-1lxnn63", + "formButtonSecondary": "css-rjv3cy", + "formError": "css-91pmmi", + "formHeader": "css-xk00h3", + "formInput": "css-l0zla6", + "formLabel": "css-1hy6hob", + "formSeparator": "css-yulbtv", + "globalStyles": "css-11c02ub", + "input": "css-90jyro", + "offerBanner": "css-1u7x4xu", + "pagination": "css-1ml0awe", + "paginationActive": "css-1ml0awe", + "primaryHeading": "css-1vpwbmy", + "primaryStrapline": "css-1k1azsg", + "resultItem": "css-hxgn9z", + "searchBox": "css-1kkxuu3", + "secondaryHeading": "css-x83nk", + "secondaryStrapline": "css-1ts0wow", + "selectedItem": "css-1uqw7mn", + "svgNavigation": "css-1r1r46p", + "timeCell": "css-5hl7fz", + "timeCellsContainer": "css-1fswrvx", + }, + Object { + "baseBackgroundColor": "#f9fbfd", + "baseFontFamily": "\\"Roboto\\", sans-serif", + "basefontColor": "#12263f", + "basefontSize": "14px", + "breakPoints": Object { + "desktop": "", + "laptop": "", + "mobile": "", + "tablet": "", + }, + "dateCellHeaderBackgroundColor": "#ececec", + "formButtonFontSize": "1.2rem", + "formHrSeparatorFontColor": "#e6e6e6", + "formLabelColor": "#737373", + "headingFontFamily": "\\"Open Sans\\", sans-serif", + "inverseFontColor": "#f9fbfd", + "mapAccentColor": "#7bc9eb", + "navigateButtonColor": "red", + "primaryAccentColor": "#0061a8", + "primaryHeadingFontSize": "24px", + "searchPlaceholder": "e.g. London or EC1N", + "secondaryAccentColor": "#1e2554", + "secondaryHeadingFontSize": "20px", + "secondaryfontColor": "#1e2554", + "timeCellBackgroundColor": "#dfdfdf", + "timeCellBackgroundColorHover": "#d3d3d3", + "timeCellsContainerBackgroundColor": "#f9f9f9", + }, + "body", + ], + "dirty": Array [ + -1, + ], + "fragment": Object { + "c": [Function], + "d": [Function], + "i": [Function], + "l": [Function], + "m": [Function], + "o": [Function], + "p": [Function], + }, + "not_equal": [Function], + "on_destroy": Array [], + "on_mount": Array [], + "props": Object { + "parentSelector": 8, + "theme": 7, + }, + "update": [Function], + }, + "$capture_state": [Function], + "$inject_state": [Function], + "$set": [Function], +} +`; diff --git a/packages/web-components/src/appointment-bookings/client/core/index.ts b/packages/web-components/src/appointment-bookings/client/core/index.ts index 2b027d81fe..2bb4117a4c 100644 --- a/packages/web-components/src/appointment-bookings/client/core/index.ts +++ b/packages/web-components/src/appointment-bookings/client/core/index.ts @@ -15,7 +15,7 @@ export const ReapitAppointmentBookingComponent = ({ variant, }: // apiKey, // variant, -AppointmentBookingInitializers) => { +AppointmentBookingInitializers) => new AppointmentBooking({ target: document.querySelector(parentSelector) || document.body, props: { @@ -27,7 +27,7 @@ AppointmentBookingInitializers) => { parentSelector, }, }) -} + Object.defineProperty(window, 'ReapitAppointmentBookingComponent', { value: ReapitAppointmentBookingComponent, }) diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/planner-step2.test.ts.snap b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/appointment-planner.test.ts.snap similarity index 98% rename from packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/planner-step2.test.ts.snap rename to packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/appointment-planner.test.ts.snap index c6a4fcdf7e..4c0dcf5a42 100644 --- a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/planner-step2.test.ts.snap +++ b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/appointment-planner.test.ts.snap @@ -77,7 +77,7 @@ exports[`appointment bookings it matches a snapshot 1`] = `
1570747191389 diff --git a/packages/web-components/src/appointment-planner/client/components/__tests__/date-cell.test.ts b/packages/web-components/src/appointment-planner/client/components/__tests__/date-cell.test.ts index 37a0014be7..8a2abb9c59 100644 --- a/packages/web-components/src/appointment-planner/client/components/__tests__/date-cell.test.ts +++ b/packages/web-components/src/appointment-planner/client/components/__tests__/date-cell.test.ts @@ -12,7 +12,7 @@ afterEach(() => { describe('data-cell', () => { it('it matches a snapshot', () => { - const wrapper = render(DataCell, { date: dayjs() }) + const wrapper = render(DataCell, { date: dayjs(), themeClasses: {} }) const { container } = wrapper expect(container).toMatchSnapshot() diff --git a/packages/web-components/src/appointment-planner/client/components/__tests__/date-time-picker.test.ts b/packages/web-components/src/appointment-planner/client/components/__tests__/date-time-picker.test.ts index 807e40bc85..bc451e5f97 100644 --- a/packages/web-components/src/appointment-planner/client/components/__tests__/date-time-picker.test.ts +++ b/packages/web-components/src/appointment-planner/client/components/__tests__/date-time-picker.test.ts @@ -11,7 +11,7 @@ afterEach(() => { describe('DateTimePicker', () => { it('it matches a snapshot', () => { - const wrapper = render(DateTimePicker) + const wrapper = render(DateTimePicker, { themeClasses: {} }) const { container } = wrapper expect(container).toMatchSnapshot() diff --git a/packages/web-components/src/appointment-planner/client/components/__tests__/time-cell.test.ts b/packages/web-components/src/appointment-planner/client/components/__tests__/time-cell.test.ts index 832829e8bd..cc2a10bcef 100644 --- a/packages/web-components/src/appointment-planner/client/components/__tests__/time-cell.test.ts +++ b/packages/web-components/src/appointment-planner/client/components/__tests__/time-cell.test.ts @@ -12,7 +12,7 @@ afterEach(() => { describe('DateTimePicker', () => { it('it matches a snapshot', () => { - const wrapper = render(TimeCell, { startTime: dayjs() }) + const wrapper = render(TimeCell, { startTime: dayjs(), themeClasses: {} }) const { container } = wrapper expect(container).toMatchSnapshot() diff --git a/packages/web-components/src/search-widget/server/serverless.yml b/packages/web-components/src/search-widget/server/serverless.yml index 11731448cb..3b428b44e9 100644 --- a/packages/web-components/src/search-widget/server/serverless.yml +++ b/packages/web-components/src/search-widget/server/serverless.yml @@ -1,11 +1,12 @@ -service: web-components +service: web-components.search-widget plugins: - serverless-webpack - serverless-offline - serverless-plugin-ifelse custom: - env: ${file(../../../config.json)} + # relative to web-components package root + env: ${file(./config.json)} webpack: webpackConfig: 'webpack.config.js' includeModules: true