From 7be522e1800809f0ee12821556d27ae7fe50d7b9 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Mon, 29 May 2023 16:07:26 +0900 Subject: [PATCH 01/18] =?UTF-8?q?feat:=20custom=20command=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/support/commands.ts | 40 ++++--------------------------------- cypress/support/index.d.ts | 5 +++++ 2 files changed, 9 insertions(+), 36 deletions(-) create mode 100644 cypress/support/index.d.ts diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 698b01a4..76aaa2af 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,37 +1,5 @@ /// -// *********************************************** -// This example commands.ts shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add('login', (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) -// -// declare global { -// namespace Cypress { -// interface Chainable { -// login(email: string, password: string): Chainable -// drag(subject: string, options?: Partial): Chainable -// dismiss(subject: string, options?: Partial): Chainable -// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable -// } -// } -// } \ No newline at end of file + +Cypress.Commands.add("getStory", (componentName, storyName) => { + return cy.get("#storybook-preview-iframe").its('0.contentDocument.body').should('not.be.empty').then(body => cy.wrap(body).find(`#story--components-${componentName}--${storyName}`)); +}) \ No newline at end of file diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts new file mode 100644 index 00000000..e530b5c8 --- /dev/null +++ b/cypress/support/index.d.ts @@ -0,0 +1,5 @@ +declare namespace Cypress { + interface Chainable { + getStory(componentName: string, storyName: string): Chainable> + } +} \ No newline at end of file From 089eb2f94a92aae51bc162cbc6354858911006b7 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Mon, 29 May 2023 16:23:57 +0900 Subject: [PATCH 02/18] =?UTF-8?q?test:=20Slider=20Click=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 cypress/e2e/components/slider.cy.ts diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts new file mode 100644 index 00000000..617a2e8c --- /dev/null +++ b/cypress/e2e/components/slider.cy.ts @@ -0,0 +1,25 @@ +const SLIDER_TRACK_ID = '#cds_Slider-slider-track'; +const SLIDER_FILLED_ID = '#cds_Slider-slider-filled'; +const SLIDER_THUMB_ID = '#cds_Slider-slider-thumb'; + +describe('Slider component test', () => { + beforeEach(() => { + cy.visit('http://localhost:6006/?path=/docs/components-slider--default'); + cy.getStory('slider', 'default').as('slider'); + cy.get('@slider').find(SLIDER_TRACK_ID).as('track'); + cy.get('@slider').find(SLIDER_FILLED_ID).as('filled'); + cy.get('@slider').find(SLIDER_THUMB_ID).as('thumb'); + }); + + describe('Default slider', () => { + it('Click min value', () => { + cy.get('@track').click('left'); + cy.get('@thumb').invoke('text').should('eq', '0'); + }); + + it('Click max value', () => { + cy.get('@track').click('right'); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + }); +}); From 05f9f28846d0b9bff171732258fd9cd0775d8f55 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Mon, 29 May 2023 16:47:29 +0900 Subject: [PATCH 03/18] =?UTF-8?q?feat:=20visitStory=20command=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 2 +- cypress/support/commands.ts | 6 +++++- cypress/support/index.d.ts | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 617a2e8c..64e6c219 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -4,7 +4,7 @@ const SLIDER_THUMB_ID = '#cds_Slider-slider-thumb'; describe('Slider component test', () => { beforeEach(() => { - cy.visit('http://localhost:6006/?path=/docs/components-slider--default'); + cy.visitStory('components-slider'); cy.getStory('slider', 'default').as('slider'); cy.get('@slider').find(SLIDER_TRACK_ID).as('track'); cy.get('@slider').find(SLIDER_FILLED_ID).as('filled'); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 76aaa2af..6b495ced 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,5 +1,9 @@ /// +Cypress.Commands.add("visitStory", (path) => { + cy.visit(`http://localhost:6006/?path=/docs/${path}`); +}) + Cypress.Commands.add("getStory", (componentName, storyName) => { return cy.get("#storybook-preview-iframe").its('0.contentDocument.body').should('not.be.empty').then(body => cy.wrap(body).find(`#story--components-${componentName}--${storyName}`)); -}) \ No newline at end of file +}) diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index e530b5c8..33c66cc7 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -1,5 +1,6 @@ declare namespace Cypress { interface Chainable { + visitStory(path: string): void, getStory(componentName: string, storyName: string): Chainable> } } \ No newline at end of file From 49857051586ad7021ed1505391387ac2a1a23e1d Mon Sep 17 00:00:00 2001 From: iyu88 Date: Mon, 29 May 2023 16:51:11 +0900 Subject: [PATCH 04/18] =?UTF-8?q?refactor:=20=ED=95=98=EC=9C=84=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20ID=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 64e6c219..d443550b 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -1,14 +1,15 @@ -const SLIDER_TRACK_ID = '#cds_Slider-slider-track'; -const SLIDER_FILLED_ID = '#cds_Slider-slider-filled'; -const SLIDER_THUMB_ID = '#cds_Slider-slider-thumb'; +const SLIDER_PREFIX = '#cds_Slider-slider'; +const TRACK_ID = `${SLIDER_PREFIX}-track`; +const FILLED_ID = `${SLIDER_PREFIX}-filled`; +const THUMB_ID = `${SLIDER_PREFIX}-thumb`; describe('Slider component test', () => { beforeEach(() => { cy.visitStory('components-slider'); cy.getStory('slider', 'default').as('slider'); - cy.get('@slider').find(SLIDER_TRACK_ID).as('track'); - cy.get('@slider').find(SLIDER_FILLED_ID).as('filled'); - cy.get('@slider').find(SLIDER_THUMB_ID).as('thumb'); + cy.get('@slider').find(TRACK_ID).as('track'); + cy.get('@slider').find(FILLED_ID).as('filled'); + cy.get('@slider').find(THUMB_ID).as('thumb'); }); describe('Default slider', () => { From 91fa0ceeaddeb2906d2498acd0cddfc6ddc40de8 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Mon, 29 May 2023 17:02:54 +0900 Subject: [PATCH 05/18] =?UTF-8?q?feat:=20alias=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=ED=99=94=20=ED=95=A8=EC=88=98=20=EC=84=A0=EC=96=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index d443550b..69afee57 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -4,15 +4,22 @@ const FILLED_ID = `${SLIDER_PREFIX}-filled`; const THUMB_ID = `${SLIDER_PREFIX}-thumb`; describe('Slider component test', () => { - beforeEach(() => { - cy.visitStory('components-slider'); - cy.getStory('slider', 'default').as('slider'); + const initAlias = (storyName: string) => { + cy.getStory('slider', storyName).as('slider'); cy.get('@slider').find(TRACK_ID).as('track'); cy.get('@slider').find(FILLED_ID).as('filled'); cy.get('@slider').find(THUMB_ID).as('thumb'); + } + + beforeEach(() => { + cy.visitStory('components-slider'); }); describe('Default slider', () => { + beforeEach(() => { + initAlias('default'); + }) + it('Click min value', () => { cy.get('@track').click('left'); cy.get('@thumb').invoke('text').should('eq', '0'); From 8cc3956ba52891749931eed1232c7f0a5bae78f4 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 02:13:05 +0900 Subject: [PATCH 06/18] =?UTF-8?q?feat:=20UI=20Paint=20=ED=99=95=EC=9D=B8?= =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 18 ++++++++++++++++-- cypress/support/index.d.ts | 5 ++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 69afee57..1b0f9350 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -11,6 +11,18 @@ describe('Slider component test', () => { cy.get('@slider').find(THUMB_ID).as('thumb'); } + const shouldBeEqualPercentage = (dimension: FilledDimension, position: ThumbPosition) => { + cy.get('@filled') + .invoke('css', dimension) + .then(dimensionPercentage => { + cy.get('@thumb') + .invoke('css', position) + .then(positionPercentage => { + expect(dimensionPercentage).equal(positionPercentage); + }); + }); + } + beforeEach(() => { cy.visitStory('components-slider'); }); @@ -22,12 +34,14 @@ describe('Slider component test', () => { it('Click min value', () => { cy.get('@track').click('left'); - cy.get('@thumb').invoke('text').should('eq', '0'); + cy.get('@thumb').invoke('text').should('eq', '0'); + shouldBeEqualPercentage('width', 'left'); }); it('Click max value', () => { cy.get('@track').click('right'); - cy.get('@thumb').invoke('text').should('eq', '100'); + cy.get('@thumb').invoke('text').should('eq', '100'); + shouldBeEqualPercentage('width', 'left'); }); }); }); diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index 33c66cc7..1208a522 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -3,4 +3,7 @@ declare namespace Cypress { visitStory(path: string): void, getStory(componentName: string, storyName: string): Chainable> } -} \ No newline at end of file +} + +type FilledDimension = 'width' | 'height'; +type ThumbPosition = 'left' | 'bottom'; From 015ec34bf16e0866184df7f7130ad36c13d1d295 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 02:39:10 +0900 Subject: [PATCH 07/18] =?UTF-8?q?test:=20Arrow=20Key=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 1b0f9350..dfa54b3e 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -43,5 +43,15 @@ describe('Slider component test', () => { cy.get('@thumb').invoke('text').should('eq', '100'); shouldBeEqualPercentage('width', 'left'); }); + + it('Increase with right arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 39 }); + cy.get('@thumb').invoke('text').should('eq', '51'); + }); + + it('Decrease with left arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 37 }); + cy.get('@thumb').invoke('text').should('eq', '49'); + }); }); }); From d2ab640042d1e02765c463d3f3f15d2965c54dab Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 02:49:24 +0900 Subject: [PATCH 08/18] =?UTF-8?q?test:=20Arrow=20Key=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20(up,=20down)=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index dfa54b3e..779f380c 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -49,9 +49,19 @@ describe('Slider component test', () => { cy.get('@thumb').invoke('text').should('eq', '51'); }); + it('Increase with up arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 38 }); + cy.get('@thumb').invoke('text').should('eq', '51'); + }); + it('Decrease with left arrow', () => { cy.get("@thumb").trigger('keydown', { keyCode : 37 }); cy.get('@thumb').invoke('text').should('eq', '49'); }); + + it('Decrease with down arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 40 }); + cy.get('@thumb').invoke('text').should('eq', '49'); + }); }); }); From 10fef6d3f552a7dc5751681c780488f8ed2c9863 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 02:53:05 +0900 Subject: [PATCH 09/18] =?UTF-8?q?test:=20Page=20Up,=20Down=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 779f380c..1fbc72f1 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -63,5 +63,15 @@ describe('Slider component test', () => { cy.get("@thumb").trigger('keydown', { keyCode : 40 }); cy.get('@thumb').invoke('text').should('eq', '49'); }); + + it('Increase with page up', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 33 }); + cy.get('@thumb').invoke('text').should('eq', '60'); + }); + + it('Decrease with page down', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 34 }); + cy.get('@thumb').invoke('text').should('eq', '40'); + }); }); }); From 79785c68e1cde938979121d29ac3997ff7dd86a5 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 02:55:38 +0900 Subject: [PATCH 10/18] =?UTF-8?q?test:=20Home,=20End=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 1fbc72f1..5a2d314f 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -73,5 +73,15 @@ describe('Slider component test', () => { cy.get("@thumb").trigger('keydown', { keyCode : 34 }); cy.get('@thumb').invoke('text').should('eq', '40'); }); + + it('Set min with home key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 36 }); + cy.get('@thumb').invoke('text').should('eq', '0'); + }); + + it('Set max with end key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 35 }); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); }); }); From 1a86948dba551bf8efd484f8587ade4697de3449 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 15:11:53 +0900 Subject: [PATCH 11/18] =?UTF-8?q?feat:=20afterEach=EC=97=90=EC=84=9C=20sho?= =?UTF-8?q?uldBeEqualPercentage=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 5a2d314f..0bd1b336 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -30,18 +30,20 @@ describe('Slider component test', () => { describe('Default slider', () => { beforeEach(() => { initAlias('default'); - }) + }); + + afterEach(() => { + shouldBeEqualPercentage('width', 'left'); + }); it('Click min value', () => { cy.get('@track').click('left'); cy.get('@thumb').invoke('text').should('eq', '0'); - shouldBeEqualPercentage('width', 'left'); }); it('Click max value', () => { cy.get('@track').click('right'); cy.get('@thumb').invoke('text').should('eq', '100'); - shouldBeEqualPercentage('width', 'left'); }); it('Increase with right arrow', () => { From ecba372f174d924b798d4aaf0a7798b772d9c289 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 18:10:37 +0900 Subject: [PATCH 12/18] =?UTF-8?q?refactor:=20shouldBeEqualPercentage=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 함수 내부에서 getComputedStyle를 사용하여 window에서 표시되는 스타일 값으로 비교합니다. --- cypress/e2e/components/slider.cy.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 0bd1b336..33741dee 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -12,15 +12,13 @@ describe('Slider component test', () => { } const shouldBeEqualPercentage = (dimension: FilledDimension, position: ThumbPosition) => { - cy.get('@filled') - .invoke('css', dimension) - .then(dimensionPercentage => { - cy.get('@thumb') - .invoke('css', position) - .then(positionPercentage => { - expect(dimensionPercentage).equal(positionPercentage); - }); + cy.get('@filled').then(([ filledElement ]) => { + cy.get('@thumb').then(([ thumbElement ]) => { + const filledStyle = window.getComputedStyle(filledElement)[dimension]; + const thumbStyle = window.getComputedStyle(thumbElement)[position]; + expect(filledStyle).equal(thumbStyle); }); + }); } beforeEach(() => { From 3eca2cb236d46888ed2e776e63bac2fb6da138e4 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 18:45:40 +0900 Subject: [PATCH 13/18] =?UTF-8?q?test:=20min=20value=20variant=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 60 +++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 33741dee..4643e5a4 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -84,4 +84,64 @@ describe('Slider component test', () => { cy.get('@thumb').invoke('text').should('eq', '100'); }); }); + + describe('Min Value Variant slider', () => { + beforeEach(() => { + initAlias('min-value-variant'); + }); + + afterEach(() => { + shouldBeEqualPercentage('width', 'left'); + }); + + it('Click min value', () => { + cy.get('@track').click('left'); + cy.get('@thumb').invoke('text').should('eq', '50'); + }); + + it('Click max value', () => { + cy.get('@track').click('right'); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + + it('Increase with right arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 39 }); + cy.get('@thumb').invoke('text').should('eq', '76'); + }); + + it('Increase with up arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 38 }); + cy.get('@thumb').invoke('text').should('eq', '76'); + }); + + it('Decrease with left arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 37 }); + cy.get('@thumb').invoke('text').should('eq', '74'); + }); + + it('Decrease with down arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 40 }); + cy.get('@thumb').invoke('text').should('eq', '74'); + }); + + it('Increase with page up', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 33 }); + cy.get('@thumb').invoke('text').should('eq', '80'); + }); + + it('Decrease with page down', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 34 }); + cy.get('@thumb').invoke('text').should('eq', '70'); + }); + + it('Set min with home key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 36 }); + cy.get('@thumb').invoke('text').should('eq', '50'); + }); + + it('Set max with end key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 35 }); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + }); }); From d27dc493ea9f9883dbcb6eb2c1a2338d2319c2e3 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 18:48:40 +0900 Subject: [PATCH 14/18] =?UTF-8?q?test:=20max=20value=20variant=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 60 +++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 4643e5a4..f7e62a5a 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -144,4 +144,64 @@ describe('Slider component test', () => { cy.get('@thumb').invoke('text').should('eq', '100'); }); }); + + describe('Max Value Variant slider', () => { + beforeEach(() => { + initAlias('max-value-variant'); + }); + + afterEach(() => { + shouldBeEqualPercentage('width', 'left'); + }); + + it('Click min value', () => { + cy.get('@track').click('left'); + cy.get('@thumb').invoke('text').should('eq', '50'); + }); + + it('Click max value', () => { + cy.get('@track').click('right'); + cy.get('@thumb').invoke('text').should('eq', '200'); + }); + + it('Increase with right arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 39 }); + cy.get('@thumb').invoke('text').should('eq', '101'); + }); + + it('Increase with up arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 38 }); + cy.get('@thumb').invoke('text').should('eq', '101'); + }); + + it('Decrease with left arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 37 }); + cy.get('@thumb').invoke('text').should('eq', '99'); + }); + + it('Decrease with down arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 40 }); + cy.get('@thumb').invoke('text').should('eq', '99'); + }); + + it('Increase with page up', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 33 }); + cy.get('@thumb').invoke('text').should('eq', '115'); + }); + + it('Decrease with page down', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 34 }); + cy.get('@thumb').invoke('text').should('eq', '85'); + }); + + it('Set min with home key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 36 }); + cy.get('@thumb').invoke('text').should('eq', '50'); + }); + + it('Set max with end key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 35 }); + cy.get('@thumb').invoke('text').should('eq', '200'); + }); + }); }); From e3bb685d9b274883c8d9d7b68af4650d7bbf8fd4 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 18:56:39 +0900 Subject: [PATCH 15/18] =?UTF-8?q?test:=20With=20steps=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 80 +++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index f7e62a5a..5ee60419 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -204,4 +204,84 @@ describe('Slider component test', () => { cy.get('@thumb').invoke('text').should('eq', '200'); }); }); + + describe('With Step 10 slider', () => { + beforeEach(() => { + initAlias('with-step-10'); + }); + + afterEach(() => { + shouldBeEqualPercentage('width', 'left'); + }); + + it('Increase with right arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 39 }); + cy.get('@thumb').invoke('text').should('eq', '60'); + }); + + it('Increase with up arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 38 }); + cy.get('@thumb').invoke('text').should('eq', '60'); + }); + + it('Decrease with left arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 37 }); + cy.get('@thumb').invoke('text').should('eq', '40'); + }); + + it('Decrease with down arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 40 }); + cy.get('@thumb').invoke('text').should('eq', '40'); + }); + + it('Increase with page up', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 33 }); + cy.get('@thumb').invoke('text').should('eq', '60'); + }); + + it('Decrease with page down', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 34 }); + cy.get('@thumb').invoke('text').should('eq', '40'); + }); + }); + + describe('With Step 20 slider', () => { + beforeEach(() => { + initAlias('with-step-20'); + }); + + afterEach(() => { + shouldBeEqualPercentage('width', 'left'); + }); + + it('Increase with right arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 39 }); + cy.get('@thumb').invoke('text').should('eq', '70'); + }); + + it('Increase with up arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 38 }); + cy.get('@thumb').invoke('text').should('eq', '70'); + }); + + it('Decrease with left arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 37 }); + cy.get('@thumb').invoke('text').should('eq', '30'); + }); + + it('Decrease with down arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 40 }); + cy.get('@thumb').invoke('text').should('eq', '30'); + }); + + it('Increase with page up', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 33 }); + cy.get('@thumb').invoke('text').should('eq', '60'); + }); + + it('Decrease with page down', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 34 }); + cy.get('@thumb').invoke('text').should('eq', '40'); + }); + }); }); From 396c281e2b85fd6c0dc04b25d8b40943dc665af2 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 19:01:58 +0900 Subject: [PATCH 16/18] =?UTF-8?q?test:=20Start=20variant=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 50 +++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 5ee60419..23585be1 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -85,6 +85,56 @@ describe('Slider component test', () => { }); }); + describe('Start From Zero slider', () => { + beforeEach(() => { + initAlias('start-from-zero'); + }); + + afterEach(() => { + shouldBeEqualPercentage('width', 'left'); + }); + + it('Decrease with left arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 37 }); + cy.get('@thumb').invoke('text').should('eq', '0'); + }); + + it('Decrease with down arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 40 }); + cy.get('@thumb').invoke('text').should('eq', '0'); + }); + + it('Decrease with page down', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 34 }); + cy.get('@thumb').invoke('text').should('eq', '0'); + }); + }); + + describe('Start From End slider', () => { + beforeEach(() => { + initAlias('start-from-end'); + }); + + afterEach(() => { + shouldBeEqualPercentage('width', 'left'); + }); + + it('Increase with right arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 39 }); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + + it('Increase with up arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 38 }); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + + it('Increase with page up', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 33 }); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + }); + describe('Min Value Variant slider', () => { beforeEach(() => { initAlias('min-value-variant'); From 497391697f210ed27c80188e1ce1d3947a5c1ca9 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Tue, 30 May 2023 22:26:53 +0900 Subject: [PATCH 17/18] =?UTF-8?q?test:=20Vertical=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/components/slider.cy.ts | 60 +++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 23585be1..7b17bbc0 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -334,4 +334,64 @@ describe('Slider component test', () => { cy.get('@thumb').invoke('text').should('eq', '40'); }); }); + + describe('With Vertical Orientation slider', () => { + beforeEach(() => { + initAlias('with-vertical-orientation'); + }); + + afterEach(() => { + shouldBeEqualPercentage('height', 'bottom'); + }); + + it('Click min value', () => { + cy.get('@track').click(0, 200, { force: true }); + cy.get('@thumb').invoke('text').should('eq', '0'); + }); + + it('Click max value', () => { + cy.get('@track').click('top'); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + + it('Increase with right arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 39 }); + cy.get('@thumb').invoke('text').should('eq', '51'); + }); + + it('Increase with up arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 38 }); + cy.get('@thumb').invoke('text').should('eq', '51'); + }); + + it('Decrease with left arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 37 }); + cy.get('@thumb').invoke('text').should('eq', '49'); + }); + + it('Decrease with down arrow', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 40 }); + cy.get('@thumb').invoke('text').should('eq', '49'); + }); + + it('Increase with page up', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 33 }); + cy.get('@thumb').invoke('text').should('eq', '60'); + }); + + it('Decrease with page down', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 34 }); + cy.get('@thumb').invoke('text').should('eq', '40'); + }); + + it('Set min with home key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 36 }); + cy.get('@thumb').invoke('text').should('eq', '0'); + }); + + it('Set max with end key', () => { + cy.get("@thumb").trigger('keydown', { keyCode : 35 }); + cy.get('@thumb').invoke('text').should('eq', '100'); + }); + }); }); From ca4a7c984b7b4a71848a152b51b37e961f7fc23f Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 2 Jun 2023 22:00:53 +0900 Subject: [PATCH 18/18] =?UTF-8?q?feat:=20visitStory=20=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EA=B0=9C=EB=B3=84=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EB=B0=A9?= =?UTF-8?q?=EB=AC=B8=20URL=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 스토리 Docs에서 iframe 내부에 있는 DOM 요소에 접근하는 방식으로 visitStory가 작성되어 있던 점을 수정합니다. 개별 스토리에 대한 iframe 내부로 바로 접근할 수 있도록 URL 주소를 수정합니다. 이로 인해서 getStory 커맨드는 더 이상 사용하지 않게 되어 삭제합니다. 더불어 initAlias 함수에서 스토리의 최상위 부모 요소인 #root로부터 하위 컴포넌트를 찾도록 변경합니다. 아울러 공통적으로 적용되는 beforeEach는 삭제합니다. --- cypress/e2e/components/slider.cy.ts | 38 ++++++++++++++++------------- cypress/support/commands.ts | 8 ++---- cypress/support/index.d.ts | 3 +-- 3 files changed, 24 insertions(+), 25 deletions(-) diff --git a/cypress/e2e/components/slider.cy.ts b/cypress/e2e/components/slider.cy.ts index 7b17bbc0..f5a4b618 100644 --- a/cypress/e2e/components/slider.cy.ts +++ b/cypress/e2e/components/slider.cy.ts @@ -4,11 +4,11 @@ const FILLED_ID = `${SLIDER_PREFIX}-filled`; const THUMB_ID = `${SLIDER_PREFIX}-thumb`; describe('Slider component test', () => { - const initAlias = (storyName: string) => { - cy.getStory('slider', storyName).as('slider'); - cy.get('@slider').find(TRACK_ID).as('track'); - cy.get('@slider').find(FILLED_ID).as('filled'); - cy.get('@slider').find(THUMB_ID).as('thumb'); + const initAlias = () => { + cy.get('#root').as('root'); + cy.get('@root').find(TRACK_ID).as('track'); + cy.get('@root').find(FILLED_ID).as('filled'); + cy.get('@root').find(THUMB_ID).as('thumb'); } const shouldBeEqualPercentage = (dimension: FilledDimension, position: ThumbPosition) => { @@ -21,13 +21,10 @@ describe('Slider component test', () => { }); } - beforeEach(() => { - cy.visitStory('components-slider'); - }); - describe('Default slider', () => { beforeEach(() => { - initAlias('default'); + cy.visitStory('slider', 'default'); + initAlias(); }); afterEach(() => { @@ -87,7 +84,8 @@ describe('Slider component test', () => { describe('Start From Zero slider', () => { beforeEach(() => { - initAlias('start-from-zero'); + cy.visitStory('slider', 'start-from-zero'); + initAlias(); }); afterEach(() => { @@ -112,7 +110,8 @@ describe('Slider component test', () => { describe('Start From End slider', () => { beforeEach(() => { - initAlias('start-from-end'); + cy.visitStory('slider', 'start-from-end'); + initAlias(); }); afterEach(() => { @@ -137,7 +136,8 @@ describe('Slider component test', () => { describe('Min Value Variant slider', () => { beforeEach(() => { - initAlias('min-value-variant'); + cy.visitStory('slider', 'min-value-variant'); + initAlias(); }); afterEach(() => { @@ -197,7 +197,8 @@ describe('Slider component test', () => { describe('Max Value Variant slider', () => { beforeEach(() => { - initAlias('max-value-variant'); + cy.visitStory('slider', 'max-value-variant'); + initAlias(); }); afterEach(() => { @@ -257,7 +258,8 @@ describe('Slider component test', () => { describe('With Step 10 slider', () => { beforeEach(() => { - initAlias('with-step-10'); + cy.visitStory('slider', 'with-step-10'); + initAlias(); }); afterEach(() => { @@ -297,7 +299,8 @@ describe('Slider component test', () => { describe('With Step 20 slider', () => { beforeEach(() => { - initAlias('with-step-20'); + cy.visitStory('slider', 'with-step-20'); + initAlias(); }); afterEach(() => { @@ -337,7 +340,8 @@ describe('Slider component test', () => { describe('With Vertical Orientation slider', () => { beforeEach(() => { - initAlias('with-vertical-orientation'); + cy.visitStory('slider', 'with-vertical-orientation'); + initAlias(); }); afterEach(() => { diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 6b495ced..b8a22b99 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,9 +1,5 @@ /// -Cypress.Commands.add("visitStory", (path) => { - cy.visit(`http://localhost:6006/?path=/docs/${path}`); -}) - -Cypress.Commands.add("getStory", (componentName, storyName) => { - return cy.get("#storybook-preview-iframe").its('0.contentDocument.body').should('not.be.empty').then(body => cy.wrap(body).find(`#story--components-${componentName}--${storyName}`)); +Cypress.Commands.add("visitStory", (componentName, storyName) => { + cy.visit(`http://localhost:6006/iframe.html?id=components-${componentName}--${storyName}&viewMode=story`) }) diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index 1208a522..6607a16a 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -1,7 +1,6 @@ declare namespace Cypress { interface Chainable { - visitStory(path: string): void, - getStory(componentName: string, storyName: string): Chainable> + visitStory(componentName: string, storyName: string): void, } }