Feedback

.github/actions/css/cypress.config.js

@@ -0,0 +1,18 @@
+const cypressPath = process.env.CYPRESS_PATH ? process.env.CYPRESS_PATH : '.';
+
+module.exports = {
+  e2e: {
+    baseUrl: "http://localhost:8080",
+    specPattern: `${cypressPath}/cypress/integration/**/*.test.js`,
+    video: true,
+    screenshotsFolder: `${cypressPath}/cypress/screenshots`,
+    videosFolder: `${cypressPath}/cypress/videos`,
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    supportFile: false,
+    reporter: 'junit',
+    reporterOptions: {
+      mochaFile: `${cypressPath}/cypress/reports/report-[hash].xml`
+    },
+  }
+}

.github/actions/css/cypress/integration/t1.test.js

@@ -0,0 +1,12 @@
+describe('T1: Paleta de Cores', () => {
+  before(() => {
+    cy.visit('/index.html')
+  })
+  it('Deve ter uma cor customizada para o fundo da página', () => {
+    console.log()
+    cy.get('body').should('have.css', 'background-color').and('not.equal', 'rgba(0, 0, 0, 0)')
+  })
+  it('Deve ter uma cor customizada para o texto da página', () => {
+    cy.get('body').should('have.css', 'color').and('not.equal', 'rgb(46, 50, 71)')
+  })
+});

.github/actions/css/cypress/integration/t2.test.js

@@ -0,0 +1,57 @@
+describe('T2: Estrutura Textual', () => {
+    beforeEach(() => {
+        cy.visit('/index.html')
+    })
+
+    it('Aspectos gerais de tamanho e fonte devem estar conforme o enunciado', () => {
+        // 1.1. Check if the page has a fixed size
+        cy.get('body').should('have.css', 'width')
+        cy.get('body').should('have.css', 'height')
+
+        // 1.2. Check if the page font is sans-serif
+        cy.get('body').should('have.css', 'font-family').and('match', /sans-serif/)
+
+        // 1.3. Check if the paragraphs are indented by 1em
+        cy.get('p').should('have.css', 'text-indent', '16px')
+    })
+
+    it('Títulos e parágrafos devem possuir o tamanho correto', () => {
+        cy.get('h1').should(($h1) => {
+            const fontSize = parseFloat(window.getComputedStyle($h1[0]).fontSize);
+            expect(fontSize).to.be.at.least(24);
+        });
+        cy.get('h2').should(($h2) => {
+            const fontSize = parseFloat(window.getComputedStyle($h2[0]).fontSize);
+            expect(fontSize).to.be.at.least(22);
+        });
+        cy.get('h3').should(($h3) => {
+            const fontSize = parseFloat(window.getComputedStyle($h3[0]).fontSize);
+            expect(fontSize).to.be.at.least(18);
+        });
+        cy.get('h2').should(($h2) => {
+            const textIndent = parseFloat(window.getComputedStyle($h2[0]).textIndent);
+            expect(textIndent).to.be.at.least(16);
+        });
+      });
+
+    it('Deve ter alinhamento do resumo modificado', () => {
+        cy.get('.summary').should(($summary) => {
+            const style = window.getComputedStyle($summary[0]);
+            expect(style.textAlign).to.satisfy(val => val === 'right' || val === 'center');
+        });
+    });
+
+    it('Deve ter espaçamento entre as linhas customizado', () => {
+        cy.get('.main p').should(($p) => {
+            const style = window.getComputedStyle($p[0]);
+            expect(style.lineHeight).to.be.equal('24px');
+        });
+    });
+
+    it('Deve ter a abreviatura em small-caps', () => {  
+        cy.get('abbr').each(($abbr) => {
+          cy.wrap($abbr)
+            .should('have.css', 'font-variant', 'small-caps');
+        });
+    });
+})

.github/actions/css/cypress/integration/t3.test.js

@@ -0,0 +1,68 @@
+describe('T3: Box Model', () => {
+  beforeEach(() => {
+    cy.visit('/index.html')
+  })
+
+  it('Deve definir diretivas gerais para a página', () => {
+    // cy.get('.page-wrapper').should('have.css', 'width', '80%')
+    cy.get('.page-wrapper').should(($elem) => {
+      const style = window.getComputedStyle($elem[0]);
+      const margin = parseInt(style.marginLeft.replace('px', ''), 10);
+      const maxWidth = style.maxWidth;
+      expect(maxWidth).to.be.equals('1280px');
+      expect(margin).to.be.at.least(50);
+    })	  
+
+    cy.get('.intro').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const height = parseInt(style.height.replace('px', ''), 10);
+      expect(height).to.be.at.least(500);
+    });
+    cy.get('#design-archives').should('not.be.visible')
+  })
+
+  it('Deve incrementar o cabeçalho da página', () => {
+    cy.get('h1').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const marginRight = parseInt(style.marginRight.replace('px', ''), 10);
+      const display = style.display;
+
+      expect(marginRight).to.be.at.least(16);
+      expect(display).to.contain('inline');
+    });
+  })
+
+  it('Deve incrementar os menus', () => {
+    cy.get('aside ul').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const listStyle = style['list-style'];
+      expect(listStyle).to.include('none');
+    });
+    cy.get('aside li').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const marginBottom = parseInt(style.marginBottom.replace('px', ''), 10);
+      const textAlign = style.textAlign;
+
+      expect(marginBottom).to.be.at.least(16);
+      expect(textAlign).to.be.equals('center');
+    });
+  })
+
+  it('Deve estilizar o rodapé da página', () => {
+    cy.get('footer').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const margin = parseInt(style.margin.replace('px', ''), 10);
+      expect(margin).to.be.greaterThan(20);
+    });
+    cy.get('footer a').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const borderWidth = parseInt(style.borderWidth.replace('px', ''), 10);
+      const borderStyle = style.borderStyle;
+      const padding = parseInt(style.padding.replace('px', ''), 10);
+
+      expect(borderWidth).to.be.at.least(1);
+      expect(borderStyle).to.be.equals('solid');
+      expect(padding).to.be.at.least(5);
+    });
+  })
+});

