Skip to content

Commit

Permalink
feat: date editor with new f36 datepicker, do yarn deduplicate for f3…
Browse files Browse the repository at this point in the history 
…6-components [BAU-696] (contentful#1225)

* feat: date editor with new f36 datepicker

* chore: cleanup

* fix: fix tests

* chore: roll back default date format, bump datepicker

* test: fix cy test

* chore: ready release

* fix: fix cypress tests

* Update doczrc.js

* chore: do yarn.lock deduplicate

* chore: update f36-components

* fix: fix typing date into DatepickerInput

* fix: fix cypress test

* fix(field-editor-date): remove styles

* fix: fix unit tests

Co-authored-by: denkristoffer <[email protected]>
  • Loading branch information
@bgutsol @denkristoffer
bgutsol and denkristoffer authored Sep 13, 2022
1 parent 2783303 commit bc142a3
Show file tree
Hide file tree
Showing 18 changed files with 522 additions and 1,522 deletions.
51 changes: 27 additions & 24 deletions cypress/integration/DateEditor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ describe('Date Editor', () => {

const selectors = {
getDateInput: () => {
return cy.findByTestId('date-input');
return cy.findByTestId('cf-ui-datepicker-input');
},
getCalendarTrigger: () => {
return cy.findByTestId('cf-ui-datepicker-button');
},
getTimeInput: () => {
return cy.findByTestId('time-input');
Expand All @@ -16,19 +19,19 @@ describe('Date Editor', () => {
return cy.findByTestId('date-clear');
},
getCalendar: () => {
return cy.get('.pika-lendar');
return cy.get('.rdp');
},
getCalendarMonth: () => {
return cy.get('.pika-lendar .pika-select-month');
return cy.get('.rdp select[aria-label="Month: "]');
},
getCalendarYear: () => {
return cy.get('.pika-lendar .pika-select-year');
return cy.get('.rdp select[aria-label="Year: "]');
},
getCalendarTodayDate: () => {
return cy.get('.pika-lendar .is-today');
return cy.get('.rdp .rdp-day_today');
},
getCalendarSelectedDate: () => {
return cy.get('.pika-lendar .is-selected');
return cy.get('.rdp .rdp-day_selected');
},
};

Expand Down Expand Up @@ -69,7 +72,7 @@ describe('Date Editor', () => {
cy.setInitialValue('2018-01-03T05:53+03:00');
openPage();

selectors.getDateInput().should('have.value', 'Wednesday, January 3rd 2018');
selectors.getDateInput().should('have.value', '03 Jan 2018');
selectors.getTimeInput().should('have.value', '05:53');
selectors.getTimezoneInput().should('have.value', '+03:00');
});
Expand All @@ -91,7 +94,7 @@ describe('Date Editor', () => {
openPage();
const { year, month, date } = getToday();

selectors.getDateInput().click();
selectors.getCalendarTrigger().click();

selectors.getCalendar().should('be.visible');
selectors.getCalendarYear().should('have.value', year.toString());
Expand All @@ -104,9 +107,9 @@ describe('Date Editor', () => {
openPage();
selectors.getTimezoneInput().select('+08:00').blur().should('have.value', '+08:00');

selectors.getDateInput().click();
selectors.getCalendarTrigger().click();
selectors.getCalendarTodayDate().click();
selectors.getDateInput().blur().should('have.value', 'Friday, February 15th 2019');
selectors.getDateInput().should('have.value', '15 Feb 2019');

selectors.getTimeInput().focus().type('15:00').blur().should('have.value', '15:00');

Expand Down Expand Up @@ -135,15 +138,15 @@ describe('Date Editor', () => {

openPage();

selectors.getDateInput().should('have.value', 'Wednesday, January 3rd 1990');
selectors.getDateInput().should('have.value', '03 Jan 1990');
selectors.getTimeInput().should('have.value', '22:53');
selectors.getTimezoneInput().should('have.value', '+03:00');

cy.setValueExternal('1992-01-03T21:40+05:00');

cy.wait(500);

selectors.getDateInput().should('have.value', 'Friday, January 3rd 1992');
selectors.getDateInput().should('have.value', '03 Jan 1992');
selectors.getTimeInput().should('have.value', '21:40');
selectors.getTimezoneInput().should('have.value', '+05:00');
});
Expand Down Expand Up @@ -179,11 +182,11 @@ describe('Date Editor', () => {
cy.setInitialValue('1990-01-03T22:53+03:00');
openPage();

selectors.getDateInput().should('have.value', 'Wednesday, January 3rd 1990');
selectors.getDateInput().should('have.value', '03 Jan 1990');
selectors.getTimeInput().should('have.value', '10:53 PM');
selectors.getTimezoneInput().should('not.exist');

selectors.getDateInput().click();
selectors.getCalendarTrigger().click();

selectors.getCalendar().should('be.visible');
selectors.getCalendarYear().should('have.value', '1990');
Expand Down Expand Up @@ -212,9 +215,9 @@ describe('Date Editor', () => {
it('correct actions are called when user interacts with editor', () => {
openPage();

selectors.getDateInput().click();
selectors.getCalendarTrigger().click();
selectors.getCalendarTodayDate().click();
selectors.getDateInput().blur().should('have.value', 'Friday, February 15th 2019');
selectors.getDateInput().should('have.value', '15 Feb 2019');

selectors.getTimeInput().focus().type('3:00 PM').blur().should('have.value', '03:00 PM');

Expand Down Expand Up @@ -242,14 +245,14 @@ describe('Date Editor', () => {

openPage();

selectors.getDateInput().should('have.value', 'Wednesday, January 3rd 1990');
selectors.getDateInput().should('have.value', '03 Jan 1990');
selectors.getTimeInput().should('have.value', '10:53 PM');

cy.setValueExternal('1992-01-03T21:40');

cy.wait(500);

selectors.getDateInput().should('have.value', 'Friday, January 3rd 1992');
selectors.getDateInput().should('have.value', '03 Jan 1992');
selectors.getTimeInput().should('have.value', '09:40 PM');
});
});
Expand All @@ -265,11 +268,11 @@ describe('Date Editor', () => {
cy.setInitialValue('1990-01-03T22:53');
openPage();

selectors.getDateInput().should('have.value', 'Wednesday, January 3rd 1990');
selectors.getDateInput().should('have.value', '03 Jan 1990');
selectors.getTimeInput().should('not.exist');
selectors.getTimezoneInput().should('not.exist');

selectors.getDateInput().click();
selectors.getCalendarTrigger().click();

selectors.getCalendar().should('be.visible');
selectors.getCalendarYear().should('have.value', '1990');
Expand All @@ -280,9 +283,9 @@ describe('Date Editor', () => {
it('correct actions are called when user interacts with editor', () => {
openPage();

selectors.getDateInput().click();
selectors.getCalendarTrigger().click();
selectors.getCalendarTodayDate().click();
selectors.getDateInput().blur().should('have.value', 'Friday, February 15th 2019');
selectors.getDateInput().should('have.value', '15 Feb 2019');

selectors.getClearBtn().click();

Expand All @@ -305,11 +308,11 @@ describe('Date Editor', () => {

openPage();

selectors.getDateInput().should('have.value', 'Wednesday, January 3rd 1990');
selectors.getDateInput().should('have.value', '03 Jan 1990');

cy.setValueExternal('1992-01-03');

selectors.getDateInput().should('have.value', 'Friday, January 3rd 1992');
selectors.getDateInput().should('have.value', '03 Jan 1992');
});
});
});
2 changes: 1 addition & 1 deletion cypress/integration/MarkdownEditorCheatsheet.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
describe('Markdown Editor / Cheatsheet Dialog', () => {
const selectors = {
getDialogTitle() {
return cy.findByTestId('dialog-title').find('h1');
return cy.findByTestId('dialog-title').find('h2');
},
getOpenCheatsheetButton() {
return cy.findByTestId('open-markdown-cheatsheet-button');
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/MarkdownEditorInsertLink.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe('Markdown Editor / Insert Link Dialog', () => {
return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').find('h1');
return cy.findByTestId('dialog-title').find('h2');
},
getInsertDialogButton() {
return cy.findByTestId('markdown-action-button-link');
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/MarkdownEditorInsertTable.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe('Markdown Editor / Insert Table Dialog', () => {
return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').find('h1');
return cy.findByTestId('dialog-title').find('h2');
},
getToggleAdditionalActionsButton: () => {
return cy.findByTestId('markdown-action-button-toggle-additional');
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/MarkdownEditorSpecialCharacter.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe('Markdown Editor / Insert Special Character Dialog', () => {
return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').find('h1');
return cy.findByTestId('dialog-title').find('h2');
},
getToggleAdditionalActionsButton: () => {
return cy.findByTestId('markdown-action-button-toggle-additional');
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/MarkdownEmbedExternal.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe('Markdown Editor / Embed External Dialog', () => {
return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').find('h1');
return cy.findByTestId('dialog-title').find('h2');
},
getToggleAdditionalActionsButton: () => {
return cy.findByTestId('markdown-action-button-toggle-additional');
Expand Down
6 changes: 5 additions & 1 deletion cypress/plugins/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'],
},
// needed to prevent ReferenceErrors
// cf. https://github.com/webpack/webpack/issues/6693#issuecomment-745688108
Expand All @@ -24,6 +24,10 @@ module.exports = {
},
],
},
{
test: /\.mjs$/,
type: 'javascript/auto',
},
],
},
};
26 changes: 16 additions & 10 deletions doczrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
/* global process */

import tokens from '@contentful/f36-tokens';
import fs from 'fs';

const pikadayStyles = fs.readFileSync(process.cwd() + '/packages/date/styles/styles.css');

export default {
title: 'Contentful Field Editors',
Expand Down Expand Up @@ -42,11 +37,6 @@ export default {
},
},
},
htmlContext: {
head: {
raw: `<style>${pikadayStyles}</style>`,
},
},
menu: ['Introduction', 'Editors', 'Shared'],
wrapper: 'docz.wrapper.jsx',
modifyBabelRc: (babelrc) => {
Expand All @@ -60,4 +50,20 @@ export default {
};
return newBabelRc;
},
modifyBundlerConfig: (webpackConfig) => {
const config = {
...webpackConfig,
module: {
...webpackConfig.module,
rules: [
...webpackConfig.module.rules,
{
test: /\.mjs$/,
type: 'javascript/auto',
},
],
},
};
return config;
},
};
13 changes: 4 additions & 9 deletions packages/date/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
"typings": "dist/index.d.ts",
"style": "styles/styles.css",
"files": [
"dist",
"styles"
"dist"
],
"author": "Contentful GmbH",
"license": "MIT",
Expand All @@ -23,19 +22,15 @@
"test:ci": "tsdx test --env=jsdom --ci"
},
"dependencies": {
"@contentful/f36-components": "^4.9.0",
"@contentful/f36-components": "^4.20.1",
"@contentful/f36-tokens": "^4.0.0",
"@contentful/field-editor-shared": "^1.1.3",
"emotion": "^10.0.17",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15",
"moment": "^2.20.0",
"pikaday": "^1.8.2"
"moment": "^2.20.0"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@contentful/field-editor-test-utils": "^1.2.2",
"@types/pikaday": "^1.7.4"
"@contentful/field-editor-test-utils": "^1.2.2"
},
"peerDependencies": {
"react": ">=16.8.0"
Expand Down
Loading

0 comments on commit bc142a3

Please sign in to comment.