@smileid/web-components 1.0.0-beta

package/cypress/e2e/smart-camera-web-hide-instructions.cy.js

@@ -0,0 +1,334 @@
+context('SmartCameraWeb', () => {
+  beforeEach(() => {
+    cy.visit('/smart-camera-web-hide-instructions');
+  });
+
+  it('should start from the request camera screen', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .should('contain.text', 'Request Camera Access');
+  });
+
+  it('should switch from the request screen to the selfie capture screen on clicking "Request Camera Access"', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .find('#request-camera-access')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+  });
+
+  it('should have a 8000ms timer', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .find('#request-camera-access')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.wait(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+  });
+
+  it('should switch from the selfie screen to the review screen on clicking "Take Selfie"', () => {
+    cy.clock();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .find('#request-camera-access')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+  });
+
+  it('should show a "SMILE" prompt halfway through the video capture', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .find('#request-camera-access')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#smile-cta')
+      .should('be.visible');
+
+    cy.wait(5000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#smile-cta')
+      .should('not.be.visible');
+  });
+
+  it('should switch from the review screen back to the selfie capture screen on clicking "Re-take selfie"', () => {
+    cy.clock();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .find('#request-camera-access')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('#re-capture-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+  });
+
+  it('should switch from the camera screen to selfie review screen on clicking "Yes, use this"', () => {
+    cy.clock();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .find('#request-camera-access')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .should('not.be.visible');
+  });
+
+  it('should switch to request screen when "Rest"', () => {
+    cy.get('smart-camera-web').then((element) => {
+      element[0].reset();
+    });
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .shadow()
+      .find('#request-camera-access')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+
+    cy.get('smart-camera-web').then((element) => {
+      element[0].reset();
+    });
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('not.be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('camera-permission')
+      .should('be.visible');
+  });
+});

package/cypress/e2e/smart-camera-web.cy.js

@@ -0,0 +1,309 @@
+context('SmartCameraWeb', () => {
+  beforeEach(() => {
+    cy.visit('/smart-camera-web');
+  });
+
+  it('should start from the instructions screen', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .should('contain.text', "Next, we'll take a quick selfie");
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+  });
+
+  it('should switch from the instruction screen to the camera screen on clicking "Allow"', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.wait(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+  });
+
+  it('should have a timer for the capture', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.wait(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+  });
+
+  it('should show a "SMILE" prompt halfway through the video capture', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#smile-cta')
+      .should('be.visible');
+
+    cy.wait(5000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#smile-cta')
+      .should('not.be.visible');
+  });
+
+  it('should switch from the review screen back to the selfie instruction screen on clicking "Re-take selfie"', () => {
+    cy.clock();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('#re-capture-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('be.visible');
+  });
+
+  it('should switch from the camera screen to selfie review screen on clicking "Yes, use this"', () => {
+    cy.clock();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .should('not.be.visible');
+  });
+
+  it('should switch to request screen when "Rest"', () => {
+    cy.get('smart-camera-web').then((element) => {
+      element[0].reset();
+    });
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+
+    cy.get('smart-camera-web').then((element) => {
+      element[0].reset();
+    });
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('not.be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('be.visible');
+  });
+});

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/pages/capture-back-of-id-hide-attribution.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      body {
+        max-width: 100%;
+        min-height: 100%;
+      }
+
+      smart-camera-web {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 40ch;
+        padding: 1rem;
+        width: auto;
+      }
+    </style>
+  </head>
+
+  <body>
+    <smart-camera-web
+      capture-id="back"
+      hide-attribution
+      disable-image-tests
+      document-capture-modes="camera,upload"
+    >
+    </smart-camera-web>
+
+    <script src="./js/components/smart-camera-web/src/SmartCameraWeb.js"></script>
+    <script>
+      const app = document.querySelector('smart-camera-web');
+      app.addEventListener('smart-camera-web.publish', async (e) => {
+        console.log(e.detail);
+      });
+    </script>
+  </body>
+</html>