.github/actions/css/cypress/integration/t4.test.js

@@ -0,0 +1,52 @@
+describe('T4: Posicionamento', () => {
+    beforeEach(() => {
+      cy.visit('/index.html')
+    })
+
+    it('deve ter o .page-wrapper como referência de posicionamento', () => {
+        cy.get('.page-wrapper').should('have.css', 'position', 'relative')
+    })    
+
+    it('deve modificar o tamanho do painel .explanation', () => {  
+        cy.get('.explanation').then(($el) => {
+          // Check width
+          const windowWidth = Cypress.$(cy.state('window')).width();
+          const elementWidth = $el.width();
+          expect(elementWidth).to.be.at.most(windowWidth * 0.6, 1);
+
+          // Check right margin
+          const marginRight = parseInt($el.css('marginRight'), 10);
+          expect(marginRight).to.be.at.most(windowWidth * 0.35, 1);
+
+          // Check right border
+          const borderRight = $el.css('borderRight');
+          expect(borderRight).to.not.contain('0px');
+          expect(borderRight).to.contain('solid');
+
+          // Check right padding
+          const paddingRight = parseInt($el.css('paddingRight'), 10);
+          expect(paddingRight).to.be.greaterThan(0);
+        });
+    });
+
+    it('deve ter o menu de design na posição certa', () => {
+      cy.get('#design-archives').should(($el) => {
+        const windowWidth = Cypress.$(cy.state('window')).width();
+
+        const style = window.getComputedStyle($el[0]);
+        const top = parseInt(style.top.replace('px', ''), 10);
+        const left = parseInt(style.left.replace('%', ''), 10);
+        const paddingRight = parseInt(style.paddingRight, 10);
+        const paddingLeft = parseInt(style.paddingLeft, 10);
+        const position = style.position;
+
+
+        expect(position).to.be.equals('absolute');
+        expect(top).to.be.at.least(400);
+        expect(left).to.be.at.least(50);
+        expect(paddingRight).to.be.greaterThan(0);
+        expect(paddingLeft).to.be.greaterThan(0);
+
+      });
+    });
+});

.github/actions/css/cypress/integration/t5.test.js

@@ -0,0 +1,29 @@
+describe('T5: Seletores Pseudo-Classe', () => {
+  beforeEach(() => {
+    cy.visit('/index.html')
+  })
+
+  it('deve customizar a aparência dos links', () => {
+    cy.get('a').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const color = style.color;
+      const fontWeight = parseInt(style.fontWeight);
+
+      // $el.trigger('mouseover');
+      // const hoveredColor = style.color;
+
+      expect(color).not.to.equal('rgb(0, 0, 238)');
+      expect(fontWeight).to.be.greaterThan(400);
+      // expect(color).not.to.equal(hoveredColor);
+    });
+  });
+
+  // it('deve customizar a primeira letra do primeiro parágrafo da seção principal', () => {
+  //   cy.get('.main p').first().should('have.css', 'font-size', '48px').and('have.css', 'font-family', 'Arial, sans-serif').and('have.css', 'float', 'left');
+  // });
+
+  it('deve conter um separador entre os itens presentes no menu de design', () => {
+    cy.get('.design-selection li').should('have.css', 'border-top-style', 'solid');
+    cy.get('.design-selection li').last().should('have.css', 'border-bottom-style', 'solid');
+  });
+});

.github/actions/css/cypress/integration/t6.test.js

@@ -0,0 +1,48 @@
+describe('T6: Flexbox', () => {
+  beforeEach(() => {
+    cy.visit('/index.html')
+  })
+
+
+  it('deve aplicar flexbox nos links do footer', () => {
+    cy.get('.main footer').should('have.css', 'display', 'flex')
+      .and('have.css', 'justify-content')
+      .and('contain', 'space')
+  });
+
+  it('deve aplicar flexbox na seção de benefícios', () => {
+    cy.get('.benefits').should('have.css', 'display', 'flex');
+    cy.get('.benefits > *').last().should('match', 'p');
+    cy.get('.benefits h3').should('have.css', 'align-self', 'center')
+      .and('have.css', 'flex').and('contain', '30%');
+    cy.get('.benefits p').should('have.css', 'flex').and('contain', '70%');
+  });
+
+  it('deve aplicar flexbox na seção de participação', () => {
+    cy.get('.participation').should('have.css', 'display', 'flex');
+    cy.get('.participation').should('have.css', 'flex-wrap', 'wrap');
+    cy.get('.participation > *').should('have.css', 'flex').and('contain', '50%');
+    cy.get('.participation > h3').should('have.css', 'align-self', 'center');
+  });
+
+  it('deve incluir linha entre as seções de benefícios e participação', () => {
+    cy.get('.benefits').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const borderBottomStyle = style.borderBottomStyle;
+      // const borderBottomWidth = parseInt(style.borderBottomWidth.replace('px', ''), 10);
+
+      expect(borderBottomStyle).to.be.equals('solid');
+      // expect(borderBottomWidth).to.not.equal(0);
+    });
+
+    cy.get('.participation').should(($el) => {
+      const style = window.getComputedStyle($el[0]);
+      const borderTopStyle = style.borderTopStyle;
+      // const borderTopWidth = parseInt(style.borderTopWidth.replace('px', ''), 10);
+
+      expect(borderTopStyle).to.be.equals('solid');
+      // expect(borderTopWidth).to.not.equal(0);
+    });
+  });
+
+});